{"_id":"@material/switch","_rev":"1781-6e592e863fafcad579da1aeecabbfeb1","name":"@material/switch","description":"The Material Components for the web switch component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/switch","version":"0.1.0","license":"Apache-2.0","_id":"@material/switch@0.1.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08ce6642cc8057699adb956d3e21c15ad4578c6f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.0.tgz","integrity":"sha512-PzBJVRykwu+BbrLyeZ8aAAAOpRCnpqJNkwJmTUnp/mrr2v7JZqjFko7FsTKT6IfKXI3vbOfvcOqb0xvP++xUNw==","signatures":[{"sig":"MEYCIQD/f0ASFiI+Oaa0+y1cDgJ6LmHkPSl9ry4ptj21IWdNfQIhAMTV1sNDtgRRMvYT1s8WmcIW2j3KW2ZdvHQa/cy1BBlV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"08ce6642cc8057699adb956d3e21c15ad4578c6f","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.1.1","@material/animation":"^0.1.3","@material/elevation":"^0.1.2"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.0.tgz_1486407890290_0.6683905245736241","host":"packages-12-west.internal.npmjs.com"}},"0.1.1":{"name":"@material/switch","version":"0.1.1","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.1","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eaa9034e29815af60d2e94632b7e26d8b10e133","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.1.tgz","integrity":"sha512-Vy5tTmRUTuNVHNSup4fdB5wYW2WCxF8OV+NKPx7TNHKrI7qWkd0QKvJ+NATq8j76/KbjdJAFPH6mNuoDZBeReA==","signatures":[{"sig":"MEQCICc5tJKvUU4E8VkVzvUM4MNgIb5MP297jQd3CIVAPLzxAiAQtFWVivEwqtCUEohsRm/zY39tEANLtuZj7QdDK04tBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"9eaa9034e29815af60d2e94632b7e26d8b10e133","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.2","@material/animation":"^0.1.4","@material/elevation":"^0.1.3"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.1.tgz_1487698061194_0.8941258289851248","host":"packages-12-west.internal.npmjs.com"}},"0.1.2":{"name":"@material/switch","version":"0.1.2","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.2","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4223895764b64f81c90df52547388e7a13ff9822","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.2.tgz","integrity":"sha512-cD7iAMjGv3uHXnzV0AtV0dIY6+l+Bq4PLNmJmlNrJLEZY/eNaiThTNKH620qmv5XGuJyUVbbpAbHXVCaeOX4eg==","signatures":[{"sig":"MEUCIQCL6IDNVT+iK1XTOcinhd7TqwrmgIQvBzmPqXnDyEd4iwIgUCTDG0Sey+GiOZblM+kMdqtxsI5deQkXqXV5VdxD/OI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"4223895764b64f81c90df52547388e7a13ff9822","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/theme":"^0.1.2","@material/animation":"^0.1.4","@material/elevation":"^0.1.3"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.2.tgz_1488819739132_0.27057692664675415","host":"packages-12-west.internal.npmjs.com"}},"0.1.3":{"name":"@material/switch","version":"0.1.3","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.3","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5317ed01f7c3e0871f7cb7a445e621e43bccc6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.3.tgz","integrity":"sha512-k+zc/yJx9/WvuQGbRVGI7XNHmPXsetoaVur19D5MmuPtoP+v/U4yUeqCzA3euto96sB8k370kGslsDLoF/4mcA==","signatures":[{"sig":"MEUCIQD+gRkRvzOJdw4NJZQxoG8jxaRHDJzIGrfFnXfvjVpw9gIgRLnOQwmzK2pma5ZvfiLB7H0NjLz9lNxUY1DR2duTHDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"5d5317ed01f7c3e0871f7cb7a445e621e43bccc6","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/theme":"^0.1.3","@material/animation":"^0.1.4","@material/elevation":"^0.1.3"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.3.tgz_1491233290208_0.2309682520572096","host":"packages-18-east.internal.npmjs.com"}},"0.1.4":{"name":"@material/switch","version":"0.1.4","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.4","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea394aabf28ea019a7db6316617c73ef60eaf7f6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.4.tgz","integrity":"sha512-ydepAKqYTTtEUuOxlh0+ym1KqGph1PReigPYlpp/CXO35fIAttfHOV4bvmG9jrIhOOcsRt/qZ3ts7VN1+qE8yg==","signatures":[{"sig":"MEUCIQD1WEq7C1D+rEaz8yIr4zC6ElemEypTOJcRWhxEIjTBrAIgLHWpdtS4q+sWWGSv38X6G7mSBav6tPTlWkFlU2LQFsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"ea394aabf28ea019a7db6316617c73ef60eaf7f6","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/theme":"^0.1.4","@material/animation":"^0.1.5","@material/elevation":"^0.1.4"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.4.tgz_1492527088452_0.574826505035162","host":"packages-12-west.internal.npmjs.com"}},"0.1.5":{"name":"@material/switch","version":"0.1.5","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.5","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f943cb4dc512c3b281c3c0c8e248f53b42fdeb9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.5.tgz","integrity":"sha512-DcbIin4LdQX88esxvU0RhU/txtMgP0MbPbDfZTSUphh5qCURn7YiF0q2TLunoj9LnJXJZpxzJJnR44jK+WCG0w==","signatures":[{"sig":"MEUCIEUuJHrUPWOwBUaxzIr4B4bF9Iv0AS+aDDj2rZ8Rt8MdAiEAwaHJJ7It6ql3HBVHHqf0/gpwpMcNNjaJyKzMXD0fs6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"7f943cb4dc512c3b281c3c0c8e248f53b42fdeb9","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.1.4","@material/animation":"^0.2.0","@material/elevation":"^0.1.5"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.5.tgz_1493653396032_0.3035582429729402","host":"packages-12-west.internal.npmjs.com"}},"0.1.6":{"name":"@material/switch","version":"0.1.6","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.6","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"638a5415e0d962d403d86d36949ba5654a4b3711","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.6.tgz","integrity":"sha512-ddUDAdA3SZb/gYKnAL+KOshUlvgHYAkAMZduxnGSI1o7XkTcX1ojY5N9D4JRnXu2CC1uEgzQPk2byNBbYn3yfw==","signatures":[{"sig":"MEYCIQDz1jDGCJniaRyTuveTOVXarfzJ0g7dO/+XZUciCWJ22wIhAIuPBZ/lcxnscZ504PPz4nH7ISezwz+3BJCdaUchF/yS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"638a5415e0d962d403d86d36949ba5654a4b3711","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.5","@material/animation":"^0.2.1","@material/elevation":"^0.1.6"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.6.tgz_1494865572881_0.2967166800517589","host":"packages-18-east.internal.npmjs.com"}},"0.1.7":{"name":"@material/switch","version":"0.1.7","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.7","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c745700abbba1afa29d9bac70781e41c5c1d2ea","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.7.tgz","integrity":"sha512-nuHukqYg2i6iKOzGXTBAd08kWFxJAc0H/p2wsW+GQZF+bHX0WdDeykDwbd8rT8DYALuJJ5dlDj75n644NoD6uA==","signatures":[{"sig":"MEYCIQC+f/UnuOdzZDxIMT96XQYGNSll+ApcFMe3w2L/N7PspQIhANQTBgvQ8C5s8bhyWPWGjwa4aiy9W7bU/xpzWygITBUF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"1c745700abbba1afa29d9bac70781e41c5c1d2ea","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/theme":"^0.1.5","@material/animation":"^0.2.2","@material/elevation":"^0.1.7"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.7.tgz_1495031309042_0.28670936170965433","host":"packages-18-east.internal.npmjs.com"}},"0.1.8":{"name":"@material/switch","version":"0.1.8","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.8","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e36c01a6a59959f2ac43e361bc1bf65a2efb445c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.8.tgz","integrity":"sha512-AkgPQmR+XGPoEj61u3IBJhs0xciMMDlxlRafLQOooGARjwLvgspSwkp0y/o/xNYdHZIrI6uWwZMzJsa+Jvb05Q==","signatures":[{"sig":"MEYCIQDL1PDwlhiE0CNr3ZvKBz/Pg0BoUdpS9f6PwkIHdW8NdgIhANlrf3/Kknj88YmVPncYfRlU56Vg3T34pH8SykKek3ST","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"e36c01a6a59959f2ac43e361bc1bf65a2efb445c","scripts":{},"_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.8"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.8.tgz_1496171088898_0.3904731108341366","host":"s3://npm-registry-packages"}},"0.1.9":{"name":"@material/switch","version":"0.1.9","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.9","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ddaaa6675c9e399b5b4dd4c0901a0838c90e5c6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.9.tgz","integrity":"sha512-Sg7MeQUO6RCFAXK4h1P1RQ28GjSTIyrg8teXjgSSFdONbrFALIyLtwGI8RQo5+e3NATLlUWLUyv2jP6w6B8UGg==","signatures":[{"sig":"MEYCIQCi4j6s2X/iO65+n30ZbRoZB3Ujd/NjXWFtA5mwah2hFAIhANMBYd+qmBmWVikDe1lmLTCkGRL/huQ9RayCZddjDL9d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"1ddaaa6675c9e399b5b4dd4c0901a0838c90e5c6","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.9"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.9.tgz_1498493465075_0.3383186508435756","host":"s3://npm-registry-packages"}},"0.1.10":{"name":"@material/switch","version":"0.1.10","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.10","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d61520bf1c839c7a554433e57420ca5b2d5b03a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.10.tgz","integrity":"sha512-jdqXMV0Ji8wTecf6UUrdeAIL12UF2PhF/XccIAQjtdaBnI2me+FYtJjZxBHe/DV55TTDZa+CWK//XwFQPh5mjg==","signatures":[{"sig":"MEUCIQDLbe23pS25BjIRxdVxI+FsjBT0iwgiGfwSCYtTW8FzYAIgVTK9hgNfhr/0ATqHp/KRYcENxj1dRjHnXKCO3fcpnSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"1d61520bf1c839c7a554433e57420ca5b2d5b03a","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/theme":"^0.1.6","@material/animation":"^0.3.0","@material/elevation":"^0.1.10"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.10.tgz_1500911370820_0.5411141386721283","host":"s3://npm-registry-packages"}},"0.1.11":{"name":"@material/switch","version":"0.1.11","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.11","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"847316ba4bff6cb43b0cde1fa06a38bed8a98733","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.11.tgz","integrity":"sha512-u/r7y1WwZB9ny9ghuuuTf92WQ76zS8+Um+QAsz9X6Jpu3EyHfQiQKi2D4sGF+ssOxikhypYtIdraqn94Fsu7Rw==","signatures":[{"sig":"MEUCIQCx91+6t7KtwxzfcCBXN9wdKC2J2gMZxBIwEVpzFadSwgIgVMUCds5vFIoNdLrVbBoRfT668EcXYx4rxPCTzoXq+00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"847316ba4bff6cb43b0cde1fa06a38bed8a98733","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/theme":"^0.1.7","@material/animation":"^0.3.1","@material/elevation":"^0.1.11"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.11.tgz_1502138914459_0.25534092052839696","host":"s3://npm-registry-packages"}},"0.1.12":{"name":"@material/switch","version":"0.1.12","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.12","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec41cf737567f503b63c620f6124646a202a548f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.12.tgz","integrity":"sha512-rRE6/bHSNddM15Ei2HnBRO+3wSkmthjVs9Lqrt1wCRBi9JGf6RzGU1j5vqKXWhbMTm6GlVeTuZS/BB4s4nobOw==","signatures":[{"sig":"MEQCIA3e2qApVsMQwYAFL2Iqu5qy1pkDf5R9cP3xQpfJNuxcAiBm9tgd+lsli1Ez5kZRYIYotWOgjViW4MsdI1yw2fPjng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.2.0","@material/animation":"^0.3.1","@material/elevation":"^0.1.11"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.12.tgz_1503336484632_0.13828302128240466","host":"s3://npm-registry-packages"}},"0.1.13":{"name":"@material/switch","version":"0.1.13","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.13","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6b5b3055417f4db07f843229749d6cff97a2954","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.13.tgz","integrity":"sha512-ofSbmTmHerqvZia9nRCv2DRmX5f+QRJecdLnyC5Hj8NMkoIEHk6F0cAJoZSkyTCh3F3SYePSUjv//1XpsGMhJA==","signatures":[{"sig":"MEUCIHm+Jnahbs7dHS0ALfvoTK9/HNASNT5Yieto17m8YiQ9AiEAsHgWi8BrlkVaoKOuc9s4tA1Z1JiBOQK9FWp3a2xPCdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"f6b5b3055417f4db07f843229749d6cff97a2954","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/theme":"^0.3.0","@material/animation":"^0.3.1","@material/elevation":"^0.1.11"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.13.tgz_1504642579287_0.25393959297798574","host":"s3://npm-registry-packages"}},"0.1.14":{"name":"@material/switch","version":"0.1.14","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.14","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"624c6627422419e7a2fa3d1efd35ac62bb2e7a0a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.14.tgz","integrity":"sha512-7DTpogWmE+PHFttD2e1mcWqaZvrEr0Eh3hZoDpHTxdNWnOObCHxnuI2KRHoc/HJ2KzzDZDNPoJyIwu8khg0LdA==","signatures":[{"sig":"MEUCIE/4EV1DUONyIQsnBK2rK2ABxvgoYLn01BJ37b0WV6aaAiEA/LeSGoFAlXeaUF8sgQwHzLr+prTNY2LzCvSJHv7PnTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.3.1","@material/animation":"^0.4.0","@material/elevation":"^0.1.12"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.14.tgz_1505759756703_0.601577274966985","host":"s3://npm-registry-packages"}},"0.1.15":{"name":"@material/switch","version":"0.1.15","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.1.15","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f2b1f1ef7c3dc96e32a68a3101498b562914619","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.1.15.tgz","integrity":"sha512-0qXkoJtlT9SPEsjcowWccsOVdlsecE0yDM3DL/dEjY2kGjJIPfpB5maTkZFexNjfGOe1xUpWlCBoO4O3szrcxg==","signatures":[{"sig":"MEYCIQC3EFQfUyGOwKZEmrRnQ03yPl4MZl/mPyX7ftf6seIleAIhAOB4aIyrHbi1djjieRbs5NHODgKRPc0p+MsU8PzJ8xta","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"6f2b1f1ef7c3dc96e32a68a3101498b562914619","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/theme":"^0.4.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.1.15.tgz_1506978716386_0.4850312664639205","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/switch","version":"0.24.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.24.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a47e188eeae35e2a8802692082c180df53600b8c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.24.0.tgz","integrity":"sha512-8TFJylmfSVHiYfR4dKjqPU9o1TmORH69bQjt156kCyA17dPIUh3fibjFeFHcaVoVFk2hUyCISxsxAVtVhP5fmw==","signatures":[{"sig":"MEUCIQDbViswdV4EQiyryqa7Yf6ELlBBwhq2djFtcAnV7FbqMAIge34K/hCkwJNhuLOIiIf7qwPVJ6i195UBZDknHhIpFdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/theme":"^0.24.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.24.0.tgz_1509390695137_0.4491909481585026","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/switch","version":"0.25.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.25.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c67390fb67f98b467da4de39fa6256fab83172f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.25.0.tgz","integrity":"sha512-FvjWlv+dtZG5bkJ+H+BREw4y0L/C2kT4qJGX1+Uaw9fl+Yz8j9SL8V27q2d7i/xtZIADHsFUxbBsPiqzvOM4ig==","signatures":[{"sig":"MEUCIGHVOSWdn8IaZ3jWIBIJp2rsRzzC4DWNUJfPwicJNKKdAiEArRyx+TzX/OgqPntViBEQaR6dlZJoKXwTwRNhD+qka1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/theme":"^0.25.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.25.0.tgz_1510603357424_0.8301482363604009","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/switch","version":"0.27.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.27.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9390b706d2522f033e1541e3c4e78da91bd878b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.27.0.tgz","integrity":"sha512-3lpnimQtARUwT2jB3Zp1h1lViA4pKqktFYThQe8s+6BJRyW7BGWMLH3c+pJ7TuRXYmJ+xPGM7yuPG2N8Vo8G5A==","signatures":[{"sig":"MEUCIGSyk4j3Idjc2yfWCduEofepzwtEvcV35fTZY6Cz/uYVAiEAvkLozOIaNoJJAiGZwQsQ5YX6M7ABK6J29czeawOcW5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/theme":"^0.27.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.27.0.tgz_1513020940958_0.26144116115756333","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/switch","version":"0.28.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.28.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b2f7f9329e416e1607c16dccc27293aecdc1c6a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.28.0.tgz","integrity":"sha512-EzIDok7Zav8h/c+9ZKd+JLRXhDdRfyhl/zKRrYj1X51titqhj/Ti1dHvLUVbKTJBPuhLXG5UQLMHoo1G3PLotA==","signatures":[{"sig":"MEUCIQCsaIqi4pNmzcfMkt5jYTG1sK0dTrzW2X07yBDVtsH75AIgZg9uvHhCeSzUZN7fEya9nRTGrX7GbB7cPPVw2oRiBA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.28.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.28.0.tgz_1515437718196_0.2535608340986073","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/switch","version":"0.29.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.29.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5041a566c79ab8b42bed3ee3543435cecb03bdaf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.29.0.tgz","integrity":"sha512-AlhaDK/bEVo/L9RwMZ9m7b9bTTinMJkB7a7jF6ZhKYndg+VHAesTDURH9wmkcOYS9oPAJ8dGRwEdzRGj34i2Xw==","signatures":[{"sig":"MEYCIQDLSOplfj1ZPhkMoJl5vxkSZhzgqijtlKV9ezS2mKihTwIhAJ1uMQ/UKiuhqWgaV4dGSzKzOb8Sg+GVrS2FigHRc1fZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.29.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.29.0.tgz_1516645863032_0.13594931061379611","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/switch","version":"0.30.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.30.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b2f30e5777c4a393f1a351c1062ef25674602d9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.30.0.tgz","integrity":"sha512-oRVIUqxtyCS+BVGImBwL4b9pxt/5pBYxM9JWuLmmbi1XDslh7GQjKCw+m3jyYMg6hqryqP2ATsK8csuUdp88tQ==","signatures":[{"sig":"MEYCIQDcBdNtNHC2bgxsxGV5iHEONNPtdQmk4LvuBkthPLo4JgIhAIbBVUxeY0awpBqjybxOCt8ovWzLJb7i0KpkeQfqc2BJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/theme":"^0.30.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/switch-0.30.0.tgz_1517868184889_0.0921860346570611","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/switch","version":"0.31.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.31.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"311b47a2c03a00164263ac33938af797934f3ce1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.31.0.tgz","fileCount":8,"integrity":"sha512-1FDN8OHMOEy5IUGyH+JKeabRiLWtz+AmfXJknsDZEkLLQvMWekL9aNIKiHmYOFfoVN91G5xB9H8o5sfYetVnHQ==","signatures":[{"sig":"MEQCIEQKzMH8qI/+0P028fjD2nHAQ3UFwQZIawPDuGYFOkiSAiBDQ9J0Q2FxPjmrRBadA71J0RbZrOdOSmce5c9g7+gHcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20292},"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"9.0.0","dependencies":{"@material/theme":"^0.30.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.31.0_1519150985117_0.9130438085543953","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/switch","version":"0.32.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.32.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5d5dec11584ae01e7aa5c467aded0ac2c541a97","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.32.0.tgz","fileCount":8,"integrity":"sha512-nn5HN8AdSb4aSOJEEG9wGvPg+wPhg2rMD3j8WTX1HZ7c0HklgM07SuNKI+Yz5VFgfA28m3qFJAdHIv7OdzSuaQ==","signatures":[{"sig":"MEUCIQD4FlSIX0RN6gAB2qr/XiX+75+uUnTvkzCk1vwDlArX7QIgYTryTV0R9aHEZZkPLPvOmyU50Hb5TZ/yW8dUqEalE20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19691},"_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.30.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.32.0_1520287730313_0.5771246216641475","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/switch","version":"0.33.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d094c2bc9137bc5a5ab53a8cc0445e105dc897bc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.33.0.tgz","fileCount":8,"integrity":"sha512-SselhPNBY3LAGVqhLs2znX+/h4HYMTkuadf1qvsMZZahQxLlkFSgKzA0KR37NCcJzuS2bPQlEc8sY0nf2IoKfA==","signatures":[{"sig":"MEYCIQDJjQPFZiZVAS6pXIXjsfhFRRZ5SfbQ/nsPG1t1fcsuCAIhAPaXdvQeU8nHO+H7VU8PwTOwp8CXUJ93VAZkYNITVTJV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19691},"_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/theme":"^0.33.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.33.0_1521477610407_0.10482216817222612","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/switch","version":"0.34.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56ebe51f9f0e06069992e5f835730d84295650d0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.34.0.tgz","fileCount":8,"integrity":"sha512-pdMxsiGIlq0uN5BOUY/ntFwi/ti5NyCCp7qh5yR4zMEWKPAuKXqjI7AW4uqq6J8QZHqWSimOrvdeoQVSOjui0g==","signatures":[{"sig":"MEYCIQD/tuMsTNqcFlN20CSVB4nbUXQ2tD9qOCuhsRk3CnXujgIhANcPHIUp7ZGBLyR0a3zkYy2rB1lge3SWn8dFcHUrwq5q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19684},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/theme":"^0.34.0","@material/animation":"^0.34.0","@material/elevation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.34.0_1522705928469_0.8943063915925487","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/switch","version":"0.35.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2bbd095c962c18c6143edeb1655914f9acfbf4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.35.0.tgz","fileCount":8,"integrity":"sha512-TQvkljSyAW1Mz0JCUlMosMv3ArSSXEufVhv0WW6/B2e1XyTtlD4SIeD1wZXxqC0UlryfEmNueuoR45h5+VeXcg==","signatures":[{"sig":"MEUCIQCrYoJEtxtrqjuL9h5CrHmfRmLXbooRmEsJy763lH2geAIgWd+VU8jg9XvdnGaWA7QM+46gXHnT9Vw47tk2+hGo2Io=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDzCRA9TVsSAnZWagAArp4P/0hGxwxkYKrWa26s1JbD\n1CICgTG+LdK9XyT0Alj7uxo9jE1yZDEFDqqB8U8pqtN6kW7bFYuaepS9WjbM\nqyBs78NnR0aH+qMn2dZuVfH9afTtbGegjHyfwEsfTMwF7+1Y6L+OT3AAFQ8M\nXS0RNy4P54B1Iuq357cXJ6JFLdAAJIq5qhARP2rfmJUc32lVzaiCdE++FQ2E\nBtQKMDpZgLu/roFUdYzPvpGutsnU5Ip44+ezZZ0SfW5Y4B8pA/Zbv7TRCEYq\n6XTnwgjXmxh2Za9uv7kCMiIJXXjdy6n6hB5LPn6hhVu8k41Zp0rfXAm0wy/Z\nA/DmL8ne/4izZeOOiSi1NKqIJnoozuPNArc4dGMAScTrdhmv5L2v2ZuPrTZV\nDpJhsE1x4H1ix6ce8kQBDMyPvlv3niyLrcPeWlr/odXpWbCsDXImuzzQAgAG\nOxxOv3wRGeVpLKyc5lMBYoD5ByBMF7jqkxquRObcNiMx9/1X1TgWzYttTEFj\nOrgQ4YyvkxDQGzgG06hdAGn9ruL9CJXqS3Ns2LCQH1YEPz1CDGm+RTVpS5UG\nhjMa742vpL9UGbJFpW9MVMWasNOzdQMkh6KUoY7B9iuLfrYQboQKUVkoF02n\nVe9hZ3ZUdLVrQpFkZPdkFXlQtTfRhbyiTf8LHxkVNtndduvkcXTMUhta/p6T\nEK69\r\n=WJH6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"\n\n# Switches\n\n\n\nThe MDC Switch component is a spec-aligned switch component adhering to the\n[Material Design Switch requirements](https://material.io/guidelines/components/selection-controls.html#selection-controls-switch).\nIt works without JavaScript.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n
\n \n
\n
\n
\n
\n\n```\n\n#### Disabled Switch\n\nUsers can add `disabled` directly to the input element or set the fieldset containing the switch to `disabled` to disable a switch. Disabled switches cannot be interacted with and have no visual interaction effect.\n\n```html\n
\n \n
\n
\n
\n
\n\n```\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element\n`mdc-switch__native-control` | Mandatory, for the input checkbox\n`mdc-switch__background` | Mandatory, for the background element\n`mdc-switch__knob` | Mandatory, for the knob element\n\n### Sass Mixins\n\nThe following mixins apply only to _enabled_ switches in the _on_ (checked) state.\nIt is not currently possible to customize the color of a _disabled_ or _off_ (unchecked) switch.\n\nMixin | Description\n--- | ---\n`mdc-switch-track-color($color)` | Sets the track color\n`mdc-switch-knob-color($color)` | Sets the knob color\n`mdc-switch-focus-indicator-color($color)` | Sets the focus indicator color\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_0.35.0_1524523250147_0.7765806697957345","host":"s3://npm-registry-packages"}},"0.35.2":{"name":"@material/switch","version":"0.35.2","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.35.2","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afdcfa2aef385112dfb0cdca6e35d40791305e27","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.35.2.tgz","fileCount":8,"integrity":"sha512-0aGHxceha5JAX+KIq57Ud1lAa5D0wbldKjET+W4TJxPRi3PmNS9Obgxigmezm4JtqeeLeiNJLCA1xpGP8iyG7w==","signatures":[{"sig":"MEQCIHaDcYbsjhIFWznhUVZkwKMpV2CpimOoCKRVmz95osH0AiBw5E8JtnO042Jsc53qzstgXP2O/pjSIngwsE9KFkcNPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbA0ARCRA9TVsSAnZWagAAcOYP/jIdr8F0hVqT3qllINkR\nxESGBI93IjHoRV3Z8s1M64PYoobulSshORCcRZfUfG8zBVf3stTH4om+hkHS\nEClGWUYqqc3/nNnF9WvOdOX3HkbJZN7CaSYqhhKF6ydhbx34Blzqq63C56cA\n7UgJxBG3OL/vkTzyxRkxfDQNQeo7GwjO8YJB4h+/w/bQ+ts0gUM2fj4OzEOx\nJq9N75X869Kae8nvfd201Z1POlijF6q7JUJt+ZFbudzrCuFiYCCABBXmmXm+\ns4l/laAcEj6JqxQUUzY71fbAhtFRkqoTfyZfskf+Z354sm5eRqEecbhGcSUQ\n9MuRZI5eMmYi3QpGBQG3i79tk+ac0iuRPQqB8r298r2G7eQ2B0HvBwL8Lc7X\nZSjE7Cu+2jc4z6KSSprNb4N31UiYxhf+jV9GisVpI9QdmfbAS3b8nV/kzWqh\ni237yY3HC6mvdxvnLaCMCzbayHJptKldp86KcmY31nEbA6nPOnP76kYwjXyU\n1nSvnlcXFmmqB04rN/fqZdJUYXIrWXoHTvx8KDTL2KC2BC3jUsXnWIbh9sGt\nLtvX0LUv/WBKZ7KOibzFAh3PWBbdFNZNDG5GSYqBWd4KEccPPpysoxl5a9PG\nm9w2ktXmMQ1kl/gKOwI6iYUDtWIG3Ij8Osq5sN+iL00T1cJuu+IxW/aaKsaN\n3NTN\r\n=86pW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.35.2_1526939664414_0.9916799760463069","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/switch","version":"0.36.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.36.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5011aa6155d618a53f8f62816d1bd53d42142c35","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.36.0.tgz","fileCount":8,"integrity":"sha512-u6w1HWY2SsblvA54Fevk0FSYXEGmQayeAPnksS/ptQ83Z8IquHUnbk0JPud4hjwDia0z9yIRVTn3DGkYz3j8Xg==","signatures":[{"sig":"MEUCIQDx/3ZsYlMAFsQpGJK5muEKS51WlYHDRdAsGerlGnjB8AIgRCAIfZzRtCHwHtKMe158zv9y7ODsJyDfRCCd4vLuTME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzpCRA9TVsSAnZWagAAjvEP/RjeXs1atR224Tpd2hX4\ny8O9HxQsEgWPcN7GyZxPbsJ/rMZb9oMT/cLqAbVr0mq97o8cEriNXcUCIuX7\nLrqEcsNQruzUT/MuBDJygqyIEqw+TIce26DBOdxnNmHPsmj/vNqEwyu2Md3z\nsJyosKusQJMxPFyuMmZf3tp5Gd9xNEUyYTSz2EPtOf9bqZ8DdNkyJhICP9bA\n+oOROCPfw8fnjA8QnlywvYg7JZ8P8/JSqrM6Enohh9mM3uZNIPhc2PwKukz8\nO+0Bjz6rwefPe+6FLnoTUF2EyYQaEYKITE6zGb1SiEQ78I2onnOjdyFpVTDq\nqF1ADlw/duLL8uNv8tztFqx25F//4WvSy8gV4+bfT81JcJRIqDMnWv1eQ/Jc\ncz1R8THFgMz/pG2DCwqZxvAFnBdCxXOTdaaQC3N5rCqUtBBqEPSgJv9t2fk1\nt+Hhj7bzrV+J/WoeJKZphF8KUUyr0ohcgszRXVXKR5tLUQ+wSFXWrYlcrgln\n/rhrXLbsXVXqseLG/nH8PJL/IaE2b2ry9m/OSdfXioB+DtxZtFmdpx+lSs3+\n7ENM1GdviJLiNDx5UcnYOsW6hePXd28z/pR7uEcwlbt5SEA2qIl338K5plcP\ngEUJud0ckvVpK+COHuebXMLNiGTslolpsB3YxsXuLhZLtGBTH3IF3m64zLXC\nEgX+\r\n=zzBs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.36.0_1528126696784_0.09647338523255944","host":"s3://npm-registry-packages"}},"0.36.1":{"name":"@material/switch","version":"0.36.1","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.36.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3d062be2d1ee51b7d6094597cf86e7acb0c775e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.36.1.tgz","fileCount":8,"integrity":"sha512-CmpzhrahaHxZzhmRTEEuSjsNeALmlc9x1Roy18G7DtYKfPiBX0lXU8gQNKTPYX1rCeL4O4wp/HexFuFJlCRMGA==","signatures":[{"sig":"MEUCIEnwzoYDMAlb5zuZNQlFHQgsGAZ7Zt3QFWMwR/4vAwu6AiEApW1W+VwkWfz6GTI5UAY+zBQhrxh2e6hBo63OataPfoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ9J1CRA9TVsSAnZWagAAHtcP/2qIZwuN7a0AzevRcO+E\n6CxBrYK6/GP0dP9yYUriuHunUTHQVTTeXNOzItERtxnxhaxrUhDZljKjpcC4\nsyx0ouJSrFQZGrqbhh8z9jVXFEZYY+e50//fzwxELbr3+Gf1PJqVFoFxi583\nT4sYXRXT1PxHoK83PZaBNZnpui/7CcTGzpj6PrgHlUUUux5bpTdbgDhZWVby\nUTL+Zr5jmeZ78yapZN047aRJa7CKMLEb/vP8I3pVkNma3trL3etKQG60VyRL\nQbbDfgoahQ34kLqVn3w6+peleDhrKmiaCbxQSg1tfEX7/7XoSQWGklT7F6fR\nr80XTN04tkUw6kw0l2rkFy22wEZrfFiIyqJMoLTSUezlGKjCfHHeP9B84+aG\ny6wn/BRJxhxvrP+x/omRQZufCb22ESgKZuJTkSiEfWOuf8qRNv7G+08lhDaq\nhEindJM3ddDGiUi+PsrB9k54KYZs3nLeBRCYNv5T+EYTNxLadMZN/MWwPWRF\nZtzjGMcpWKP9eV5mrzZ5wlNVre9xZQkVUxRtOmmVxJxRl4GqLhyxPpwXK5+2\nl0DrngAV3hDhlErmxcdv1OQBb9RBED0OC7FDYG+gXQQF2A+8ceidvpY4QWTE\n2Rd21FPQTd0lEBEijdVU0prB34n8XfpdO8Dr9cqkK15MAD7Peozbh/5q+RsU\nv3VN\r\n=w/p6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.36.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.36.1_1529336436680_0.4996549499116594","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/switch","version":"0.38.0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e1b21d4ffd40420b1db4e1da351014151ce2059","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.38.0.tgz","fileCount":14,"integrity":"sha512-2hbzvwTizfNV1HqlQtW0uvWHTRDftoG/CEO53/UlBWHDTyldhjtOvck75NZirhfBpz7mQKZjdwjSDNfAo1NA1A==","signatures":[{"sig":"MEQCIEsDyMuJesf3rmQOQG+254eSYjqcRseRq2Woptbzq9KCAiBMTuGuMiGSkIkfob8eEskfamLAYgy2mGmXbAvsQqbmdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0XhCRA9TVsSAnZWagAAc3gP/RyChZ+GHTNVS2y4O04C\nk7BNf4aNFqkbY+kMRW4zlaQiyGsoNmYKZkM04F7BKWIvFruJmhqKChG195EY\nPvawxRk0wIkLy8NqPa2kfZcVP0uKP91PBqYBnl4XxlTjrmvu0zncvp7VUcjY\nDHC1iIwV1ROONk6le3I2N5oDtm3DIj6huly30W3/jMGegiPnjuSraSpqMyeJ\n0aLTI3uB48tVP5uzSIzThTIZobP4leTRay50UM+mXaRh8AOqwG5MkzAHdvnA\njIfyVpwPvUB5pYE9VqnQcmMyRqpI87/WfLDe5L2kXZV3ww1EmpMX6yhS1kZd\nNuakr98mAlqSBo6oqXvbbu8NAhpZO470pRtCU9T1cjCNe6qkxHDrbEkSHEvd\nrPVhaKiV92evdZOZGlDD+U+YtpUtac45XYXtfxRvAcMNe+ohumWBNPdMoSwE\nwet/LnLy+fB4SXeKeCd2s/wMCBg/CmiD4JUM8HcZquIHYgqTRxtZ9ulZIVv2\nZtQeikyN4gJ1dO7lqvcDHBhgJ+zKU+LqsC/8AE3I3O985sDGj6kqxCdFXTix\najpDiQGMyyJKOg7LsXLvVL0XaA22I3WK3mdnsG5MsQ8Lus6QTLJiOKM2sI24\nDWRdSygSvhiQVBJYwrAO8Jf0XTIvS4teF7Qg/41X2papty5G58G/9zn6homI\nbl1h\r\n=jyQK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.0","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/selection-control":"^0.38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.38.0_1532970465577_0.45066452261163126","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/switch","version":"0.38.1","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.38.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50889216ae473b5d9b048a1ae7185346b02f8581","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.38.1.tgz","fileCount":14,"integrity":"sha512-8Azym74vsSv0EGXo4hKSagaPYqme0hw5cxzuXIVjmHojVAZhOLzUXTiSBXDwi3Lq8cyGvfqBebH7fEpZQ8II2A==","signatures":[{"sig":"MEUCIHmpyPMXG9euGB0t4Rgop/sV+UhGgl98XVX0+C3YCrJvAiEA0XZI12TiaqsoHaqvZZXot0+E/VTW1gU9Nd6/1zEFUTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbceyDCRA9TVsSAnZWagAA7KsP/Ajav1hwGq/tmFbeWP9F\nNhJLOjtYyi72fWpl/Gzh3I5bABhLEOHvF6VgB4BWFE2ZELElzCBKDe/5GGZv\nVsAjdiFwD+frz/S0vjrpvIN7lhPcp+1fZCMTBzdM+D7h1miqrN5KhRqfMtNx\n2xSxFczIw50AbPp3rmjrf6beKalbAyxHBu05NzWGs1aI+r2YbgVXF/CERFZX\nHZ02u3bjaVefXwD+PoKwEccShIpP1am4YALAXYZObEdenHyRXyqZp6fRnDg2\nQWsCTDwxZBvPtYS+kLFsobOaZw2fsXX7+LB63ubFS2kT7mhthAmFO2r/4Cqm\nMYvrXmVyapXdEPTJJQwEK0O7Ox/zxbzMvbQmutVNHpYOH2ubzn2RJjPUzVEf\nkzgPcphgV4y4345X5v01iNu8Oo/46gm9nNcYA5px9d/ODW5oFP8AJkyhO6mq\n3t5aNyuGmjHXbNA61src4owX2aUT5useusQxLUlNT6lcDFamPfmBpZJiIEin\n9QFbzJosbYm5g3MmuvIZ3Bf880JjcfgKwJTmKr2f5e0htGiMeLt7u8SMXhzV\na3eGM1kLdZEVWy5y0ezU1jCwSCA3di6onw+dk3Jk/jP7WDGALobDNpUGA25h\nLUnnRnZ54a/yei6GG/9SAtCyBZPL2yiWtqd3gnHRh0/qs2YirJ2O/bt/1Xsr\nc1uZ\r\n=wzcK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/selection-control":"^0.38.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.38.1_1534192770834_0.7960610038849822","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/switch","version":"0.39.0-0","keywords":["material components","material design","switch"],"license":"Apache-2.0","_id":"@material/switch@0.39.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0be04c8b8ebe7c0706cb215dc96412bc5611ac7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.39.0-0.tgz","fileCount":14,"integrity":"sha512-bbAa3K/i2ZUIscPxc2dBuHskEJhRz0hXhFNZMJsVBi4vR1jQF/2GObjb0WXiWJkUXYt/dM6BMkeerZvdm3CbLA==","signatures":[{"sig":"MEUCIHOU5FnNdByUBGmhLwf6SjHIABXiKHvkV4btzmR8AqOeAiEAucW8NA/P8qW9HqmqTxHaQ2lClF0Xq7RAYdXamd1uSRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUfCRA9TVsSAnZWagAAmbAP/jEhn96Gw9STn8ZVKtH4\nXz83hdTTcKVHNrZ+dliiljuxES0YMTIVQuC3vOOJBsn9kZ3deKusrteVBqkG\nE2HVToeeYc49rqF3Kfpf9zd2HywEjXOoMkeA5wPNGs+V0BmEV4Kzi5lQrNyn\nDwAntIuqwUZ7xHvbmutFYMLEBOa3xJ4pn7noXUHvhOTS7X8IJ6ZQV84HkMsa\nLhM9pyC/i/AWq4B/EyjNJEVSL5VSMXGI9cZrXblEGSpZYt71DjcZstd7U4JD\nz+S2pUwktu2+3ZFz8KJVu+16doiVdN2EnkZuXGHxQ5vSiD0KRkLzEOJuWSXN\n2Cj+MU1lp0+eZSdVfppxFQRrMuHlBIEZXPmZcisMk43LMxU2MkezI9Q6M1WH\nHZ2dpl9lHodVWayTRl+xfnzxx/5fmVt/t+SVvgNeUe9xkGnO140RrAGIUyby\nudVochmbwMojA40L2xtX+ZXTBozng+hd7DpmN0WZD7ABCkNMs1PWo/p5sd2q\nNmZFJAcJ+z2XA29qo4PwWfGWOULb7TIBG7uvvV+KhgSpFSuJfTBnHkWViVOI\n5dhO/uh6vO7zOl75mXcr3pXtgkEfT+MqmkbkFlqKnw64U57GWe0SknKkeMgC\nD7uY1KmOGRY4Ya8a9ANbOQBc9K8N2jpezvJoj4GtJoJRNHY2G1ugpLTLL5Gi\nPepy\r\n=Qb3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [MDCSwitch](index.js) component `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/ripple":"^0.38.1","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/selection-control":"^0.38.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_0.39.0-0_1534432543058_0.5214540461337476","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/switch","version":"0.39.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bbf3ff2776aac705117b37858472d440545ddee","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.39.0.tgz","fileCount":14,"integrity":"sha512-CV655JTw10wZpb63L4sKtY1HN6miCFO5gxdNxAS2YXbHTvJShJljvhXZZuJ0SxJRAhqgj6fC/wd3KePZ5F0U0A==","signatures":[{"sig":"MEUCIQCQnNgzsozamnxAIb3bHDQcE/mj+Xnsgby6/+QF1nxL9QIgSIACJ4mUi023u2krFDPQjan40WibM2jx0glxVjGrpk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDe5CRA9TVsSAnZWagAAC2AP/2RuJVqQU8qNulLEXJpT\nQuYszmBX7u9vVWdSDMCgEp4LwhPKJTsiIn+hSSnRo4P0pVEBZg5v9p+lSVx+\nHmcwv3r9RUWGL887JnV+zfPRXTiZo0q38AzsCvnxpTnBoTGjdbTvaw2t1WZ7\nD4KqBogz5Z0I6UXPVHaTJQy82R5Ic+QHSyMbUfklM/n4Q5NlnH3cXakOE68A\nX+Qo/7V8a8A0ZCjmVCWgt1U4J6inLuqL5kzzEeX/9RTCKb9UAZmbVvDo0fCC\n1IP3j/SUFJOikUFE34gj65KFpe+nkkoLUH8rszJd6zZIu0CikhnglHVdbJOy\nZO0eC3ns67LXmIAbJZ55GPjtZMoyHZt4dpu/N2w1m4TR3lr0PB6ge1EJNNSI\nhwMquyYID1QbZC1xJViEHryTF0UovpWsCpuEr5cytP1O034D8WDBknpsWSCN\nkdsckEE/GvL+JBLvjAkVgw0NzZthYZ9gtQsjw40yG75v5atsheqJiccFbVRe\ngnaTaISauZzPnKRNDkiPrtjwnVk4EkjmqfLVEGZKx+PVURtxpgAK8IwaWPM9\nFYfAtjfkZbCHSqyp8GCZSCcT9Ewiw/4l6hAsUeSaHjecMr7YjezymiIK6Wm0\nx4Yfb9sYWENgMPIyQ/YjQKUYyhGXomjpwS2usRWj9BcWIsxg1Rf2rRmej87q\nz1vp\r\n=xM8V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/ripple":"^0.39.0","@material/animation":"^0.39.0","@material/elevation":"^0.39.0","@material/selection-control":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.39.0_1535391673015_0.5448823509867176","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/switch","version":"0.39.1","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.39.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f15e634288ac166ef812b089d09992464249401b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.39.1.tgz","fileCount":14,"integrity":"sha512-MtYEkg9Yeu38UzzzWUQeQU8ry4/BRMXQgwqaJ5UH7k+Efe6rq+JoF5mtwpjZS3hv7uT6rY4O8GVVRrpSSY2K6A==","signatures":[{"sig":"MEUCIGHVXxnJoQh4nYLXhtRIsKB4heaDq7KUO6X5Tz0L/CQQAiEAg914kqlCl0oN9djTXthdAzw1t2zwn+2inzyzCUO9l1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibUACRA9TVsSAnZWagAA0OYP/3/16LrXS+Q1ZyHZ+OwE\npgVQTSAPOjwRubDyBW/nGAtca3ozJOFaLdo1agG5mDeCAsIrqrWIQ2t/zhyd\nf4dxta4SW0AD+TNu1+xB4bWeKn4hPygTNk6GiAkiQBOg2lP/49UiYmrXwoix\nf0acv7+bBxMgBvexwAFATPRzsawmSvZKKC70QharDR+Fd38cBmtX/2DwvkOq\nsQWypMdgqNtytL8qrKHA5X0UqD/5zzNQBwtWa9ZrtrEXBftF02VjwcqOvMfh\n17hxQrpbTKv9cSWtDcyFsUWAuXVxwZ2067G2HpPm2QJ5dgUJGETMCz3y9HRw\nTebwxd+eycDxhSIq67t1JJEkqSbIGK5+XKSwIMVw97Pmro2FOiMc7cIrD0Gx\nybAMt3SwCvJEZQu8TyWaAMvFeqhsbOnEn9Au5psLuKuY1u8SQ5dOnkWYF5Mr\nZIp7LUrtI6BWsrQurFWsPiTjThDBZoPX+s2Ex37Nthe9bhxz2hhm2bg0Jo30\n+mVKaVEpl0/BWsydYd5bp+NTs69Y2qVYGeVmHkh1EXK8QMc+lFWNyXVPl20z\n1E1xlxk+j+Chk/pksa4r9z/YrxvBXOkXJNBL2/0b8lLPjrTRbs+lMJqp02Ig\n7T+looXU973WFYqd1zVR/VbzaSTpRZQbdWHtfTO+hHOGDxsTLvn+utaXG6IT\n02Pa\r\n=4Q2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.1","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/selection-control":"^0.39.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.39.1_1535751423673_0.057022141953234406","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/switch","version":"0.39.2","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.39.2","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be05ea17c98d14de09c8917eb3ec5973262b4fe4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.39.2.tgz","fileCount":14,"integrity":"sha512-WVWcuT+NJy/B/itqr26G88/vx9yI20k/Uu7KQ8oe86BfFgJnjhUKo/t9VIvDcDPzJSpyW4/RvxikeJncgdJ+BQ==","signatures":[{"sig":"MEYCIQDr3BmrJR8Cm647Q4P72motR6Ad+YyqIJC1Cj7+sA/Y5AIhAI9F5c+Soq3yAvsy5Z35VD5QuJIXvoEhdGkVBbfG/0T2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OLCRA9TVsSAnZWagAAnekP/2z5teIIFi/9sVWsI2Fs\nXtMeO6cMPT4cEZebHp0LLMce9xrU1v0W4v0g1p8SwkJBIfk2DKdGETtk8xzd\n03HEN/ShX7RWnv2oxm0wiM9zw5gH24eXyauOtErHNknhrAAo/gvR4n0m+oLL\nK5B3KqnOnUYM2DVyoqFO4QRcV5Os/v2g4OOgySGvXa7Vy2uF0/lvp8JMbcUU\nu5wvkxuDCc5+if1J3HwjmgPYmg+rc5YJvZ7+MKGnS16jqRWqJasEmZG+E9xW\n5VyTDOBQz5YeSwwLLFho+kIhvgs0u2E23R12I4XTW0miFIWLQpRdjzEU2lW3\nDizfM++na98nxWDQ+0ME4gHgkNE8soqbzmYEgN46mvNOlE9I4SN2IkKbcT2k\n/sZA+hcdh8rj+xsl0mJfkKVXkhMnj4qExatFTT1lrza4LTmLEEGBVmDSy3T1\n57baban9A9KH/PuurzwM2Ei5qgiFI+YJ9v/we+o9eS/RWNSQr7HT0HFqBeFj\nKLTje1Qu2xoLb3JYi8w1bDi6NyCYfWAUjqtjJhmEgBV6EsG4rSQBLu5sj7Ys\n10uZb4l9gmRSJ8pzhHfFMqj8zdcP4ntvT7k3heDr3iWP/fxbRMxbAOnJqzAj\njfuv1bcERY+d1pr6w1hRL8fjaqjft8vZhaod1mRklp9d+WWrdYzQlloSOjmC\nnPQv\r\n=QKP9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.2","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/selection-control":"^0.39.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.39.2_1536684938286_0.5554850628160763","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/switch","version":"0.39.3","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.39.3","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7afdd2f13747e97ee3a7f223cedce84fe940fc1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.39.3.tgz","fileCount":14,"integrity":"sha512-2R/rAOlJjvAsfPBIL6yClAGBFINt3T4YVCMIrFx2PuWxpRZbiqbEoUlESIf5r5xXrTPtaMLvX8j7BJbtYXGi9A==","signatures":[{"sig":"MEUCIQDzJFainIuYtoazeHtnISXCmAGkNgx5RUCqVVB6X0nX/QIgJseFskjfX2I1/aeyo5VyiYkFIhQsHUhfIX1jt8ZRXg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/klCRA9TVsSAnZWagAAg84P/09VRv41Ah5waj9b7nGt\n0ky8tea8GTAD4QYJJtVrwrfHruuIS11mfJroZnwhK4Bxgn0cqYNSgTvlIwGu\n1x6ettp1+L7DrZChQXZXKFDZgperKuE3VJzwjdQNiQECdj5QPccT9WArsrbX\nBClgvRnmzk/QEuwQlksjC1LkRimEcl0Z//G9moHPFOxNTDa5dwT8tgLllCjt\nQaSAAxFRDBtVy1QX+DSrtTffhO4wu4HIemOTGUbYCuFl0R/WpIhXvPv8+28Y\nVcHeoUJ08+eb7Kb3sOKunMYCopaRFmqTlZNZEfyNPrzGCT++HP4UMaMEKlMa\ns7IXxpV+YFBw94Vj75NuaDyyDedAD7czLWlvDh/pE+kBomO5TXkw3ELf0b/C\nFVQHKFMJsNzVVK8PqomnfIf6iVbxlc4mdMhCiK05CQef2RBBXvFp3aOVwpX9\nOo9H7RMklmZe9raMp+CoQApKGmoXTz3AdSd52amyFZ3we+lhRcTpr3zxGsya\nKi3VW509NUwsx+CGAK8OFq5biKn7BsY99/4uuHZW5fGiS1xDq6hyYPgSri1Z\npRSElfPhesMWDLxG2uDJoK8ojmjwwPPI0FYVubzNwUpcE1T9LUbZJidfVCRK\nlHVjloOtUtJCFfjLCVDEhe0qz4lwLvKd4QFbF5mCejDpFVTbrWoLcUexakaU\nxSn7\r\n=g1gd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/ripple":"^0.39.3","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/selection-control":"^0.39.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.39.3_1536686372912_0.8370787021708128","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/switch","version":"0.40.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15a736c0f4034dd0fe81b4be27ec6b32ea013acd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.40.0.tgz","fileCount":14,"integrity":"sha512-ItZ63lKw5y+1sGFJJuDt0EgHb/alUqDF7B65DL59CK/9B0tfrTKPITMG9Db3ruWrC9CeeMa8vr5TCynd05h1Ow==","signatures":[{"sig":"MEYCIQDt5HvNXK4Sl2v82ZbSTZEG6hreajvK8AntIcZHOK3hhQIhAM6K9V6YJTzs/zVPvKsOQfFadmALbp5vSpSpxfJQDDK9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULRCRA9TVsSAnZWagAAfYoP/2ZIOqTkaAfRfb/yHN6t\n801Z5u3zlF5xfe0EYmdlsOU9awsaV6Km/II1WriSjNCyT63sTkL6grgiJ05T\npRKhI7ihDo9xumBqF2lpA/jxv594ZzX5lQGJSovQmyRXRIdbIvSDpLkJyxxL\nUDUt8g7Hwk6gTkyjsP2BLgoAEsDIZXvALbKJzN2D2jsoH8gWrV7fE9Wqo9oM\nl6ZQUN6Ekd/66WEVu6UwTHoyAwuXDsQJs+h8V5aTbAkERlK6AAJ4GrmiXloY\nppzJWobzY7QPgNmkdq/ujklgtKT547WjjZXWDl+JfwjwTRBmiKvfAwDqKbQt\ntMInQRzitALVBhUaakNyoVIUu7yd6zsDaxCbAONvPEaovTlmuJ/aykAts0yr\nnq2RN+QrKFkd8wVRCW6hBCLxDgaFbApXOlPmk6ebO+xHUSma7+QFvG8kBMvf\nSIHR2o2swm8OQLmwr2V6dRZUv6gNUA2WtvtBec31wfCOL65D+kcqV+KmNzxn\nbgQEpL0SNLV6jj/UkrGlSPTWsm6WgevxHZjVu7GS81KA74B0OyKQs4bIlqJ6\nOilqnWJzC/CAkn+hKfc5RxDCo+sTlHxH8uikT9ydBuIkLyAbJkfaVHP9mEAK\nvhHGATEH9ZucLEi1aPD0b+Xrnr+6ueqUiWjozv47cUom4zzuNFALd9HpFyuI\n7M4P\r\n=7aeX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/ripple":"^0.40.0","@material/animation":"^0.39.0","@material/elevation":"^0.40.0","@material/selection-control":"^0.40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.40.0_1537819344906_0.3728757963747027","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/switch","version":"0.40.1","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cea8f1fa2d2241104d23d155b5db29f79d0b9168","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.40.1.tgz","fileCount":14,"integrity":"sha512-jWskicPUQht7ETlkprF+1fK8I0jKrKN3mnKo6hngbkm+JyZpjfAsN31nhx6sxuuCxWQrQNCEvUz6EolnCPp3zQ==","signatures":[{"sig":"MEUCIQC6M+OCcmPrEmqrgeTYLk1x70/aeaETJCk1clUYTKdJNgIgDJ9H9VfPVaixQG5oqnpOjMDfbpWSnTQhYdeEP46nXX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8jICRA9TVsSAnZWagAASK4P/jM5Kb+W4d2L/V7CTDXL\nnAqyh2aLBxEYoj/bMsZ48WjwYP2Qzr+V4dgcomRCr+OjskXlSg7Zr4ZNXrd2\navtsD0qa424TalaIBzdYtj0dHAdOSxzakBA4L1uEyzzlpgGwnCc2NG6JxP4Z\nPaU/A5zP0FiQgkEu4wU8hv4n/BI9Qg7jcr3av4QxxJKCxtAZZWUSRDhAgRoL\ni265e5VdhTrs1ajMdeQMl3+1LAct16cRQwsRH5dtqeGHQ7HibkXfWRmLkS0r\nY1MzlWF5T1lgaFPme+ZkhF6gw3gitTB6utw7dBRxYrSRqhmUiCPCLmBg5MRg\nDYcyaB4vjlVaWvrYq1OOUVm3NyAko92NzRxktlKhLLggxPP/5F8hGru3aZDg\nWDIX4LX8+2QM1IcUSx0oUIaj3zR25opFordMS9Wuu/LpJXX5c8OkV8Dfc8Lv\nhy+u9JNukDL8RMbHT9ad151fECPeihgB4ZkXL3Hg9iFBiLkHXdtFnDSlsA5M\ncJeHrje9muIZxNH/92ZybJb+a/YuDA2EMJpqrUklmiJL+f48HoV7pa8+Z/ug\nByVW0iozC9cIgMOY1xLYPGVUYCH8dI/pcliFsKX5pHnOlXqgNuWCf1d8e71L\nYszFu+5BzLVgyAYkk1ms82uHImY4GRshinOpzPSxFb98zzHC43VfgOmbwlGQ\nbtzC\r\n=eDrh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/ripple":"^0.40.1","@material/animation":"^0.40.1","@material/elevation":"^0.40.1","@material/selection-control":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.40.1_1539033287860_0.6499098840907886","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/switch","version":"0.41.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b186512dddd081b2658d07055b7b8b69ba9353d1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.41.0.tgz","fileCount":14,"integrity":"sha512-8YTrn1oisUhp6DlB1XAPeFWVr5nD88jlq9FoTVQOtGaUxaEybQD0nrsYI7OwaVm4HvSnepd2zmMvbjXKbQX4XQ==","signatures":[{"sig":"MEQCIFM/9GRPl+zsdk9eKSwQWPkT96b7JFO5f50aisYM8Au0AiBeD66BEZj1SOltBXidHS1LUROwLHQCFU9lndzs93ttOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wLCRA9TVsSAnZWagAA3zYQAIDpA32n/E4ndh7NXRWw\n/mLAXEnmhhcv2uml+qwdiSYN7w5FupKL79xguqe13hCY9hTCCviM+1v+LTN1\nlyaEmtPGfBizG5mWvOHsezsmtytMZXMxyTXPglijUJAuKDR1r8eyb8E7YuqG\nud1Ht9FYbkGV/N8dYXEpua1vxyV3T4DxA4rwAF7Bxp1oqCEXE8hLyQtmY6r0\nBvL07hKI0/KvHPcPRYyvsRGcIrCtMRAd1UW+kDq8I6X1R1QaIaGUX1/bLwcg\nL3SYclLKD/AQx/K4EG4Rws091zypP0oFjf0uCzf5Rjwjy7RCqTA87AtJ6n1f\nGqlJGoaVo2Jr5GLnDt+WBPWzstUP0prTNejrEf+OM0Y4z6Weucdx05ZnpFEq\nDhtP4MmJgkalO089fXpmCTPKHkpzIHCAw+XLaZB7XOQK/qoiGWh3vBJDwIu9\nKIbOb0+ITe4By8VJA8MxhQ7o1++jN6m+KCnrD9fOGX6LaBbiyq3bz6Lvjj4J\ni98Z63tQBOqatAj3LXF94Pt//yRZg27GwU5mie/eYjpba0H8PZEb5TZGe1Pr\ngaxJL6JivzI8d8j8/xRalWqZ/EWzamIELefiup8V+Vr8NvkdbSKOhG+fkexI\nyDVvhtT+uZztQAauuTpHCaOAE44iF8LtT2tEmmj9t82WA8aZjH4eG6E1gvoQ\nQXL3\r\n=MeFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/selection-control":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.41.0_1540844554201_0.9583840849055123","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/switch","version":"0.42.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11cc30489756534163736179342eb8bb182efc0a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.42.0.tgz","fileCount":14,"integrity":"sha512-R15y3H6gzuPN/n6XDfgtVrR3EI7aDvirDHqQWo47z5jQ7BafaqiDLiNbDbmCsyB2Gq1uHyADRTiTbwAV3wQg8A==","signatures":[{"sig":"MEQCIF3h767267tcNLPNgSye7o7xJaofiedBXx8X3YAFjYrtAiB0toIjM7HUwrFrMc8JDBVa1NB9vpN2yk5tLE2kC0GL4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXUCRA9TVsSAnZWagAAKf8QAJrxiCZh/GWohJ/cMn3y\n103CyBg+38mcVVshRp1FpcJuFhfLI1fXP00MOBPpOawW9LS9hGELczbpPtzg\nMKGzEBgIMqI+pECxDRO0Wq2czs3C1InRGd3nLrYOt4QUiqXcFMPtKQLY6BKv\nt6DTOoHzn4q3qij/zvGsFVw6jPumD67HKTzPosm3/2qCrLNliPR8OvIC6MR2\n3AOZQHMz4ErZteFkqbUrUrp97pgkIylHSBhmLKqGUN60Y1Cp9Q0E7lbIS1L6\n60ezN+HyZJ0ia10pzOq7d33vu4dff7bwoFWw4t+ZVsA0KPdnpKYOPaDcIUcM\nzAFpbouqN/v8o4x087LsAh6xx8yhZHUll7O3NxkujRVnWvtnKbxV1o8DKd6/\nedEwbQ0zfE1Q5xxNx5pMW8BFAEd+lQTJhwTzagl8WUI0nmEBn1+feuv/ZFmm\niI/RsC9TWEduPaQy3YEQwB3BA4srZFd+siiwNDDVxTRL016c0qaaVgIZBSbG\nLeTJNv0ui1bYUMObZLpLQ4DQJ3z7iUYABG2IQvAilU6bxn35utD7SmA7IrjA\nQxjy60MB9Lxb9scttsndNXtxg+QZ58u3AxoisQnBgonfGjyl6QF/HFAd++2C\nmCDjAQd8WUDpNXlJ75d0qSlRTsDfJtl/vd6jGSMXrA6KgaI3v+vAG1GJFaVA\nAMgQ\r\n=15+f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.42.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/selection-control":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.42.0_1543964116142_0.880259982552204","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/switch","version":"0.43.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79739e6abaa4cab436197fcf7d04c1f557ccdbc1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.43.0.tgz","fileCount":18,"integrity":"sha512-WEStItIH7lTSfLOB9G3o5kBAcLT9PWElvg/ZK1DqE/O85k4+cT7SWraQpT2HMJ6kS9fr7abr0MXZyU09kotlKg==","signatures":[{"sig":"MEQCID4nrLH388BLCws/6ft4sd1Za3j2AL4UUfN/KGZU2aUwAiB9d+1y/viLyBEKa80Wh0FEwrcQ6jFj2nZkoVTdfwEbDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61VCRA9TVsSAnZWagAAxz8P/3ZbbM2iJaCkyjRGFjcX\nC81kCSU3lWKK5Q0aR5e4uNrnQ1J0ZKgCB3tlAPTjPt9MbH0yCQXG1AYb+xzN\nXQf6IkiIdfQXv/0O88xd4J69T5Ez3+270GaONGpFhyvEDJr1fr9cmzHUSeL8\nzs63xK2upOUZIOAJtfj2WMZiXdudz2p87QQToNvAD/AYsiCRr4yuLJayBFvo\nRasQi0qCfDr2ETbwRZHTgeL4L8AQ82pAWPs/LX/6sBYIRNOsK7fT36+igNXi\nnUBGHCbm0/qlXO1w6iop2AvvBi9UVPBI5SkEg8W7JxdMhWndV5EA7hROLSCP\n966jzfc+wggyQVaGLubSZmejDthUJTic1EFmB9UL6AYanZBpJ8HIntJadshz\nHHMFdxUtBPOKS9fe454hNOZtFCRdRc8y4lkJEJ2EgXaXf60r65PB971ENEou\nLTkRBRZlnB54tsCC33CspfqvHYWXheJ9gx6umwIuv15fA9AJAwHAZ1L00wma\n2rwjejpjA+Woc8KUpdhYzeoBVnFZJqL41k4nTcGVe2CubZsIFqJxNPv1Zmes\ntDWlb/CH60jl7uKuXjeldEyOIAGR3aSrEgiANRSl1p1J+zeeGbLm9Jw8Hcar\nE/0/2OyaS0RpMjZVB5MRYGlSJebuKeK7CKDlmx8qd9zu2pkF34NX1AkVVKAt\nq/wl\r\n=Yshr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.43.0","@material/animation":"^0.41.0","@material/elevation":"^0.43.0","@material/selection-control":"^0.43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.43.0_1546890581178_0.8502482956617639","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/switch","version":"0.44.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2cbb447437b12eb3bc7f0ec8318dbd3b4f0afce","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.44.0.tgz","fileCount":18,"integrity":"sha512-EadCg6lHUF260R2Q/l++vXIITqacvbXlobSoewA5ib6y9BU2g7l13wL1W8xAVJNUMgFa/PyN+EKT3oCql7jZLg==","signatures":[{"sig":"MEQCIDXrCMkGr3TpMan3d0eAYtF4etTNp0l4slX0Hd00DqS7AiBxft5Tumt5y7kf17XIBEQG/aJah1lA0MxWV2HhspT4zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINoCRA9TVsSAnZWagAANXgP/R86E4sIUKJ5xY7DpnLw\n0bevgv0Ea9t+0qk58WhN5PrC5Mef3eF43ydoYf7X2+pZxVa8rDW1Lrg9ebbB\nu2YqnB6HBSB6NydZwWpLi43nxFPkv+f0KTYceLCcEPG9O82E3Q/0MStc7+s1\nZjOaWEKEMKgbDZe2iD6DAi7JcxA1Fg1TlqJHLuAit4w2n00Vkb2TlspR1/mu\n/t1Tvl8awc5WTBGazTzmSySCFGC4bzWoNwKhJ9xFNQFkXlA6Z8ErHfgOjNdd\n8ULOfn2xSffUNCQkVlEBlWsQ4rqNra2fwp+CgZUmwJEaa7m5HI3MR9VRbteX\nWwRA4AJq9PNy889yrMOzz1F/DUwSyWj7p+stTFeGYbYl741ewU0ptHOCXq8v\nVIE5LPfy/9cEK/eJswgkSaNSNBrgsB6u8EttH0UvAk0qfla6dxn96kNfCsTA\nkt39+II/il0DEtKz9XGsfLHXhfHOk6VL4BekD2YctDAvBsAqlWHs1KkDCpdD\nQqQb5W9xZNC2in50DDdd4FsXXfddPMNGwrzasuC21IqAJGK1PA/RuGDD9X4b\n4NGePHcPgULMACrzNXA3Vm5a+t4aLpTyjnJhsEtG5g7q6c8XqK8BUlLDWCdS\nkuCNaidCezYkvIuzCixF4iaLzIcOz6JThtQfcotuvE2yzhvQUMt1fKTfVzsV\n01oG\r\n=5K1b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.0","@material/animation":"^0.41.0","@material/elevation":"^0.44.0","@material/selection-control":"^0.44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.44.0_1549304679997_0.4255264886250678","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/switch","version":"0.44.1","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3a1d6169956a70376ec7a09ef5db26bb090c400","tarball":"https://registry.npmjs.org/@material/switch/-/switch-0.44.1.tgz","fileCount":18,"integrity":"sha512-BQ91OGtb0ohcszAjVSBjCAnkfJxQrz3r8c5kyofS+qDjYengCe8DaUpcB0PAFAUk5yl7VXs46JholugnIo+IYA==","signatures":[{"sig":"MEUCIGJX1BitR845V65iNe+cOxc1Ciwwhsxxyq+F6PGQ4xlWAiEAr7JdeX1al17hNf35cen9parerlAmspPug03c5y/Gfbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIs5CRA9TVsSAnZWagAA01MP/2xMRyDMbNdsWTRjm/WS\nUC0oBtLZa6+wofUmosqEfV3mlDtBc/5elJIw2t5fazNx2z0UlTyFJ2oPulZX\nlOoZ3EJ4S3U4ANr3zwpqP9XXDyQFAKThADUwIUsdjmhTHFMT7Q1928QGlG8B\nINk0mytZx2Ha2tVQqZV2scVxebSJ+ok4jWBBgI/8vKNZSrvpu+nhcNGR7fQm\nYNv+Jatn5HXj+VCfpiSPwG/aDz9XEaDIzuCjyKO/IYaXfDIHIfjGBi21cnd2\nA+PVt2m+yhmAjchwPAa06wdDYc6WSqJQpeoQYwWYc8Z4EwXglIPWRedXqiu7\nSKRzPv4+Em/w6OohHNyvhhns3e/n8RyTB7CQSEHuhtg0zFToOZT1b+kFLfl7\nocposdgE0+MNGt953CtMtl4ipLH8kobv2Ux2FNvHhfA3sBoqVMKpsd64TPWD\nfMPjbSRSJQf2qQ7sLdujmzL/8ai0FvKF27HUk835qcbkQuwpsKuRD12vB/Ih\nUYv+NOJVJEasH3/LemJxUDvPzSsjPwumki4GQP8Wbdcr3FlJC604UAB/ihkk\nF4QuQoEPxwM/gZoEKDpG9F6MrVUQM0Z8BJQHNVyM2PTR1b8D3ZB0DGO94n18\nUNe3bEKknYaGnbv574qP6n42qfBUdX24HEYsDk1FzxRkpW13GtSPbyFcwbte\nXoak\r\n=tEot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web switch component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.1","@material/animation":"^0.41.0","@material/elevation":"^0.44.1","@material/feature-targeting":"^0.44.1","@material/selection-control":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_0.44.1_1550617400298_0.18947291361591456","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/switch","version":"1.0.0-0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"323a5a395bfd9580291d7099b9764b6344bf3532","tarball":"https://registry.npmjs.org/@material/switch/-/switch-1.0.0-0.tgz","fileCount":30,"integrity":"sha512-+//NM3xyauKbeMhpwM8CH3xDziLZPqbA2RQGw0EEThoXI8M6gvd+guGmE8YZDWjs98HJlBSir1YJORs/d9orww==","signatures":[{"sig":"MEUCIHE1mlgd4MEGAFNcPa820xWH37296KwwyDsUszFlLAb4AiEAvEmyKUY6a/5ql/1QTMFmTeaRcYZufV1fxTQuIzab1JU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":685522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRxCRA9TVsSAnZWagAA7MEQAKKgP2ElgT+67cv9eapC\n+OYMLz6hVk0ZWkTzwTr3iN5qJ4PihC1RQnU1d5Wp16Jj9FwfMN88K1uGq281\nR0KhOUWoPcmm/ED+wA6HOINJiE3J1xhd2S9V08VyvYvhZL4nwqZqjWk4vO2U\ncND17MFZ2KmPwr0YKuLnuyJxhhoZDtvIDe3AQ848Yyx1YjYBRD2YncJLDaZE\nfFhKI25jjKCh3wiaFPjA55kLLQRNttwXY1lO3ZHZpsqxBugX182dKxFa6+ty\nlu5eKlzmPM6PUg02oJzdCeyAqx/TJeLZtA7nQcTsx8M0d8TVZFHuZSwy8W7u\nzm5SF4T/wKhW0IZO2T4Q6yRxnjwYAIe2NS5Ll/exU5ThaoAsrypSsmS/eGuB\n0nuDAzVpksOx5jV5RRxDmUNicdiN9vsiWkcU7ZoaTJOR+dowe8xtrhQx4A2b\nnF8ILRh/U0CTqmGNfwX9CyxdKsxs6zza1hlOzoN+Rw0u08Dq0hMGPYsRc9x+\nY1fTN3aQ86dZiKIDurixzw04sSsfMvIgeFvko+Je6XQoWTkUgZXmJps/nTjP\nxDRCoPr0O1xItFwh9AFZ7iSPP1JoMUX9c7HTJS20zNhVzeOvv/q05vwbXvab\nszLk/lm1wkKpt6Xh+fA7EceTkx51ARef6vP6D/JYgESqgaKoV9Evca3WCZer\n+sgd\r\n=uKrD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-0","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/elevation":"^1.0.0-0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_1.0.0-0_1551311984914_0.379132304000553","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/switch","version":"1.0.0-1","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09e1807a6e77914bd896dcccd8ac25e236d83345","tarball":"https://registry.npmjs.org/@material/switch/-/switch-1.0.0-1.tgz","fileCount":30,"integrity":"sha512-HUa0V7Xc0U5h+c885O1p93knW8Pa/dBOWCO/SaTgIEXAxb8GalafSOq5e3RE2etMjVCHbXdNVIO2T+tylu4oig==","signatures":[{"sig":"MEUCIHZZvx3Qt+mbuoo9+TGzQKu1xboLvmGBOGXgdmW3AkmMAiEA4UTLRqVfDPmrfWVwQDnF05yrLkclv/WO8F6QWz9BXEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":685576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXTCRA9TVsSAnZWagAAdjcP/1BHsdg8eUv5hcX35Uiy\no2sT6M9pnUDC4WWMoVDWstkTR+5CzPXHh3CJhjqFBSTFJ3CtU6B5G8RcOn4f\niWheMfGdj3FeS7n3z1yVe5iDYFqX0avagjtsCAs6gb8c9fBxwuYCQNKzKaze\nBsCzFa3Ie6eajEKxlQDgmXmvIksuq6cLFQVV5hJq4igKrZYt3LOIwh9B6NDW\nVnDbWQngALq8UI51ETsmUi/CP1gHCf0JVA6IJW0O04oQxa61WQhBtFx2YWS6\n6QL55B3XH9xWc8JB3sUkvLvlxOl2voyR+5bYI34eIATwpb46m14MJclLbQct\n/9JF9G4fCo7HRCD6lkWyVIpT60V6tl65RYGaFLQRQLAcyylcXyUaLFwpiObi\n5rLgLexBJ+LdQfgbZyaK+wKjsSXhJd11KPyGJ4/f0CJttQQcginR+UzKFrKy\np1sIK3o1gDU8v9hDpOjgBUegzif1yLYtaJVsW2Pfu/zeb+CmtyL6JdQTlbzd\nKOUsfgB23umSiovu83VzCo5JPgjv+SPKQbyjOTBRaFXcPzD99I6rN2NCPx4N\ntWbMWmKTYIeHCik/Cge/EJBmk2ot5sy1WWB5C2z4JD7sHo/hTHtSSb+XxJfY\n664oHpeR6gdMHTNqkPRpkxq+u9zr4WknNgWHM9tdrhIU8c6QfEY7rL0IXHsB\nN05h\r\n=j4sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-1","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_1.0.0-1_1551742418393_0.9408455460008667","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/switch","version":"1.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c09f56fabe8469184f97152c13db0d645487ef3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-1.0.0.tgz","fileCount":30,"integrity":"sha512-GvcuTbW2u58XOcOEjCCTo/tm2vZXoZHXLh+DnMXIKxon3VOgIP5NbC/gOSAE28NnCuP6k2xkqA81OPW61Qt20w==","signatures":[{"sig":"MEUCIApMD42n7s0gqJg6lEgZupmiieYxoUDO1xBWTTkJa9erAiEArDv323iknFN0w3Z/ttolC/K7V/lxJtBjNWwMihCZX/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":685562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbNCRA9TVsSAnZWagAAnMsQAJGHHAR3j7p/xdsd4EYQ\nH28Um7COY4mTVH1SYHTBbLkPKjNERJXsM8fZwF6gdlOM0q3hyrfrqLco/ofD\nYW18tjbYsl0SKr4s9yx3P83Jg32GjmUXQQCoYHxoJ+8aVTf7fiZqyKEaJscg\ntWva3yoDIy1d4L6RZX5TpF4AQ9EKxDmTm8EQgJE07cM99+vLfhO91Z3VoiBX\nxyb0KuAAw0zqoh4rfHodGbLDeGlmvUMkw4N6N3n9HGRTUyny9UFQKt0qzGi3\nasg0jEajWvajamE+GZRgBqaoGVx+UZd5PJI+2OwtF3DBfG07XE8I8nHsTafA\ncH45PzU6Vg/pMlO72GIOWu08HAN511ki6AGIvkMl2Udjje4eJbdytYN4giYz\ninlhvk4rr68YLAj8XhZMgryEgdYQvDHgVBN2h8Ozz9zC3dNkePEhErDozoYk\nB9jSaslG8UWirXYaT8pVNhsVOKDpgxt4WpACES+ltmCzYiJfcF5q5N4LjccL\nFfhVqWAYMu4ow7OJGS8UPPkDZqORtwVBm2ULa4fD8UG5Zwpc4/nlTUfNcKpt\nob7YDQuckn8PJ3is5q4bYyGdvZzVZnJklHe/ssZESmbLY7YrXDQZ1er+mk6q\nJGWZQqfVDpH9gHjsTZ6qxDCSVzqc6B//zaiFeIEeJksk9RthZSFp07xDsUi0\n135i\r\n=fJKo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_1.0.0_1551906508774_0.419878680099496","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/switch","version":"1.0.1","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@1.0.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3f1e01bea3832ef54de6b2813d60dd31ce71863","tarball":"https://registry.npmjs.org/@material/switch/-/switch-1.0.1.tgz","fileCount":30,"integrity":"sha512-McSLQA+VQdNV+wT6pRLpvlXv7V2BLsUkyIuCog8+Cs0Gsi4Lgs17I6iqdzQi4tySAX+G7nl6vqdUem/udUJZmw==","signatures":[{"sig":"MEQCICoQ6lWd5TyW+zI8eAg5mttSzjjHtMcyy1GjPx6p5ZqNAiA7pgGRiEnesodORNM4Io/6WVVEnZUzjh9wkmTRudEm+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwrCRA9TVsSAnZWagAA8BsP/3wnFleoQFeQJUTN1VKT\nGcHHtRqR97rJ+SRKXWap6nii3A/WtN7S4I3lbv77NF9fq5FLRPTzDbF19mEs\n8Pi2cLppeO9jFXNuLEDj/1Jw0DMM3b2celjZsn8x5jd9tbSzhZ+kfVHdOD0C\n5RcCxUONIfmh0WtIinskcEYdZ1JNAJIUUks5gEcfJ57qaPsI7ObEQvVq2hCU\nThLpWnouPluyDLffJdhE4uCtNDB2yk1mku04sY+B54sF4I1w3raZ83GqvW3Y\nV4+N+FbyjSNG1RhjVBDIbJZVLDc+z9oqFBFPhhEWo8gArva0q+/PY9sAXux2\nvEX2jc1b1vYKOTjmZRl2V1gbFNwVRSdQCVqYyj1zgfzRoRX2uCh+kh+DJ0cz\n/fLCPQ0hktaPImtG3fnfTdIhtsgKNpJmiupf/9TH+nHG+7QVxq7Kqo2KjSv3\nOU21LAnZyzBNkmC26bdBV6THpcPNfp5YsLVvBjmXJOponf9fbppuIPG7I2dB\nh3qVJPHZ7Of874VgnHHp+Ai49PWfVMWcMsXtT863GZO7VsJ+2Wbcq7sB5IFx\nNVZbNwxIdZoXZswhmJ8excQVCW5KfOWcPo5H/CMMebIpdyFlOUusqQfdw3oX\nEA1L3H2dXeURnFSEbv2C6ml85AyVwzIG0+rfKkI0eQkim1Jbm0J+sBjom98F\n6kXi\r\n=/t6e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.1","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_1.0.1_1552342059142_0.9313486650870404","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/switch","version":"1.1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@1.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c64b19523c4a495de9df022940ce5a5d2c21cbb2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-1.1.0.tgz","fileCount":30,"integrity":"sha512-hwgPzMgZksmJB/hOHQqrT7SZ6TpYaBtkW6BDhCojluBzaMDfDZxeXbNAhAYCO+tJI9p+CndPF+InsocCQDAJXA==","signatures":[{"sig":"MEYCIQDdAtcnzhJVNdzJvpGZvFiezz8di7n/iTqSKFCHqGzTOwIhAJ8/446pRR4u7YSkbDU4hRBrKWqFG5r/ohj/v0og5eJH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzXCRA9TVsSAnZWagAAlycP/1Dw44ASJU0qAcEFuGOn\nxAJXSuAumnyGv8Wow3+Av0WC6tbLZu8+/GOvomDBoUqyOsq1jHL912xp91kP\nydMpjMIFJogUDZNNJ2nx4MaRmWsg9KVrdfsgV6sfkh8kAYUSEVLoFzsxn3ml\nLqVHsrMAKSkmCU++7UeKHFkam/wuyg5js4YcWzrI5TbKKGspoeQgHfYWkw1k\nLp9EV+az6nuWit6rJE02todBueCWYZvMMkKvjQO9UHfP37bdVFKuE965nTee\nNTcXcJeq7bWy0BO/OxXtzEtPX4635/WOMWsjP+wMajjjg5qusG5DpZEQd13t\ntu+lWH16aKwz6BoEzIz91zZoMNflZO8/QByfrrXVXmIYv8wi07fc5szD9VRv\nTrov0lRufAbN1fHjyR+gRmW2RjhSN0wEmuIC2ygSPybhkHVS6Q6sMzb2izx1\nN1K0wdwtf62knuhETYHIAzZmt3rq5ahp+LUDXVYgnsVfhIRwYWLd69x7wR6b\ndqQaEDdFeHm1iUwtbbMUik5S20EZAQbzwYuzxbFsDfWCQQNexVAUxwTfs7P5\nYp2NcS1HkYqEqjHl0COIW+0OcKsHEBkPAjfNs2RVIKWxOS6eOxK2erggxhVz\npM70QnJuywtGksErMXLLYuo/QuRR2oz5Fiv3ckqXlctTyMpv42zAQGWom0lZ\n6bHy\r\n=uLJN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_1.1.0_1553628374074_0.7587577805684131","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/switch","version":"2.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@2.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66d15e58f6e864ab13ed3cf16d264b0bc24f6770","tarball":"https://registry.npmjs.org/@material/switch/-/switch-2.0.0.tgz","fileCount":30,"integrity":"sha512-mKaIna/JuoxxyirtP6ejQbdLrbbLke8lZadRWWbdR7hFi3QdCxKKNyp26uuilqaXwQcfQIEGzojd1S471q2SNg==","signatures":[{"sig":"MEUCIBkGlw3ojLPk5bG66b2+5iQmRV0HIofzkQAQf0AWHCbBAiEAgxmmMuPXyLeYanNuenBC8sCVqOURuGceG0pd4/BHb2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzcBCRA9TVsSAnZWagAAIXoP/R0xdB3FTvroL2DICGW5\nUMjcgbxknENGIAGIazhwwcz/cIBpOKVifR68Z9JMWAmCAbX+2GoFXcxvjxjV\n+K0P3Y7yVyo2hC+vxOEvxyGpr6Tga+xbMPSuFg0vtcVaUUee2WzsTnIbJpyC\nq5Xb7n58X+UCVFbSFNALLjcAK77K3knWHUjadH0nGymd2VJX9Y06eaz7s2OC\ngh6ax38uZmImQ9Y6rx7bOyqCFn6qEF2XiDxbf7t7QAb5JtYc1haxubv52vWm\nnneTJf9TWQNaCsTWp2i7OzhrAC+5J8eGe4NpER8VS53dWvVv6XLeYSy3E/ch\nLUN5jM9pSLDSQxsVlTmpg9GLb1KibcfN2u9e4knRda5+OhIend0NWN1aypNF\njE4/K7GwbXpChj4gTo6x6MJ1Kx2vtslnDyxAB23lV7BxEvIPmrDh+Q7aGe5z\ni8iKBRMdw96SDG7srOPJIbzSJE2WTGir6hZzz94vGnOOTK+Lkqvqg6lm9ofr\nktfEvI3Jnn9vsP++eTA3FJ8l536zOHqYzNp3cl3U9McDRyf4XZe4EKJiBoaO\nxBo3vjnrSpfisp1OVKfJEXQUUgQkAZN5zQIKg7qYsjD3xnYY72zTnmhr5uIm\nffylP9+LIFPrDB+Znh9W9IjaWlglKza98Lu/ATC16th22unhhgq9+i4M80P8\nD8nu\r\n=jVUQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_2.0.0_1556559617119_0.6274639415120036","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/switch","version":"2.1.1","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@2.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b8d0d866414021c75b0e33760a14fe194a23cdf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-2.1.1.tgz","fileCount":30,"integrity":"sha512-9Y08W7ygx+zy9+/hUZR5ZBdaxOEpF3D8v+wJK+EfEGhAPpYj6e2aTz83kMLGpKzvdY500QGVjvh++gbi5XQv+Q==","signatures":[{"sig":"MEQCIEehxaKfa9MWmC6jMojJhrUqELVVwS9aRrABZQdhlMyUAiA2qXW7CKBGmYsN1t5WTlqEOsc07YUOhg/Or7BvjVp10Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQFCRA9TVsSAnZWagAA4gIP/3+YaLhrujKiIi1fysuE\nEhrDtn3OmQVq1eCMa6KVrv4ZO59UCcWtCUqNcy100visW8EaPzBjh+M1P4bF\nGbRj7Wejt7Jcjnk8+y7bRVb9s1DtHNltKdCXofzmJhTpCGiswsqb5XdorYJ7\nHzV3x6VsV3kPiHb7WiquNpBnxj5V4g5DIsq2esTJWZiiF0PY5vMzia1vWweI\nUtbjoGE6ROafPp5XfDm9JYX+yRboilqEK2v1U9UJoRORMNAT3mknmPa9iI+k\nbjoKrG2BMEEHDBINUeeaZ3UsaKeXy0rWUwkxqI25ug7XtiHMIT+TKv4qkxaf\n2FQ3cVnYhDsRLx9lS87OZHdOvkurH3PGCbrUCzRJpwd6/191kQat32JDArr1\nYqwko+K7WRzBvTHJGUe0TVEcnZ+7BDxb49RJFPgahrGsdZ3rgDPtHos2AEhP\nyDnYN08zduakdijTsJwc/TyvUuzzzggbHJy9DktWZ5iTHTgiRmiWb5GzdEmR\nRS7P5f6IOofOtxhjL3/nY1lc8v7s/ZFeL6VokhCPP75JAKZfQKz+0ALMzIyu\nGBHd1p+3imI2+ICnY/6w2bwSwq6/xQbeZlZYPE4ylOLpEUmhhBuCcwM2JfDM\nzm6ht6M4dhlHk95ysvUuF2cwfcauzhIk5jiZteTZ0jobNVnqmRBckMd6o0vz\nezbR\r\n=MvFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_2.1.1_1557509124918_0.40506378690032596","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/switch","version":"2.3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@2.3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ea7acc35d645d83a718e40d27e72ccca083e271","tarball":"https://registry.npmjs.org/@material/switch/-/switch-2.3.0.tgz","fileCount":30,"integrity":"sha512-c21j5VJFUAoey1fPGZaQaRcFeXZcP6dPYewUgFdGURtHnbVHqVVf5GEAcnFsk2NuBN2mDqKLQ3AKbozIAi65hw==","signatures":[{"sig":"MEQCIEYQ0tIB19qB++391U8rYmvjY5O8MjDW/prXA7YgCp5zAiBxWq/o9gX8IIWoSdkFGaANu+kQ6K8rPLvKz6jBBIZy4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7ab1CRA9TVsSAnZWagAAOs8P/ifmRJIrZraEP6Fm+mjt\ny1X4z/cINu9eT+DekLuXjMMamk3GEzmWAHGkEOwvtuEjpsNH5djfnayS/0MR\n1dg3GutGHbwWMiKl9gQk6vVjNs0qzEgGMyFMmVm7N7r139QEsVY1Yx+NhJfJ\nQmQbk+HYZyRljwdoau7E856+63O+1NkpmSsBc41ID5+8lvVcHQF70mQtsuYL\nYiI+1bYckKNFpfI9UJFO2bhx0SXk3+2qK4S/08A33meIN1mQyF1c5i+OZXn3\n5d4Im/XwfVzGVv8iEOI4MbGbw4XbFxTMsdeS7VfcheFzK48itWchBz/O8084\nmONxsfSBXMSiMm8MUhdJpCKrYpkS+YD4Vt3RKfjwVSMk3kAXioRgqhOqwFtl\nwnHmwjHN+BHODx0vn7WABgNAomM5XyTPKC2qjZDNYRQf5wwkQcuHwlrvrmV3\n6shzd8zE6G84vMcw2PlwmMJNrpy78ua70b28MlJLTjegbFlczuH21vy+IK1b\ngjXLy+iz2bL0BoLwU4NOsU9skbbqxFYPTrRHtt1TrLg5LgL6RmLNCpBrOZtt\n2bM5sVBo+RpX+J8n35M/JqBSTDY2BZCmCuhLLVCZJiLbcnaFuRMphRNdyMP8\n9o8HzI8uExo3+OQRN9eoGo2w87WVZMLmgR7qA04QpHs2Q2DbNHKdQEgyOJvM\nKgYj\r\n=aP8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_2.3.0_1559078645128_0.8190869910164038","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/switch","version":"3.0.0-alpha.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"788cdde7c61558919078aa59da6d1eb2d90d0974","tarball":"https://registry.npmjs.org/@material/switch/-/switch-3.0.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-WK4JN0vvh4RVfN7fN7dvIJAuDPWXmAoakXQgfdAH0jZP2CxBGlqo0Jafv0MTKruSi/AcasfLn8zrkHMphSsHKw==","signatures":[{"sig":"MEYCIQDU0/IbrhVZ0nJ/F3+N0xeKD0mcV8SGSo/eqxhIDWI18wIhAJUpWVY8wpmgdHkNRtC2cKkonqzQ6NgxWQ8mfc+AWfgL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHppCRA9TVsSAnZWagAAsyoQAJTd4oi6T99s+OJ7chEj\nBMD8Cjt295m3j+Vjo/UgZJHBAHL4IHU1xEiDEjlZ3KZfabByjhRhJfv8GqTc\nYZALF7bB+iF+mSlOH66+lqKWm2swgaN0IOXolDRZzUFTu3PNq7s0Yd+EY8H9\nd3XVznqtSuXIo8kKsyV+uL4sj5IfG3CaCrxfJVgyzyxWLBCtYVGJC1g7vkTL\n+QJVIomscVXwxhvrDzHJNPAQbjESp/qEc8jwZYN1QiSAvL57q1mFJeT6tsRn\nhXJrYfsEFuF81dBOx7s+7D3VpfsuG783J6rggACoPT/CaBnKb+d1KsJx3MTh\n4RTpXmiAadlTJH6p26uvXIwK/SijMV4qKubI7UJZrudShKA3RdHuuN4qMyx4\n1lKwKBFo51+c76r4OIaleGK/mTRoRifs+qMyV0GaqGzAR7rAAizoPSDV4r6+\nevyRkLLykMLyIOmrevFmGqDy57Dde82IdbGELVkFLqBXChrrOutMWGJ2+pG8\ncH45l5Bnu5lITtI/goWFFpaMWd8CHZW/pkZ7G3BxI0QwTsEFeJKnrZ4iiC02\nx9rqy9n42JVWaDwHd1n0bXNBI6wNTymbDvyaikAzMArzJG8jfe/eRvtUi2D0\nOxT78ImQ/QtA3Pyey7OHi/llCOz8nuO23nstyUBYJiLc4QzD4vjhLtb/CRKc\nyVi9\r\n=Lf/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_3.0.0-alpha.0_1560312424816_0.15297658069840314","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/switch","version":"3.0.0-alpha.1","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80c4db307d09ecfce8857cb0bdd245083c1986e9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-3.0.0-alpha.1.tgz","fileCount":31,"integrity":"sha512-L2ge5KA4G5VoY+lNRBbfCaB5YHTjll4Pn+d6PnrraSfgkXFk1ae8VDZwegwoA1PU7GVxWfSH2N4/VQ+wG7KZgw==","signatures":[{"sig":"MEQCIFB7OgPHKsa+L317/UFVqQlXSBc5YALhvsxCABgpvdxxAiAaZslnKDutxPoHKeatV8KFxelGZnMw2LOousZq/xlf2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxACRA9TVsSAnZWagAA8qUP/0lq0Nt74GuF/O0ADEMj\nxm6w1sf/iLs0jSHqb9AtNkmSkNL1/uTEqdhWug08BVN94wo4s49d5Gy8xskH\nalkOsevbg4iYZ9OCMA/pQqe4qRpIn1hqljCt6mJLIrA5FjfAHJT8OeRTWujb\nhb1e5xYX3zar7eF+fJO8uIei4RUQqbh0akbokz16E7qHPx5n/3oFOLZFYq1a\nJV71BR3V1/g4OUtbippRR4VCPltVpgArcSi6Hz/Q4xsEBjJUX2j1SZdjSyX+\nsAdgpRmzxA/7EPBkSyzO2sUq95Lv1FmC0JBGSD6+8xsR4bDlT+gkyG8wyt3b\ndUS9fFD8Ex74Q8AoYATxwpV0c0YapRVH+2aWv3msI67BLDMHSgz9Oz+MHm3f\n8j30uc1qAnVEFYNVVRbL5x4yU+5xKKyLiT0SPn6k5+xM0guJbw/fbFDDvyj4\nZA5Zl+hat3xJEIUQdlFvHawGrOWFDg8TTFSZmoH9GlKmW9rjRNLKbldi27zr\nlfgUYtkMEW5OTF1mb3x8WtDcG4AXSoCChZhv+rS8NDRf2Ro3gDyjfPy57txM\n3FgKj+2RLFkPGi/rIJ7vDPttfd6zqjanUB+X99gav1rqsON0zypEL6BvxkOu\nFcLjouVbPSuZ3lpig3N+DU+v6hTV4YifTnChQQAOdmFvX3KEpRitGWGWmXU4\ndFsO\r\n=YjFf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.1","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_3.0.0-alpha.1_1560366143624_0.8037923550509529","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/switch","version":"3.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39247b8e12c6df125a7989eb2cef83986937db8c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-3.0.0.tgz","fileCount":32,"integrity":"sha512-XyWPNxtmnlnlW0zv6AdfM5COty20z9VHS8l5fRnri2U2EPMIWFDWfpqE+169KvgVUpj8fB7DTV05VmnpRnj4hQ==","signatures":[{"sig":"MEUCIQChPQaIlX5ZcWQ+/n0CMJ9+vaZzejHCfv1utG2E8B4+RwIgbWQglmwYRkdVQVlUUg4hdBWLddsKYLZ7uSd3iGFd7QE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":600494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/xCRA9TVsSAnZWagAAIrEQAJjfE3VfedUxotkWmuPM\nV2kSE894hCSQ2K6sqxdYvxFGUy9UVUl78AP715N1tOaMXJOhvj8X7phBi3cI\nDt4x0353TmX4nIm3q8tVXdi50fJGYW2mw16soUwTCMZKDykswwxowWSG8u67\nbDjQARLkC5kszFt91TyXP0lyYRSLiMnAjhams2qYjPleOpzPKeY/7gTA4zTm\nm1+MsuGDFywhD60Qp/2yzzjIoHwGm2LH+FSAgP7y3y6+sdTgqJNr3oRqaakP\nHbHVN7RNXNQaEqh1aHyxPtS++4Nb1+Gwyi/cY6jykmMsCoCj2xKzxNJ4Q4Q0\nYHv6Qs/s30schhqDTyWzSy+NJ0qz8YwFIXQFVBZ4VLpA3NGgMr1geRTKh6A7\ndZm7w5KJK9NES+uno4/QgL5FMideUGnwesUIMxD9+Molq1C6EJn37xh/VLwf\n2/p2/RK4tlIywLNpoMHzan7lyJnuk+3DZtUBDo7zFlas+vvD/HZDFy8wdJBC\nCqcKFh/0oqBnkrlj+t9e8n+P3o9rvQzOQfpwiEZ9rTXY89/W0lBnkPFtXAOj\nywYfEBGLtaZ/ROQgpxxuExX43KeZoi/mfQ2c9kdC9mglpVYBjIku01Ale/FN\nn/YwE7XEqpslLr02GbDkiMuwXtph0z+4G85DlP8TbSBXm3diCTe/9DqpKMTa\nmb22\r\n=rKIN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/animation":"^3.0.0","@material/elevation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_3.0.0_1561501680920_0.5063709582976925","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/switch","version":"3.1.0-alpha.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@3.1.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d3f65c6d75eeadf16f3213dc46d6fa5ca780ae2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-3.1.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-BEdlko8DG8S9sH17IOFFsGtWAPFyen/Sy84OhENYOKGnt+dYay+Iw0pWyRPYFcfGoTqt+d+oLj/YktZBl57ZOw==","signatures":[{"sig":"MEYCIQC0dS1+4U05X67RrB/zDNpZ/iArfIdwZKvGq+p8Zu2IDAIhAP0q11rJZDtaBd/Lyh1hd408MFvj59oJpiCHd1bZqQhh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEzCRA9TVsSAnZWagAAZ3wP/3gDlxwFEuMkMWdf7bWy\nklV86DRAPVrLb+ZNuOnrnN+0s1ZY9tlcKv8EnF9Y6Qj26VD/2E54H1HOzX+z\n65UBxI8cGdRcIKqN1spSVhI+gjQgw8uHp3eZqvWimDYN35267NPmo7QDKP8W\nDHNsWqUgbMRoPwzL9yUpha6/8N3ggeXEiUJOIiFdB4p7yAIFGoOxQfprXopG\nP9vsfxFL++pliqOe+5c/y5wIwWSDGJR/CHA2IiAME3uyKoSxXakDOaoeFqif\nxf2Nq5dfqt4JMTWfxYIifG4okO7Pzwm0Dvr1+04MIfdccZrUVt2NnxQrn+Og\nnNKVHJZI7cahXTXSwIc1VaIpuEqV8UUs/a0TnhNa7+UvmdcCkRFEFVkGb8GZ\n7YlWur7ABiqKqnygdnToJFpXewncHhJHPQDc/XZBCJ5eTb4As/BATpifU43j\nJgWq+VBNrx4eAE1dLAnz/1MsNaD8ZWuGvVDAhg/POmXu52OZl+EvPR+t+8Zb\nenMk4njjQyd0gHhkp3vc/KJXRq5GQXKnEZjrV8xReNUCOWXwLWsBxqqDFoMz\nct7cBSmMslRGagJ33TenwFtaxMImfE1v6bcqSnqm1h1+Rw8YY24TlO6TWZFQ\nVwIX5eX4hKoRw3W8fMJ4JIoNSiP5Ak0PineNHC/+Bs5KahuONNUPFD5cq3fL\ndbXa\r\n=v0MX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/elevation":"^3.1.0-alpha.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_3.1.0-alpha.0_1563283762894_0.6772570581963555","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/switch","version":"3.1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a610b05339ce4d145f7791debb37302b8f2ef70","tarball":"https://registry.npmjs.org/@material/switch/-/switch-3.1.0.tgz","fileCount":31,"integrity":"sha512-DhxFN3aRrShkkiDG1fFLp1TZZCinnkLlCoxhhyCKEdCl+jaCaTl2Ii3SIw2SvN1KwMLHBX33jIzm+odOLsz7/Q==","signatures":[{"sig":"MEQCIHBEbTWoiDliMYHAJwc9vwOgPrKNvME5b/QDBcaxegKeAiAw1aJ2yfJi0lrPaIT652od8rqaIHZDlCIWtHEjO8TVdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKJCRA9TVsSAnZWagAAcEkP/3p4uMDsamJ120kqdrVX\nYUKcZJdEIJ83tuQHN+r9DiJKpajAm/lvJCcSzG2UKjc543bMhPS2DzYSlbW9\nfKgwAv6PQ2X9F1q5xg3gucW4AKcSAK4DzB5Q7iRafh08QXqZGYKl1M2cOgDc\nJWpdaudk9V6Effw6oP8mEvEPpTPUq/9p5XKCDT1J0mnpCZB6caTBeRfcibMw\nQKCan+dsRg3UG1X1ETpjJazcFoRgmlwUA/HF1qEQiV4o5yaMbzES4ZV5D2Zs\nVbmbOFdUHaPLYoKNKWyoNsZg8qPtJdHCLqaZ1LnMwtZdjsiSzUF4MwmWx0So\n0OW51uAJ3Fhh27V/TcWGmj+4baB07eRrVr3BewBtHK0Ftkn0E3qjZPxeZlG8\nve/KzLfwA1bHcIJ8iiPrU0hmXAkWP71FuOxRseIe6OIsRBmvap3/AvQFrUdB\njYg1HnnkbdnQA0dnwC/p2xlgVRkbu7TJ8IQSi74Wy6jKXukTbSgtVqL2z/YP\ngt0olLdBPU812Q0pZCcJRYFCOj7lkZbW5HaN4/qxmk43WVIlbbP5thfJK3ay\nDgvhq0guk4u2fpgQbjqWDqdMRoW+LSfBHqKtpeIml0aGh/pQlOy6x7lpidPc\ngVnW2iZa4FXLXy7N72vbpUIMWbocN/OXTBZn7vIwHJspgZJB/03inTvIBJH7\n2eu9\r\n=0I3d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_3.1.0_1563832968853_0.8668652113302067","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/switch","version":"4.0.0-alpha.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b314d4ae4ecec5f4febb7b353185b1d387b41af","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-pqrUtUefmrEmNsvL25J9wjujQ66tE/WcCSrhV6PbJZRDadAUwEPCunQoUoHsNUL3XHyszRhm/FjB9QWqimioGA==","signatures":[{"sig":"MEYCIQCcih56eIt+EF9HaODqGZcxzThGeOG7nao6gQtulfYsGwIhAILG7H1BDuWVn9rMjdmmjHYGbUa22TksL6/93aZ5+t+2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4YCRA9TVsSAnZWagAARLYP/jD5uzPVkryiGFGv55ju\noDzMLjp5cFWary7F5n/62ll7g4fAHZxnqhj4RGyBJLd5vkxAz/xE8m0bwfAl\nCWAZFEs/tjT1vPuzVmqvVsm5npOLE9dEjVAeZCnJ4Y9SBXE8iNfHHfvVEwHp\n5n7pdwrwPmSTyZFzgujZlsYq9wqpvqlPru8cQ7ECxpAfmJ3b04vdBR75MCzF\nExQlYVB3bBCf1dffpNjz7+DrSFQxvM6MJMbBaSm+77kkXIP+O4wSM2FLE7UY\nFnaZRFEPVd/NgxD4+0uypIufRnKTV/6abdSbzqzHHtBCxP69wfZwWxUHAEIj\nF56kbyPAfTCW0SqwDKfZ8/A8nPDa5uXtNVsaeLzetTEeHQYVBFGjMkvuhdwM\n3kAI8iu2VaoxQSesVCvGr6bMG/29NIIaKKF17t2REr0+JWvDJsnhHw6sEhLc\nAbo6M0ZnwmxhgnCFrL0qlMFbd7IS+6jUI4eeAxkpEQlXwCdLgJObdCL0U51l\nn0YYAJ9NiuRMFhooX9ovumVF4IslOHDeMt+dzTg3PFT7pXy9Mij9xYcksKC7\nbN92cZtUEUjfV1kal8G/wU18UjtKK/v10McSiDng+lhytZeDdaXeoeIp0/Ba\nUkFoj2rpkqccos/fPRsvRXoXlJpoC3mFy+qz9tW/diyFabfxHaEaFA613QTG\n/9M5\r\n=pQj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-alpha.0","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/elevation":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-alpha.0_1565212183943_0.583523192696173","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/switch","version":"4.0.0-canary.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f3e5575c5415f9b98dadf402e285f5c14c9bc0e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.0.tgz","fileCount":31,"integrity":"sha512-t0bvhtY/e1AHbKgIVY6BmnMHbGwRsyEHeklAeHXYnK37I92ZaRu2gfZdm9Ail1bCuaIGbd2q6n3+WdqkKkYsVg==","signatures":[{"sig":"MEUCIQDU0T+Lzq7Oib/VhS1qWKaWcNTqvB6EIzM8wVhI6nZlTAIgZSsEWO76YA6W82WNlXbgaUFW2vqi7KnsWPsSCyJqm1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":368712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEtCRA9TVsSAnZWagAANvIP/3iy/u2+wdCYZNph6Rmq\nSSF31UkVGAJ0W6mM72wUo5A1Qi4FiVtOmbXACjfDlGJFh2/kJT6hol+PZ1WV\ndFZwzjAdQjr1LQChQ3STuv0smN98IEufJZHrm90oOkwuMjDCXqUHLTE9eRdg\nEQCzNKKJ8chuv4rt+q8RNconijjxjVPkmpIrxWDQoINIovftne7hWAnvbiTJ\n/oYOEDdrzIzmluH4vlDOd+fhbxkWcmlO1E4kMg2Z/Qq2to9EFHxXwMa4GcMO\nnHKOsmaJ/jtg2MIzkB7oMbo+SOm32jVgSvcycQTl7W3iO05JR0HxdmK3QyWM\nuDwfeiJySjxaGF/pAhka2xEWMJ30uwSe/wju4zubY43QGFYdVfyOLYL4qi1n\nImAfHt3RIi+H6NMMR4Uuaye36rj+PJGGfnrC17Jut4d1SisW2JEOGRFr4hrv\nLjaWJUO+CWibu8w2I5G+6nNbK0lanUfVi5YoLqCX/NMt6QXjHEKVVDZUFdow\n/p16jWooIC9yd36iNJTN3GnMctMu2YP+S/VPKATQ1pMHvUXjGmT5GL8UmCKc\nfx4KQbIu34A3Za5wb9J1AaSE5tPSGsGAN1gnMSKJLNA3bUCq0tw0Lc/2Kh7M\ns/az77PVNEhug5GjAq70+BOVqtBNr0QZj6vxqwQyVlKMGFKrIsN1SO5b7QQG\nrmhb\r\n=mXZL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.0","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/elevation":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.0_1567658284467_0.4494463169434655","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/switch","version":"4.0.0-canary.1","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"411d2a44484aabc3b82dcfd17bef227801247659","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.1.tgz","fileCount":31,"integrity":"sha512-dfflZiAOBVj9whwIKssNhUHYFv42HsrDsVUAR17Io/BhGqoTx0LPnaDCSoXgq6KWPE4U7yjwzNMIHlPhhZRiYg==","signatures":[{"sig":"MEUCIQDSwWB0Xe2IkerC0a66Qfm7D28HtKkgpH9kiwa0W0Xz1AIgO4VADiWwn10oxkBLJnGfCVMtqGA9Cb1+NmaS2laMgqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQtCRA9TVsSAnZWagAA7acP/1gVZcQimGlkgKp+OUmw\nVGkoGBZisC6+HQTDEbPD6jk+AhgAsS952Ce4olMcPIHNZr+rXhcywsVIFa+F\n/wnC9o6SZaXCOx1dMt5uCJHEKSEKSEK0lGyELNiWsDw44KlWd4zMDSzVCKbL\nV0u/jeuOv9JkCXG5bBcE81AG1jNwJs0gmgjE24rXICtxRli0cZg89Ux2Ike1\n/Gf+9VCgjdLWyjUCf8KrFwX/stw2elDyJ7BU99aeoAn62M2eXx7mxyp9ATAf\nfTqjd4dJOuOlTJRWw2MWixIVwK1jVHHh9V5+UdTO2RzritHHrbHPA4Zaz5wp\nV6aEp49WZ6tqqs/r4/5wx61NRLRPhLMoKDbuxUoviXPTskamdO/UcuLiAfGm\n18lwwUe6dtrr+M6IJpMFBYQXQkIkRXjsXL1OINzRcFpIjJZvz3wnQFjvmF0f\nq/lXdqfNcjdE4w0nbMArpQAEh6JcYoY/AvGgU8Yx0Zu/k0RrT5u/38kLefeg\nQ5wNP56XhDm3rA5L+IpLlq4928/+8+CbRMEbhQFnifa6Yy31Mo0iZNKWQS4C\nYsSXvGE1hy49lJ/KwQiPTKtsxDavChlMkI3sFd4PMdGdyaKys8TMbu8Y2i+y\nDvd9zCFTGtxex/YlzVabMZ7lLGDt7DijXS9jUa96Zx8BAY5u/JadPRp0FsQF\nQtu0\r\n=HVC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.1","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/elevation":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.1_1568060460389_0.5797905752881172","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/switch","version":"3.2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"003409a8eecfd2f9c9600bfb23e152bf12b7e518","tarball":"https://registry.npmjs.org/@material/switch/-/switch-3.2.0.tgz","fileCount":31,"integrity":"sha512-gECImbvf3HGpmc/Sj2Meq+z7/ri5jmD5rKOeUUeC6nZ77/HiGCRhmSD66rlS0SH5qUUj0mWSbE8ZVOJmVWySEQ==","signatures":[{"sig":"MEYCIQCPUCBwErq/rwGgRa7274oc+mKofxx3E/U6jHCx+hEjhwIhAIRlGaAKgnUpXj0JoJFHhHPxRv60Cxv0z/Zo5nT/vZhm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5rCRA9TVsSAnZWagAAAMEP/RDPUU3ZIFhRbyoSOVVg\nPVokbTdG0DipQZ75lDtm3sCbQb1lxXzcnJfam0aLEKKfmELAVWgOySuA/ijS\n591rCxnk8ui+6zueONVPKp34OmjwfvESvXtQoI4yMemlvc6gsCq5KPztsAnG\nuHJUiIxA/KC8d8u38e1sYn+cKROQqiu9w2cbqT70a+rFsYnYZIAwJry434bF\nWWhOjnbfeh3EvVXEW9K2+xj52pUuu+XTo12iX3dcIdw02Q7Vgfp8Yg9AYHws\nqDs+IQa7qILvKhJMrJ4tCFomvAp0AO6R6XZnThuce14Le5MyEUbXjcun+X6c\nV/POVoHAOHg3FS16rXsGlmGyiEm2SiGsnqRorAwJsszt0O3WWadGM8C7z6II\nxajG/eIm6grCwrjjQhabVaM0VUTJjfu8Jql1nDujJTvpHD8vCztSQi776PlU\n638PS+lk2peycjrc4XY0DmJXAbIyeqbUus6O7kyWeIN5jQvKLRQGXWC3kU7q\nKlFkoXopjCjMia+2BzkgV4Qo0PE3lH72Jgyzw9dlByTebefA9D2cKrQcTHmh\nwDtyUd00+2tvTpMhkpj4Azd+018CjNRhyuA1uyaejtDtIZIlmCPBqQusn2Xn\nJG9E66mqzT1aN3vjQAVrO3D/psHez9kPumz5oZy7PabHwcKlFT2v3MbAdAV6\nqrRJ\r\n=Cv22\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_3.2.0_1568325226918_0.418762161278341","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/switch","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d65026961475801d79f16c039328fd2111506689","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.79d881baf.0.tgz","fileCount":31,"integrity":"sha512-+6Zr+CM4V1FOZkwXWpDgQ4KSR5WCsZ5Lless/XBF9OmpUQi++pqX06dsWftpPRmn9iENTUsSRxzPp7adu4g69w==","signatures":[{"sig":"MEUCIBBTUcczg4EJv4aJdlkA3/2qYZePmx5B48aRu2g2yPDNAiEA9nf626YUZt16kGi67qyv8nx/k5tcmgaKcj0Q/s1zwfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev08CRA9TVsSAnZWagAAlb4P/2IDsMKZ0iULJwoSjBAx\nljLqbvvOTD+RsUQ8VHXvUqkgsD8x3Mcwc6ARPLcVwFm25Wq1747PmOzJk2uO\nfVkE1maKa6JTOML1lUcAK4r2K7siBPOUGqHs2i/r0MGvlF/rliyRh1K8yJHc\n0m53AdMPRTXgyWE21DY5pYTeA4/+4d05PCHeR9Q2AkobVXO3SklIt9DlFvlz\nizKCy+0BHNH9uwVs5qcZveEBMQufZQHfdq4klyOHmDGX05byWUjY9jgnpmu/\nqumZtwWUbPvGOm5TKhbqYM6oFMJDdh6Vc0Z808xwXl6VsouU1KC2VwTiEQXg\nXjrsO+8kRiMJskmAieT1+VNLrCjRZlXSXsWd4syUqqE0Pe0WjggLT2PbKygv\n3UT1flOOFtX2DVsSyVfKTx0AHP/dyv+pRs1w0KQOAgVjoSJsJfLYp2OL94j0\nqxaVusZlnff0us5Rzl37wknYR74rlzIrclybxjWd5AJA/FM5bgbULreudl4e\nSvQvI5H9oPU4lZB8t0A5xxBAdRa13eY8ifkZ86muhIrDfvEvHjtX453hFwnj\nV24UEtYnEGqeXIMfgrVM+lq3IUIacA6YjRYh6sibVFNLD/v/pv6NRudqATzO\n9v9aV0xaOYAM7OewLL18ihvE6yrnJ2l6wVGgOnC9P2MHCNa+pEMGqtMIGxYz\nvgwo\r\n=xFXy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.79d881baf.0","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/elevation":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.79d881baf.0_1568341308029_0.8256805950847497","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/switch","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29a0fc0c98f78c5771df9b80d9b1bfb270e4fff5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.e851d4f40.0.tgz","fileCount":31,"integrity":"sha512-l8uROVIJEhInlxbQr/7FYsK+vWkvz6yCSgax4zqlsa8FqTkjE8M1+mJDrmPIDZJnt5tUTbWkQfg2ck89syzTbw==","signatures":[{"sig":"MEYCIQC6OlmryoLRy9jZNsgxdIJkWwOKLjbTdrQV/cDtGuSjswIhAJ7NhP09zi5zuPbrCsA9dBWQs3lutEFiCfiMJUF3pWMq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYHCRA9TVsSAnZWagAAPEsP/RPKEbivYcJKEvo//oNt\ncmhnEIeNgFwhVfzWHPJ4sfp4xWs145W04mzDX5LY/JZwrqoGbcQLJTH4Bt6K\nuGuPf7neV806i5SyKaDHLwFl+C7I1RACBNSZlgA5knntLSnaBZkjXv9pLq91\nHUJ5L/Ctr2AbZiH1/jic3ldhOpR05dPho2sB0836E3Q0iCl5sMMrCbU3lfby\nSC5vW/jmMwOKt70Kvp5IPhE5hOv5+iuKF5YSdwwyISRv+9JwQFbrDIgaDucp\nWZoRXKyVr0dRsIX4MM63w7y4jC/tSdwLhg+ErxhUTSqOrSTJ/mYtxno5PLb2\n2fBgsSgR7V0efVZFxYBkVEJNGYPnt0AuLdlar0q7/1xDsIN87JWF6nXPQUtL\n/Yd3YUrVQV5TJIYEhyJd8FHnRgNdyPXbp2Qa+0JzsrUzwyDYpKQ57xaDAsrt\nBU5jBqxVm83v2uv0y6hTpitVsMug0TBdYvZ9aIGa5R4epw2b1/wMg6QjDlcW\neG760izvQIhLYE+PQ5qeOwOi7Vqt/zeuU6zKSfoDh5T92BpgPOIfEJufmB5l\ndC3ZZbm4UI+Ha6wq5tPUXKaTUA5v+9+BOh4PX4iZzTyEFib2icTvokxSOILP\nTrza5/XxXTV/Vwy0clo/gmpCp0G3KTmuirEje7PLUfRKp5XFX1r8M1X0J9aG\nL9wY\r\n=Bnom\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.e851d4f40.0","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/elevation":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.e851d4f40.0_1568347654907_0.4987002483052123","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/switch","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"358982c30414f369a77cabc6017fd13b55b61520","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.905884690.0.tgz","fileCount":31,"integrity":"sha512-b7B634ntHDNGFdxNqXY1pFk31F9en4OmPwLgbwherUqamQQn6onuIacnI6K1+KaJUWYHKZDoXc0HdBFlfY2ysg==","signatures":[{"sig":"MEUCIQD9RiYojtaI8KDstx6UplIh+ifXmBtTpOOawuq21p0qfQIgG6B81O8ujwYWGiB8roHpLRNEMLPqrEMijlbNydLkHC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9GCRA9TVsSAnZWagAAHt4P/1umDgBNk62b1u2LAtFi\nKL3MEJVO6UTsSwhdNHJsR/n785JzwzU3mcyFKiyaguerlHyAWJYJKWiw98xQ\ny+qWxuwCivrWDhY2Jv9C9qlO1gjsplEa+dJcBow5c6PT8GRzRIPHfbAQr1rb\nXeAL8FD8me79q9hr8VZ5i0wfvsgLOUesSlEUVZ4xg+XOBKg6lTI5J9SrQ20b\nBqcRhLGW0lzn1MOztJydKPB6KViUtXe0ny9Sl9pMHamnOWQHdicksw0ANLIH\nwu192TlQL59j58nW1KEddjhFJqkZ7Jr7kBL4zv/F0nTkKRbTLGJJrjxfHkmC\nC7R86d443tJS+8irFTLPnyuZ/Ge/sL6hVT1VmgF6/8chzPmzRrOhZi9LQHop\nDf9etD/UwX+XZycY7hDUx44AOo22gU5WaVDiwxA9iPDwDSlbmI7s5hRwrpvT\n489mKJiWXulVl8lDOb9dhm/khowZLfk9Cmhjp9ZFGTu6Gz9M+d0NYj1Q8ibb\nZyowXs+BR22KLxLO+t7hDobyWwdF32y7hByO0mdUqbIW6xW0h7elu1xYjCQe\nDMmB0dDPN+REv+gDdfbRIGBz+GAla4AoiWMsOVKQZDibHEDTiR0S+DohszqT\nQDN2zDYM8EFaPE+OSn0a6a8Nb/+q3mIh0OR04TSgkn/l+GSHScITA+E/jHrq\nxlnI\r\n=GvFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.905884690.0","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/elevation":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.905884690.0_1568677701929_0.5829991169426954","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/switch","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f41b7136dcab0634058199d97c1807da563723f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.199534d61.0.tgz","fileCount":31,"integrity":"sha512-Z3FR08Z225oWKmpbfGI48HuIfaYH6pEbE2IaMpa4L2KZjUAFFScIAnO9Shp9Ouc5zZaXycHz+9I2zo41MvNi4A==","signatures":[{"sig":"MEQCICZr4lPOKaYF6DEvHlKWDlla1CF0ym8H/PlUy2aKGxsIAiAlElCisQQfT+KGAgMM0S1j04YRdSIOyjsl3FepRKtM5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu/CRA9TVsSAnZWagAAPBwQAKQR0JpaHu4SlkkrsS20\nzyLe9ldPW4G5yGnckn4UInhpPFvgV63bhXHD91riz8QMGIX6+Us8VLhdNb7D\nixBCklmI7hMbyMCd9C7WSMrScpab+PzMWLy27+Mpd5nIrh3Prm+AiAbOUXiK\nh3Ds0jTmCSOV3NPU5u4pHFTlglIN8Vw47QHFU3m3/r2XQ1TLRJNPScJSmR3+\nBWkj8g/oCbZ/eL/d53FShv/6fg8AqfbAYMKZ9q2Wrw2vvxx2H42aU97neCN+\n6omJjMiMLok6aAEFwkOu5qmFayBXHZ1A5MbLxLC9QkMdgbrsPj9ByLBUV1Ak\ndOkpK8kPAaMBVAjpvT/4o/DRc3r82+iEPyRGKtL5BwSbXXj5SIdELye2d7/l\nPQAF1GnNL6nBpspcT3jSVPztpniINeqwwiTOpyXu3hhfnqC35/tGtWq+ui7l\ndhWLljEWjGDB3JpnyW8NklByEAbleWJNopyzF+/O82lWtaVYEfGsm17Bz8bj\nxizpY4Jpkr94mGdS2ZjkJSAN+N0OtOz6l6wr6MMgIEhgwkFBWcLT4BxCkr2l\nfr3kTAt2moobKqO8UU3BHm1ey9Ib6+QZwqX82/DJWxzD6A8LjO+twrs5iqt0\nXC1wfWK8FH35YNHV5EftKUZinGQoWow59O+M/6E0eCWPo9BvDr5LY10UBAaW\n0zcp\r\n=b235\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.199534d61.0","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/elevation":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.199534d61.0_1569610686623_0.2821532793999535","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/switch","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"931b1133f623e90a014875726544c3cf9d4e1a21","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":31,"integrity":"sha512-jLaWlXvF77f+UDQrJrtptgEwb1x0h+lDTJFxCN0X7Y423mnI3iNxgWbTEM4elADve/A5SodxR4drEE02/Gr+3A==","signatures":[{"sig":"MEUCIQDV1rCJNui6y43raa2VapHibKxX2ZjJd8GXf14WJmtREQIgNmnK7PuGN5XH2tTxo1IqNyU07btJ5CANwO1i9Qy31Qw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaYCRA9TVsSAnZWagAAJ8UP/jSh09gvPHw1N6mCEYe/\niuqOr1BntoRYrfwh0Lc5XOqAbFYdfxh1sy0I8QI+mD44kezdjRjJy8EkdMv9\nO1pVaWyQ6XjKLqGjgrL9ybNWNLfgiGvBZ5vDXbJuAS1+5j72k52YkqrGC1dm\nbFyXkoaT9rEpOEw37Ospjc8DJMqsZmZyxqwy7MCSaQSRE9SIljDSJS/fisKc\npHW58/uubBdBL6wbTMB4taYz2TywSOXdZrHRiKvEXr72Kagr6nwlMYMNr/d+\npwhcJIQfodS1PW2eTZ8CGnBXM+oLiOAOYyRXUgVCvp4Q/jnFPQtGRDouA7S8\nigzaOScWOCgd4lnOqM8d70oc6fFShqNWdAsDLWSyHdw84RAi0SL1P4FG2KvK\nkzyDU82nYOruxVfYBEVubqhK9wqd1xK65SASDNlDqfe3YvR5eUL8sO933I7V\nIIhQt56JM9F1QReA6zYa7J9P7ncSj4zxlmQZYLfu5THsKmS4//lwl7cCuOIa\nqOAuaNMxTtS/3cHvQeXW6mat8t0o/ylGX5P0bgW2zDbZDLO2lNcNz23ZJv4g\nb+oeX6UTovpvonEi96KkDK6GNWyj2appfL9nJTGdU4leZNNrdF2vr0awdnKl\nW9OCWhfCf+dKfvJb2RloYwQiyc8Nbg4wnS2ATEY2fpDoyc11IPI42DZiRO1n\nJ/tY\r\n=GKA2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.22d7ad2fb.0","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/elevation":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.22d7ad2fb.0_1571165847726_0.1872796180181462","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/switch","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2e6bde4b89cd63153d868ca62e2cdc5f1033b06","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.735147131.0.tgz","fileCount":31,"integrity":"sha512-+fhjgbykY0b4k3iWjh6ltybn8/udfjtON8HutflM81sZNHAdSkHA+QBpizyjaU9qwtCFXw3RP0Pu6hwcV3QzPA==","signatures":[{"sig":"MEUCIQCL5hitJ50XYUFlqm5ZjaBg5g4RO8tNosi/oXjYY5mvNQIgTOA8cW8xyUlEF5DSoJtRQvs4RVhM6FpzRKzOrfM/w2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnErCRA9TVsSAnZWagAAQxAQAKMkMWBgnUT21kyrzcR4\nwJuk/BngZiHGEzx0SXDa+meb6ZA1S+NkIMRHF27R5SuqfxS0JzviQPeOrPQ7\n65Yn69kVwyc3VfGaTWqsKaofzcVOuA7eq/nhfhh1Qmul78j0S0fhwXakHgdO\nRkEsiyClRaPTLJfrUFPfTOA9+QOpADT1tWQBhIKO52D2DSaBWpuNztNo3Wo4\nlcoZqWpYONrojYgZEWy/RNeVKOfXif8x3yeD1qDx0nO4oH8h784RI2pQle3i\n9pWiyBrJtDoxfgHCwMJprBekMqEMf9OBFofIODQRRW4P4RBH56kcOe+o+WfD\nUqChHCqz9pPpwgqk3v+eS2UEvfYANSLR10cwxs8auxyqx2HTkNSpa9AkiYrC\nCmZK1CjVTXHLjM3gKEMLjAs4DbOdC4jDloHwJ/8pM9B1v5mf+Y8OZZzVhnPE\nRww2jDiYErXkufES+L0WGYyqm2galEOXPB2LyBdlfoz4XHLkIyUxo7RCA0sN\nJU2+cLSQu/Tj5jyz3jaKNyyn9c3xRHBT4xDIKoloqVHtr4MOOxKjwAmtumeb\nA64cz/K0ObntjVhi0Gy36neKJc5Afgok7rfGvq7YmZuq8Zkrk3lqn5dv3IuS\n4kxX0i1l+DSUo/l1CS6fBXu9Sg12crgdC/JnB6VERoMU0NuM96YODS5AWwMF\nNRJo\r\n=Wo87\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.735147131.0","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/elevation":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.735147131.0_1571189034847_0.8038900244530576","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/switch","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d9525f24509454ca91b418db7fc652a79b12fdf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.062ade5c0.0.tgz","fileCount":31,"integrity":"sha512-Tt2XXJM3uENPYt7EUI3eIfiGQhDwLq9RPHtGYkqeamK7kZpQFeyiekAk9BwnRlGF8F345pPKkdrzDO3oOWcnow==","signatures":[{"sig":"MEQCICCzPPlvA8yg5rmI3/Xx/1yOi+9ouALhxBA/W9Jdl2YNAiBmQ83yWUlzNpTz58ND6wjVaPyZoqAH7aClsOSRA0MiGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71/CRA9TVsSAnZWagAAOXcQAKPEEbhyNmFQuq0AWWy7\ni1Kxtd3aBiB4C8039RiwAgSjOOn5Tg4f5TYaUM6A/ygU3YdDgP7rv3hYbtmC\n//acT3qx48Xc80EvU+599dx/fdZY6rGDeiYXMzXvdyGgYO0Nhk5cS27rjN+4\nI+TJFo9oIfldChIAtHrBSurD5G9A3uzZ5NnNUYffhLApMJ4YYZEbhB9a/eVx\n0xe9ww3aZgORdRRRocgtNwdrzGINHPkDTIyCSa6hQbzMOM4Q8Hq48pMzOpvh\nsMcmv4CsgC0sS2tmH31T3eH+FRS3L6x/93juXC4d6cEfaM45FXpoYIRwZhax\nSdrq7GgDqr2PfvsPweJrffneXYTqKvFGNVKKxvxV5Pe/KWg1IOUCERAfUp+f\nMEYDJ3NIGq09A8l4KmPeoj7cA7LQuUO+SARz8mKXGAeJaA6rBS6+cHv0lr32\n2wAlzBrGSK8tEa1kxXIJCGd497Oi1mbgxEJVNcodz3Dogq295siWAengplX2\nlH4InkpgF6AqCyMYndWKvZhhyWSmp2Rer+iLpg39GFdGeg1SHAByi0UzTiyU\ng9t79Vh/aPu54fqLjpzedRFRHfGVjr5fHuXREdJTQ3sjlvBOJ2DtAmdDNbXg\nTyrXquZYgL2ihEttrIcnZ4xPhwa60S6QgOBrntr47HW4WhJSm0VKMMQTjnE1\nKBQ7\r\n=6k86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.062ade5c0.0","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/elevation":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.062ade5c0.0_1571274110429_0.09339697844629513","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/switch","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3faa52462233f888c8c95cbe39c0854cb72602a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.774ad4f8.0.tgz","fileCount":31,"integrity":"sha512-wTsOFh4S3g9gl298Nl+XCewz8UogefjdpayVDs2zufVoLm7LmR7ZjywVa3IRNG1opdov3VNvA1tFMq0lEV+i6Q==","signatures":[{"sig":"MEUCIQD9Vp4zqUg+KFu1L4Irw+9cNQ7SLCvbEi080rAUUXV/DwIgON8FKDoBZTUzfNZxmnOb6q/VoxWioDzZgEeFIsBe5oQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+huCRA9TVsSAnZWagAAk7EP/ittEZZ5axatVvZFbymz\nY+mJIHDHQj1HCxx5Ew/2f/cs5sESphjyI+Gdmsr5Q8x8SD6Pcwu3SCYXPxQj\nEAD64obwao/k1xNvIBRPui3XGyz1UQkEoh1PmjwEdDQkkcOtzJrfWCaw3vPD\nE7V8LzzIaHs7fpHzvwC9MFZskwzw8RLigfxKE3mfvgqstWUkBJEFqLYB5uD5\nJdYU3Z1QAzLsLIOKFY63FwSyWV9l4bM0WFxBIfCzMdQGw64WaxF/StS49etf\ntglux9TZHwRVM3EKSqKRtwhPl/bHaqOOW8urGiAqgJOleSJEpRkLaRYnYpGo\nLbqZ6xZQTPd5ThSFz5xYMinbaxifRAprUlR/6FhEqWqaDLhhDbA0UYXksX9c\n5IUykz3fZYJBFIfbpqTvzX6GzQ45+7qwFUXIE4IWFMmr6XyiRAZlmzhAf6RF\n+5u+/tm8Lxq2scEYTvYJLBwU6YSEhzTnpHrMx45SZx341ZHinxlJuVQd+ndI\nlyDkhuzS0fK5ZvTi/JMKto7DTJ6POV1ltn52nEFY4rg219b82ytiKYKx5JGr\nZoMxYXPdzpmnwpndeZDauhL5YAaeARh7U8B9LW/mTjuPRnTBvielkvJlrN2I\njI62S7u+5TqlslzI6bwetGSE22FOPIqw79lUVro9m38seO5Bn6AKMODa1Grj\ngxZ/\r\n=HGTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.774ad4f8.0","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/elevation":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.774ad4f8.0_1571285101430_0.5129811119691488","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/switch","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75ea274a78377b7d70ae7755df6ed05413f18427","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.5916d18c.0.tgz","fileCount":31,"integrity":"sha512-f3WXia77uOpgMZPqWl5cHumw1WlGWA+SSeJnhRMjL21hW01D3pMe0zN5Jq9DlKIBsznjB6P9Q79elVNJsnn4tQ==","signatures":[{"sig":"MEUCIHfvQKpsgxMb0n31DcQw6cgqYa2mZhBqOp8CFLO6n+rsAiEAyxNqC3olwAipsykvlZJ5mtuVrTR21GcWkjwSnXvDbMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvlCRA9TVsSAnZWagAAwZcQAJn7xbS3Sxm2G39CEjjG\nSkKFUcNH3VQfm7/qgAce70fLHWYsqXjeOJe9G6F4ijDODAlYBRLIZ9OxqgNA\nwRiIxIrTY8oQTnczc6W4gC+r++S4qCKLYPCERzwYP+y8UVMJmXwADbIOGF27\n6bN2sQYjlQ/F7Z/7R4Bo8vOUAH1sqvIF8AzeZhPlU8dXuiACeOkf0iMTi2J+\n25OuLJyNZ2A8y6alB6kgHQcyVrsqy4iUyvvrn9aZTNSRrtgRQqovGYHFByPG\n++z3+ONJOHQuqO6O9Od6Rmh/CG/L6AhMdxCG3cbTvYgfKd5ZiY2Ua+USGynL\ncO3KnEokSrSskr314uJn/pheltdQNHiTq/f5U1YOZgII186IqJBPtVv7Qqq1\nj1ovmsHPOV57m8NnVMdpstX/37YPUUxbgeWC3SsluVgNyHOEwqSxQoiFkPVk\ntN1zIy+uHM/nIkvBOSmE9SRJIFpd6756qjXRHUQ6f5blyWPNOOP4iB/+4ozN\n5UwPbarhz0FL4hDzIRVsjuWUeV/bsN/3wUfBgfbRudjVFkIdOANhEL++zZnJ\nNg3JI2YrgsK3Kq6SuQiaU4pSzxhVWKlz2kIzLzAE/gHRkStyFuX+YIrzuNZc\nac73xI2w1hHvVqm9atY8AHa6GQ4YoV9io5NQ+OhAYhr/X7DAXTciLFfsVoiB\nQLW8\r\n=eJK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.5916d18c.0","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/elevation":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.5916d18c.0_1571429348492_0.7622665950489609","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/switch","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0baba7036dd273ff90b8b7ca38d45bc33403706","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.d4141c95.0.tgz","fileCount":31,"integrity":"sha512-AOta5/RzKUk3ES84YmjmIRjwmUZySuo3BCCFDwXQW+1S+OyhwoLdw7d4329BksHGAU1t31bkJxFwrQiWsmOlcQ==","signatures":[{"sig":"MEUCIAGpb/26LajwLjcKyAkxM8veesStw2macT7/3PX8sKG3AiEAufN1VOejN0RevrVXk4tZMaFb2rWysPY/BkSVUK+MBA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCiCRA9TVsSAnZWagAA+hAP/0YYD6Q//Y8u6ODF1P+u\naUL1YVNYSiNvlZ4VTqSH66E7YAPGfXyQ+znW805FwR/YKyPZYTYtTGsF8QzY\nvbceMNvuzFLihRlxadrCv59N6KUnRrxH3Ii26UDaKfkewb3xXSHKFYMCDGyq\npE0pPc8FE0ruOpiLpeGTAdJ7MigTePmE7gWQ5L8aw5Df+KT4PnaYcM6C0UPY\n3MWwgH512B2BEyh7yDCSTYmn/zFc4wqNUi+CY4mKDIOVCEhHDW4Z3l4tC8JX\nOdOxjioTJeEoDCCObcbzt8E2hsttjpXsSA3pCKy7Je8/zAXTnwRQKtl6y+nb\nFbqzpH/apuViPHyF2Jn0RzoXele+/qAA4WYmFuYGkmB2ZGI8urWbKKipB1Jb\n8G9T5qANfGbo3In6LvKI4Jc6IBbQmDDA90Gr2JAcQpw+mxbCSyTs0Ddo9yga\nNbqveeujHlrA1jF4oBPgj4kyqBbfaRr40BMta45Q+sVhxweVffcJ+mnNKkrj\nNnVdjXrJmC1ASQ+Be02FTLY89cdnQeWZfEb9zT/cmTvvUXYiH1tbf4+XSKKI\n+FwpGJvr3i9xVbl6QhCgdmTlPsYV17nnuC2m/pGQHYTvjZqBfaj92G4CMpsB\nUJLc8oldlAmBtiEMqX0YNNFsM+aN7mQLB7xUIOR4I8Zzo5C+zHrvivFY0wOS\nHxCf\r\n=EEyC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.d4141c95.0","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/elevation":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.d4141c95.0_1571881122648_0.23187632426454496","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/switch","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb2e002447643c400f60eae6761566364a452f40","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.2b878b3e.0.tgz","fileCount":31,"integrity":"sha512-WiG8edV00G9EQMdh3XPOt+0jR/NcIHkpBYrz/RrgWgjhmXZLVmJq4JdkmtLX1Ht8tplOgsESPwiTN0tidkBDbQ==","signatures":[{"sig":"MEQCIF0FcJOFs+hZxI38h8IOhAWMV+5CK0d7b1gRUV3ksMUIAiB1LmXygxvwZJRLfdk6ZV7SSVygf0b8tia1izTpvnr+pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslnBCRA9TVsSAnZWagAA/TUQAIFoi8IZVB3IyAKP9pHh\nfgejt/HC8UxJfg2AnWlpwdCZRiJu5xJEw6UdHgSmfCcocAkwJqfMwveA426Q\ntaYvCX9CJfGYhRPlEo8U2hjoWTBfbittl40b74gEeYDweEhq+gD9sosm59V4\nkQzXYBdeyCDYqvxR9f0MiijIWnN7I2KjHUXeVRbA0wp4dTP9hDzwEzRQ7s51\neTqSvNetZxqxnRCDO+As+9QVDyblKcDiL05IYryvuAX+xtFO0svoIeyclE61\ne9c6NxbAqgX3udArObQ3IJtQBnszpAB+J4H68QQCjX7OO6bZpGOha9sS3bxk\nw7zb62TaXY7k/0Xr7NBpN8/2Qz1SGx77qK0xvf430SvsJxA627sYJRsd0dyq\nIOybxC7jOYCcHopDYoStTSu+/pdpWTpw2rfDSZjDvBJvDGTDA2bXsDAIHfhu\nVriuOL6FgFfO0T8nCZ3DIGiZhOht38iBoEhTs444DY+QJ+wxKSt07fsiLvvY\nwuMjJL4YRPRY1/XZgI+d8BW6Ib6zo6z+rvIaekZx//P78j/ZHM01BSIpeilu\nbzD3yX2ZXw5QF2rOrFBW4kO5RxHYQ+MOD+w3hJdci6+KOIJT2uzQOMTYWoK/\nuxqk+j1eTEcu0A9mIih2cIMZemAABNk884HN0qRzVtuWqPHh01mZc5QoULOp\nwoZ+\r\n=HJWm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.2b878b3e.0","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/elevation":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.2b878b3e.0_1571969473156_0.3240527450440145","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/switch","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9333530c3beb8f0390cc6e3decbe60943c02618","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.b06c0efe.0.tgz","fileCount":31,"integrity":"sha512-LVh/rFhREIsYNaHNRxR3Fl5hiSY1i315zGIWq3tNk6Hv22YrP5DqQ733ko4MR4+tG4mKa9DMo6W6fu0c0OYifw==","signatures":[{"sig":"MEQCIFc1pNW3SW+ukzJUTbKeQo8xw1n9YD1DwNKzLBUawmE0AiBr8ssr3JSKgeOyqyeCoSIPxiMBkbEqD4mr0xgVFVBLwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LmCRA9TVsSAnZWagAAsV0QAIIqWH2BGjj2is9580gp\nhxYxYUO/15/zdm8szfDXxGYq++KIRvjNZxLBmZrGoIvRmw7K1C7tXJ2DLRMk\nr/FCbRoYGK6RMPjljP0cZGXKYJjvT0zlAH8g2JXmVHT3bw90A4dxyopBmM3M\nTPua1hS30OGy3sC1afbx7VbgloEshOlcy2KMf8m2EZ9238RJ7meZjm8z/7if\npu8FgIQgkAEnTyAZOfMLYoMsixYFEDCMSUhFTD+ib9VONZnSZyDvxgWo6t7U\n+lRHjhin5Shww2nukgDeFc/ni/ecljEfXU0yra0I8VMIQoHoDroHB06cu2/t\nPRKRYFSk4Y0ndrcPpriK8hx8k13dR6RkvLbhXQ0AzjjkbfLuAk/sDXQWQfc7\nHkIf26W/YgKgXTHm+odOORtKyBNicR3lpzMvqXk6FZNGfQVCIuuKJXXTesrE\nUqpeuuLOHDqXIRNvwG93lk0jnTT5Fc2/FSZZrgTfgyQX19cWLsHkNyq+cCAn\nZX8HCtXsTWQhc8SbBqFfyi6Az5UBWlpiOqTXIko4l+lYvlisuAoKMGTTZFJz\nzPU5JWz771IFhBY/8BdxP7LkUTEbMKs+fwPAX/jymtCpQP5plcHOS8DTODxn\ndMo13vbST8zK/6FkRIN+woJHYvPK2+E8KGwbT0w2eJnYtotmqGeg4IPCvoND\nisQl\r\n=1bW7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b06c0efe.0","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/elevation":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.b06c0efe.0_1572053733892_0.3584587937074324","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/switch","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2139c8dbd24a5edb5c87f96fb36fea8dc6f19e6c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.01628efa.0.tgz","fileCount":31,"integrity":"sha512-pQzbvwbSOQq0lokYSR7gt5/+FUnBsyiShOCg3UvffT8NhDvSdVk4jXGyr7j/PakyaSX0Nof5++uL2Aj8Fcnbzw==","signatures":[{"sig":"MEQCICzd2SuQbM5y1PU+/xBgufyz6IA0AJKllVWH5Hp5jR52AiBJdUpZ4yzQSg81VA8uHWjuf6ub8ojF2whaUMhNeX8QPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HSCRA9TVsSAnZWagAAfZMP/A3A0zo+NpDApMyyaUO6\n6Ks9L+XZ0ig9A9iBFRkESoG0e2xEo49IeVyfzC8H7zT1H5k40zykj+rkxZY1\nDv3Bqs2mJwYoPY9Liq2GX0w7NF2WbHoXX4PXUGnyyr0KkQQF8qMTGDLCk5AV\nb/6n51BIgdQdcnXdd5wKA3mG9aYxOHfiBri9i+FDtfD4tKqta1DLa95GC09a\nI37BSoMrVvRBAQhjNQvmq59w4nNd3KzNK6Yp7WSO20H2NQ7i3sBKm36MMDS+\n7ffi0LvqoWTDwmxRxTxeI9x9+IUnQfHEbVRoSkITlnLa273EM9of9MrNFNB1\n6DhvJANLoikDs7JHqf8nauAxamWQ/nvYzwtNDu3he5btd9N1AOT2y+za6rRc\nzVCN8uMPE5AvCJ1A69su94kcWCI6fE0hdWzD5qzUVBWwSmrtvpqanasyRHRD\n6f7F0LKXP+1k8mrE6WIKcIR1GHbWZKIs9ebVqtkrzDvrHQXFJwEe12dPaV9M\nqI7ASxvMNM3lGNq9227vdL1hSzLjRuX6bMQVtFvu35v2sY98oHBFJmq2IgZw\n5koK19CXUdpsLFCcdHiBIaEujNDRJPK3RO+44xzwz8U8Ozd373PxbATQildw\ncGKTxPaMjMJ/4DPC/TgXju58o8CVxZBuQ1Cn7tSn5TKF6aF93vy+1iKeBLdx\n+5dS\r\n=Xt8o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.01628efa.0","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/elevation":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.01628efa.0_1572307410427_0.8117042039236908","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/switch","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0e6b30656546a44a484083914dbe5d6f75843d1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.b5c6d66b.0.tgz","fileCount":31,"integrity":"sha512-fpiuZVBMWRInbJTFWZmJThbBZp8QgL/8d85AZvrwn8rFKX+NH2HH8RVQsHMmUyJLpKgLufTfjWzNBMgVUQSGpw==","signatures":[{"sig":"MEUCIDbzzarXKGobepKAdXG5Ka+dItONw8933Y2oiLFEQpZOAiEAmXYaxXg08Fpmx6hOCNZCbzia+agbLXG0tjlXFGGXpug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH2BCRA9TVsSAnZWagAA9CAP/0dhCLOY31R+fVEmXKC/\noxvd3NVCVEahNotyZZsltHiyE8JPp84YFfiGa8ciDqrTqnV/PpdRqtBm5kJj\n+kkOkf7TxGpXaYP77EcABpGqcEs1sZReIA3l6yap5TDqyW/+1jv8Roke4ZQl\n3EyrCc8pKcr092B51+LUxODriYTrVH58z6Q72J4AZReTIvGz8FVvxkoHVs27\ntJNlCpjfkXrcOua7yNbCPQIx96uxV6n5U/ErKczEhD1btKDMLO7Y5oU9qw4X\nVjQGFlcf5gpMh30cK/KMBh3WR2crYOf3LInDDncr0j4loMKu0I5/jyu2FvZW\n5pXoLV/Cs22tiufNcob/ItjfR2DFtMcEWOQfQMBwIK4y9d0mZ5Fcby+nfp3T\nVZac73vWnRFUW3Z3DS69eNYsC8SK347i+APtjFdwrInfOUN1ogKLPy3Z0Vc+\nLMzZscz9DNvAAAySr2nW1Ajhi8F7bhZXTceiR/+qZfpDkgnr6vmGb3Bc3XkA\nFrXYMlm05byXduCuHd6Qz4Qeawf5UWktZ8F91xWIponAzGjahGa1ZtXkDscQ\nGsW4UstEc6nde1ZJUSd8GaNF3kP5wLSaEVdNy/Eh8/wGH2nIHjLLNweFkvUV\nhiJllsQwk94DClk+fKSeRBo7KEsC8Qzj2pgdwof50z3grFLSOrthabBWrEeh\n/MpN\r\n=R+aJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b5c6d66b.0","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/elevation":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.b5c6d66b.0_1572371841193_0.3511138176447768","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/switch","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac09e5feb09acf92a53ff19f8dc7ec763092ae7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.cdf858ea.0.tgz","fileCount":31,"integrity":"sha512-VABHAFlOuLkvhuZWo1nXlfmsMVB8jNfnSdihp3KDWpj7YIfd814YMo8uUV+TOZdZC9skJkTvqzhg0F9KhXmviA==","signatures":[{"sig":"MEYCIQDqNqYlh+sqCLHisBjBn2u4P7XXkiLlM/lmIjsR5FTqmAIhAK66pbbU81vJuHXRxKKLuvkrgv4pKpb+TxM7ICo6sZr+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJ3CRA9TVsSAnZWagAAErIP/AoO5s8NCCvliFiWp+Fp\nu0rrdZyzL9OU9gyQ/DUWi+f3QdGyNu5OOUvqPtInHpjA37mb2+gfwFm0i5Z5\nwA1A7ptkASlOcE6UeU5Nrr44DLRTTK2XDnhiROudbrxrGoj+/ZjxwdQwJvHB\nbmJb//vAalodyJWk3xcNhwJ72Uy351tq9R9FL03U7J2p24YfgWfToEfuxVEI\nr8mjIz8ULauXdSBtwv8cVfrt24uz7eIl4wAjnL0cNmqZBP5xGEbKb20EofqA\ns1vrcWF5Ba2h8Euoog/OYolcELZCmrN3lh7+OSxuluGCdj/CtZu3ZzD7Aymz\nzU5B5aG0ur2J1pnBI1w7wP87dskqP8eLZe8Pu1bxcQPJv8xpNfcwC34Go5ht\nt/SV9rMvjZIZ7pxqeHCP09K7emUk51AYBYuX8bSVnoMvL25sBp6wuLBuGUN8\nwbNS+UykmQcvVD42mW5QEUmMtowI0ZbI6mcMCvHA5AUrUZlDInVGj1Kvw6Zv\nrkEhGtU1FiihBPeYmG7fBgv0/hLNLc3yMrXYJI0lajetbF1tHRb8+I3zY9AQ\nTueML7MB5rWsR290fN39FP9TqGo95l1HHA2hYnQRiSGJlx5OJM47NqkvPLwh\nK6pfRLMDyATCyHrWHx2ngSAsJNtK2MwMzO+bpYpywlNM/Sd83SmEP7sBq9Jq\ni+BK\r\n=gMwx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.cdf858ea.0","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/elevation":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.cdf858ea.0_1572631159258_0.30292254228938464","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/switch","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c741b858b179527e842c54d71292b39058a1a47e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.719b57e1.0.tgz","fileCount":31,"integrity":"sha512-2t5CQUGE+pim/3JCUl6Nz79GqdjhwYWMYFM7WiAZrKr7VjCcQs3K4ACfOmbihX2+dwjIgjRWpv1KgSt7ivZyMg==","signatures":[{"sig":"MEUCIQCmSnDFpfoR36tcTsolacWA5koi8PjbTQZRLdy8EfinIAIgGKvz3Fit26LQf7JWfxHjUsQoSlH5fe0N87LHb05DYvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI85CRA9TVsSAnZWagAA8xsP/0Eft4m1LlUUEtwy+zNY\nReEIljHKvqkjuV3eYXuylUHJJXkc++cUygR+THUbaRtHEc4UdLdQkvBSyA8M\ns73IQC1MqZHwWoUf0jmtZrXWSZI5n10g+qVP/HgLVV1loAWA5mzBT7bJ85fr\nTrEomSroYP9ZOciZVpT9OoezHqTseEoe96OJw5dwxaggmeZye+NPTWPavrta\n7jD7GhPFURp8KTHGzG+cojL6DKIc0XXwsolAJD8LK+qmtqHk0AmBgErSHLPL\nlFZ0UhP32RFtxK/dlv4jmRsH1YTL7rQnKCPyaeRuuv776q90ngzqb1s4njHe\ndjgAeiv6vCk+1QFfhKJvOVolRcSCOpXC62tR8LOlqqj8wzvOeuFKQfGPF1GT\nJD7WRVsSPdx0vn8/2HwRmNGDzLEWF8eqFwqbAAnMiHjL9+ManlIboSJSBgLf\nOywTsJQ1G/3tf3MHHeoeCBwEnUcqGFzd72yLHoDElrwREIoVpcNnXTHQH7n9\n9PlXVblJ3Wgd+1KWTYWHO1qh3jW/X0yRIsmz5i6kLcQYRZOk4vTscuTOLDQs\nXnzETjsj63OkGcDKU/XDok24vel38MeqaYeB2sN9lfUf9XVAtlCMvJHKKI66\noICa7EkgI4gj5NoilCL28enRpIWcqbXR52cj9hVLS2I7MmrFdptJQsEcUmFZ\nzR5a\r\n=a6ks\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.719b57e1.0","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/elevation":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.719b57e1.0_1572638521506_0.5557545830694697","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/switch","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"830f7940ee0478cb25b1dd86ffee74e86f62c33b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.97cbbdc2.0.tgz","fileCount":31,"integrity":"sha512-tgD7Q9WifecwdVOYjI5Le9nIQ96miwMB+vMjdED6Dv28F9Nl/tb1NCvqLCfOvPY1cvXA2waJnQA1RbGZJQMjFw==","signatures":[{"sig":"MEUCIBfFOTRVEQFGVxJez5iE2ThkpeVZaW0NGbop9EPCC6V+AiEAyD3n7Vcypt3csfANssodSqnOX7KnecAz80PDTfU4HrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWyCRA9TVsSAnZWagAAFEIP/ih0OpYTTeZgpC71k/fl\nGCY0/V9jVViUH6kcLWdbfxV9mE0po9vZOUMMh6WDUA4G/7Ea3YhbwDlG5HYa\nUs1F7kjiFTHKq2MDCegIFXGIQtDaoCAMlrEIWjca2wOq7cUGkAioXLv8x1WO\nOIFscO/qMv8ddL48bc3+w8OcjvF4TH38IDdTsmGuFVMmmrMO8qrb2EGUPFxs\nXA1+Wdux7jy77nsNdwCO5j9a0Mk5oktcnn1eO8DVwlSjXqd8CmVb/eFWH0vo\n1mjbNmcpvhLiBasuchlJzvrcdfsSgSPkLlh2PWJUgMmzMujaBrQR/6I2IHTr\nL/ep64Duj/5wqV0i/zMkyyq/5mdwuca3CkpuC4jsWUP4O7XPfqOWxsCKbzVE\n2kR8552BGk5wfbnMOY9pwUXcL2S4rZwR6AytwrsRNzwKR+PDQDpzOhPY3dlV\neAUEjTgORCMdGaCK7Tjqel3O6U5RDPpcK/dqNs38u45tNsRH89Ve7W9mJFzK\nmwDuI4LTCIRE1xg/XrhGPSLaH8b7wugRxJ2aCFVxj0Rlb8pRsdQmht5sMrK6\nCSyWgXGTDMgPSAh4mgOr3uZh38RitmZuM/V5FEmRNrLzKTuNCkYcM6hmxd6D\naHC4t2hyEcgsh3GUQJvbi5lhs6kpr+rg2JDEUO8vojRqFad4qT2fuXlCkCFA\n1JZ3\r\n=mvtl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.97cbbdc2.0","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/elevation":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.97cbbdc2.0_1572640178392_0.9407183116050752","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/switch","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"502bb34b3de0e99744fa8c9be096b1f422058825","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.8e36b3b7.0.tgz","fileCount":31,"integrity":"sha512-Z5tLkFEmRmyeGs3eb6Kcb6sJtGbyuEJAOLfwhxjdyqjP3W2Rk+l4NCZmksElD2sPrjtKduPgFPWiD2sIYnybbg==","signatures":[{"sig":"MEQCIALL7OFZiVPmtQGUMuAvdFq2AFE1G5niB0SpIBDP2HV1AiAz8OKkpk0Bpp7S/9BzyziXSgI+++uLehUP3h3U2XY04Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1GCRA9TVsSAnZWagAAkugQAKFp3IvRjmePTYJrqViX\n7zSW4Rn/C4pbNgpjcAJRGHFe1t0CilJDkNXAK/i1I5ttU++JgNvNCKyzsYzT\nbop6dpOI2QZABL/a+tjb/lfjNngAU7Ja/40UsQamNCogjBs1vxZVu+x3qBLo\n0COKpqFk992/JytZM6HVpteoOCpaFs/njeT+18V3SF43VOuxOO5dA0MREonE\n3WbpWbxFf+BzPaeaMJ1iNXIUtYCA6LT3bE0YBsk68CAXIrNnQydKkEmlqhfa\nxPSradGmwvCeCwv5RJoIOea0MeouVZ2TA0WtvSLrBt89skwgh/noitNP3T90\nFnJP/4J6ucsIFCLrwZWWsXaM10FQ7O65ZNeJtq9GDGCqnuzf8zktyHhJcjG5\nYKAscDjgOgT7FpZS8MCxJJtBnnL9LNOZd5389iVo+hkYTAC/o6U9v5dQvJYL\nGWky3QXg1B3pqff9LCb9eMdvtel/GfrTKlClTZ+VEdZXIq/0KCOIJsvnanwT\nBUAK4iJBuIpoJQhVRBRSJqEi2xeEHByWdginiucNe5KPMqQ48W1Nz1XjbDje\nZCFNW7RaqTRbnlPi75NmnRBkOS1pjWcxvDpUCx5MHyZUGXI4gYm1avqDMzox\nFrHSlX/y83JCVYaZr3Ehyzw/GqY/0nEuh1LSKch0IcG7iSWiPR25U15aY8Cg\nX94s\r\n=LBhS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.8e36b3b7.0","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/elevation":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.8e36b3b7.0_1572642118104_0.4868189803410832","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/switch","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46b49a6935390fb6bd0c6522efb4da2676a5b39d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0-canary.62d3a09b.0.tgz","fileCount":31,"integrity":"sha512-MOKt32DGG2ntQ4EEdUdLBxMezR9TRR5zv5gHkd9ipM1L07F6TNiPq2KiFpexpuRsb/ef2tJiZQbpKzdXh9ykCA==","signatures":[{"sig":"MEQCIA9QktgB2DG0xxyB9ADSPQDOS/uVBFmna5J580cGYZn1AiAOB7IqtxBJSuJ9be1TyTD71aJEF6KUmNmmiIFcKcxmpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9zCRA9TVsSAnZWagAAJxIP/inS2a0LIisagNQWRgn7\nb+FX20T+++d4CW/63mxuaEwZm/FCNUfoab4V8yl5pg1HGfKb59B/nmy4+IHO\nJeAgh2va7QteKC9MyoPymTUveJJK2b+ELrAROWr3tlfFQBQVuXUyY73VIYZ9\nYWqXVn9Fe8pFECr+GBFBe51keh7sH0LMJNa85Q5x/lzGtnhWUnHM/cumxvu2\nA/Y+hHySW0pMbWSsVRmhGsnVqP6e20GQEKjp44awSIbYPTG4DlBN41/iUodJ\nbWynFtM1/e+2PXrqRbC7mAhVImQzlo8gBErungoM+kVwEgxO3+YpdgEVTf8p\nmrD4nujvEBmcx3+qHEsjgIXgk44qefswxeAuV07bDxWEGU9ljHSlPnG+mj6g\nKD+Gx8nxZ4jVfN+xOhEX+VyLu8HCB63eK7kFZSwkF8miaDojCXqsr2sY3+gk\npAM07+qzCQhcCnQSAuX7b/IHDC6wIEVCoGsNu+PMhrsSlEKvg57LWe026F+r\nvH4LAru76+AhX44xSCzz1sRQaZt6Y6Vfdcrdn5EWvcW0B7oTgGahhDcn54bu\nduCZMi+MH92ipFSi5iOo8hiR8bbQiD3Wsb6sbQ+p6G0hQMFTZh1HveHDnJwV\nHu65q5hgZo7E4krvAKBTF/BtTUC9DJqeFkiwZscP+ZH17DDpO7IBgZTiIQYS\n+y39\r\n=hMEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.62d3a09b.0","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/elevation":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0-canary.62d3a09b.0_1572642675049_0.308709199754744","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/switch","version":"4.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c5da30389f48f4f5245eb9f325cbc0e5f6bf2d4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-4.0.0.tgz","fileCount":31,"integrity":"sha512-90fvz0bYgeGQNBD14rdTOI/dvAPANwDQLIodOpE/r2bOZjge1K0rHSAm+TVwNCnrrM9HGmG8Ew0sIeEIj3jMMw==","signatures":[{"sig":"MEUCIQCeYpn1THifZx9CvmjkWGpJ2IZ4yx5WPdfcjJT2q/qsiwIgZFPld807irzD4O65RtKQC0DbK/fG/zUohcj8x9WcJeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbvCRA9TVsSAnZWagAAMRYP/R1n/EN+/6Z0bg8awoZc\nxMQD1Tfbe1c9nAIf3GFZ3YNxKDsX3Eo0iQ+VvFc83RvSQGt44lZkYqfHdWm+\nN0leViWNLWvFaEHOOXa3vrkaX+rHUyFhDJWvZSEolSksMZWynkPyzuueUCrN\nU8LfwWFTsA8YXYLUVYBWhqivRO+RfsVSKq5MuupTFi3FSiC1JGe1AbVfQWlI\n4JB6mKuNtBpZ7ezu3DQae9TbhoIAOXdznVwmG4fRcuCXbEIHXpdESGfl9b5F\nl1OyakKFgMZMTHMc+DT4EeJrxnFI+R3zQIFgj9p9u2GIQqQrQenKT03QhOC7\nrVEJFGSKvt1/dQ+E+brPxbMcym7p7B7Gf+P5RVdgEljU8SXK9lMghMmqS7Gr\nLaep5BFZb4GNNahk5PYHS5GJA09P3g2BxUGZOl7OZmA5ZV62rTh3X/MWqGvM\nJlmIZcZVuwLMT6Jc9O1G4L+NBAtVUaqzmjwN/uX4AtoZ/tykjz/IQ+46XKHk\n7365fru6QApNxMbxGNayVvdadhkoYBjNcwAKFqmn8oyDeJKnVGjT10idDtpo\ngb9b6k6eNh2CDPM7h2wZoSTvOAc8d39OAtpitK5FLZ/c6uWA9vvyiErPEZY7\nqW5HPVAtVhwA4xu5Ec4u9glpGTigDRTy3ZPJGo0RqU7q4wRSFk3KXrofdJb2\n2orO\r\n=t4it\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/animation":"^4.0.0","@material/elevation":"^4.0.0","@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_4.0.0_1572718318692_0.15412568659384607","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/switch","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfa54fea116417130b6489869fc092a155c280b9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b5eb51e94.0.tgz","fileCount":31,"integrity":"sha512-r5a8BiwrIkiB2Xqj5+HvMDsWNKBrYv7oU7EXRb60LnZXm+LnRS99GS772OvriKaEjF7wUlGrPoUaFDXNB4XRcw==","signatures":[{"sig":"MEUCIQCugMrUWIg8kOpYGLk1E5LF6wbefshzuz3+KwAtJRkZCAIgB+mI39CiNWalynez6oOQfEENyyo1gpupQg6aiJb+XRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOhCRA9TVsSAnZWagAAYkwQAJnnQs929sQ0VR9wlGQ6\no4AE8y1Oj/KlWN3YV9nsO/y9kl2RC4jERX5MKAYhN1IaMBUzehjo3RQhKWIx\nMJOT7n7R15QN4vmf2h11byiBZJNPALheYkYdyrv6GVE8SUNPU8sj+VphOknN\nCBdIUYZ1lCEMCp9PBss98VGhafRRMDcDVbb1g9wofRSLVT/kslYD9Kay0HzM\npqmbTRFZ+7QLgolqvzSAaksz5n42e44pqWk2NGvGfvzKZAroCFyEyfszk/kS\nrW800T8H/YQiLHyN5ZzX3YgMkwI+hCVblAPUA12nKqEAGPno2M+MhGS3pIp3\nTMXLMNHjfzn5W4Hq9mHxV/c5q/4quMcDUs9/cGjTNViOIAB5BiFfstrb4Q1c\nAuQaoSAULcYowzHkb26J/axgjvEth/VeZhNbW9NPdLq5eaABavbyoth0MTde\n9lXjYosc0uzpQIwk6c95rDVWNoXKQ2ANUj9Ww7608PJyWJ/ceu2dDNSOPOC2\n/50x2xDbYZu2J9MJo3obBr/hlQ7PH9i9sxiSKvnaYqUpkONKKeczUEua9gKP\nTY+rD1Ax4ytGPJvJMBqkp1T7uAShGc3d7p9XK2tEi6NXGlpmTPW5JE0CuuYL\nYv3wluexe0mnqz7nK8PewNn9pVI/k3VmPa7b2rLqrP3o2o/ZDOIUdZTfpkVD\nCB2M\r\n=DRT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b5eb51e94.0","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/elevation":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b5eb51e94.0_1573151648971_0.6762769104019244","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/switch","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f80fbf34f79679ba2b441b462a4ff9a70bbafb6a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.58500806e.0.tgz","fileCount":31,"integrity":"sha512-zkKIW/JJxNfRcWmPSRqcT4ME8VWeVl5gdvvpZKx7NwjryjjWug2fJszwjjr/8ZI/zLo3clGRcKEf2+o6VUzNVA==","signatures":[{"sig":"MEUCIEs56Dm2S1b9bTCbqlLAP6/+R/4drKBVoPe45WORjFavAiEAm12rd5WI5UJpVBE3+3sZx7vq4kkWT4vJd4DyNrdmklA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtsCRA9TVsSAnZWagAARyEP/jxChAmji32fnwnX1Jx2\nVaMgiOAa8EvZJwBeeYnK+kpMPAVRNiCnXatuHdPen2mqVCy+k69Lhrp/qpFL\nP3m/fjuNb+RSqTz0ZOHuCE4p6tgQTV4iTRz7D7faevZ2pgEqJDcMkPTIqYkN\nnfLAeF3hK3hWcFhzQyMQQB72Fl6ih7Feb2w9Jl+LqHO90GpN/O6sYXSFuZiP\nt596WC06oEMbkcqzGml1GdEffgz+Lp4B6TW2gYHA8PZwtFUwIN6B+ZQzT7Gb\nnGIlgZ3mbqC1p+Dx/NmQj4NJl0D8LK6pNq4P41YaGagov4PmCRPQxmB7ZxKI\nyYse95Crln1BDGux4S0rnKySF86ICHaF3xprnYZ3lyRvisFYAulXr+i+RbGl\nvKuj/kCiUQIhJUo1mTYHlMlxZpoTSQjI2dr/+AhN9yPoEejAcjQew1xreLOa\n89Q5TkhxRjU9enbwuBvNkTwKR3fPczXxS+UQzx0q/2E+3G/bCX1jS5Qs19C2\nmt4XpPBhj1oQnEeoJ7IuV+ACpdc900RWc7u4OTMO8T3gC0MOAdj/qlhk6iKD\nXiq7xBLoro1hBEGEREKEVWOZSO9gOIDwbKj+mxPxrMcHGfZFivaqLWvIbdAw\nFm2Nia0+2ZBBOdy5H2bv9pEYmIzruhVMMot8324UF6GG/e0y1iurCKdFjnvP\nd780\r\n=l2qb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.58500806e.0","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/elevation":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.58500806e.0_1573227372120_0.5214654266505356","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/switch","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7837e57050c7423110f087caef11ca0ab0bb8418","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.66299b646.0.tgz","fileCount":31,"integrity":"sha512-1tKWvYq5QoXxZnlcLNEhHVhAqFygCG7zst06K+Uubhf0E6e63Epan5ZGHFaRU7fXhoXq9Iev6DSoRpRMIdu8Dg==","signatures":[{"sig":"MEYCIQDDYFTgSm7YMxWlZWNw9PFUeCkXhZOAFg86lecMp1ud8QIhAPmnxKjl7ZrnM2t5Vht8+Wg4WyCOW/hdRQ+Yx14NLQEN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdFACRA9TVsSAnZWagAAJjIP/0GfTgNumddUcuAZBtkI\nkxhxfriXwRW9/yoQeW8g0DyNvMhf7R8qMtrZMaKIrvsZxwrT9EYvKvxPmbLa\nTbwHSTZVcr53gQbZlqRFpLHpWGu7MqFWcXDkvnXQ741tSzYAagryw3UW5Hd3\nK2wQ4LR3+3VhIXhsYNzcm6yNG3wmTAbrHVI4CpjoAHbP+pAGsPWZTLVa1dxa\n9x9z1luyCXdYuug+L3lJNO5U9unDID8pWbnK+vcC23BC0/8f8dkPAEogTbZx\nTYp5e5gg/X0kuFHR2LLQwoKGBuoZnQElF67JkLpWr/CUMLYqs7tfdVauu5L1\nVfPLxAM4cREZHdDxbUyX/ynAdLV0WGs/gDbNAA7odet5AsX+l87a73iZ7h3y\nD1Gq/6wd08mvoxl2ASF73zQqcxI13Sni4RZkLC9kqH87bONzMqPZUFGmHv+/\n+2i4skVMUIj/sKjQ7LcNEsdxmHovl8LclKu7GvMFDzZCiSzNf1LL0pbnqLxM\nlAW+64hAmBO/Q6dHkU37WEg1Y5hs1HnWnV4Ifc1m6mB6Lv9XLWXSydwvlWQL\no/Hx9GcXIOiuBA6MOTzVyrO8FZMRcTMfXBkL0PdMjZWaBczfld6/eF9T8d53\ns4fgCTIx6MjNQCm3ewYwBhL5/E+W2Uq1sbtC5mrsnEUK3C18Q8G7kJGhfT71\nqBwn\r\n=Rbrb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.66299b646.0","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/elevation":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.66299b646.0_1573245248346_0.6110999978678067","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/switch","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"804e3cc116491bcb83a184e4e088f118c08ddad3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.821871e04.0.tgz","fileCount":31,"integrity":"sha512-gCogAK5/XRgc8Ew6y/OG9chghP7xGStDvBjQ5SbtI5OZyVnD8cB7djp3bB/4Xkuu+x8MRe9gE2HOVH0ILiqAMA==","signatures":[{"sig":"MEQCIB35ElBsd0nsHa6st7t5LvKr9QVy5h7Tr7GW/aBFQWeiAiAXSu4hsIaxoSwkNrfNoXMTGjTI9931CG5mJXWEHU1O7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4JCRA9TVsSAnZWagAAIFwQAI7xVIm5TRiF+7K5V/jQ\nRhNXkFml83RRYgdG7txcC2RDkVgPocKqiCuoy6HDznppfueGmzlccT122Z7/\nwFmIm03T2PLS4Di1GTijr/WjfYRerVYChQIo2oM8p8scrTwN702jzd0UWUU7\nOvDrSVIvsUonkXUkfLMtYsIaSByWysfaNOkvGVulPYq5tjnbZKL8wAXs9UMi\nfN83SFjJK5zQgd+2DWC1cqR9Sq042LO3/8a1boHFLtvaoe5IDU8L5GMAwXql\ntnDf0+0LCbUnRLdPvbr+ZVCcA+Q2/m94ypWKuWpe3U25D+EzKLFiOoWXEYKr\n9YcdrHjzLFcgM+TFNcDqkVVvn2Ixx9thZfPvM/fyxu3d3kfSklNf+CcHJwBV\nxvweVZejkGvNmp0b3UXysht4JllR1lUUtdxKDQLUnpevKUNZDeTAa6Yh+Uhw\nuZUSlfU5myAuKN+wpBLYYnbeqBVDOKuWmiOBb0DdVeGHTX3PKBmYtFZhsYFR\nYDYGrUzy8/oduUUQbnnQVIaJkT+Akw0dhKW/EseOjq/2+uErvdWjiXWbnHe8\nuDStVlboqIxduCRWPcxKYV1B8tfuYGI1Jrw6zIACcIupAuw4rZ67p9NEpZUM\nqO4080kmwzrcBO6F3gyVXqbaZqWHCCIKvRaUIEyH1q3lJEQiqu4poHlcF1W9\nQrTz\r\n=prF8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.821871e04.0","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/elevation":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.821871e04.0_1573248521022_0.47685903126779094","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/switch","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95d529f34f3b9b3d4825f020151c6e12debf822f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.491fddc31.0.tgz","fileCount":31,"integrity":"sha512-5vMpIEizupH1+FfJM3IedEpqkSZy6QtOIeYA4hvqlMVMAU9wT7/vboDMveejfCK/L9RtIqTHZC7RZ8jMAIKMIQ==","signatures":[{"sig":"MEQCIDE1r1NmjGLnRNJXhM02J8TTAhyzCxhw7/xXz++Eba2RAiBJvE3RMEX44bSumLpK8K/jZUV8oHypn8KizDMDO0iriw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecsCRA9TVsSAnZWagAAZdYQAJfNKZrhdY3bEKH3nl8K\n/8rJzHtlY1ncnuMYvGDCh04ObkN3JLo46zT/4SYHn1ueSaI9ymI1WZJc/tWh\nA84bwOERB45pVURzZ9ng+Ma76hMDAJ62dFGHAZNYUOAaTMy0Q7g45pmd19z4\nfl30dc3FcUurlaTYXrhVn7/Kyl5HKjf2mNDCMyt5PrbGyaFeo6YwnCM8Xcja\nLemg2of55Fcne6nv3uPgRJB23K0OV118g7LFW9mghImTC7nvHUuP1kvFIHyH\nZMH1b8a68Vi3y7qtM4CTuyRBQjICDJMEtG34z0MIX5RBsW6UBWMndREvGK7u\nIUe5T3S8uYy2CyRvQJY/NegyXAQml0bQmqDJOCByoAC6rRxn9TZaKTkBGvBp\njZnApSxAOQpd+ICJ8k+n4aT4ddg0SsCwUjgnq5d9WhtJCBs4qTP3tQHPyLWK\nhWCEkYzHojRUpyhb2eu5E5wy2cQ9vqMclhriIp3Kdx0yOQmkMJADIixgHNol\nT50Mdcz9LmGSOBDtGyq3gLPf8Ac5Slp386knLzSe9LPQ7U0dALT6/wmjcl8n\nJ+YQUorLavEWNFbDjPoHQp6t8NrBnXtm96FdAmLO370wuEJbfdQeJFvmV2lX\n8M2LhJORB90pfm4gyWLySK0BGggNULKJKCrcSdtW8bTOrCffmAm7GqF5yPvD\nv94B\r\n=RfgN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.491fddc31.0","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/elevation":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.491fddc31.0_1573250860471_0.6217591836077241","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/switch","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b141bb600c5af952b2fc602c9085a1cd98b243b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b0cecf145.0.tgz","fileCount":31,"integrity":"sha512-PfVZp35jYujUgJf4DDQFpgzBJPt/BNiKWcxG3OtrAK1aLlKuS8bMahCND9lA5tpZSuNorDG3nbcbqN0KkQPI2g==","signatures":[{"sig":"MEQCIGlGzQGmwhAN54oe/Uv1/c+hnAiCQrW8HdGAjm5vkqPwAiAsNspcOLRZsJXSfOR7V+yYPnrhfRFrKbr7ZRH62ABtLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwioCRA9TVsSAnZWagAAmc4QAJt7G70YS+L6qH17R4vW\ncmnjciJpiTJ58SRCQIjiuwbHsveF3Q8q4I2ws0vUnINEqlM9PY74b45ciR9I\nLBTvG1/uGmt7jE1rC/wICmJ+uIrWDB8nLQn2nMhKOqkxgrQBqdBZamqNIVMw\nxnEeawyqGXkegnRcNi3NORtYNASNh711q8Svafoa/S+m017JETcLSKUBlK1Q\nqCWkd2sroNsuHhV9GEc2g6HBOrGcdTClQt1Fmb1SoKGb0Dn9lNHQke5KF5eS\n8iPgzcN5qsPI0MYfzFKidB8MSkMntNBLUz7SZpBS209+VGbyuPuLFtIitn51\n/Ky40bG5h8RovvUIBRBm8b/fEZ3F0JBxu623waZyqIdorWWk11DS2Moo7nuR\nBbORDiwlwWQsyzz0bTLs68WeDkMgkpBmqm5j5Ql+71QQ9KqJIO9sNmm8esQQ\nej2wuMIg+eK367f6dE8Fo/wp3zPTay+3c/Kqio5rtdzfJnn0boJhPbWgvO4d\nhVwsI44cNJzWWLenJcDfHAif38xBk9PrTV0koYymM0MOg8ejnGNG12kFj5hg\nuk9zGemlEDrc17G/kk7Vqc78HQaC1eMiIxq35ReY+s2W6oJdm02YO9D7pQaq\nb9evQcV1dZQH1FS/6dswSJSTWvaZ9dTCu3FlNR/CFSb2FqABM7xWHYMXRkew\nJnif\r\n=0bZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b0cecf145.0","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/elevation":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b0cecf145.0_1573324968190_0.12451103568177602","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/switch","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6994ecf428bdb99a719e218503473950f8c53ad3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":31,"integrity":"sha512-EkA6H4c5HWvO2SLpCJGP0CjhWY0vrbiefmpva00F4pwePBnJfI4/Wslyen8hIqLqeBQ+k3R28SCYufZ5soimMQ==","signatures":[{"sig":"MEYCIQCVqGH2ncrOC78iDdrJT3nY4+XaMbzC+VTS3q9OI3Rk0AIhAMNPw3q9C+FQZzoXH07CyKN9shFHDWnx2kwb567kcvOB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBjCRA9TVsSAnZWagAAgYQP/R+nJlgwti0fznlLojji\nb0vGBiNLnD9CLKDjIOxkEguw/M9sjQrsBzkkl9Oz24IQMkMlQBiV588v3xPs\nvHeIMPZ5Q869E9HXNvJ2uF4Q84QwVAlR4Rv8vX6dRW0r2S89ee8w5Dt7UtRn\ntz1yHlTIdq4/c2O92astp3QVT42J09JTqe/YjTnPk40jAN1Fni7p+2ifYCWi\nVrlDVoY9N/CPsPEaxjnxYYKiRIGrG0ARP+cfNzXaLFB67gdvnCCe7Cw+SwLE\nYn4MMx3N1Ak88mpNOLhFoUFgeZzBpVP/cNz2MF+qtseEpTyoE/OYkIb8jP5D\nWyBNe4cbWYhCSqhM3sAlS3cY9OZTm1jhwo5BKEV4IUvMHLPEzw8C1JrWdzyl\n6AFs3zzZ6p5N17IaU9drkSO9OjSw3JVsuI+pWyHR9sF0DERqTT3qGnNqxuoj\nk3C5bngvLDtZLlBt1ZHH7LceY1C7RnPJPq++qCOw7JbIhtg5/cO9wRR1Rc4a\nvHlCSmxemMYV6UKZKSrBCFY9aVmWJhnbxmgZquFzvJ8bMXys22ESbQnpe/ny\nJ+uuRxPaZPGVT4MUA1d2xqGw3YT3X5X4taMH9A74astDVJCRQPZemlQ2ygBZ\nsV8rDdV/XeErjzdl36HX2QqJnKw7FrNER3XqAI9w6zmfJPJqnyfMLVL2iYCF\nZ8Ny\r\n=grEJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.afe0dd1bc.0","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/elevation":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.afe0dd1bc.0_1573486691089_0.7185335900316361","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/switch","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b00d61493136fc179281aee3e5bec533eae68f9c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":31,"integrity":"sha512-0MU5iVxA078HI21AFN/xzQxS7sjBSaiRTNeR/GZdwQkyZXzuw+LPdVd6uxBfgu+bPol0uoUYbH0cud1mUdhZ3g==","signatures":[{"sig":"MEUCICor22mPJgC8F6Q6EGIxGEAKgm6/UZ9lsNmBDzkpImk5AiEAslIl1b07amln5xS/LHD6IWDw//lKvWG3UnSogslpP4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnRCRA9TVsSAnZWagAAATMP/1nd7NMM+/UQWbNjoGbb\nw4/SUqSrQE6x9zRiTsX9ANQKyiucjU65iPdtYD7MHvrJz42Ze3h4GlpiIXSH\nuIMppsiUixcMHvkQ/aD+GiTJw7/IfQUGgNC9JURoBfhd9G9iZQKwJP7y97Nf\nYdGxQJvykbgJs/zfj1r7DmjUf0TYj4gUY95gUAKg4GD6Mukcwzv1vXvDOrLo\nSm7vxsXlHh5HeaZJd+G4p2zIDbwvAfYobLyUAYSaJeAWVb0bSrZ2mrOOool0\n1X1G7+OO9xTq3bBmlThFaANzNM7UJ71JOVNwyKPLenfru8PtYA6K7EwkCbSn\nbyOdQF6JZb9OXSXV8Lb8erqyHJ05CzZy9evwFuCt2zE0GhfgffQXPhR0R8r1\nIaxR0S0lEBZNKQyVukaVSwYyOuzw2ksQgrV3TUmxDSjqZBhTBOlx5+8Mrako\n1cmli5gvG/hVueqpC8n0joxemwJ/eqKrklPKthaFsJibwfnsndKAzz3SB2Ca\nD/E+e9xtgrbW3QfWVUlohrC4wz3yww6mT1O547DsaV2ljn5atcRD9fZFBXar\ncD6W/zhFziKfFdIXKXfLuEPdRKYKcL84X8f8BwuFKf+G4SfZvttApuTR98cM\nMrdkxGRaFMA0ovXKMmblKeT01+7q494hhBh3W6xDqluOFu3pPpuxJlR6clvm\nPine\r\n=5l4L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4cfdc40b.0","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/elevation":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b4cfdc40b.0_1573747152822_0.6644575684610601","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/switch","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57c9e7d5adf2b5a01f0f250c750672da2c5143d9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.525989b5d.0.tgz","fileCount":31,"integrity":"sha512-kWmSpUz+TG2WNnDZD6pJs+zOQ4zNoyCZRlZFRYCbwC4qvXm+Dzvrr4zcjYc1qQFtSowt8ZKewV3tZFmBIGOxWQ==","signatures":[{"sig":"MEYCIQD4hJpSFj+35nuBx7pbKLEl0xShn9rXUTrAF3tq517VnQIhAJdyXK56mhXFYx5vytxpz90x/4iqqT4Veo6WYGEco5fo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePHCRA9TVsSAnZWagAAHZQP/1mmSUR6FuE7AmFLlHON\n2rI6WfuTBmdISR6kBr7u5WFnTNI1RvmQL2L4qx4BnGN1GNprUva4tbVry1Xj\nGT5s3ezcMcYXSl2rlqAVH0I/w/lcaRwhV2vLCyxRSunBWfpsrbD2J7j+nDLS\nk2OdJXqrYldWCD4EcpyNRtWifDYFDJQmye6/1n8vTW77OqG8B8D3LfFv++xJ\nQWJJ2QQDLXMqFVPuC/PwIzbwlC0G1uLnVXVFzXHnqpaFwUMvjYLzc2IBiJhM\nHAJeiNQRwTR34Ft1LV1Exqdkz4s+opo/EXpAQAYtsCXETIXxoMLDGaCKauMr\nbQb4XCvCZm2ytB5hM1OflORgP53aap0E8c78b1I7srvlWeHRmvdESr4he6xs\naM8mc+cGJjTMOL47rHXzF8ZNb44Wah8H2c5gSGUtVf5WltONOIdJpAf9JGsE\nNrsCy5IdTe+b/m+OXyV9TSqHpvseeiVbWzRj91KaMM11n/8HKA78ztdjXc4u\nMJ0/XK5SDyx34fU3TVaybJ7zWu1ZJyqES42qD7YisgKKnLbKkr+Yd/MmSHWR\naODqhczy2Qbv0fa00xX1mgb+QhGoM6rOhGwu+ugKdBq8LcCOdAizUnlAcacr\nRTmML58au5LcQdnBm9zViNy9Z6Nc0jQguvZX8x8sGe/yyuj6uijXhdRtCSvu\nCOY+\r\n=ctBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.525989b5d.0","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/elevation":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.525989b5d.0_1573774278651_0.23251081248998462","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/switch","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27e4c5cc69a6e0b2acf7212b0afdd5163de3c19a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7084b403a.0.tgz","fileCount":31,"integrity":"sha512-rHozkd2DvwrXzUgvguDaXI+99iWOfvH8bSQb4vTs0Tj2EheJvmvmeIOEKxKwoY3iBvSlIlpijaSEjQ2jgdm7cQ==","signatures":[{"sig":"MEUCIEOL5joW8EDu+ITjQMgF+26q7GDnZfWFSPkNFGvCqQlAAiEA2XUR+lR9sCaOp5ujLp2U+3XC8prtV+g57fKWhWZG5R8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfogCRA9TVsSAnZWagAAI+EQAJTJXRCD2SpkiDOsxF4f\n2uBwZ0I285vn2CoT5ML7hCJsYfmC84o1/wR4wrXc91jPob6S7xtwNr2fzas2\nhf/45+V/lSwhwWib/RrfEO5yEMRwWOPyMQ5B6YwghlHWyp7kj9M8CJ40B1rA\nzOaG85eso+shQX0h/TrxO0ZNrV+ZSmn4ImZyHUam4es1SYPBHBzwwDcWtVHC\n0Zz5GQ16hirJmWW6Vsh+4B5zRJDw+xVD8aa3Uvf+ghtJafWGctPqmIY2z3Ds\nUIIXG5huXimW/DPwkrI6pwkj4APZPm2EImNA9nUgy2qXjWY0HxNAEJ29oUmb\nbhTN6TpBqF/vn+swW7bGm6y+UYK3lfchPmL2ZiG+J9Ry8mCrNEs2tjTds0eK\nQcgQ14G7mDBK+kAYfugRpdD6uRVjdbtCA+AUqrPlAdBTUNZmJ5V8F9OXFl7R\nosvvmGcT7rLv59jKuyXyX+VH4S2HWJLwuiuUdM/OQ21wo4WdGkCJYJaLCgSW\nqRayobzzkekudOunylhXqeaMXnw+O/W2oc0lith/C59+srKERZz7Bqq1VuYs\nfJWSu2qS++vwjCZRW+jB+WdeUguTJYPrdBoHXz9XpkWbx90OuTRhC2ofqRfB\nmtvSngxEUEi0vyloPh5SotC96IKGt/ShjIoySiePvKzN5b1kX6c2mUmHLKC8\nFRbm\r\n=1AaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7084b403a.0","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/elevation":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7084b403a.0_1573779999651_0.29670810796959146","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/switch","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a067186a3feb58588cc82564c4d50bee8fa59fc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.3cbee6dac.0.tgz","fileCount":31,"integrity":"sha512-zaweNrvgsKbvypvNAqGNy+Cx5o4CEZcR+6HzBqMxOUwPm+TOea/AfBj34ugCq4aqcgwMpiQdH3fYKKv4xnSfrA==","signatures":[{"sig":"MEUCIFlggTbU+lNCwWT5or3/Cqvk5iNmtZNPTu8QVC48RcExAiEAtd7MYMnZxNnCPSS+pfz4P1RzTzrAl0tykFi3kJzNY6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyetCRA9TVsSAnZWagAA28kP+wQsfmlcQZwdfeyrGLbq\nuNzRAQNJEScSpPZo7HMDrPy4kshqKC+yK6FAW6HkVtwUqZOVTLoKZKEwK0B4\ninc5oYWf9Ybt862e1zY2cVe+GK5jK5YyfF8BiaDDfJfj2ecPrQJcoBiGcqIx\nLveQ+ikGuawingIKykqRQ9UroO2VN6QBQjK8gyc5HUEU6L1wQ27lNzHfjK9f\njTLzSBniL5b+A8W4UtvbFE+yAtD3UicZZI1nxmt/gJ3xqAWc/3qNdQLwzUq+\nEkVhOau7lVxtV2TSBGCV57mNLZcaGo7NEcebOQRM0b4fKcFLLaLeBGTFmNCv\n1n2jPGQoHGnluAKVs6yYCAPMPGViE60YYcufn7bO19mJ3lflCkuc5/YjBM4J\nymDVzn1LSBn6jRs/UEDwUOQ4Qif4Bgv+F+g7ePHxiMNNwGmsGZPuXFqWJAVa\nYQBD1pqMdbFWZs2sjk2uBfn8xsUCvY4p/IT0jgCASrR6ei/2CtMOEWoo1xzJ\ncy//ijHXhSNWCvIvyx52CWX4o1TTpv2RPB1d4VISZj+tWYU9H3p2bxJVnwBX\n1Si0CKClSEfY0xJU3t8IgXCQtFmVjTVj75mUFtEz296fshOLj5EZyA90loDp\nN1Rjg3yOVxSrKQrYWKg+r+Aiz4TI0KpbfT68mdO8F4ohijUulXYh8OxAWDeR\nXssb\r\n=34Nk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3cbee6dac.0","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/elevation":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.3cbee6dac.0_1573857197328_0.835748137344416","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/switch","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"421f91d574fa89d4d40d625a4da84d8dbb85abfe","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.591a6ad44.0.tgz","fileCount":31,"integrity":"sha512-AXy1xzy5d1B+41K8yyHy8ni4gsdBSXV4/5rSmI0+81iDFuM0kY+L2DWmBBnYxzX1R7cnISTlW6e/HlQf0XAxdQ==","signatures":[{"sig":"MEUCIBkc0ku7uCU4CTvIPwgHX5VqhzwBKus7GT3IhzOnQUDAAiEA3KSM82kIsE8qmcnpXIlJH1yhF8fUiMLALwo+EaJRb5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3uCRA9TVsSAnZWagAAaicQAJZzYF631ZqHvc4PjB5Y\nqoWI2crGFZVDvnymdJDqKOfirmBGxj28M4Z0gB1lKHsyErALJDthz+F+yBb0\nFHpn3PMjB1TwfBtePpUhDuy7BX6vA+95Gl9vf01I8jfpmppQ609FNBGJnHwa\nyByq6u2ReZK8tozncD+0d/mgBa3hPbcV4uRQdPnRdZyuOxcmphCbIF2wjaf1\nSSM8JLF7TB4OYPnpu+gZ9U9gFsduw3OArmSv7r8pJsiZSZrruGWvJZ7y3hfx\ndmNOS6hC00A8bwghKp9OWQ1OiHpErvWV8Un7HtTfviLAnFGZQm2rgpGfAp1f\nrlfM3uIP+WXPT3qJwnElxQzBoMqnV/RfTTWP59LY/e/SB8Zqe2eWT6T9cXkH\nCr+fYPd1xrI+G0xwqWyOLFB928mHJ0GulsiJd+A4QtJaIpy64GEq1J5uignr\n8cIQWjH/L/mDSmmRRpyE4+x1cWjW3OkmDl04wQzGlTcYTvgzAdBIzlFkmEVy\nStRe2HJKoiFZQHLaXSrzIuaTdRB0tkf4q9N2OWJw2afbdERo6TtAYkNkAA60\nq/n/Cp2wagxGm2+ofYnRyMYbdsUs8eSclsYw0snSMS7A8z+dNmMevOqK9cP0\ni2xkf6YRDZDhunbnZlJgDoiYSG64v5nGzzmoLVfmEexYWGzgR+mhzMCBNq+l\nA4mj\r\n=Fw6J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.591a6ad44.0","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/elevation":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.591a6ad44.0_1574120942092_0.634024562275529","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/switch","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7b47095269951f9ebb48e3fd77c57acee1ccf17","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.5729943ba.0.tgz","fileCount":31,"integrity":"sha512-/WgBStBoW7kf/wbWbBCdgj5WnuU5O6W/kh9UBridsQOqDexFKGRSxhDwEqtqVpnqYRmVhmucHJobtmMqFEo6YQ==","signatures":[{"sig":"MEQCIHonD51+1WLjhrj6hcQ97E/bU6hvRC7WvJhfPtMP0St7AiB60MCshtCbvroAAJmTXT9UwWZmTPuu6ig8BFnqIOepDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":382275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1Mz5CRA9TVsSAnZWagAAiWIP/R4Fvr0qkFoBWNd+D5z/\n0hUDHwP9izrnIMn8P+LtgBxWhrqVxl+C2Xt8TO9e3XZmRYBrXOXqbnmZCJOZ\nmlPE/NCj6idT4/O/4rI3LgV74b9AMxTwmSEiSK3MQgckjsBgucWX+FLXR0Jh\nm7Ij99VQ/h047Uy/YyX5/+5L/NFEAivWH3w0lIJC4YMkct5LwRBP/q4ew++F\nxAdj5yzjt7hpTcb7Xat2PAx/Yvy5oy7ceos3PntPYp+fgX4WWNDFEECE8oFx\nP/vcgdurvjInCws9WUscI9Itmz1KIt5akzydOK1ilO6mG0cGeQjj0oGN6jw+\n/raXi9KJOx1WKg/ps+3jTcIq3PeKm+yMCwYG3NECGb+B3yGSCZLto7wJRnJe\n41XIGN/9vUPBqSeT70r8ste3EMUFTg15G1YNg7LJzdU6URGa0o0Df8oFxzHP\ndHkTkBW5qfvTCjbpJg8HZQDvHU2KwT/lnuzH1/gk0/KbCL+bl1r1/PzPGtVE\nsmQXBVaidKs+NljRppVn42SboffNInHQ2GDirHU2+SnLhW/Ja0WJwhaPCHeN\n0aQom1MSjgwtQf28ga3XFyqBN/GwZCsJjc7W0k6UBIgBFBgxO32989iknuz9\nYaBJ6e7md168nl77IiyxKZD0caSkIxYM5303Gw0FIzuzyiAIftrl/AQ8oBcQ\nmShJ\r\n=97TJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5729943ba.0","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/elevation":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.5729943ba.0_1574227192263_0.9687031728501956","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/switch","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f5949e27c8a17f903501ddf9aecb4ceb9949a8c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.e89750dc7.0.tgz","fileCount":31,"integrity":"sha512-MMBjQvchcFa6bTbl78rE1+SYlf3iKVyKMf7TGqbQK1RSTYU3nIc3kqbrgGipSxVzLIJbMmjooxxxagazzZ8PKw==","signatures":[{"sig":"MEYCIQDr5Fv0L1GA1nqQdDx8FeRAO6COrSSPtPTmpvLaAHUs0AIhALM4R8AKTN1sQx+Zl0S12gUvZsA9LNr4ub6FlPiB0jD3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsJCRA9TVsSAnZWagAAq+8P/A1fzRYK5uqFmW7Xq03q\n1ZuUQ7H2hkLWp0Z7xibc2WExdwAt1xB935Ct2oi4x73oMLNgFUNJVRMUpZTi\nVNx1EWumIDo2w3DdCAxeljT+q8goeX9+ebJK5dX0kzMBe4IL09cvJCO3gnY4\nZQWsVmC19/AhOeupY7ZNWvM8gplklU5egXN/dgD2jHidZ/+S+SDpokmNtmqC\nB/8hbRfGX0OkAF5dYCuyKvgJhiTouUoJ7VFaApdXuf+euiaY2IG0XvyJfwpO\nRkHX6kMna64p/MQF8akqwjSKJlKBNMUJ1az1Vqtyq0BtDsNlPemA16naRpGS\nI+b5dK8pvNov8AFmfPZWfDhFdtsFQV0CO/iCFnHee7aMSHE3VhkkPVQ9R06S\na4PMbHIuV+HDyucHf/X83y8xSiHF/bKsKSZ+eckDMdb/Y4eY9D7Prn90g1VD\nTVx7t494MdLIf0FV8McoTID8atRNYoX/TGLFWn69dmSBpxkY1s5sDCGCLEnr\nj6LeIO6VDUZjVBCK0BTFn1vZkxvGMOFOQqPhPCkDfGRByU2B/WKqgItlRX2Y\nIfMXX9B6IXeJg/1lPE+IweyeNczX6Ov5tpcwKEf68n1IXSXCUt7gOc64ZvAC\nMa+hzeQyu4Rsz8cEnaMDvqehmk61pYgCqH6vABXDFOAHJ+7XImOd/wWvo5vN\nOkfE\r\n=9G69\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e89750dc7.0","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/elevation":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.e89750dc7.0_1574820617292_0.13672013382042625","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/switch","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fddc1b8c99be740e426e1a1b3e791d30e3250dd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.3e560b33a.0.tgz","fileCount":31,"integrity":"sha512-XiW29+WzOgVR8/klUqoUTpSsLi48xStjA50YC1mTOTbNr+GjLR1B6dzrNGAv+7EQibQVNgPyf8+vPK1uVPkMsQ==","signatures":[{"sig":"MEUCIQCLQL35GmO7qJZoYrfvDuDxdyAj2F3X+UQ+rJIXuOM+eQIgNeYrf6EP+41MD1ZEnA7MOi+FMcdVG9Nc2E2EAcDMY/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3ds4CRA9TVsSAnZWagAAOksP/1O0IIWzV0/qJfPazDmm\nOoW0qupI3nDvfzAE5d1dcYDCI07AFxu3DmkTEx4nocZsBqfkN9lHwqBaegLf\ne0zz1thuH8BEfux83NhvBp5XcZGc95Bf06s/6BHbNhOvQmKbZewN+TGPJUlj\n08R76ReIY43hvpSotIPJjRikibNPfiys9aWYq5rhwdZbVJhnxDWgB2EOQ49R\nwEoe2WoUkb6D6Qfr5SBOjQDHwhvYOcuQADgtJLndt/GB/ECM08s6tsG+SJPG\nPrsFqFn961Btpk2smzCJDM0hyr4nPwtpeaCsQDkd1pXxcjH5bVyBoDVPWg/U\nmFQqVViXl6RAzc7SMGhHl1HEG/nF+jBulCNGg/vj+JAiu6/PRKjpAfdADj/V\nl20A0tgeTVPsWSJjJgartZocw5GLGEUP0NY4Ai76S3zeHnT24rY7Q4vAtuNE\nbM1i4U9Vh1H8+xd0YNlXGpvtK2C0vLfgCo7RRFQjtAUoyO6Xy3ikATibP+f3\n1a+VjIQaXAc1WwqkepSafUdx0wTcl1OVMnttgV+feK/hEezRTGPU02rVcgLp\nzEpy0wcF32pRjgactKVPA4UP850QVgoOH4zvIP/qCpfX2mJC7yvXXEr0NdqY\n1oLR5eOO4jUuhSAt263gT9b6U78WjHOe5/5Agc6UQqgz+mpnvmVQGXgN6ltS\nDhPs\r\n=aWx4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e560b33a.0","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/elevation":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.3e560b33a.0_1574820664307_0.429582446392359","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/switch","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1172dfe08bf607488a0c2783e3c23cbf11d533ef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":31,"integrity":"sha512-V2zQjmVBKFy/moVWabx5vu2KEOIS9/g6slnhRX4oWIFgLOcixrd46XC/u632ZE9FwnBkfliv0+P4+AwGfc60Mg==","signatures":[{"sig":"MEUCIFIuB1sry3pZsCCZMtd7EnjE77UuGQ/Ta04mggeKK3iqAiEAyAVadGCyqfCnoIAg1lzdAwvtvwuzXWN+oW5ZClD5wlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtSCRA9TVsSAnZWagAABfQP/1OE65Fzka0tOVghcAvj\nMF2hm+ayOSyT1suhyI9/bg0lObWVrmwOkGXlZjP4IET4ZBLPKFB8nCBb9L+J\nzrF11OAZOB7/axiT1+Yf+IjezQYVFgx3Tv5q3owGZS5csbhoCL1XJ+x4z4B+\n+OfmXoPLdBBFZFt/JGQnqbW8cWO5LsVTXfdLpanb9Yv05OR5ukw++KkgbJ/B\nP/CWADb1POS9Y/dQDlR4z/DHNPcniL5wrjw3DtyCgwoPZqeU90TGw0jxqz2m\nBTsOyQS0ylHP/h0aT4A1wwTyfurFYG17DXw833lfC0Ng6Hf5cqqynfNYFUme\nzY+JkJRU0YffUHvwAvV/EsgUGlQbCfppXitrtptKCKyzYS50vthDqL2K6C68\nCVFnobbcn0+LKa1f2MIJW/7ijv3avLSo5kwrYqXmEEExVBaA2pPXks8ysHJ8\n65Zu68oVa8z3ulWHDlVvABImdNK78KCD9hZLRjogTZILSFSO8uveSBHTtLLe\nAb5QjuK6gwatb8RX0QuW8P27w/sKWXMIGBd5/m2eFaoVnTIZZoPyttdHZnzF\nThDeT5kWiTW0m/ckTflpf3AxVijB42XZOmo7z7vG6JAAQ5bz347jL/z79A0j\nVVpA4GlnXqWNVsWmODQd0i+uApFVnrioyQniz2CMM1XJFSeMfEmZAT6mS+Zd\nYf8i\r\n=cOlF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7fd17ce5e.0","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/elevation":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7fd17ce5e.0_1574820690492_0.46415807127969444","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/switch","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c8dbc602e188d825efbefae379472f0bae92a2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ec729683b.0.tgz","fileCount":31,"integrity":"sha512-lxkCuCd4FbmW6izYMeHsVhGhI4ljuDvxDZAq9wycnaesCQKokqS6eatonKAFAZgxPNqgPpNO1kPMqvf6lRIsvA==","signatures":[{"sig":"MEUCIQCG6WPQW0TjX/JIeWOKijN8t0w5q/eAGXsFhgtd9DumPwIgIxbYTibyfQIRiT7Rlbz6FTDmWjcmjTEKxnvcy4j+pjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3px5CRA9TVsSAnZWagAAnWEP/igROKLSVbZrX3qdoY6B\nIcS9mtdFq2+Fjws10EdDDzM2NoCeqpJSXwrMt4ehYGX2Bi/pvE0aOiEQDBlB\ng1TSLqbk0DgzbNx/sJm81TqAYzOmPHUlkolEYBZc+EFHnh4fA/VHQxpIVgev\nko/2OcOMEHTDlUPkgWFYPvzKv21UgfKzZoEXg6rLSjsnarTQDbueFsLweLlP\nFMQMADN/PChlqTUccu1prKXa/FJbslaAHyKU1E2ixPEO7Dsw5St79GLJjVvi\nncpWNBBbGLVoWNsaQgZLtshFJDoNCIXx1ycHKMElldSFjz6uF7W3vrRuL6Ps\nF4MUcJUoar77rorJXQmJRyNvwLaR7MqHTA6yS8rpFBxcJPLwyj8aplwiUr7x\nrhRUkE7yMauraGuZyr2AGcFn/7SqXAJu3INFbOFUHKXJ6c7jt/gm/8o12ADM\nMdsfydiucohGF0Ut+lAIKDdTnjfa7Wb5hpvNp0T5rVy7d4Y5RHpfFIIYqaPw\nnLmWITluepxunB9+D0etrT0zoEr6Hpt7Sq6ZfgnBcpLY7VTDgv0nigap7oJR\n7IaEbDVP0fYrnYgwtH3Zyicx0/F7O+8SgQqbpvoDOE09oKdmrf/ae48qe9Oz\nDqYxllgSrXV/cFLZswdEq6jfWlvlJUYQQUg+R7Lb8xSXZBMCnRVHKpNnWdmm\nPc9K\r\n=46VC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec729683b.0","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/elevation":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ec729683b.0_1574870137555_0.1236063716857374","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/switch","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eda2a624266206901d9ddbd94f013cffc88ee16a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":31,"integrity":"sha512-qzWLQcPERT+h8hIs85eoaJ7UKreWT0k3n/kSR1VMXlpYyYvAD6uBOutXZMRCbvgo2Laagd4FRj5qcoLYohm1TA==","signatures":[{"sig":"MEYCIQCU/4S8c4LOcof87IxugjWfRkzv/QXC6XDPB6YcS4F0MAIhAMX9EUV/PDEPSu8yxl/EF97uupS6r5Thh9uV7AeixkNg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3su6CRA9TVsSAnZWagAA7DcP/3yFWpo3zTcadjq0QGYF\nlDh/i23gMFCoudLJnaxUq3s5JDa7KIGybT30kDaYOrpCSx+OCZUFnHkd2lcC\nUGUjSD0HDiPZd8rsR18fYmeT0YOxTxz4CS5JfOwkVEAHoTOHaiW7qu2UiPS5\nOcv4SQVAv19DKqPg+JJYLyi8D/SEXF+5dZHnoIJUD32FcojZ65NUoIKXnBuq\nzlU6DvyKTtQbRXatlEta4X06nBn+b5Qq+EnRJnLbWc8fxC10CzqWanznskQl\nf3uBTRyUQR8gjSKVnVG/QJ7WhB/+CiWSCKyojSjIAF5mZWeObDxOiA/fLvBp\nbY+VdkxrW7ArLU0A31IdjEZDXlrTSOY0t2KXDz1OIPP94+BjL78F3m65kjst\ncdOSM103t0U1+qDmrPXAqIs6xXJZ5TjqYWe3WXA9aRwpvXGwcJy+TpCJz4SO\nNqUJ6TPc0bIXjS15Rdr1r336GUn5CAtqjtYmzz76zAnrcx3TbqW+U1442+7C\nT2w6U7sk441QScP58cyDtC1/BlyqSvukWUhwhBDdoV8fvtsBzpSj038bde4u\nuwgB+YrT3CtERXOaPOGqMNSCkCYOXhFh9nQO6b+wB39rGXJ19c+RCfIiuHnh\nrotfWJT6jeiIb0Ko+IWvhD3bLlYLcuBvCCBPlUMdjS5nhagpgU5BADrQoKle\nmJA2\r\n=5m0N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b8bc4a26e.0","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/elevation":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b8bc4a26e.0_1574882233827_0.4646414097693028","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/switch","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e1bd23b87bc03d7e28e5b46731d112a0e8f3d7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.f978109c3.0.tgz","fileCount":31,"integrity":"sha512-1wN6qymeMrzDp1bnZFUbUIBOWf8N8xMJuTWrkhLSYoKMiQg83/8UXZT+CTGiMidLAnhGT6XmiKlHtXXqEJ7HoQ==","signatures":[{"sig":"MEUCIQCbuy0mwvDIXkd8j5cjVNlceClyw+NmT/GoGhvMNDhPlwIgcOBaKkI4ZtmlTHXnAI5Z+pvOyqTn/GYzWphWOIxqPN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTvCRA9TVsSAnZWagAAxv0QAJfPN0kgCOOrHvfup7z1\np1pWj2AGJsm7k/sK6oMVg4wHf2O20XeZpaOfKl4okhW6FleDrNiuS2+r8Vp+\nakj0wH+4RRB48nc9Z/G5vmXxV8FLFEU+ogk0GLuhWuUkGpwpqNlFi44roM5L\na8VfJ6WkxBgMhcr+/C4yBl9mpvQ8An69FgU8sRc2G3wtAzCmUlZlMNzMZP5T\nhcimW9X8npPcRFL5UTeF8VQ6dmYoXRcmVvIodIU2rY/bGmVWzKEKS0hxXvHF\n2QJY1V67/xKWrqJGp9cn5tA3P7AWgxRNZy76hZmG/XIRHUmAVoLb63RHoNYv\n2KILo7/KtCt+40JLGHPBPANVicc8k60Iu+ZeElo10W36tBdNEyaMdeLiQtR8\ngist4UM4qEmcW17hAmedE9qaycrUm+eXPkBrhjJdvEBy9kFRKhZRyljPzhfJ\nCAFX3lXgXZLFx3H0c2qcqkFFh5R09RF6CfcKpjs4jXAkSqT9HhkvyOXjeFO6\n9O31STBa4o1rqHDXRlg1qF9abvqvvOE/UaphjIKMzuBCmKZnu30kfEQiQkSb\n1Kc6FFheGvdUtGtvqosYK5MYgPlZ7MiB84k+K6oCMLaK3Y8M4Cl2yEYpRk0+\nbpqQDjKF6PeMg14I8DV8FAvpcTLjwBntvuJAumILrvy7lcZ8+bzu3NYlt5kH\nRz1w\r\n=gHhm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f978109c3.0","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/elevation":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.f978109c3.0_1575306479011_0.09581300045002639","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/switch","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57d79210cb230274fedccfaf75049ae936f93322","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ad9dfe706.0.tgz","fileCount":31,"integrity":"sha512-6tGf9B2jrV/XMAiwHP1SLs3+VifeGP/wLT8Qblr9YiMPBb9Y9wEGJmDb76WmpG+h38tYJcS3vW6JyoHaDij94A==","signatures":[{"sig":"MEUCIQCrtJNHTy5y1GxEsAQzcUh/lxEkJ8x2WuhMry5cdtkbWAIgOL2DTBRotoffDy2l4cG9o/1u1beUI3L5J5zVWy7Edlw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1MCRA9TVsSAnZWagAA2Z0P/3A9yuBJ5Wtp+k+81igF\nJEd1RK/mAtu4Mr5K/gtJThI40qvJennrhbQnSp9rWXbDZZzpR4sew+b6F38D\nFZ7kmCsDOQY2DZBNW4JsSRBS8RUjzBnZ3dmve0rUCk7uCzbQ7hGrvPSIJQRz\n7YAOX4eFWHlCocbMAnkxSEapXcfxnCMTMkJdt5mngwwOoHdEN8qpX9c1NySo\nPCy2xHb+OfEZLmDZZ7eU+EpyMojvC/F9msffZpkfr9wFjNsDPeUy0wwtF0hT\ntYhAd8PKKD5lMVb/NeDZ8qNUCENo1KhmDLInQLzQWsvyC19NniMF+3pG4AI/\ntcEp5kqwWbS98zrTxy6/RNo2/r+EPkUSJ+YmrtwNoZILJusb0I3390YJhe4/\nGSuLWIaOzOcyGE1f27BPFzU+JP1fSKybQLam/9fvd4mBDGlhj5cBn+0InxdW\nGhIOskBkRNua5lcZAg4eLutqnRAlWGI/w81abyIaETjLQMgEjmL8B/HCsU9H\nZ/deqiJBCW5J6e5N1gXKwuPYzb6MdXGydiQkqNU+C1m38UthUnh0s+gHn3sZ\nC01ycoUyBOZwUDzCXZA5jgmbtj+Xfjqx0Nfr919VPYtyReqmCDuOoaaphb//\npbafPItpFiU01Fto/bEsBkqg4tVgveOTDN+nhwgiAIRd6HNrB5E7yUvK957b\nxOLE\r\n=qj6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad9dfe706.0","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/elevation":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ad9dfe706.0_1575415115860_0.19951753547038398","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/switch","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8337157d0708bf2e6b26f8a0ed8985b39b42ef7d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.5e45d77f3.0.tgz","fileCount":31,"integrity":"sha512-MrQspB27V23XxsdcL2c8x9CB8hFtwW8GjPHOZILonGKICsmPVV5jTQDvfEuo7gGwMahO44qPBB4miEZh0jXdTw==","signatures":[{"sig":"MEYCIQCCjhLLdbtDa54sUy+2mwUYA1dNRDMhRhEtpt4RbWEDywIhAOHtXDGKJe+OJqalJFidhvaOIcIoaBba3dlbZXwWMIed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u27CRA9TVsSAnZWagAAt6cP/i+GuhsQXEHcWipDnyzc\ni0+7tWvaEyOpFyvOrefyTqwYJ5waLAgDAmlmV7nwUP8iJE8YZzruRUQGyEgg\nnuMpD83aV0Xfcg56vqeHhHUI5LUGzA3UjH/eYmrq0sDQArDB1PwsXRfP6NrT\nJehJio+B9YgO2dRuGHXNCp9CvIiJz35b4tyPIX+dkOaLF0YOOwKDll0Ivcom\nsnxp+YOW4uWCfpcRSTGER1r1in0obHGo3RtVBXNfwUY0kvG8Qceso132E7Ww\nHnXueOIAkhSUOZ/kXenbmf1L7rqB43cVq11U+H+QNO/sa9mVvd5pqzBf/Q79\nuz+ZjPJI98jZrRcQBUpApCsn/w1LtVqT081ixuJGnWiC8TsfXvi9ro/UKWal\n5iWcpoOng3JJCUh+dijO+91fFqgLULcR7vmYnKqbqA17pX/EQLiIFnA2KmMj\nG67g4FC0hUS9AsvW0Sn0SsQ9wl/5b5bJlgZxPBVrpBc1o1Hvam0++3+OKfCG\najTUibGetd+czoWQKK2lUf+6OSyll1hWEpE9f9RrLASAxYmwv82/fkaJA4dh\ntO9WHMSMoxaMD57whHE1EWuX124pnHiQQTcPeJXYkD2b25IDBx5KhKfvXFjU\n9vv2vo2ZcQltH106lE+TfOKJLT3uLxxK6vcQMy85xTHkmz1zpERPjeJa63Y2\np9+X\r\n=Pu9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5e45d77f3.0","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/elevation":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.5e45d77f3.0_1575415227553_0.27150983982822563","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/switch","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb39e104234fd2fe3917005dd80cf60dd86a1dbb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":31,"integrity":"sha512-KZHAu0Gkezb3SuIe9wkYVy3ZVkGoEf3amEqk/bk1GriUUSzG3jN9Lmap9icwf0oeeKwLI0Wbq+nQ/VqoFYiMrA==","signatures":[{"sig":"MEQCICrZakHOTzt+R9c6PPHtig+I0Nj2e3bQFpDdor87lVYzAiAH7QWPYvKA1ZT/3BhiHyc4mdaaP6dDroYt5Poz1PYROw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3XCRA9TVsSAnZWagAArugP/029N6rkCXQgWMmKdDga\n7WrzLjiB5w+2H3E18UBlxxTNHhrQeAKf3mNLGX8+QnD/I/X1kld6zPBwpyIo\nP20SOD2xT23QuAb+UuvKt5+7/Kcg/HvYj2jZcen/JUB+pYpa5ipelXhh+5AS\nuCcwh9vVIZl4CJ17yZ1WOEO84THYzp2ViDanQon5gmF/Vep1cnMsQQlxNNpM\n8NKXUiKblRbF8Vmx3qJlnOiX/s6Cp8rgmei7IzkopwmI01kFHoLNGG/qB1Zl\nnXaJuws1ebFBDwklLF0voHqI2RPYEpkA0GYATZJ85jkiV7La2azkCg3N0bx3\nG3fqZR4Za8hyEdzYHijWkDGO43w64QqAu6PvcoDRmIoTeFH5mrDZDsrY3NfE\nIls8CrNgvr13yyUridxfdsWk6nJ5ptUV49FDlPw7EUBHH4Is20MFjQVr9gf5\nXpHlQu/N8cfFaiViHVk64OFe5M0n6SRC0f+WLOSXMM49L58WfyEiwrC89L/N\nBDI5HEwzbU2eO7ciVyoGfRckXZQhwbH+NLHfo0wNfz0Jr077U2heotyTuMbq\nX0ctRR0hFzdQ8ujfe6N1apu+hNHJytqXaTOKwcPWnocZlNq82puMe3rzgRTF\nI0VS2Fhy1BwMn4L0loVKTg181jNDlQMQKhHsLX+fJP7E9mOtKsJo4GpJo/dr\nWONs\r\n=xL26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d10e8cdf3.0","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/elevation":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d10e8cdf3.0_1575415254571_0.5760857422762977","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/switch","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7accea5678d68760d84e49da74e2e938fef7909","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":31,"integrity":"sha512-MpOPhnva2EdbcgbHBUj29Bbp9HAHoovY4La+1SQw3cN3XcTTppU3iK+w0oRWR4o+SxsPDqEL6Z+oieh/VXOpCQ==","signatures":[{"sig":"MEUCIQD5CnxnIIeGF2/x4GzMCQGBqoseKDqP26lN7/qCFr/OKwIgCBxHGA01XsXBiAXchVyJsycP5qlNz+lERypKrNVuQgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vX1CRA9TVsSAnZWagAATskP/0DAn7W/lczdNAehyqfM\nYdQ9vVQzOMO9hrbifhzAOJCLhFl7+9f5VNazX7E+4lwEv9bSgrco13eidGUQ\nljPkfd092l6ZVhar8ct/bHbZKTemLMv7tLZXzCh4ne5EiRZEKRlU9w8HpY5E\nr9jcCJNcDAHNLCCeDPp3VfpBG4cmKdDPd2TX/gMbPtkf9le3OJDhTYVJQjqN\n0y/I2hHa+k4Xr7Id+WhzZHvhWmBGSVnFsxRjXNdHiDsCg6fTHFpn2e+f2qJ4\nuTjYmtMyheIDulpvMzrJ1gA+I8esYo9A2nxsrjVv+7JRBkKsnPQz4K2G0S6f\nXHtaioI62xlaAbL3GWhsEYcvPwL74wNjvMKI+67JY/aAh0Qsetbmvv+lwu7J\nnMjfA30Hl3pmzdJaGqw3kiQUgkRRYpMSWyks5jKv0IIzrKhZ0NuX9nc47qF0\ndjiTj3Pnj5RpD/a2lDd5Bg7iZXM/BaGiOwkaTXgpwfq/qlfaBLUIt2TczhJT\nVm7Ind+W7hYew0178X31zvjo9Q8CfFv9Pp+MO1H0dV6kTSfdsjQAHFGUH8Lz\nAK/+hoJYZSK0qIJyMhzNNye6+2dcvvrkh9STvFZpW4rDEtq38e1AVOtOBN7t\nWcBl1E4u01HL1405xas5boHldGYshqaVidpMy7iAJc8Q9FDYY4gAJmQ7bgA5\nfz6H\r\n=gks1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a5dbd8a2a.0","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/elevation":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a5dbd8a2a.0_1575417333167_0.514569817997685","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/switch","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d07f0595ade8b34200144f725829df68cd0442d7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ba879b68b.0.tgz","fileCount":31,"integrity":"sha512-N2GhT8PvXlrvvRQbTXsE4bZ7B3Mc+xVpOGDMXHyi076QcJTejxet+TbCbAZj8mxLVym5pz02OEsflsPt/T478g==","signatures":[{"sig":"MEUCIQDEvVndr8a90lUX3S9WPfuANtZz5sqDobdM1SdeenlPYgIgRYwgv4xm7im8GpZxQuPJARmTZ6oVj0Qb+rhVRU6sRuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWxCRA9TVsSAnZWagAAvRIP/13cpgDZ1McPnu00S+kl\nC9C+eTVcCVWURblaLMKpAx4+Bn7jbTuwwNRpg+moVD4b14USsJPlyRiDlHTW\ndChTweT4KRXeq3/YxdUdf867wB31qmmDWyohrbJuETtmv68b0ZWxxV4ZUVHu\n/cyC23O9UjEu8VC86FXmX8feHqyRLWlC+z3nk5H914w2zwRf3yjZ9uLZHeev\ntjaaFH+G2n3JpSCdET2FYAlmIhcrEh5aaORnFMtlh/elye8qkazmNoMj63iw\ng9oCaFL8wQgDH95xHcJo4w2myrby16JAsMWvo/zhI0DrdOdfbzden+/R3cli\nDUtAfHKOro/ToF4DXZ96/MXpMxETfypwreGjRih1N83BxBQfUNJUoYiB1bhh\ngQHgvrZaWSJd9/NffjziKnkf9q9gh/8V3m9FNb0gdGEw5NxxRZYWbW3H13oD\nDkjVZYJKXNJ35oZjOWXg861u0nUc8v9TYHqxsNp1Z3hav1/VAO89Ew1yQFyI\nYASzg5ndv7OuindkbajeNsydUgxln5QC5MF0dsY/SHMOp2KOh3aMJGVjHOHX\nP6iOVGtxpn/hTIywGr3SGXYFMyf7FmpWJ1pCMqG4wpELkEUVFIj4Qw7UD5W2\njTW8PUDSL5aTY0YD9g/RYnz/BpDqOHMMQxDwOEzNATJWCA854HJbmliQR0mw\nhK+1\r\n=f8GX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba879b68b.0","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/elevation":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ba879b68b.0_1575490992597_0.9312495077743073","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/switch","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe04b8304b8111281725c61212abfe176903cd21","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.aa0eba489.0.tgz","fileCount":31,"integrity":"sha512-ywpwdScjnC/PfHnvaKqBBToDdGkmWfCVU0sDodbwXDWqjgpiar53cG//NQ+BfHFSrYJI6b3zCE1GWH0dSzMprA==","signatures":[{"sig":"MEYCIQDCUfODvGYcCS8sLM1L9165w+Bp5vuFsQAGMa1K9Xp9QAIhAOpKhc58Jkp05WbdAaXTttx+b04dgllRQ8rNpRGt5EaF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYICRA9TVsSAnZWagAAZ3cP/2U8ufF2pI87rd1h1JbW\niIzxVR8e+J+plE9SWwmWU3rvj0swoSZ4RRa/NWHFvZypbjUeQy6o5GMAw6Q9\nVAW2HxdXUA/sHbZoReZ6AN9yTRCFSIr85/E88sVlj9FqhcGcKKtvGEbnlqb/\neJbeUxf6Nz9CJbnuvON/umqlNQ0kuTIs1Y6/oNzgnUqfNoLi1wmZEK9jBoVt\nwvCUdCPGA1l/uQq938+Gldk5Y5020n9kiMCelMdur/970a0yPpTiTFunDIPw\nCSvgmebOVL2K7CQtNOSV1KzP1e/ZGtZj/8ocDTUrfHYNf7kAf/Id3eW4TaKL\n6jU15RwPxE1Ht27w8ydEZLpJpINEd9rVRFyAUXLeKDHV1aBOrMTJlEpmab6N\nCgfrXXaKde//snVPtvxE2iS8BaOB0rv55RlNRGpt5FGvNKpst82nmsd4NL8l\nz3u2VmhRFpgqA4e7BTMk2qw8CYrVr90rTaTwjQrft5AUrikuUe+u1d8DPWh3\nCO837Ef1WoX2ghzTJvCd6YqwbSnEYbPHpkaaD/02DtSk9ZHlzUEIssHdFqZQ\no8GgYr3Q2yCTz7tfUAukd6H6d4LGG6/VKRvlLqwpxUNcGEywhdUJaFljy9fd\nMs1tVj5AXsthwqQO2PTMe04jEYuIdyVkaqZW8LA8P7KXTVxKTFyfRamA4aBU\nUUZs\r\n=a6Bi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa0eba489.0","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/elevation":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.aa0eba489.0_1575597575695_0.668911470460791","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/switch","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e339b57db47615134a865b2968599bc97df43fd7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.cb7b71a86.0.tgz","fileCount":31,"integrity":"sha512-JCkoexDLRNouOWbEbngX40Pa092etKr31PXHkorDclfoEZz9EkS04sCqlUlyZSzFGjRO2n1+D7BXQgyG2DqFIQ==","signatures":[{"sig":"MEUCIBFEjd1UVVj8qehPsVWQi2yQUmV3+UVre/zAj8lX4ga/AiEAxgQS/yi8xLb0jFXB2QQlDKeXJErOsbpi6EJklY7K4YI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqoCRA9TVsSAnZWagAAcxoP/R9B0VnKxxyJAhnro9RN\nOoGcKLuIedGD5S/XqrpS2c7DY3bdqwsgUEwW/9wZv+rjtxb8OHqtLiJ51tXy\nG+d5mfK2Q+EcMBBmTRhsSgJ3PI172suPW2ei33eg9r9CWg4173EiyLUtrU26\n053vqvUZz4F8xFrIkd2EfVN/EECBisL+303/GW0a5WHyDUxcXi7Jpr7gXDi1\nG3H7Y79XDncoXRwK3PL3UTQFpL6FQh+zZDixcub8WctL6U2kBGDwuATn3XRN\nMmluw3EHAyn2Nlrdoet3GDJhKDEOaOHIQrQYWG5LL+yfbWVA3kRge5ln0zmb\nm0+mikp8v/L0xTMsqIDC5eUj/LBuzOPA1HG3lO9iBHPa2YmZieCF6rHmESUH\nJoPsO38We9UAtwMQpO1APwWI2SDBVU0HlXri3McSCoLuwIopZC8MaMk2q9yr\n7Wi2gn6r4HOU9egF5w/YOLlO/X9qKZZX/q+XPpnHzhO+sIE3VLPpFYprARNs\nbS2GYe4zwjGo7g0BYQfBDkMh1otXiNgznKtIu6K1j4ermBNo12QiEiLHc98D\ndNM7zh0yIML0QzzO1sckdOEFqXkcbM1oWP+mI/tO7GE4J4y7r8LLTqtA1Ci7\neCxnWDdE8VaATbzBrYd4X4ZknQMtUEdPv/byGm4GCpr1gg5/0wugp69zwqHP\n52Xy\r\n=zBb+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cb7b71a86.0","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/elevation":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.cb7b71a86.0_1575676584332_0.6221144615378973","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/switch","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"091d0c9aa7c58b2db1584e376bc720ca5dad7388","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.50f110a6c.0.tgz","fileCount":31,"integrity":"sha512-JV9DrKkkPNr42Q/wZKWdy8vgYcvV9MwvoXuLF5W7QYhIO7AeZ10bzL7E/x3bsi2FZABg67WIU0YCUDx4J3hWiQ==","signatures":[{"sig":"MEUCIDo5ZgrHD+Yu/IjSDCLCeR6/NpK4GBKP3ukcI3wnvNyXAiEA+HeQRaMTa7smUVVZAcnK3RpffhNC9cWT8scqXIg+96k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788iCRA9TVsSAnZWagAA7/4P/0q/JlTJt7CTX//1/L3/\n1uEFlh2WqDCX/HFXs62Wx49W4yDlsinDxtNTsnQY3/O5XfR8Hw6nZqPu82Gm\nl7ECuXp3i4oIugKxqkoYTHeYWjTHyRjefY8M6jbvpUYKL5cxw32IuvXtFsJ+\nrqtxs/QzTPZCQqX3A0QI8duLZmo3Bp0wB3xTrJSSY2uN5li4Vj9QN45wrjh+\nLpfFHeeB7lbLheEil8HTCElJvioEHK9Q9TTuriJRSr3VdLd6xwldO/3aNzZN\nf28hScwhYarCv2/StUOmMY5Ym1JTHKALSa/bPsYHtgE9MnOAU5lwXa6sV88v\nsrz2PttSd3Hg+Y+oMsSWmCKcQUfm5MTBi5TOvp2T5jC+zhDlKmNZmpq5E9Gj\n+/Eqc7MAnRnb2VwPZD66XjhMFQIdEyX3fA8IBJHNTSGtpovLRqvnUL3FGfaP\nN3i0Xi3Xi/ksSdiZEKxU/q+ssM62Di+6L/97nTfH2zN7XhjyaMyKSUirZWvC\nMlo7x37K9XXxA1R/9cFZZ0+FFXL+neYyqcNPbhugFqrpHEddOFN0xGKVxeG8\nb9o5RYMA4mEAtYZ2YCICPF1KMD49J854n9VzDcS2t3zpxDLZ7eSur4a1VCHD\nn6PTl7KM1NChUXulenlLFleGjllTrBJ+f46YroFZNp8QF9OJTb+eo71CC+90\n2ecO\r\n=W+M2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.50f110a6c.0","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/elevation":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.50f110a6c.0_1575997218125_0.2133210537904806","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/switch","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d2b1021cf857909b803a01d7ce30eb454c46c2e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.878a08b7c.0.tgz","fileCount":31,"integrity":"sha512-Zhrh2AZkKF2nVgMgriLt9vDkKfK4fmP/zEnxZh09tOgFsW915U6HK5wpNHT5V6qd7dFsOORg2akJormFEfe96A==","signatures":[{"sig":"MEYCIQD+WEX35VcYgTx1d5iNnKDPlbSJY2Sb3x8QWSw1euboVwIhANLQknVFv+1DAvJIS8hh4w3hmKTHYB6nURY0Hp7AmlaG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6zCRA9TVsSAnZWagAA5OIP/RH1tuDDw8LcWB+6GvjP\niaBCBoj4PtUnGjZXsGFHVBia5nj/r+xXMpUjALYdZIrCA1B56VK1/ahjJOfv\nvQHmkXPyLQpu5hnzTiYGXyGEyNftrgivqvs7HuorDv+Tk+8m1+16C6NNj1qK\ns/0k17VrdYgBXxBBpg4hLrcdqeonV5/raIDC7MaKVCdtXjtmOAjxxIvnSsNL\nhUJvV7zAIxHiyEFUJPNqi6QWobASwQ4OnYjzpzWaU/aY4Be3Zm3SGfIsRqok\nYAiM6HhgTYzyoUvN/Up/8lIg+1SfDWzJdJnrmp0DDrHNDoFX4OTdKOveGfVi\n3+Me+jDrLc7AHzyGFuTuK57EkvPJir22dc4kpIcCoPjIEutOJW10jNb1hq07\nD6l3op6UAQ/oG4aNFeuvE6Mj/s9sWpIJixznlEiqcmsumqTUi3JVOkknT6Qn\nqp5zL6jgkJrqZEg4qMezA6YS5JiDKxnMmdiCiL9292XDebNv7skI5yFi8UcG\nQ1AbvNMc1Hg4uiKIrAqC+1ID8rXGIaJbeqgKBIw2eQ6I2JH855hHDc9DAiV8\n78g5IRw+DfY07YqxJ1aHIeBxRzltiAAJvErR/8VCjp4RQh5gzuGT/j+mUVGW\nrHesZN36L1W9ZtSz9Sj4inrwmcqNAlCIEWFys+odnRgm1mwCfYWdNZ/bD6gH\nuMgF\r\n=MhzL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.878a08b7c.0","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/elevation":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.878a08b7c.0_1576095410569_0.7416773770176799","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/switch","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ae820c0c705c625c137d62fa513d0716c4357b9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.397905b4e.0.tgz","fileCount":31,"integrity":"sha512-PosHHMtakzW+W1UmvHDjQbAVtiv4kjI9HNEsHr/P6OZsyUhCkpOAmQjuK3iZ/m8d0Bi8upQgxpFjPSZFr/C+sQ==","signatures":[{"sig":"MEYCIQCO9o+gJLdTE+UcRlZqJKc+XwhX/1ygy4TdBxBCx7YpqwIhAIcaM29sSLUM5jekfsvGzDz/UUfR7H8+J7TH+dPW2E7N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apTCRA9TVsSAnZWagAANmUP/25F5jwT2/vgR+s86Jb8\n0PZVLxHGqb9F9zJ4bJFQwHJS4SYrRxHrzUMvPPf0dAKEYJB+ZbPVOUcr7X4h\nEfOiiE3uD5YMH4FrmDUdxyFHQpTof8xPgP2QmtPh/RmKYFP9T6usKuRp5orv\n4pX922yXbp+Jb9JLJ1TNxcSYM668CuXJgAsjfoXysPHD7XtoD4YhHqR5mR6a\nl5USHkeMoGL3VpGYLyJYd7fwrd4dIpO3RKDfSE8Kf6bGsaaYriB1x9YiG+4Y\nVfqusKvg06ypHAXCCT7krN0hsAFFT5CwFxi4XZCMGMuyPQsGuklErPn1ItpC\nEVMrmvU+6oIBwOsWIse6q8bDoAcyXr/Rdg4/FqZlcRnxA0s6jylrQESDSP42\n41dY5jSxH0uoz8UeJa5eGddUPo6COR72QoqSmJTye4RgGc41qD8cOhVPnqZz\npzPZTp7dl6EyVfUenI4VPbZXRMtVD6Fq9xw0HiMAIXzrj8bVhICRZDRTtU3w\nayTb49Tnkqu4TCHxxxzBbzxdI90gh6Xfv8tnAmx2nwpwHvYNGLhxx/spCOQJ\ncwyeQ+cHG/895OlWXztELYfBZZ8IVmVCjUhSK1nE1nv23xwJLRXkpC/AS4x+\nSQW8SYi8KB6GwiPUMos9qFd8YbzwThKFvLH8e0TpiTsN/gePfM9vXeTXtG7B\nPFI3\r\n=0jlG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.397905b4e.0","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/elevation":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.397905b4e.0_1576118866708_0.24038087776995054","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/switch","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59284bdf24fe3ae8ebfcd17f40f10e41d4432b1b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":31,"integrity":"sha512-UW8YpdlfzORlzhlnBnc0Ie6FuVZ8hNucYvXQEytlcTUu35eKLx4+/KcaagRaTum/na8yuk15kSkR8TnWnoxx5A==","signatures":[{"sig":"MEYCIQCpFdbXsPhDTGtvyX7lWEitv42zvx5ZSk3beWjwVluZNwIhALblnf7Fcv4w/8S0ytQSxqJ17PNkQNahxMigTm4FFl/m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4iCRA9TVsSAnZWagAAbYoQAKG1JGABgXNuj8hcu+UI\nFliI9WGIPBR6wdL+PFLstxXBYbN+Ysym+DLTXbEvABjn7YQIlhZb7wDnMHhQ\nAsTLJ11VCtbL48mN+/8iRRU2ZvL/lbyZQl0mu5Z3mQqwS9vlQ35/PD3zEQeC\noTuPe5xI7lHlp9XgP6Sqio31GqDUPnaaP3sbm1mWglmoDfRAuNhUoBM5WF4X\nFcoC3RI008dfav6YbIZoAq4WnUc8IjVEHonB5NvrNJnXZxiivIePcq+ykiSN\ndbJ8+qPqJtwJzFvcxXzeGxX8p9yK07yfWdxV10jg9bDQGSqOn7P14mdH+f2G\niEPSV9mLBA9vC7jXX12/xf7qEEirjTOkcEHO0CxHljAjqWI0/C0/fGqs+gj6\ne4vtmjaejPfVW9nNXcPlZbWS/je/yw3chb3d8j+B9AAmhFuCjhVbvn6+ld0T\n8ZCTRhXc0iEImnUVoohH9C1NsJvtGpEdxvXZciAOgdpDeKhLbdPDZaHjS/Gi\nMtVP2tRbLUeVRepo4t9ClNS/sUgaiIYvDwtt4F8oXxkZzGBnLPu/MOa3UQvy\nf6Y3zvb4c3GzXroCVf9Hp6RpSMZwVHd8wMF2n4Ge7+o0Zen/kXmwVWpy5ld0\nZcce342MgxKBldEhAUzTauDuY5lwcrXciP7kV8PMCjbfWSJVRR4AXaMTsHKw\niWG0\r\n=4QaJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1fbf5bd1d.0","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/elevation":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.1fbf5bd1d.0_1576177186562_0.19961141424747608","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/switch","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c77379bb7d01c07a70585740e9ef413fbbb96cfd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b723dfa78.0.tgz","fileCount":31,"integrity":"sha512-Z31i9SRmnrMKttV+lH61qATwzx+jJZk2urMe9Q3WEtooqUKrbhGtA2FuooY/etAmcFvTzwP9MVC5KiBweAT83g==","signatures":[{"sig":"MEYCIQD1IIIbs8rYkltbcr5isqYtFc2iPlQI6xBD7dmm6358WAIhAPIRO3eJruacD9ifGTQPQQ/Hjr4rPAEi6q0YMQKqp+rY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p64CRA9TVsSAnZWagAASJEP/0394an3QO4MEA18TKih\nmhLAh4tIM2zeiT2R067RPTCmsAp0vqXoNnASaTasb46coJOAbvvkd8jyu4PE\nDVmj+8qpLK3H0opFROCN/9wWXCH+/0Mf0zRW8FqCXzbaLS9hdLsB1Twha0Ts\nPvymuc1EBehI872VSTBMjlqleGlLUb26I5ldjKo9Z79GHVx+3BbegBkwk6L9\n1N8csFRKskxzAQTC8A4b/GwpAuKxPkbF9WzCxMzLY729zlv7Dg+PtC8fMKYJ\neYktnvp5HTqsqgjxlGxUHl+xeaMc30A9ZHiGaOjM2wnjXmZy0+fZOppAQ63T\nScT0RPuaPlEpZHK3WK/fHfe1vtivdVZ89Tw5ov0pal4yrUx77Xc7yKBCiSrj\nIN0/XuxBXRzdSRooymUAm+dNxULtUZSZPrxGttymM4RJgDKJRvJv6EIWz9Nb\ntBX1wO9gq1KYDdzfbszLqHSc9lwNdv+hmPFxhsmRx3OlePyR5lmGGvcxAXlJ\nSFLRxZJHkbq//Yv+AclfXaNGZTEa0ItQn/5B8JJJwl02vVdfDnSTitu8fJ9j\n/tRUkXKixmVCQTgHPXCNir/ZdIAGxBRMtEnuCzukg86lWn6tt+IidJlVc/vt\nepJJxVgqJzPu9jGSyBQX7rMiJoRRSW4XPqNGOoik1PMEF5p0a0BJAVK64rp7\nOTxU\r\n=7yd5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b723dfa78.0","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/elevation":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b723dfa78.0_1576181431902_0.7303817028505435","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/switch","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55cd3046b6bf47b446a8901d833c74071c4c3c06","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.1c494e567.0.tgz","fileCount":31,"integrity":"sha512-Wq5Yaoa2NZVcZ6s9fPrYYKY0xP1DjSLEkDH97h/NPxaHwFB8AtQVzhZZlQBZZRPWgjewG8ts5xWDdmMgw3Gelg==","signatures":[{"sig":"MEUCIQCzfNumoFwTwd9+Dt4GCGRbJNzqmfgXMsbBNpsVTgilTwIgRzVcF+/y9nmM2W7/CAcr38B1SHfQ1WlVYai5gBm/gHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s89CRA9TVsSAnZWagAAT8UP/Rcqs6Vj5Oz9U7eQ6AKj\nWaVu1EV9mmMZclMkoFtnRuiBuakP3VauCP9AZv5KxKMknYd0fUbLO9AN9y3u\n5zWwvj4OJCAy2oDVV7YBnMZ8OzZ+isKNVhjzSyRc4gdNzYn0ZtOe+pg396lk\nespTX9V4lp2dr87K/sMUa411CFxK5bd9EsR+IqttssggVmJLjwOXt62C5qEf\nhhN1IWOpp4wvayhHCQW56zvbtY9PhhxePw+Iw8eNsYOHS/LABqloOJpDF30l\nQiFl69FS+UG2ygpf2qiKQ8kgwfeLM9V0cBD2ZtuHCapWccA6j+n2oOdujZJy\nAIHriceN3GMe9xxzTfQfZAgglABq9jBVBdi4AGw6Wru23EdB51jf3aRFK/hB\ntCc+i51rH0oRj7PsR9T9U5/MF4bL28Xl8fUC2CVzGgvCUtk9twBoDTQBHfjQ\ntW/e7JUMAHKxhwgHmqumGuvSXdS8Wj4yBdX51LdebTV1jqqTXf5MBb+iNtDz\n0gK5SCS4TNARS7zyWxWeldKvGSdplmK7FwCpL+k/3oHXTYCZaxefn7mHNXWd\nTC4TQHO71jJ8AVpg8DqSDu6+IR/xEXS96UNQ8yWUFvEa0UJuOP/zKcLUFWpY\nxjWod0bF2Yl2t715lgQv3QUURRLpRU5lbhRtTOEayJ+11BlyeiUpQbaUl9PW\n/gTJ\r\n=uXJs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1c494e567.0","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/elevation":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.1c494e567.0_1576193853420_0.7709036552803954","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/switch","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaeeb87bcb9f8c48088ddc04db324c8f639b36db","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.c9e98a125.0.tgz","fileCount":31,"integrity":"sha512-IyJRKSC0xWasnkrgh/94RCvD7qUg2skiNsVMGu868XjkogsqV2yxV3Mq+JC/wFmh08RpSliY+x3TUO232DoaTw==","signatures":[{"sig":"MEUCIEo3BJRLZi/bSXSre3a0ljRLn7zZJT4WrH84us2Qu3bgAiEAlHJEkZrltcZbcupY+0LdVvVFb8NqDgStw+oDislW0PE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RofCRA9TVsSAnZWagAA6X8P/A8sqx9iNUky3XPNnjwo\ncOEucJJOTsEEFs5JA8z6w5U93n4BrqtNkXSgwNdK4iKhT29rr0SO3bVjMtQZ\nymRWYVOOtXvEE1W5ucyxi9+GrexAQbPu2+L/CkVPkCyzXJHTf2iL3e5DIq7r\nAUc4WeO4L2XkqsJSOchjwXHHCVx/X+qt9pQCskmSIy5Dw6kbSmfi/XXDbusA\nGIsgCrFydxxjChA/Bswh1u73RG8ghRHLl3Wq44L5CUobsnAYqYIIZtDO+RkU\naUluOk89GFop0FJFoddV/gyZWpxIybQ28Rz/DJECQiUCXM1aGC/PLH+AIZqb\nwqDhjS26n1OS8q8PCDxEeptdDKhfjbOobJsA+O5nwB4Enreev9awGZA6Rv/l\n3iO8oqOBUVyoLo1Nb5ux4SbvJimsAgBwupDFrclQON0EL41i8C1pjNI83sNA\nSwSuULoN2vBu1dRXUllAoidDNgwFfGKMvqm18vzReLoK5nzwJtkwIsyZ65KD\nugLpE0zzxd0E7TFN4FcERtnUwRK3zluuIjw34gV5VoBbOt7JGfouyw8aaOCl\npmh4m0TrVxqDqGBYtCHRfffuQ1q1F2AntZysdY8gcNq1LLJXUu2rqE1FMsJy\n2QPHU2DhOfzYy4Ub/lEJviqp8W3HXIsgWkvJG7DJZq8WUZT667SkIV3ZNePj\nWPEj\r\n=FJNN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c9e98a125.0","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/elevation":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.c9e98a125.0_1576606239113_0.890767019653369","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/switch","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e893a16f557274e6cde388dca08d2cb03dc7203e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":31,"integrity":"sha512-3QAR17FAYWHQxTZtay/OMPOMmpn9waDQFy6WP28aO4akkWlSZeVKovb+wETWbVD8Jvfg4ekINN8pqYaO7kCWXg==","signatures":[{"sig":"MEUCIAjRgJ14+THn7uz3GINNY4P83SinBf+LJj3WvWRSD80+AiEA5NXJ67u00tonfmQGzHvU3rDWXM9ImWI5YDQSSBw86ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfNCRA9TVsSAnZWagAAgSMP/1YP5ovJxhxhGkegP85L\nNcrB4tiMV5UuaPbmaYQevmVcYuzRyiYZf18X1at52y1ELLqgHqkhMPKMUVTf\nMCJe9mXxrk6moYNLxnXCnebZ/a9us0BOSaEPGKzYOi8EVeEUGpS2gXlxI+FM\nnqaTPeJWYQFIy58oLIYjO7kK9fFhS9q0y+J3tW2s7anxn8kLpNfTF5Qe8KjM\nzrOd2f35gOb9ZqwOTjJkiRUVj1Emd1S9uS0J558orCvPAhyZPKa2cLH7XhDF\nFgHmLECLAe2/dgP+WbblPkuTIO/TQl0M1SsBFwFCJgdKaY5Sp6vhrpOCs6WK\nM5Uppm6ev4PhEGqbKC0k8oYXiWGS10O+CgCgZIihyrgW0Bspe8GL2C5v36zh\nhgQadIDHhsQqZnuJqHg23zSQrHaKqA11EHfKDhdnTRF5ry3r9DACW3q/nN+Z\nOQO2rCyhKcQxKXHunRXTSAwUZInAkcz35MN0gT5XT/pPI6Umq/Tihx45VP8G\nw1ruxQCQ59DYdhLv/LiZpZdlDzFHJd+opAZ0F4NMmiVipvPOGRh8qBRUZ13j\nuo3jA5393CMkPesm+DfsNvSuZWLtUtqWvmfcCys6insHBnh/g51Y29wyENrU\nGkfs6HZdrrbohdUV6+ffWBrD9zgydRF/Q5ajqTjbFt4qQRnLLkg8hfjxcI37\nKrNc\r\n=qxmZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ffe8f7e3.0","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/elevation":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.5ffe8f7e3.0_1576622029404_0.2303924367550203","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/switch","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77ec1f88d1e48b141d4c923e14760c747099af65","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.47949b08e.0.tgz","fileCount":31,"integrity":"sha512-cSvgN66HcTxZvGdgYpBauoVT/5xohqOxX/crggis8ICgDU5xOlAsC43UGAg4yG8M1lCuA/+3VI+puogS+pqcoQ==","signatures":[{"sig":"MEUCIQC1b1DxFFdswn3Cn+hdWljv9w0sj4uyOch8W8YVd9PGZAIgVLjnDEClhoL2SanDjDCkHYfoYrrZgKA051QAXXD5UOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSyCRA9TVsSAnZWagAAcNwP/1/XOUMkmyzgkkrVKVav\nM19QLM69CkQLNU7n4PBop691U9xZ11SDm8CZ7/rB2cj9Mep8CGxL8KYhgXHp\nus72MIWduQ9Cl7AFbNAsIgDhdVZYO3JkQi+TnuawRSnrb7sCcuVp9WJEVHJU\nD1VQmfqalDRnaeTH8nILxRt8L6g9uxt87KVPOBJ13Q6FcMl5h5vz6xf4/3lL\novZjupQDwSFwGAtNrxIMquEwJ1QFMSiHO2YSB0QjFzF2Eb4HZYUCjK5lFXbQ\nOjIQqsSNZsPsgZlek3Gfnd6g2VZdDLQBA1kYOFcOzMRcOPrK4aT0BH5PPMwf\nBLWbLZYod/bQZN8aq5JdPZ9oqiv8hiQJ1AnkwuJD30VOAr962p6sj7tB+vPY\ndt/p9/Lzh7gNOC43Mu+qJ4pCpLFkdNELRK8Eaih6U/83hdB3fCZUigrO540C\nMQv/iy4yrwDkanyYdONg7oqB/pn3EzUXDih7lY4uDoRhp9/JtUTcfRU198pD\n6ZPOjKGnSeQqQv4zayG6B7ZGovKl/ew5i84T7NQn4BuXmlR5BtDTWyH6SCUe\nDb1nfsoV8V7/hMmIY7vjrXSwPCrTVuc7sfLeD4luj3kW+8TB0ApNLGMjRhCi\nAqnD5me7ndMMsF2dH2H4lwbTVfoP/fSDA8geWEnxtmystqKpQAy+7zgRnTYk\n4wWx\r\n=DTgF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.47949b08e.0","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/elevation":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.47949b08e.0_1576690866354_0.29434557117882165","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/switch","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"224f418215fd892ae827a019d4cee8dfd48fbd66","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b240bcc1b.0.tgz","fileCount":31,"integrity":"sha512-VbYd254WoeHh52+FE1WK52OgafQQHFY78yTgoxi+lK1uYAgilEYxGWv9QevinAP2eNcbwwPqmQdPXiMa5/33gw==","signatures":[{"sig":"MEUCIQDUX7MaYzDVHAgQtc0yKZjYbeLT3K4brwQ6rGivpJCqdgIge3FtjB5i2LuJu47ppP4PbsX2iJGjWw3btk6lXgYg+D4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntHCRA9TVsSAnZWagAACl8P/2mndkiAS6GE73Nqw5Vs\n7clFOM+/K68ZVKO2L0J1VpD+2yLdYhgJMsYuR7FII3ylFDwm4dI0Smk3cuen\nd/QDg5fmyQO43U9K+gERu6jgTB3MvbUYUU+IU7MHXUjqhHBoNb2Zl7XHaTCI\n0vulb6S8hav763mmn49jn/7RCE5kXcr9ZRe6Vag/F96D7RvI32M70JEqNFCR\nIGRHPmT5wt2PKcANB8GFTeJlpwEe+tC4x6ZQb6Wuh27LtKWGuFpSVtiusR4b\nHD5cX4n63bGYXWE4kBR/SgTyTADiPOzqJpYqlvsUoO14l5NmN8jUPp9RJLcX\nkcwOQD3RggPb4+So4yLQeCZv7wu8bCNu4OzHxddenxwZOs10TodXcX5+WIuN\nZZG7LmNjD3B8b7CdK/KUoWkm+ARzby96ngrdSrr4MEeqdC6lSZItCF294OBY\nQVHgaBOrwVY/IMzVEZUrK7KjhWyBFO6mvKgsFmCIOnOR2bjVTTH4QduZK2+C\nZXzZDO2Y7sUDjhteu65JaJaEw9ibE6Fp6L7FlKwvz3CDk5hqrTEDioN34HFC\nOatWZTP0M+CwPv4IA1hJVajfE06JuBxo1owA80PUiXjLjP6Fuhga7Rs1lX5+\noo0u62IFyWQP7mVtAAbuTgzWLaVHA7CLNuD7xH7uQAN7YcZUWfcMFwu/TxCv\n93Rj\r\n=t703\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b240bcc1b.0","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/elevation":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b240bcc1b.0_1576696647589_0.7985770992071599","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/switch","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cbaed93e6769b04ae745bdd8297f210b4d29248","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.391674a26.0.tgz","fileCount":31,"integrity":"sha512-j1+SZV+f+iyVexjCOjptzLk8DsM6teWrTf5HoH380bUZPez8TfdA7fTaQWjMhN8AvNPp7mjKpqDTcFp0zHuyQg==","signatures":[{"sig":"MEUCIQDuesmZmCBWMi59s27NecCQO3xs/XxH6MBPtatVK4KK/QIgYFEVTZk9z1ufKvSM8TPcsn2RLIq7erSkQyV5Yf+UPP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntfCRA9TVsSAnZWagAAM/UP/RvNKi41MIsEKpdHror/\nK5Z63G8iLK/podpThzY9uayXS8V1/w6MePfU2AXG9cbYrn1WyFgtyiwoXaLz\nlwJiKLX7ef57BbDgLNkcHEpXOE3vFGUj3LC6+/LPrMY7gGefnEbtkdsAfiiC\nFdfeFu7ndJT/NtetVK8+ioT8LHHxsU8u+dku7oeBFKl05UgHYMeF/XY2SXGC\nl9BYVfqpY1h+477GHMZtOnk/nLRDbSMn7MMDe2i8qLD8f2tf+umjJ/jWVhZM\nd1R+4fPuRdAxMLLTabtuon6JgCR4m5GYShuh1pGctcA8Scw6Jhb2NqVjECVc\naqM6HlxISBlUgplanxqHNiN/WI6549jwPOhB54gbHoaQlG5wxb+iXMdPadTH\n1piGFmpC5lEFC04VML7ts6b1xn0L7Y5fbDzyaCtNpYBPpTYWpZ1Gf1mpbTEx\npK2oprdjot16nm8BACXAMaVWfQOE9Z1dLHCp/fHM2aogsTZj/eyGaBBbWqoj\ncp2CfFnBo+SQGMDlLC8VgL6hCIXrjkQr0r8BUmCsA67raYiZ2lDu62GOpBOn\nxwH7vFKRY3i+4EQVXW++9ZyOyvlJKvHwY9v5hBOgDUJQ0610WCZSRD0Iq8OB\n0U8wLWCXQjOjH1GcR/k3rJJ57ffBLZkw3g7Po3yavRB1SU+dQhCLhmw2WHBL\n17OP\r\n=TUnW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.391674a26.0","@material/rtl":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/elevation":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.391674a26.0_1576696670681_0.2661017020028096","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/switch","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5804aada388d83201104dfc6534038cdb7f0c42","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.c4837746c.0.tgz","fileCount":31,"integrity":"sha512-B+6yYQ9x7F7hMMO6ZORMRuKbfRtVl4QkH9SpKh3hIfGsSSV/UTf5M20xlQu0Z4wkAderx9xuk2oRVYl2Tmu8Jg==","signatures":[{"sig":"MEUCIQCeHxzB9a+ZA8DR5YnBscd5t3GeBA4zpkd/pNYqvSSifAIgdHek3VawznW62FQjeGoCR/KKZ9TMjfEg/VEzDZ+7uyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+MCRA9TVsSAnZWagAA20gQAJoLvXbmz5Y7czg49f4S\nBKNIQ1GAAO3GES/NXp7Qyx6B62bVomjhn7wcQEXv7ku4CqW3tJlgsTR8KRqW\ndKzjN3N9lrO4Gvyo2pmfjOxqFxHXrFRHd+4AXfmnGkWhTHrdPBNM7WhaHzeL\nVLUQ88QIL7Ak9hRcCWB3801XcEJLkMURGwKeWXZcLjx/fkiysyAPxLJzpSIh\n/oYTIZNFpZd9hk2G5xpztAJioJtgf0XLKyXs46kaixxLa80P4k7LL04VYu3u\n+HM9AmqyE86NzWANXZPXAm0qARJNEIONlhfxKLzg7QdUErMx6Y8ouyw0HzyC\n+F75i+QWI8JfUSe4iaKHfXhVk06ZwVsTj/2Y7Bn5g3LOzUXyj5BVnMbK2iij\n0IQaK6IE+9frFqQH1d1IcEyAL1oulZbTd5CG8HlpGb2/1WcyCpAQrv6bdYAn\nZ4Dl/4Ys27Z72+xhSMHOxxgBCh51xfVcbyyyJcT0nvqCDlmYykERNME0ipBB\nzeXCL+xUAnk9EUYGhDvdTfm6dAp4Xt359DtmrSlJAu9liehC0o78yOGxpg9M\nFgfUCXrbpTRIkl2+x3S3Uez0vb0eN4a8v+lg/QADjptzkQqucPWIWMtVTX+G\nhRJqFR2kZjxHGSfCdwcV5IDPD9CEB+lBjyszCHc/zuYSB7VC1T3JI2cvKAtT\nYV49\r\n=A/mU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c4837746c.0","@material/rtl":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/elevation":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.c4837746c.0_1576697739946_0.7046959696008805","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/switch","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c3eab381676c6febfbfe975545ac546db8c8750","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.e41a70425.0.tgz","fileCount":31,"integrity":"sha512-mHxIEH95oVbvwhltHucaKKr8Hosc/NWvhLYtRyGVQbEMCmLoFWLmDtfKytscMXXqFsODhHsKPD6znPTDsOz+HQ==","signatures":[{"sig":"MEQCIEEItV5oCN7i6vJQM7rDOsKOwthV5zR9vrkDQ19O9dDJAiAQv6YwD2J6UcmPx9X0v/Cc799jy4y3F099iY38LicZxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRVCRA9TVsSAnZWagAARKsP/329ZVJYNVJ/gB30EeCa\ns3BXsk1PNpZnw1f5HB0+x1to2T11UknfosvtJ+uIyH0rtcmy0PGik/zzb3/I\n6m/aNr76atL0dEDx2etnbuRl1H4s4hhh1eJcSBjwzVUok5N8ryB4FWAu8Jq+\neu4W89zAEdC7LXCkDnGzLByiod0DO3zKLvCz/mO3j84MVzORWVTaRuXuZtXz\npcP9PGV9KfXWYummvomhkjtWF5bCq7SCeMK6CIhYX4bZPnsbIFBOFjn9tJtc\nXEzAhXZX6Mbsmw3HcIoumD4NVdeC9RmHs9fRt5/2dqFIWNenzgZ48y3en9ZE\nbZuC8xFSQ/0R/8ZqIDP2LGfKKKEkWowX6byNYdY2m+OkfoDNeXO2ww62DfcH\nvK2RSCVuZ8eg3JRWNzg8IFPdU9tm1ye0tRVOecKSZubhPsMYQ7lg9tBhY6FB\n8JL8VgMnfG7hwbsAKAfnrhNolqgcOq6m4rBcdY7E18thS6/B30XJWbAdo9xn\ndFzjzq78+fcuOrW4I0RXjlH9ooo6omAJUzMbq3ID69Ze6Stxt89Xt9j1HbXi\n+1h2DTawfZNn9SpqIe8t8Mic0Wc0iF1EJp6BcRtRSzUEjSKK5q0hfZjZNbk4\nBoMiyWHpX/J9K3uC5d1lFdN+tA3sriVBVpCMmgOBpgqyxlCnCK6Nn8zuSMDz\nSHjr\r\n=CMU0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e41a70425.0","@material/rtl":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/elevation":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.e41a70425.0_1576711253091_0.7030778559267097","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/switch","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"849dbd61bfb6ee3801fc37d9e9faeec31ae41a1c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.bac43eb43.0.tgz","fileCount":31,"integrity":"sha512-75Bt8LA+fgoDRdUy3bNnKUSi/jQWy0UTtT6IVXaMEYTgCZhfGLpknjCkGPVefGDCrgg2WYRl4bnz39qteihtBA==","signatures":[{"sig":"MEUCIGP8OQ6mL2HTNu9mN3NUM6P9YiSBp8BeLLr88pbvpY9EAiEAo5q+7g1hx9R0tZVP24c4z9bRus+hGoC0965bT9yRdS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rU7CRA9TVsSAnZWagAAKg0P/ijTFsdvl6E1uMy4lcSK\nb4d9vDPkXPvgoaK3IYWhz9VR/HBnBiKNRTp90wm5I1PwNzTqLQmudw6gqXaM\nr8vEcckBk4IcI/t4nEHVjyLooverGN/R5uD9jSYytO5x9lVqjRkbvxB00hK6\n358PsVvkemBQQv05XZfTnjAkp97nN3RSQu7mWRpguvHh5QugK8bS2gKerIjX\ntGn/rP8Yhh4B7ZWjZTda8PYbZ13ibetwwXfyDyEpPF1b+46cMXvX6PdsDTw7\n9tCj0UvwDUJrzQqt/k/8MZE8kTiGirMEXMfSr72P/UDMWQNIZGfGYvGlL90k\n/yGZghK2Xto13nnTacIl0Z9kW9R7tqQZcEWx7UnhHGuUvzVUiPVbANuDH2AN\nPNSbQJvfT22OYH4x3TSKJiO5Kcgzvib313vdIT1HUCuIudOV4DrB81Vm7UnU\nwnVBy20mU9ysJY+bGWaUTTi9vuvloW3rMV+Lw3jA7MfW+8uG/QKXbxwChwJ3\ns4Fl1eYLvRHypWjIgjKEeVkpGRmRtOqWXJoqi7fonlnRE2JRz77tOJ2gjCSn\n8avdxMT5OkNmV2XaOqCTN3a9rqyKBASI2QRO6sWcMsaw30og6EQipd/Nou9o\nLTmaCkpr11nRbeSKt3FLd1eAXgsEjsdzFMslDRMjtGxHcxj1hh10gDTngWwA\ndiWN\r\n=ZBVu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bac43eb43.0","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/elevation":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.bac43eb43.0_1576711482644_0.1483840185716887","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/switch","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"490d79a465bace106dd46fa2e7dd2f5d2aee218e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.2e491de55.0.tgz","fileCount":31,"integrity":"sha512-ABdeZLMGtECgXLUu+EGa7BLdtqrYs3kVdAq70laxfknzjls87e4iBHyr3v2sDLTQRZFPtbMw1kY/NsDdxq7sZw==","signatures":[{"sig":"MEUCIHPHjtI3vCqLddsqhtStBbSRi4icUtj/2c1fTJFwpUTgAiEA5zaP5sLKpYo3TLaPHXh0JbovxQre+KkK5e0y6L+PFVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1X3CRA9TVsSAnZWagAA/EsP/3VeucCvKzIoFuizRupo\nqYWuI/pmuj5309IxHWA+YmbL2xHVz5cSdRfyb7r3Rmqk+FSJsod1USBQAhGg\nv/dsdfmQvp7BSiiPEzD4Va52msI9+ibywBuogQPKqFzBvvNSeyZs9Xx0/BQt\nPTNiC6lFB0k2CfKSyS6ZfxtGaMca87n9J23B3c/Ca2ZkxlBK4xwwX7JZTn6R\nGGAJoGFPx7bgnn50WEL0esOjTlXiHiHAr8xWcBC4TraP7Y8Hld94ebvNhUML\nOZfn94M3V1uMwgylbE6NGsEXDsigH0XN0EyeUm8yWpNNXInWq6jTaXODQw0m\n/e/PidWFjdRHBj7ZC2O0rQBje5+pWmqY1l3vNOG5ejms80q68wVMRtpHTt18\nOrP336aSliPGUI9INSc+/1KFP9PdV4VsuDk1FDvzLSFlEXHKDGQWqkfcr31H\nz6O7BuBZocWYijmjsU2lVvibcis67/SdPEPIpU97YcMTzhImJPFx2YdoEb8b\nW4s7hWR6zLCRLbJH8RZRXOJ3Kvyc3tIdNFK24HvE5CRYEV8MIONhzSvbv3f4\nUixeRViLEarTPkrp1CifiKZt63cNdbfPVIEBU7umOJNrJHnPwfBRfDcN/3nq\nRWjyfuXfi88ee9/c7zuCTTNRzpQQ59ecrev8TGXdyLXmiwVbA4Lp0S0cY6vA\nGDaK\r\n=Ok5j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2e491de55.0","@material/rtl":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/elevation":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.2e491de55.0_1576752631080_0.4101819496004764","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/switch","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb1a90e6443e2c7e217d844d29e8d0b39ac53c3e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ae101c144.0.tgz","fileCount":31,"integrity":"sha512-t4eJBM2YwaxYdklCDmHrusRhrdOBh2c418bv3oiS+IeNcl9fi1OzfNX0KJIrk5Yg6ev536S/QdXyEL4o6/Pt8Q==","signatures":[{"sig":"MEQCIAcJ74cPLnSwuMgY+00eG18SvpuV6wdLNnVjni5ahlSNAiAqh9nRqQLuwBpxSHRAbIde3J4q6MJZDrBShBKWzrivjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6R/CRA9TVsSAnZWagAAI4kP/A+Z8F394xIUlEhrRPvV\n/eLZ5ldFYaRENwaNh48mkZrpPp9RzMng2QKJ/dpFbbS3ZhwwaEbPgpOmISDZ\nrAH2nzQ9Hjn/T0sL/5iv+WXfC9zuxwdpi3VYzUYVq53gs3lpHVWIxD4e4Gno\nHsQolYxu6XtFtNBfFyloDXm0rBUbrAaChebVtK1erkmHVscjqwAAyPGZhHVW\nL3gJlzUPxMdkZ68iNvKDXZF/PPA7AbougO5zW9ap9CahU0GSITdOpBXVKi0o\nEf5Iy8okjmwNFmQXcDtXQJu1mYUz6XglkBftMikXwBwBGdMdUETa8Gkn9fgt\nl2AINF5AlMXsZYWmnXvny+1usIkVxoKlzIzaSKhyig8pFORnQORXMW9vCsIH\nVJjlVY1zv8seOjdC33YY5JU9txbKRBOuNE3f4Yk3sHl1yUYQiocGTIGO9WYa\nKxn4R9mBV4f7aRIOVw673zFoDk4i1+AqqeZrC2GQEtYPYMak8oYhFkJ4uwfn\nlCi4C0OSXPLgnCfxyD659C/F70O39j5KGShUcKpXu6GGYv82hUO5IpmFxHqb\nNgW3mLHETCU4G5m+qNIRi/ktxbbEOc1w4eetbXEFLPLVWxpGTNIV+0wPajBn\n9sDobYFjNCBHlPSa0Ym2RDpQVRZtkg+hRPEFkIDjbpnexnqO6Mcn3wvSEx94\np9Jm\r\n=A1Ky\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ae101c144.0","@material/rtl":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/elevation":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ae101c144.0_1576772733148_0.043610959053908216","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/switch","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ad85976787bd8131348f6bbbbc416ca778a68f4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a51c31f26.0.tgz","fileCount":31,"integrity":"sha512-4AMYIkdYhKfGcqiX1+AgaVREZm2D6UHD+LaaqqRnvyw5oSPFQFpGN8YYdEcKqyE+mOFIa4vabXxOzQ7BCkeu7Q==","signatures":[{"sig":"MEUCIQDrZkn0PWm2aqBLwn8zF+aKiV67t5tTwUA9SbRnyfVzfQIgeWNztaJTGEjgapBf2Nl7CdjnFOrXt2+Zcz5D1SKpZvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7AUCRA9TVsSAnZWagAA1HwP/RWl1M801yUp+Btp30Fx\nddKYijjvLvq3LJqU2aRT7iiqb1mWkbBq+DCc7vstkB0Uk7087j581l4tJ5ZQ\nCwJLPnzybmQfrYE1hrfCHRsBuAMYnbKWCGtrD6GH9O7oB15rcHZw0zo291CW\nnR8r/YS0vh+M1Iic354NvUeLTqpVtvd1pAm8Bb2DCW1SqmRC49+p71gGU89o\nVuQ3YKTfryLIUkNgG0iVXzEN3Icy1RWAkglC6oSYx4SkLM7sjj1p4azCrAX8\noVaskLX0odkt7PuKOjLmLpBiKkEW+Me/GWgQiBjqy9c7AwCevj6nql0MytvB\nmRPegfZ4881t17rk9ImhBRW6ITUIMzF5ihk/VGtPdT9qCl+Mo5IndZXlD5LM\nw4pXYiE+aE8STOCWRfliQWzhBMuacmeNjGkKefNpZpYnB+8oHlXr+DyU/joj\nvg65iQvyY1C22GdhV17ea+DMJReaG2Panusn38164q4qsJNEe88I8TjRZk7x\nD9FR+4mcdWlBsY0cl0n3ynqXs3vc7t0gB1uNjsQVBDjMyCNIpcFtjZgT92X2\nuQWhjCUyznVRs9CVo/pEAruPSkJhAA0L4fw1f2PLQbCbg05Pt2w3kEVc1EO9\nge0CE/laNQGxycRGp0pppbAVQzcmiJIPOpXvyQG3e/Qqlvn4qxYe1qGixIID\n9IFr\r\n=Tml5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a51c31f26.0","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/elevation":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a51c31f26.0_1576775699588_0.1273813006380784","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/switch","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28eca586088e318d804f4a17ffc36b9c14f58bbd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.21fc4e13b.0.tgz","fileCount":31,"integrity":"sha512-W12T13AzI3giRyXasoaZmFPaKMhBPqciCqkjKJCDQ0ErcWjwc7cSNmhjhdHTjOP4YgEKnw17gG0pMPXBAnd3ww==","signatures":[{"sig":"MEUCIQCGK11X2odhhvQeUzLVmYZWTDYTpwms9k4e6zPNyBXk+gIgU+5ATy+2wlBarDlhzxNgJaRyS0E1g5Ldfza3jwGGLD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tLCRA9TVsSAnZWagAAGEMP/AtdVd3N24OQ9t3FAM8J\nKyyfzRwH1QeGk1WsOWWap4ulM16yhVAIukwb0opg91NHPwFPOFY9HvWD2Ifw\nZ6gft3x/xN2CIyhHVbm4oHQ1QeLOoITdBgkzxyUYkKLef0CrCBdRNoO+FY4p\nwJTvznCvmkjVXnXmdkPO8wtBJJhoJgEwvRwfxcK31fWYDy2o42NWCM8Fg0UR\nxQN6+XgqqaP9sTdKfezAQbD/nD8ZGyaFgguowAzv6Oz3dnB2eA0hSMWCxsk1\nd8kszR1QUGZfkdcSS8zPPatEvhfhk+CyLodhWVwsYx6lWduxK2NssGg0TNF5\nt8nVQdQ83O5LvQNIstMtp8YibaHxvpAKXmInizD86FX+JqwMiMLqYR6KBFfd\nYOCmZypUllKTqFQ13DC7A7/VKD4ojBJ24Kc22PtyP8l9RLJ+d6DUmOwQQUbY\njWZ5m2SAsBix3xDBz+yFy66IQP7sIHUcggYni9Wehq9DgiwkpDlNdJgh+FIa\nMSHfUl8ADdeKy+ta7spVBOqzr1pb6Qf2P76cEDzeH7etBto1Lx0BnUsGKMy4\nA9/L6w6Zi9vHAkOPxLjSqoUfuRSjS913SeTxUoh5xOr1hmOz1p/PjphZ+i5Q\nbVO2T5p74M/UBQ6dPCzFxCZZP6oOodj69fasK5VcixHKnDgXnTshHdhzkaW5\nez3J\r\n=8LRi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.21fc4e13b.0","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/elevation":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.21fc4e13b.0_1576790859181_0.11814874149135468","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/switch","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"495e547f6593d9535fc86bbe6b25ced648f15f12","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":31,"integrity":"sha512-IUbD6ibaxTN3x2G/We92aDjzdEebK4H1/cyID0fJE4rSWyt2fWUlKzY7agnaJ2+8oeDe3g1ovsn3t3l6Er3zVQ==","signatures":[{"sig":"MEUCIQCfh3Fggn4rQOEuAfzGaJngwnuCD0Y5a22wAuDyY8DEKgIgDBhGWlYasUFiP+vxVIOH17Zvdaq8ZDFRpkQSPRZ8vDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/ipCRA9TVsSAnZWagAAWw4P/RgKdfXINznVyggniL88\nlqJ/pp1aMgl/oaZdaGbW2za1AG4evlhJDa2wSs3+Fk/9tWfEggNcaugJTuem\n8mjpgU1TeX0RKM0uius3+6hZd4aQOIFYfOxuIj0k69tIA0+EGRC7frP4pCXd\nzn92pHTL2iuuUcMVpBQ3UZPqpeatBNqoVswpy01rtJv/FdB8pY0uKJhzIMLe\nv+ZSoToIIM6RcFypYPZ51O62x98ruDpr/YPO5Aku6/cqPWPHFwbjLwjf3UkJ\nl0fZTZuqW+PJm/eDsSkGQMtC5LzR0260JjlcnbAcm6J9IluowkzNeEnA+8mj\nkuZyJmiAZGMpdIW53766T5xIb9OUEMzFl7zJMcxbsoU51ecnSYCb70OHA+IB\nkrOyB150p2hg5QR7XSgcY4XUkspuwnIchybo7u/tWRREnkbq5zkrGBY0JddH\noG8rKnaBhm0CiDeifIERKSsFr5osducIBIOIFyjnFaJIVuz/++iE62MHdgY7\nGIkBap1YsKrBDSyqludFNUItp9aX24AB5t19E5bgdOrLq45tKRTyqclelTN2\n7GwAd2Mrk5g33Ct3JcvrQLkSwbuVkNHIMjPBjSgKBGBtSz3unZjv8uIQst+X\nQS/HZcFfe663YGwfZYqYxLDjsrXTr1HJ+AL/zApDZLuM8VKx5rjw6hdZKx6I\nRcqB\r\n=mlZq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d2ae6e17d.0","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/elevation":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d2ae6e17d.0_1576794280999_0.5340951522711215","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/switch","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90bdaad5e19149bfe3e09105953d4023af1ac1a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ba30399ad.0.tgz","fileCount":31,"integrity":"sha512-3lGp7HKX9OuoJ4gqfOAxLAn1s+pWU+zef4l6KhVC7XhW/CubXKEs108k9tg6oRQNedcqOJxLlpC7Lgt4S/DXFQ==","signatures":[{"sig":"MEQCIEq9pSx91t/bAKUj9YbDCqLf3/JLts+BmdLp5ooHWD2IAiAnj9LXxsbchfGiS9YtwzuICKkyVYh2zUr+qO/uh2bTYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B98CRA9TVsSAnZWagAAzgkQAJT1j+IV+DkOzdilX9w9\n/znjUtA3y4FWnmMaXOfQUsRHPjvNVD8Sql6G9f8OvDIYiQlElSo2pFywj3OI\nAWOiTAQEDb/fHXLEad/8CYCYsgqWR9sTUKw0N0i8oy+cWfC652X2L8FeSxj6\nAK5iylFjLUQl9i7Z30lDXwYicnyu4jzq8eV38T+OVRypRGtHegSD5b+0KLy+\nwBoc6lt2MDCm+qGd0Xhs1whw8s0Zc0lhuu8I6qR8U9geyPPK42+w0gXY46va\nazMh0qS8/iHQvHrE/bo/M3fMReSneC9s+1uIVFzObBmVMw8D4z9Uqgbm1Ehh\n1X0NO3IZppakde97XXq83sqYLanbW2vyEhLuvK2QcR1S0NoD9XmqH9mVB/bs\nJLOR7CdIHjg2Ep68RZH2lDZrpIiCJ4njbhAVeqR144k80z6OjDwdelgv2vZJ\nLFKJ2U+GtE3EzGW7JaHJvOcIhRxHZNyXRD3V87U2FcvNTETgTfWRPScHyrWX\nAMKGOdkqpaTQOdk25kDOeuX5FuggbAEpkgd2HFuVS2JamBf/SWc2N18y28cI\n7C5GzhX+2xlmEUCV3MJ2Pi2+ewSgUXrhyspzQZZ+ECc95+8fcoHEfcZVCdeZ\nnAGczhcIdK63wUWPvvH+5ZCuS7NgnqquzEn/NoaQnHTLo0KX2dp6mCSTpPs6\neebb\r\n=c4a7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba30399ad.0","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/elevation":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ba30399ad.0_1576804219791_0.6114743776507743","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/switch","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"877cecf08ab61f3d34af66115c8c2e782a16e83c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a08ccec35.0.tgz","fileCount":31,"integrity":"sha512-ZubxVDO+IeIjE7NaN8SjcQUaPW3kFwW1UYhwdBABfjQjgzYe/BsoBqSoUCq1Aj1HgLbVrUv2jev9xF6l11F9aA==","signatures":[{"sig":"MEUCIHVXWYvLSs0edtIzkVFidcj8HhYdOHJIOL1KqIWIdYAtAiEAxf7fO/ZcEpHa5wDxSvL8JPKjcW3ATo0wgW0NB30XKZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjWCRA9TVsSAnZWagAAzaoP/2LoKvJXB+VFL7JkKdCO\nH6FeqfHKTdqB1YZRQHQn4zgMUy+xeW85zsTwkHBBrt2Jt1MHcgDhCFTaCL8/\nvGEjUrJiOpe+W4MKBqWRM02iwGhoLROlSYH0hqc9r7RTQLVtjwC+FamEiSnR\n2iApSM3wT0o3POTYueb7X6wWNhjaUlj31BAOFGk0ncGwbj0z8Kx5wwWyLAUg\nDrLqsTy8OmUKPAq3JrikUueSC7o4nROHWKVasyTsJT++wYFa3Xerkzli2QHT\nqpwrQ6Mo92Jsz9E1du0di1ueGMMghYVbZ9GNpI3jY8D47ZAkkBYwDCY62Olg\n2DXRwkH1A8sW6N22wjph48TIBpzqrUTEb9/f3oRjnSay8CxYiI6vsBRjUxAF\n43wN9En4RBKNEiRu7Rw7cN/rw4pD3QsILS1Ur1RIruvjOiYreletkRLi201m\nH6huTAUhYgdHzKc0NhB489kvrXVzSYiWy3MMvLOvsXapxFOyaTw/y9vm2n05\nDDgaRs6OgGezD9tJbvaFawYKp1xeKocPWZ95Vn2ugOLr6502bGOnRe8+q5+9\nQ8Z4gLlU1ZMHm1qktV2Z92MjPU1X1XppJbhF3AqcIx0nuKaGiA4XxWQhVSLI\nTncKwg9C61FCdR00Y185DPc0PKEMFUNL9Ha8cS8MurCSvAfdT18Qsd41LKPS\nx9NC\r\n=Pwc5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a08ccec35.0","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/elevation":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a08ccec35.0_1576884437693_0.24831551279082853","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/switch","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0aa14d30a5f655bf251e561cbc4a24bb040fc9e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a2f75105e.0.tgz","fileCount":31,"integrity":"sha512-WY75fGqOqifA7ECIVITBGDz05Dr+tQ5+28piE0OyWqiNab2dya8z69iT04PoNu5TJ9Ocejptr7L/KOz5iBJstQ==","signatures":[{"sig":"MEUCIHWMV0l8/EKkskO2KOYCoyqWeqM19Lz6zC6qTkr2Lo59AiEA+VdjHhXCXMnvrFU9j+L6vFdfI/H2TwR66/0EhTMfqQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARoCCRA9TVsSAnZWagAAzuEQAKTHP2I/A7tgfflnymV9\nyaDlMLERR0F3r+uRQiE5jFcmexmkGWiWUm0zviNiPag0uabEVdiz9A3dPuWS\nBNGXD0D0lMmj8JV33ZQdfjQ9zU2mhf78YL5U6KSnJJR7Mi5KRNcajptudXzX\n6thNE2BXS531RjKLm/is2NOLggFdcejRfqN5adUxDNfMuGqfFz4M551W7c70\nCGkMFLP1YJ0mUxFs8sfgGHdKMDGAdZ1rhNeC3JsaVUAk+ygmm3tiA1jRRX9u\n9zBpjLM5wWEVdVMwF/yOjyEO4v72/6z9dfjJrUOS6caAfh5qtBX5asEvsM3m\nMiwPK5O05Uh9rbyA4DWFoEJXRQF1AfLxfxxIAiNdNiWaDX6ihZv+bz42OX0M\nlbJTdiGIng1/d+eyLW59tCaknwvkrSxcWtsa9x3Rn7uoEpwTuxLSnx5fotTe\n1m8YwQSviPEyni9TLSMSGqZaOcXNkAA2L57dbPdUxGOnzloSEn2M7qi9XtLL\naD0VAwYwdEsS2uvfBvsD/U05YwDfT9qEFKTjkM5VDMGQ6Pa+uoQzjmwEiDHR\nASo0t3cvGRpPIxdg3+TikmURrsmDay8Qi2uv/FYvjv4TMWHS4IIqB+xCl82Q\nALffnlouX+gqM1MEVk8nOwYjTreKTrH6A21Z/fBvtydm8GJarSuqsrYGA8Eo\nKMvD\r\n=YjKc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a2f75105e.0","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/elevation":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a2f75105e.0_1577130497984_0.5922906530251566","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/switch","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5091144c6242c61aadc49492dc10f56197e33c26","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.c054a24c7.0.tgz","fileCount":31,"integrity":"sha512-OpI0TXfO4xJ8qrqqiPVG/Bf8lC9d8ozJPUopSKe3L8XTew0bYh/Tzzy2rsCluprW14NsTH6L5dCtjBKXPrMqyQ==","signatures":[{"sig":"MEYCIQDIq6NwnWPkZLhGu2x2jQzUQuh1ilqKhvNdq+QlzK5emQIhAMH0ayFOO3vQIutXOahY65IJUPOcLGvPxEF7UGR9D3N1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATatCRA9TVsSAnZWagAAfLoP/0Pj8DVsZoyJIPKe9q/U\nLr02rwTXN0O2Ijsr1bBACkSTEoTm07QlgGjxR7flETESzdvQlKSoBn5HR143\nJPR6oMVpcx1b7npUtAeAWxpFRuSOi8CtV3bAzitjd1FLxwZO3sWN4gm9HYL/\nHraPDGyxxgr1JKPar/nVutTZk7VpCqXbNXkQaGXqfBKiv4HNiKP1og3LsciX\nSmra9CX8/veG6xsieBNJhKzUly1PiMnxjOQOfPsVVqiKl1c0D7SQSEue3FJO\ny9Dqc1ldtxDbMce6Ls2PxLDXEDYwQNdHE4FkdZT8Wom+8eUO3kgmk1bwJUKM\nK5FDQX15amqQheNGcKoks7LftgrrQ7v+UQjA43z3scNbjtBJwB4dqouKHyev\nIbslcM8OpqlMDAu1sSi66NtJ0DMVe3s5KbaO0weEJ5xw1VE510iGPnv3zoDI\nqChoy2J6BmV/BnJMy8VENxp8BqVCKPFfH/PiEr/b1IzentlPk6ld1Y+2isO/\nB4KGyYo40/f+63a26zFn7WUHxyjsUxAiCX98NR6eGutCAWcibpW2jZe/ZZ3I\nC21MAo37bPvAMJX7zah7weMccCl7PYpDZL4eCaTWMZdWTr+cWIoRgG9/q4Vm\nX+lhIlVLKXsJC/IcZkmj1G8hVR3dRzGxfcNKhjYPkDSXZkprY5ZxjjlMdQ2P\nKY7s\r\n=Untz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c054a24c7.0","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/elevation":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.c054a24c7.0_1577137837170_0.3525533629740192","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/switch","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd632c21fbc3ae44ec667f9f0aa2c2c4a857fb48","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.c6808c51c.0.tgz","fileCount":31,"integrity":"sha512-lYNiSg3BPxbZOZ3GAIh5nnmuI+nA8u2Tk+7cyYK3yus80cE5k7//DVBJzvruc8J2wcMvnsGarqYJrYPIl87Vsw==","signatures":[{"sig":"MEUCIQDnAE3fqKUOjuREFapqsyTKHVPzaQCxnylSrgP6gCeQUQIgUnp+zCGaXhsCjilS453IUMP/t9eOJS3FsnO48S66ZiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATe8CRA9TVsSAnZWagAAY2YP/iVDl3PqUbaViZilnyaW\nzJq5lBUTCYRkZSDk+3ffnSDLH6p4fvUR5EkHfdTpn+KfzvrC3xn+03T4vw3T\nJNsG1s6CWVufrAfhKB1VM1+N7Tth9sViuIxIKGzHwhTIdtUj/4QDp2tX6Pwx\n4dZsqq3VZf9o33C8R98Hr4jD4d5ZyhvyuVw94b67szKBjaczYyoP7nRC+sMB\nK9WqDkXxlzPbIztI6k58dNEklT3Vp0PUnVXQ80iIbcpUQIRi8WEb6S6uck1r\n6Yn2t01TysS3+jLS2nCla0S5K/h9bqCpbefx07O0MK0JgCap+9+2XYMonhbD\nyaFCtl5Bk7JHEfxsIj5kngPz5QlQEJ7jXYQ+ectauzqrnZFbn5aVFiTNJSIi\n1fxM9bW1sPjnBhsWmO9n+gWVKvK/8gUxErWfFemzkJLgyUGJ07KBFQJfZo5Y\ngLtPrq4pCe7WjYKqDfgbTIgB8t3xurcirRBpjWeB4Y5Y2DlBdVA9OUAy3CF5\nERoIsbkFHE4n4RwfTyUwKc/k2LwK25xRLtOjIk5rUsY4t93UsWlYjQS7GJrS\nvEwFi80yWdBBPMdUNulaP4y39Len/hKSXIFgETIPrn2m5VssY3ihuA46Kbre\nBdloI26+kkIVQxSANliuQJUwj9jySiloxtayY/BHCe5CD3TX3iTyLqchqkDE\nS6yP\r\n=rBKS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c6808c51c.0","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/elevation":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.c6808c51c.0_1577138108064_0.33685841456236765","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/switch","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d414c7dc7bca92c3e259580308d21c454a36a11","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7bce9cf77.0.tgz","fileCount":31,"integrity":"sha512-6Ix4qSMDmahd/6QOlXO3oQ7/5VQcw1i0FeN+hPkNimvuDvBci35Rw1aw7zUqSKiwQ2+c6IycmayFNJnDRReT0A==","signatures":[{"sig":"MEUCIQD6DZTtXXCIPnwQzCuGUYFLgRug0eC1TMZM/309/2mTrAIgbBRyaqv5Kp65ZEDVc32iZSiUJLY5kaCxalrfDnoPOjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/xCRA9TVsSAnZWagAAIRoP/jgi7DCUJN/RP0ACiRIx\nHUJfyTReF350pckldsBpB1/IsWBjrVfyRLaWZt+yXHggu2xb59pzwTO59kRa\nToFLC4qD6JX/q+kWulRddWf80k8Ker60st/HguJSJqe3XSaRHY9yeOLybyEE\ndYK3b1Kby+7JA+BCeUaJIhTjE2iPqCjTrcxkh7IAT5RFQC5UmWxXhI2M4WsA\n9DoCdMQpHTsB4GQsMQz+4MG0Z7EoVc86bZt6EW2OEjMCMPWBhX0cbjqKtZc9\nF6kcp4fvEkzpEJto2qxeSct/M94oYgq+YPQZX/uPD9yQTT6IUQZ941C/tmRR\n0ntdRkVYdh9TDd8fpKZMWuAu1/cMB4BaKDPcXHA15u89SV6krU3lx54Gq4zs\nd2+ishzeyYQMXkR+0LuBuNec/JbhEMUcS7EuS4bWj31ymtl5SiM0t8XF5XAg\nYYSbBM0Zwt8jArXPyYkgjsTCXGBtqV12jqMtwBmS/4FOJ5TmesgRHTTrvtdq\ne78xIFdKX/klkrW3KkHV5rLCgcio4S0VUh8Npi0uw6QYj8dL3exEMIf40Tge\ni6eWVCEJCbHv54BO3PAFZ8cLwe9pPpqtTxvSy0mFlFPaI/FbP4xqb0DMTYLp\n1oG/xkpuwohecz40cNWiRWp3YkQN9H7jkCHShU6OlMV7Jkb0Dj8cMX+6BD6j\nVk6l\r\n=ETTD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7bce9cf77.0","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/elevation":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7bce9cf77.0_1577385969231_0.8883854075147954","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/switch","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef602fdedf7e87700d086e3fcb0718953ca65cca","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.c92f038c3.0.tgz","fileCount":31,"integrity":"sha512-UQHggtA3+zqmRzeBhTmL0TO/2594973Li2ZLjysg9OS66ZnINiG3hUaYai+QOast+FV+c3tFnclScIJVtINdWQ==","signatures":[{"sig":"MEQCIBjDSrmDtFfRzxb4p2e6oNcN6p0fG5c8OHw0KQvip0HDAiAG5fck7VlMksjv+OMb2bbfc8XEpYPt8uzs4TQfqpXnMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRBCRA9TVsSAnZWagAAo4QP/i9yFXDPnKr0pAaTZO6l\nOnJTJFvWBwEcAv33m3per5S27tNoy+zG80RxHsR8qBUfjKKqHBB0FodfhOJt\nRFr5CMZXSmwsANYwLkTizfY5odEQLtHw/En3d1+Blhzo9+4TZPB4XkiNdNkF\nfp+8b9pmlXbyAugZr5aPLS0Opsgb9sbY1wYq2CT+B4M0uZddMC+Or4WPNZ8c\ntvF5Ddu4oc/jt281BIPNlkRvL0TEEwC08SlAVjvyOprZF9So5lOU0oWeF8yV\nm48nzGqbsOcdiBu7ZLqtrWg2OmVOf/NpEvLHFWBlY7DDuuEPM4HDTwE2xvMy\nbrW/P9IATwm53zbLz66nIE8VOarT/F5YXaF/s9EUdbVDMzst4zi8GENB9QV6\n8gpaw/kDbd9dL1/qM040H/VpWTuSo+XWLZUWwHTiE3AB/TQdidBx6ecYmfpT\n+R9B6DwGfiHoNT4yeZFuVWJsxeWflEKRd3xomUBjhC9x1zPpv/7YWbcCgZAQ\nSP37OyOz/TbKNsyG9nIltMAuMjmcJI8w1/QKrB0+AbKbfEF4i0yqOsab/ArT\n52Ccxoy9MIPgHjy3C6yj9CSBWAgu+u4KiN4wnWB/dmkDQOBGAA77AwU+lp5f\nZc6BlP2MmDWyXgnOnwqelXYOf4xSSw/KCSMlXz1ZjCZiAF4BjMym0rjZPgul\n/W0+\r\n=Wj7Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c92f038c3.0","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/elevation":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.c92f038c3.0_1577743424855_0.6307030051821072","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/switch","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68245ae46ac2156b9f014e312ce1f2faa3433b7e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.1f1ac7558.0.tgz","fileCount":31,"integrity":"sha512-4VucXbIYs2hNLB4C8Q/qefO0UWYfvWVXAZQO73+b7AQvS66o9z3c9Nvuj3RElQPHvqrHhcaWSAfKBZNGXVEuow==","signatures":[{"sig":"MEUCIDQTBr2CbIg11DA7swuFBEkdmc9oY47yXBBtoIrk1Ys6AiEApu5pc3XPcvK4w7I3Uq5g9Mo9xiuHzb2/IU+NER5WV9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDliLCRA9TVsSAnZWagAAiB4P/1qEvY5N/ZTKGo1WwcFD\nlsonqXQ2faddXkfEWEqQRTMt4eabrf3r15Cw6I9qaFi+tIYwElEFKugY8nGy\nhlOrtqt1jmrBVTX+eqOJpC3KBJwMTKw9MUoOuuLc4yGVyTVhwN/ahQXXiQRh\nf7foUHqOp2u3EFsn043i3MkZF4LQs2ZoEzdJqentHeeKXmVAQdiZyJS+yPe/\nV7SEFNHf8DeOlrMAJ48RQ+wGDjK4vWnmpV2BEzNDHCrSpCU2GNy4YSCbRnL6\nqnNNzdHxgFW2fFn1eUYsvKxRjyCHmg/qD2D1/2/nCNf2M6D2H3L7s2sqH5q8\noXcaGNaYkgtLtknBrq3sVEIAv8k4RjvL4osgWz08HtSAzX7Ph3xtqNj6t62g\n3cKEMX5HvUFDXDIrTyxMK54m3ukZm5WoskRPiz6DBC1jBVPtnwjErj0RkkM5\nVbWUp9miFzN5jgaZOGdlFrsTDaOM80FB1ZqFOx+YRj+aqQO131fkAq2EEBic\n9YrnyIuB+OcoIqroZ1MskU5FrpW+eu/XpyKjp58SA1VT8a1BOi7TmttDJnXP\nnCiboWdMXPZOEAlkKYueA0Y8oCm+UIQZq52eQbGlzFX+2aMaJ0XU1sDgbT5P\nqmwwTeoROx7hpthGF1T5OkAyDR3jqoYJBcvlRBNWlz76vGbJF36ZPaOkWif9\nN3Ap\r\n=bsG6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1f1ac7558.0","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/elevation":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.1f1ac7558.0_1577998474684_0.12514944543543716","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/switch","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc45cab065d0c11641dfe9e0fe4832d231b2598c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ec26e799c.0.tgz","fileCount":31,"integrity":"sha512-4zsrECRTfpg0FpcpY3FsgL2aoLOabEUPbOSCnohECkYrRtki0KerwderNuYBhtFZEpwMYKhUKOniTSReCPZPtA==","signatures":[{"sig":"MEUCIHMgFIoDLsw9GSrAMs1FM7RYUC+vLKtfiStQagrwgsXAAiEAg+dRpOkqJval5Qw9YfvQY/qfpQbLd2QYimLs7yqF5sk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPaCRA9TVsSAnZWagAAg0wP/RgCe95LcQ2akvO393Vs\ne4eQhDxQ0yprpwcpnH1Ke2QtCPeKUDUp8yfsxvHJZ+8ZD73ewLUC3jPX+ozt\n1UpZiFRFXZWf1xKsBVBwlekCiJqp8VX84lYhtYYo4XUp7kj18eDQK1pr6nVI\noaZBLdQY5hV2lgQxc6dQbAS1ZeGUSswXS9GS7JU1JORN+9C2XlJm9ek0Kazw\nnEgJ7NONMKPXy7a0xN76JwTMdRe2kHB2VOiBGecKbiJDXgVCiUY2pFAhLvlE\ndtKDHNbBWRH3BEtez5pfvrHMTe55vsWWeAyw4U1IsVz55df+HFMWVTkGHxfA\nZxsoJR85cWk6Gs2qOm/B8OybHyty11+srMIQmlpLtpjozM05be8Nbkm1rYnV\nxjfnlGP7Z3El7f9okHfyrQtHxhwHvJPLm+bMu4NZK/YtYgWAh74+E9UKk9Ru\nhftcom9ySmz8J8yp8+N/4J0JF6aqV+FwWA60mqjQxxOlbJQjZ+Uz4etAxs+X\n23bL7wlWv4giYREk/MWPSalAkgLqyrnvdUz3M0jVMZDGYgdL2Xm84dHWEUEa\num0OeEpmSCUIw74dbRLP9BrlbixWmd6LtDt6KFEPJT5/jqWSphBwBKoWoFRd\nvbugN3lPeRmMzl85aiAPEFNrOD78GE2eG73QNF3cwI13d7ONyAUtzXwgxtgd\n01BX\r\n=Tuvp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec26e799c.0","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/elevation":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ec26e799c.0_1578001369689_0.7668618491581356","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/switch","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b41c92e4bbd4de6c23c59b3a4a9b4024688dcd80","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.0a40ced40.0.tgz","fileCount":31,"integrity":"sha512-+W1kxRy0Wp3rL+XLaVFC5xkRJKk/o4PbQfJZjiV6js4b8z4Td2XD/6WRHxLTkey32LxE+z37lHvE9LXLy0BJZg==","signatures":[{"sig":"MEUCIQDXZRWghMGqCyOkfKWpWhK2+JlZCIgZQtwguRFTpYhkpQIgVwawhCW77GYVjMiba9RfnJtDDPl4Xx6YEyO7nF6XjTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VrCRA9TVsSAnZWagAAzc0P/R7KNbOT/izK9jWDZD2N\nEdIcpyZLCzDrKoYnPZms9V58uQAjJwpdRFGGChEvECjK3+RwsaL6Gt1CKd6g\nlAusfBoClkxSDung//H0UkG37/gES15jXjDQ7pjhQyVG0GM6Myc+iC63EnXK\n6FimfgoYQHbQpZD9NYwEj9X4dCKw0suNAgoaWag2ZgMfcGSRMqftKAR2PA9r\nNmD3ni+XigrNQWoohK8clrietE/Epi3FSlSRQz4C+A5bnJR5pLiAfNyyluaO\n06o7oaiIsuFZQ5rio7HwbGxvCOlsOrIcWwlZ0QlkngJCTYkRKVv/urb9yoG3\nUIL2jBO3R+nUkyuiNP6pYJURQ0s5P1oTc0a2ozun05GKerK6QWv8mSuufG0l\nNxh+Ijy23mFN+R2DIyjpRFpCVSrL25/rJ65l/SJpIVfFhD1ftkjzhoHPRRN4\nBBC3VC983BmhZB9ftvdA8ifS4d30o+8zcGPJkfvig37zmODAoiZR7lEZjn1g\nTmo3tAciVFwv8TfMeGvdHVgBq+V0+31cIcJAM97XV5A9ZhO1bwpZ5lZ/3lux\njzMRVVA8Sx+yHI3sJF8k/x/Iyaency60Kc3l9k86R+/m8PKKHt8AzbTEYTap\n8Cnue2xnBc2t4WIJNdR0l6UCqRR7Oc/sr8cjEMwEhQVCJ2esgly2pceWkhtK\n5zfn\r\n=ZEDm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0a40ced40.0","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/elevation":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.0a40ced40.0_1578071402809_0.6394624948161436","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/switch","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"103a579611c2718f577a00fc768f2700cd3159c2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.3adf84899.0.tgz","fileCount":31,"integrity":"sha512-KIMPU2gPmI9bbmaL1HV6lUsSAAreMJ7WGFT6KPLg5raVcYbLID9KV/OyfNfmSkjn4oJFd3gMMjwy4v1PVlaxnQ==","signatures":[{"sig":"MEUCIHj8H6lF/4NDgmCrw9dPvqL0yrGBvaUrrLy5VR221EXFAiEA8ch9ZB1EUUy1gYZ8NfQ3ZOaE53HVF/kNaNtzVPlnL0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aBCRA9TVsSAnZWagAANsIP/jhoi4q0ZtKDA5YRk4+G\nNpvWbwm+ZDvvv/+3lRlxdPAeBkYBcErh2SMgktRu20Ha0+bJaxERDXVBz0BF\n8x/KYIh0zIETkqL05n17XFJwVX3hFVlxzYtu8sQJ72hDO1aeD1a56/jHHrp/\n8jyVGJ3+YsUjBZaUzNwJXcoJrgJtJNhwVKXvNaz3Ejoby5Cl0wz5LY49y1sL\nS2L/uvlg7Sc9imhCUypapX58nCyc9kz7zWjXA4mP2xtI630CyP5+bvOjsraq\nrRah4vIQr4CcfVyDB1kplrQSD/7M3D58Btc122HiGCEhw4AaQiD8ia7udZ13\n22dX/K4f3BYudfphyjwaEXP3/YX7UwRIo2RAL1PUGhUUg4ho/S2YEEvvuamZ\nZsmY5JxpQnduNTrUdeN7nALmZARrp0Yoii9qhaFbjIjY/e3Tsa0Ac9vXafCR\nAhmsznSdhDZ/Rz4TVux8Fl/I+G5/nPSnhBSA/q1XDiVd9sQSFhaY9dcRnYkG\n6sQX5rCi/JSWjRyawB8Uyh8vFVKhWaPw50OtX2XEnZpavWWdnlZf2RZgrJYF\n8dQFCJIPHcp1HFwI0DUk76znznregDaEiaiAg9ySr70eiNkCf4139cp3sGOm\nGjg3zVjHGBj/Zji7kafxk+vff+Yf5IzwA9/777itjxvkOw07qY017k2nuxp9\n2XXk\r\n=GZG0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3adf84899.0","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/elevation":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.3adf84899.0_1578075777158_0.1959331616409128","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/switch","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"114d046dc512e7168fb044f1a7008577f5cc82a6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.0d42ee650.0.tgz","fileCount":31,"integrity":"sha512-QjliLtavXwA7QWyKfFvRg8LU5KsQoOob+mQ4srhK0lgGYZBclf0cHaysbjzRgK5PFXxOHsIDBwkVqbMe58fSVg==","signatures":[{"sig":"MEUCIQCCVZRTyF1tgBkOEizeptimjWsImmWbH9eRQLZ3826D/wIgF21jHV7rpHJcp0LykI9zERQJAb5s1kS+ag1MzyrYsLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QaCRA9TVsSAnZWagAACT4QAJmCweQTVM65JewmzSAT\nKE7cRbbQOnOcIYfE5N06X2b5wOTH0f7AsIY3J1/RIhPR+utE2tiG3jc1SZ7x\nw4fDyiA8E02WMFhJY1X89VCqTM4mB8RYj1oY9AupCHdV/FinVFRvBPzC5Kxn\nr0sBNpSHbad/t3+Untr9AMQsK8mmJ3ISX8C6I8dPM1owlruge6vg4I8pTRk6\nyG9su6aDapWBnac+XUAxhjKFm9VuJ+ypZs5DIsU3dnybX/4UgqEMOUTN3ExS\n34KtyyRy0wt7KhcjvE+X3Ef5LCPmRbdPDiJQQpe2QkRDDb9qvSEl5JnP+8ki\ntqw3FER4ywvH2GbMuypulliiwFs1NJdJ7emX3xWcKSuHGcXw5ceZ+bFVGM8p\n2qnznfnlSuzrP/bKl0KpHnOTXQBRxd4El2vkh3zcnz/iWP3f9t1FgJL0dhoV\ntI6+duIRl345UMhWGI5npGsY2YyyusVwXL9rwPxGajG+zG07QXp1kyRhUrev\niO05zFxw5Jf8FzF5ddN0fwR8cHB4Hnrj3OAyHUYiho0JBhLOUgO7I3yjCaSx\n0Sc0/yiOA5/rOFOBOizlDFBTxJ/I8MfOCSSmbJT1aVfe50Qdg3HI+0lh3Rn1\nv9sQu4ucAsyeZKmW0tGEUJWfPa7oWDGqyDD6Yn7TS6/Iu3b+cH2GOX/1xokT\nDsXT\r\n=Pwo0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0d42ee650.0","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/elevation":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.0d42ee650.0_1578087450514_0.512303537275381","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/switch","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fafcfc3ad3f6c809b41d35cb97121cf804deb6a9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.847dd1ada.0.tgz","fileCount":31,"integrity":"sha512-asUVAICLLQiUyMUDgH9WbmIt1mnopJy8g94LSbgwta/bfZ5lozBK925EHoSwuPb3HcR6Ginc9fWOS61Wq724TQ==","signatures":[{"sig":"MEUCIQCpt9Wym/q92xFUjGpgMm9GIkXHXwT0Isd2ebER8z9gHgIgLakaZMNh4OP7w/4PJrxVkc1MxQ9WEwqvDZuVMHDO5mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4n5CRA9TVsSAnZWagAA7AEP/icFqv/urI5fAFJF9VC3\nSXyFAw0Dl8zUB3NKcNr4aUsYfqW6kr5VdNnN6OqXGM8hY67rJK6RLyn4p6So\nFHZcN8tB8XhC6R0g23Yc01VrQ536kfRfhbbRLQxhfdmFhWwH/lipqYS2n3qA\n+hDxzA3uuqIXYsfrTfmtDRJ6BwZILp0mHwuuwDUczxjJP6GrIAwUZym/95T0\n8Z5h/ASVIC7evI7/ijLTYiH81RMuri6evvaokMHbTo8khehVgGu57bdvvQad\nRL4F2tlWafKZEMnpmA4R6c8KyYxK6jytUvEGKJT/nIko2Js35RfKH9sPJFc8\nuVzLtp83iUESYmS21VtwdBO+bVRwBVVB+Hni/+/DgylD6grj85muDsiIDzE4\nCpgSIR6w/2PzVOBOqB+a/2i1Y065RokGJRjHgxAJgVt33jakMQW+4XxTBExH\nXZoftLUYvNsBcVIF2V+YkNjjLf2TRKRPAmYM4yBGISYbIcmMqVjd8738G93g\nw8lCWZrtaTjBQuDeAIDTgBAgYnMUC/Rf/WbKk744O+ZCzQ0bYLwDhLB1HEk5\nnYKargbn+BQsT0kEfFNjbEYYHk2+JDTuAjufbEL9iYX/NMllvAYaDta8DuLq\nsSbS9na8s1QUhXhAmDm6eklJRDsTnnh7pjQzIhF3NFVvlqN9fmtF3cD+OBlG\n6HDV\r\n=Yyco\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.847dd1ada.0","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/elevation":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.847dd1ada.0_1578338809249_0.7579324047400577","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/switch","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"840d50959de0431464afc48a43ee2beb8b6b247f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.39df7e5df.0.tgz","fileCount":31,"integrity":"sha512-4yaNjV0ZSdG8B79SiIf2p4q67NOvhFf1L+srQFsu0kApCso0xF42U3bXoCKJREztSRhSeZnfTOfG5NOq/hqx3w==","signatures":[{"sig":"MEUCIQCpxzZcyOVWj8eLPokOcCPznbIDxA6DwMsmKLcl6K196QIgBwpzF1Wa6p9Aw96lBw+TNbvbs7e57Czrw1y54NX4OeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cjCRA9TVsSAnZWagAA7DUQAI1Ma7qxSz/IZase3k4j\nd4aqQPU/FmMKHIdf7W3CfTCrTX25qrH/lGy79Bcy7+dVvN2deKjgJJfJl4G8\nTJyLSu6LuuHU5S0vY5VU7VCzeUAXoCwIRG5d22Locz0whBSmAQ/bTyx+zMgk\nKXeupzkgwmKBaGbNZPGcjM5c4hEXgaEE6EjSItViv1hQMjFi71dh7AtDP97c\ntsWP255Jl9YIjKOeJ+nxrSxyEZharJ72FeEKqRFKUX6r7kbofcqYUuL1HZ9V\nMM9HpF6UiC7eU5tTTkiSz96jA3JLxzxW9YUqHUYvB0oco6n0WypLPY0R2y18\nSNH2RLFHiHdNoFiU6qGvegNzyQuYP86ajnFiks8ChNVAaTQ5+aqMS3jEiu7v\nB7NXJeQLNaRMUSUjc+N9HDBNtAqMCz0ec0+F0rD46REtkzdtMbHTNrd9rzp2\nX6qZd34JybceNc4bLNierLZjwSxFjpwUKm0GwGL/tDZFwZIE621afXupcI4Z\nP9ZAGrvWgFgI7/4O5K/qp/9s/mrhdLuiWunUahvWOx6qmV/WAFBO3GQPeMC1\nmtTNthYdxXeQOuNkfsCF6YduKr8XXN9Ea3z1EuJHW7WPMNsY3NNt5fvNdXHd\nfc/203Po2UgC2lyHNJEK1A67VVGjIBSmnX/nK0mIiKZ3BYHN2JdDdpEqgYlb\npiwh\r\n=mfbJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.39df7e5df.0","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/elevation":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.39df7e5df.0_1578358563229_0.38398443586016695","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/switch","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd9ff636c07071efbe5669794895d1702216a59","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.f1a2581ab.0.tgz","fileCount":31,"integrity":"sha512-E9bumiU838Un3NKkT3s1wzCFO4cHCstx0KHpYw3XGNyO+jOArQ0xQj7p469BXooFh2x4xDV1nC5FTZJ7WJMZVw==","signatures":[{"sig":"MEYCIQClel4KCjfeD/Pg1q2TMxem41tijLnag9J9C+ifeuNJfAIhAJCDEXbXzS9rskimyodIyuooWEVwXUdXdApSU6lKZI+o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0FCRA9TVsSAnZWagAA13sP/ixB5II1LNkh6eOOQMvl\nFuvtq3x5Mg+pAYhxkySn1rjkfwC7EIwmwh9jipGGQgcdouWtiW1ID5QJjqCv\nXv4UCSOWvRr3OgRxTbFDPZkRffuiMxCAp/s+nZuuLFI2r9pfHfhbihlZWGPN\nBmoFPUujnOiK+sglGYK/UZRC8bMWrF4BsuCO1V1cr9qD6D5Y02M4h3G+cOz1\nNc87/GYEQ/63R6AdW3ArBBSshyDw79zKWOeOgvIHBzhROvvDXpYqZ7yk2UjE\noWWkNbOVLac+nGplmTw2oq9Iy83SVHs/XHVWGC+2IJV9l5GaApIzC2e4rRR8\nCE2bb+16XzUPVCUJ0zeLQew+oaustT1KZWBaexJGmQIjvxK5SW+ry+3m/KD2\nQqm8tyf3BBzaeJt5stl8dddQOx+ro/YSuF5cOnM6E1YQc8ZnwScU6Z7vzOdQ\n0am1OyfnPa6ZK9DzWs6JaYIumRqOGM97eVlOx+3EzowqfhcPPEY4Q3PTni7v\nPj3xZBnYpFmgj2n10tkkwB/NK9zbNlVIXnUvld/+9ZSJKV56oGDe/Q827giL\n/l16c+wScv8oUkTt1spsYakD4bbFwGwILGN/eNPcOzRGtZWYOnRFZrtL0qYK\nPwrP3XMp/gMQMGX6jBTJME70fjJ+wTCUpoeuXoWBoXFv0/il2cVEJ4g9QrI+\na09d\r\n=jamk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f1a2581ab.0","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/elevation":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.f1a2581ab.0_1578409221311_0.461059950384497","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/switch","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d4c01c24103d86226eba92349e8fe6d4040ea7c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7c7ddf347.0.tgz","fileCount":31,"integrity":"sha512-LVcCcLyPIgbaci0hrty94CFFjUqBEI11pa1C4I/Cufn3C2DlbC3Zd6+Ad7aRmGBaSWZa/rJmFbhkGkR4X+j30w==","signatures":[{"sig":"MEQCIAFlYLj9p81eyFxr4K+tCJITxbZj6ZuKj1hVCIP0ZDP2AiBuOCDI50vZ930eN5Y7hAs5zR81mZen+cVjMvApOxS1Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKD3CRA9TVsSAnZWagAAm1YP+gKjlJhYsEPDQE9fYkU1\nsfI0AhlStZ8hfE8YGxqrf62O9b9B5txhoQ3fWxvyywZN34FeD72d32tjKZs/\nJNF4rt8GYNs5uknb6KUnvM5xY68Jw7Az7HjR9D7gD+yuWaVJ80Srjd3kXW8l\nByF/Vv2anGTwfcS7WfCoApqY23Ao5Mf4l40HWeoSMB9VLi7JmsSUd2j91TF4\nNO6ymg/WPonqaLIrJ+E9FhU+WhOjuqfl9QvhOnWQsU7dB0Itx5NxG3kcAMH/\nVl+dqbbyRus7LSyXuQSzruy1MRyqxc/PSSLu6mBeuI43WBu3GSggXeprLkba\ngI0W7vybcd0ufd+89f0jVnSBWMx16/9Ve2fy2/kEzD8NKEmRObDiWbTHicEr\nhqeZZimLLG1mxcFdt1STnZOrAFvIgqFk8lsyU7h5UtfDWaYAHi1wWuqQUbpD\ndseTXHmlYbehp0cw0NRV08nIlcqPjvkziAY0f6AF1HP5taLwBhy5UXA8Ys7q\nDhGXBXmr6Abu/ntouoyWXkiBvy2ailDOnmEnZNq6nIA6q4cn5vS/X+t0j1z9\nuQCWzNPHmEknsBI4TEI07unEAGP2aHGyyuPH9jg84CKaRsnMjOl8xhNxCv8w\nAATJltVrCgJiJi5itX9OK9FC/dgyb269xRUtexSWhBTuH2AzvEbo0FhTg9mn\nGhvy\r\n=yAiv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c7ddf347.0","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/elevation":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7c7ddf347.0_1578410231297_0.3609086815233091","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/switch","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82cfbda56f17f04eff1c87a1c623e832b80c449","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":31,"integrity":"sha512-GryNwkR8+Gfl8PZktUAlTb3zcuSJ18o90B/2nD+2xemW+GAE1vpV2g6eNmJXeCWfR1coQ5/hhpQ0yCt6DR1vVw==","signatures":[{"sig":"MEUCIQDopjyjrjoMVXGw1WlAfrp3e5nG3smDOpcFbtGz5wUw+gIgSk0JFUsTfnyoNxAFg41L1QHUDR8Ap4ueZAI09Qoy0Pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmyCRA9TVsSAnZWagAA2D0P/2I9/3j8LFINK6YNT/vQ\n27GcA/dm4yPYl9h7lZMvW0jxpvijEWEr7q0XA6uOya8AUyRdo5f7yDzQWNNq\nEjaIIhBdGa5zOW9qNfbAsLpLzSs05I3f+/UcCZ/kd+AopSd0Uv+sa554M3E1\nA/HAgdzri4ELfyggFzT+3HXFqYE95laM44LEPB9ynEuJghxODzyCT3VEJw/n\nN+BugnXQz19xs891stp3lW7y5bH7FAHRczzeNCxjNmQcU13bjIhvfBe930uj\ntruBL68/6/zVYvc6ZHRVqMhrCKKlE0WFwmk6pIS2/nsWE7WqocbPHfOcOoCr\nhNhGonkp+J7eXZzkWY9oTLtiuRiev92ZeUvTb/x4dta1FWQbtLIvuDAJb3+T\nJEDjLh0dUaEDxD2aqMhLG/Yl4+11G9a2U/6/HcfRc3FFKDnIjzRywm98sRBl\nmowb7Tu2D3mdGKvm96szkrQYpR0SXeU9Oi3AhdCNs2anbV6z42IcowyqBnDs\nWi8wejTya3KUlLiTYW6OFbrKMJ8b1uHDBEgD/ICDMc15C6UV+rBmpF6Fxkux\nXX24AgC7y0SH6Ijc5dTC4hBl4vGCm6dghohTsYU5jQ5kvbqedhvQCjItiEeJ\nKEQoIF7ygJlgWZHmxKRsVyiqOFOjZDNKvwip9MEk6Ejyvp2098hR1UoNLz7F\niOyG\r\n=aUkP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1c84d4b5.0","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/elevation":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a1c84d4b5.0_1578420658167_0.4031751517346238","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/switch","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9be69c69d93d9627d6590ac9968deb9c3a377d28","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ec9f16578.0.tgz","fileCount":31,"integrity":"sha512-q6ID33TK5IkxESXyTQFjMv6XzwV7AwLM9GLqeGv7wIT9b5xSVF8QSuikcFuiBogWl5tVfZJyZYJc7+vFqMnxlw==","signatures":[{"sig":"MEQCICwztfM2mWhbByXl7vUM5P2m4zkK0n21Gyn+KXxn1Hl5AiAejhn3IADYCs2EBVMlN9b4OfwNRal4wv5GOn0pBNWoVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6RCRA9TVsSAnZWagAAP4UP/1VaM55WfNzQhL8a3ZY/\naXDglPuWZh613C7v33Ukjh12XqupP3tbJeQsvsksMHiqmW9RE0z4+T/78V8v\nYpDEdTnqquW9/uzGoCx6s/Iwnpy7ozR295Iw75gyXXunDb0LvBlE/Wepe6ZJ\n4rrybqdT9nFLrw+lKkj4vdim8dtgKCyYFnuOfDVrdWdd3kBk2m0fZa97dTYL\n380tslZZR2wUbm+0QInMupouIfY8aQQuX9qK7fDGAqVHJa7uhUQorC+5Kwkc\ng8VKSa0yjlvZX4X8pAbPyRuTi9gu3JtNBRMktRfVAb16qcT6MNO5eaaMRr6a\neZLeyROaE5K0FK+wSWWHxktOc9mtNlZLH2Jw1fgiLGdKrwx2ET+WDHzXMezw\nZwH4Y8w6iPthaoyJ/rbWVh3iOwMdbpAJ+AqJ3QU4i33q/vNSwLQyvpy20jQX\nxaO8w29LZbBgow2Yn/vMCOk0S+x9HBDU6yYdnt3PL7dBuCWZZX9aWb9i+h3L\nxFqaodJchZcBtelWUrHEzT+FDCIDdtfRnfzFzHrJIwiMkXvnHixLrwK83dCV\nwoqVeHnhzfyfWoK3QLz+1pEYWrDLEva/xANBj5p8NKLn27tHJTk7SF2BqrYQ\noPNx9vgxSgDhzs8w9PIQUWzQbCtUWlwt1VU1pKc+6HdDs1LmlRl5I6iRpDY1\ne1+p\r\n=5YBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec9f16578.0","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/elevation":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ec9f16578.0_1578426001294_0.21427635483896834","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/switch","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c2fedf7e8d034b12e736879a0bfb4a83b778750","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b602226ce.0.tgz","fileCount":31,"integrity":"sha512-YTS9AciOC8nLQjAogUePhZNO68bxqrHq+qy0Ri1VB4+r2aSZKG9a48eT4Pxgx8Zh+kVJoVUjba8QFhojlEOtPQ==","signatures":[{"sig":"MEUCIQCWZvUZhqinEa/s8WR4xNAPRyAnuKNO3UqSqejgDy1HQAIgUDkV+DTVUfQE28P/NJb5XOwieCblfd9AfkjQBvE2C9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObxCRA9TVsSAnZWagAALiEP/jpM3ieEO9aGgsF3R2TK\nrcTnririWhajIPGKm3bJZt05xl/YxwVXQRLaZMgKU3oPv8CZ29fepSql7503\nmZPANu8vBM45XIjTTgrsRyHu7s5HYM2iSxyDJjsr0BSuNH9DmZpDURwfHLdY\njgikAgoDu+ViZ0mUgNvGHPptbDFguCROCN0+PC9OPdl2S+5ul4KqWxD2FEPN\nbKHmq4/uLKaR1SzNS/wF7l2R04iKUEkF8PFQ/JFKKp5B42/INM6e86Q7FZmc\niEjqF5HIqC1/zqkeTP87o1mLYqAF6ZDHyA+2UcAJxyRP40zdTkWpQhHFeBbE\nnj0PV8RfYpAL66HXUYtQU/7C8QPNC049LXfK3raSJGRz3XFupfF67Re7NuL7\nGo+NbwaUzkTbTO44Q21MMVBz/d+Z31A5saOsT+ngqQWpqQZwG/NAuFs095Uj\nf2ND6a8vnvruFQg2P3iNJzmF2G4XWC/R3LA0Qsn2JpprPC2DR6FZq6nTWPI+\n5bUyA5ntYVEqs+24rPpdfvhkIys/fuuudkba+M8bbgiRVbKDS8KNh72vjHov\nsACGnmcM4cerTHm8EfmOnEC6tI0Gc7KNTJQcjGk/kMzLy99/rP4U4x2a+IlM\nb15NvrgrUYvdXBs4mF/n8SAZo1YHEQOh/qgLhNiovFMjr0KbP+ZMrG4WJbTp\n3C3G\r\n=fIXw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b602226ce.0","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/elevation":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b602226ce.0_1578428144919_0.08867104560868011","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/switch","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ea8bb03a0363e498d5dcb968ba6f161ac98be54","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":31,"integrity":"sha512-5VN4qEkghGJGiJ5SdvQrtST2/p12mC3CdkB0ivekKaDjPRADncQhTullJ1hAeBoNTFnM78BymIJdUwfccg/g8w==","signatures":[{"sig":"MEUCIQDSAOtQ4zZg4U3Sgnm8Y8XQ1Oi6L6QkN/vvGGe+ywmYKQIgEvDE82qkgYOmbZUG18uUzodX/6NUIDG6dwm+QUGYIsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPeKCRA9TVsSAnZWagAAgy0P/iaSVPE8kR4vgbodCF1T\ni/WSA1Jx0taYyuB0rijLMDtgsxlzVUKq7tAdbXkPVDGx0j1IpVbT9BDkkYG2\n4BoSMksBa/hbwiq2NkxuLkGqMp0y6O2nTg0ns4hL+RKhWUZd1vLbDFJ4/Z9F\nCUIDJaTUi+x3361p7JHOeSquJ5vfTNYDOxITTZGwGBk1zKCplAWQUKeq7834\nUChIsjBoAC+0iPmnUIIyYZFbDeO/fY70w12wC2hcaosWhXWyZZjUAj+AZFSW\nF2GXywZzEdG+cNtpqjFMj12ydKz39FxAVlDhn1opbJM8/WEmufi5U3rIShEr\nh9bf83RXtqAos93HSkqli4OiXrUfWz9Iv3lBsEIxMOC00vRna0+HJcr9ACFK\n3q5XOke2ydt/WQi2H+JWWfKuU7P5KGQ4BCJy7AUkmaV0kzVVQf6vl/NlPkKo\nABHK9LiSx+evch2yWLaEJscJ0O4PJoRK09T59WZ2HfgI1DDtqoxR7HM06laa\nWSh3rlwOkdGkA3to69/qnx+XuSHuSt/m7WKgiDSPHoVBU+7Fu/7ZNKrt4+hI\nm6uAj6V2ICHTigYcPcPj8iJbkvrDhm1WSrx1O+LGw2ZQF4Z2UFkmUU6GBeAt\nlxBLbnCGBpRWSo+h4Dmua9raYc0xHKtJlViSBuTVquMgE5jHbK0sYvXpd7HN\nmOMc\r\n=YrXe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2d2dc08c.0","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/elevation":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b2d2dc08c.0_1578432394383_0.9452471634105444","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/switch","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe05881cdddb53312880f8ed9ffd8fc45c30ea0f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.61f2d7580.0.tgz","fileCount":31,"integrity":"sha512-xr+4u6qH3yY8i/D6nbSNiWx2oZaSUhLAOfzlmIzMLKQ84m+qVYSNf/+KK/FngHr3G2n7UphT3O3Slk5sPlZ63Q==","signatures":[{"sig":"MEUCIA6NwibttlkrHVUGHwdmQnsfzk5tl5GyFK6vZzjpiRS1AiEAxNvHprDl/NRsyMQxsnu7rY4dGcgi8DMtI0V9jNRowVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPq3CRA9TVsSAnZWagAAhxcP/1Wk0MVllpKOP/L0K2Jj\n5Cha4Ifq1ilSSKWY3IIdEAK+hABLcUZ9p15D0RJYuhin9X3u8EepbjfI/twI\nMU485O+As/Ug5BLM5HO2lnEQwEu7yHID3wQfkscloNTO7d0ztREq02xtK2lG\nML+l77Fav+T0HB7q9ySfpPGd/zCITeAobreFvMOFk2wXns7U+pj/MKA0fF+z\n55yBMiI1bp9Je0Z/LIkUQfgdfRFL9jjgZbi7D+ZIK/maqsSFaS+wK/e+nWBB\nUyGHYIIvpQ98xb8dbAAumthj398Xh3CeeGZhwIo0nFN/KNwoJfTqMNFiQJIs\nCsiVO++CCpU3rYSpqaiLwrkq/j4YN1GGSCWDp3ipIxltFOoJaI9AxIU3KE9v\nloP1mGNqY0igrWSAmY5E1RCTMZ+mwvntXN45iqlqnA3MSNelLfS9Gw+PUhDc\naLQljkfqi3Lud/Xgpah8MPDJXWHW+/x1e69iGvYRICdwytPJ8Hbmb32foiXr\nZnqemIgreggw3r4zOhpkl/nM/FEEYZ3k7xNwrX2Ke4K9zHpNqcorYNjGdXxA\nQKLOT+QxrlTar6TCPUaIryml2Sg4NNaUheRtgOaVJW3tX/RhucdpvuSDdwkE\nBGBx0C7ZcPr/XnKZNzwfQ568RXedhgyPOJmqSWtIN4ZRxG+a7XcnserVidyB\nCysx\r\n=xp79\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.61f2d7580.0","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/elevation":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.61f2d7580.0_1578433207630_0.13718272751487115","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/switch","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd8613eec7fda1b4082bda5c785a986582c94c82","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d1be53a2e.0.tgz","fileCount":31,"integrity":"sha512-nk7BZTY1uFXvNyFkp3EJrHV+y9bHrKxvSftUbGR1N4embSC/OpO1RvbHpNpAJc4H29aQpujPuyicTPxmrmOqCw==","signatures":[{"sig":"MEQCICvlvBOsufvR95AeLgni0xF7pAVqL4zY7IvmKllZEzQ9AiBfmkei7patvgT9Neu4k2Srnh6nyTAZ55cuYVSzks4ugg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQOBCRA9TVsSAnZWagAAlW8P/iDkyL28cJhyjUdVabAU\njS0upaDbG07ppnYaQ4pdmQEtq0sueWAH1UAh5tb7hmI39x0XKL1+ixsqZwRC\nxF1AOVnJYmV8x+7S/W1UX9XEGvMUPiFofQikZu1FAgmRvgF0mhiLqQVQr1md\nI0+VFOYI+IjgssuBGpl3NM4aEml7EmWBe2F37bXMTKIEzDKaAhFcIiA+Kppa\nb24SkjMFEdIrExjYf9JIxWOkMsgYS8vDobkO5K8LbFVToioF2z99IGUI323j\nQCr/ZeS3Od1pWYqNEgUyGQV8Q0iDu2yQDP68zfidIV7+PWGOtVpWMobOs/cm\nRzlfy5b0HaprIe0SC+XMAXNePFZFLfuGpuHJ8NZuIE1vnwas7Czxo6Zeb4Rj\nVnRCaCye29yY9aMgAvmOO0anEaeE0Ia05VkuEJYvaKktuh7e5aiwF+VuuHwf\nkI2SzM+X12MEw1wv3IB9yE+pkD8TYkfJpP4+WPYjm+QHEDcxPRpxPL94qoVx\nhajLKHAwD+03s4EEZJ9l5y42CLDbjtFOTJ9vpF6SS+Knu7KdRmHva+LtUmja\nA8YbV7yL0+v2I3i7gzKDlrH92pgcHq+UgFrhLP7zx1A6CHuGpev28hExdnlJ\n1N0b3xZjNE7PUCY+6DF/EWvOIPJnwpXrjqtGYbR1qliK2WPaPvWJj1m+HfVR\np/b9\r\n=HtJz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d1be53a2e.0","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/elevation":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d1be53a2e.0_1578435457549_0.3591429323488875","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/switch","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c76c7e6b400129c34e854155dfc470967f7deb8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.9b0d06e32.0.tgz","fileCount":31,"integrity":"sha512-vtYiZwEuUuJaVrSHEzV6QO93c6AZp45Unj2DbpNSXsFW8LgPQh+SU8GNm1PILNRKompoiEoTSCS9eM1oTrk6CQ==","signatures":[{"sig":"MEUCIGmUyQGHn03ax+tx0qMQxPGY/s4FTghSYaTt+fKF/v/HAiEAu1CwTu11z/jwg3QO6oOeX2tACiBzRh4VHGqueTc8Juc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQECRA9TVsSAnZWagAAiogP/0IbKXX9jmQ1aAh94LTi\nfj9NHxaky9P1+4zb2LPqbLpk1IO0EFizVymX2qlsLmsGPtBKY/pQ5Swr/6T7\nGYNj19YBoziwpqy7kXFp/30MRtzXWrpqlO8PJRAbIGaGEGewc1R+MTq3TqOH\nyioB7co8nbsqapyJPk/0Y54IlCX+4Ur1Q7fU9AsMY37t6YfGe8+sq5+gi5JM\nGWmTFAus/ikQD4/bWgadC5gHqK3w5hoxWMrAOoN1qA2UswAkmxEeq8RBJCba\ncYA7x9Vv58vN82cpW29J8gV4+5butJRGWR15wJYzbNYkiTXYphV+3VZvBfOp\nRwqw+aveSIgVsDLIsTkCWX78r5FGtbJy+TB3KfR+vni1Hpez90gZzMqzgscq\niljAQ/tkX4P0zofKZrOQc33C3sxJGx15HxajzZxTM9b0S0vLoe86cjYFdO83\nzj1sYC4OeKG8Jz6naKKmF0MF8S6DqIbdHHpLP3nZCV8xT6u+oNqKWAzMRxKn\nJTbq0oIPZ3loPn3lpjKoq9WdqojnsSiE6cFpDfnNemrs/Cm4PQiapnQh5FN6\ng7wfnWAeR139rGtwEZ/NbxVy1sg/dGXQAr2TDJinpx1msdVQjb82RcLW53ql\nPrlKzlAaP4INSPUTuemx85eoFI1Q2Hi491YOTu4WX9AffGC3M0Fl/TzXycTp\ns6iN\r\n=HudG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9b0d06e32.0","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/elevation":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.9b0d06e32.0_1578435587760_0.2381585831394366","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/switch","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8fde7e2a351e4dc7a542509940fe3345c1554df","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.730c807a0.0.tgz","fileCount":31,"integrity":"sha512-Y59J+BgD5JN1682DZu6S6xdT6UJEru+/uHJlPf9zDklSvzCwb1xOD3JAG3hRitjYGV/aZFwuc9xhb03NDi7X1Q==","signatures":[{"sig":"MEUCIQDDh6DeGDZyyg4xR8s/lkLHnzOHFGrJxpm7EBsJlmzkyAIgBv+ibXh3FEvdCNHFqSxIm+nxlXhwhW4osq/3rwfKRek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRjCRA9TVsSAnZWagAAHaoP/2CTJeigq5FacvovQqSK\nopDDoujRasiAIUXqVZpFf7ABvoDaEUzI/yyC1lAPkWJhzmQu7soA7Qbf7Hue\nvs0Km98Y+E01u5Cco3QgsHailuLrn3wbCmy1JC3jKxdePsLShxXMJkJ+ozHk\nBZA+A4qSi0UhqNX1P8ZR6PB3tyAiBlG/MnlGT3RIw8KFxHlzn8cPOoGFx61R\n2F2Sir4883E6oLhIUISim+1RRwSkAEwft94WkSLy22Ra0xZTdlixB7JwtcU8\nPj9HmYqqefYmiQD/6juEKZVfRp1E7kg5Az44x4psX+p2TA2dl2BXm3CSjySV\nqrRA3m3XHU+N7oin8nrBPCDi6lvdMLkw1sN+N4pteXVpCg1u8s/sNZqP1OpU\nM0osqbxjajhdgP63jI8mFv7KlXzzF2yODruSpNOAI7reM8fBgK9nEvPWqvGW\nTlgLw5+Nw4dTHtJLUkcK14JU4VflqWMxlxnsZjRJMWthMVwFQK8k81SmF3tS\nV3JF1xEimmWXcZNQUmEJtvY32nJilsTh2esclt8DHAdhNiVw1KFKt10y1Q+G\nxmSPPpfI/mT4G2OT9wbtUTXV1TzhHTo28lNfK73Yr1WnLpMNvZHQhviyjx/F\nb2xj9cgTdE2mVgIR3c0rN0i6u3Bx7SnK9CYsgh+k2DHp7eq2ttRuSBZKHCXu\nUs2x\r\n=/+3K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.730c807a0.0","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/elevation":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.730c807a0.0_1578435682850_0.19864161797221236","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/switch","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83c4663877ed09a9f8dc7f1e91b86243621e8811","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.2213152cd.0.tgz","fileCount":31,"integrity":"sha512-9NlCInA60Zo4P5Dnmkk5MUuGnJbgKfr6sTVfSUrKw4v73nYp9iFE4S40u81A498Wvs/WOMvrZWKbWEc0hd0PjA==","signatures":[{"sig":"MEUCIQDL+qm6SV/sFO5AzFb4I722gduswBvl8mRQGl9FovyZywIgWNcGfakd13ZFDeWaQWTSW6hWhAAzZwY4ao8rzb6aXQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/hCRA9TVsSAnZWagAAnW4P/RfJM5jjsqNqQxPvGd7x\neUoZGgRx3TgOrYKE012lImIMs2Xnw9HPK/kJzWXK4REScUhSxtSw7fwx7K9+\nnaOfLIhvXgQA63cT1EMA3WcV2MKGBEYRb682LjC4xrH5f7/mgNDKmYHB/qaR\nq3iZmk912Ddi7hhI8n7urGpHZsMk+nC2kNYzstj957y29FxPXuWRdQSASkDT\nzdeTo47Tvyxh5ly32XbN6uV7gI/QJCB0i43tXBnTBWj+w19nWJpR+S+kxb6w\nA7LZLc5VSUxMkYp9YtE9t7cP6BObABAr4F5dK+z977mZWefrcEG9CKA+AHeY\nZDqDD3bVuS9zHiuTonbXbUdyIvUTe2Ido+yUMqUUTDhTKWAwkc/eu0q2COGC\nMfAQtUkQgcLjCeB0jSYzyjaCAx9ddDR+Rhb9PY5bLZqlmpDtyu26zps+MInX\nJ9oIh4+pysAqtMTaWPUTVjBdMmId0TsBnioxT/TVJltgvozjNlfgMWH4e+JS\nVyslXt1YVPU9pPFqxVbjJLxw8JA50/69ShrH/SCenB7JiqzZfmFNriLl59BL\ndveYJhruzcjVkUP8Anhe3wRvGgN4Q9o2qFrJ+HnXCBy4NJIOI2xf112F+GqP\nzNI6hPnlxexPQTz4idotbIVqpYCiuApLauQlXetr3EUrhdfHrJQTOD+f3sHt\npmAw\r\n=jye+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2213152cd.0","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/elevation":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.2213152cd.0_1578504160698_0.03169976204887326","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/switch","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c77ec90ffaa4c4e1f42fdaeb95721e46567da904","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.5750f7169.0.tgz","fileCount":31,"integrity":"sha512-7UACHMBLlaqSARARmW2gzXeeqLoN7XGaJlDypsivdG34scTpoFWGo41jgcYQiEDup+WtXyxOhCH94dg+kaln0w==","signatures":[{"sig":"MEUCIQDboWx4pA6YjHkfQF9OxWRf6qYr28SHZVejf6guNiwKvgIgb+8EsI6d7RilecTFUqthHt8wC4Yx9StQ9JsZhrhPe+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhgHCRA9TVsSAnZWagAAzXoP/ijYJ+nl/t9THr+9+fkC\nwdzHJVURkIy373ABANonSXQ98iykx3n5O1Mx+3U1wm62r+yt5bGvYBBMRyyi\nJXhwdnN+0v1CxfYbZkTs4mquGEoXBwKYMyiVdsaMRG0itNkRNpJLZn6HUgDg\nxCHbPC3ZWACGlqUy5P4D/Nux4wj1keCW5DBEAXZBV5JasaHsApvJ6OBCwroF\nCOXkVp7qkHC111Jf9UPKDTPTf81nrj1hqxuK5FUPti+9Lk5rYv0ZVvP7Q466\nOL+RiE7bAQ7Id9UgC8UqJAUQpMzjFu0ZaodGXjIP9B8ss6CKst95KaCVSzd7\n0SWEjo9PvHL2l79nlaWmeVNQhKh2fkCUDDIjR7AG2pMbhu+A/KM96Q5sf0qm\nrdDDVBG0ERbcmLmJnhySa2hivG+0/vcCIs/Owmde7Y9sQ6DEWGWOCv25r7h9\nkRGzvLnAAcb4b+QTksFDFqcEBxuGKinU1dFv/RnKKy1Vd9UpfWBOiaUEZIxH\nhtQKbEUmFZaBsEHrMuoV6CRj6fhKfMzMym1Vd+4dCDUpK/WwNsn4X3sfZuIj\np6nSjGx29TeAjOqwALLm8m+kU+iZlFj/xQ9zFAWi0QocJs8k9GIDmOLZeIBc\nvUbFuWFxqqRGTGTGgN4DDsweEFCTaWnZI6sLwpsw9kKqwhIJeVITeuT3oKc/\nBeUd\r\n=oBRA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5750f7169.0","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/elevation":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.5750f7169.0_1578506247340_0.9970691857996388","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/switch","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"176c97d98f9847f0aee5d5a6839c660e036e0a73","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.f7abc7a43.0.tgz","fileCount":31,"integrity":"sha512-LKS1c6iOWey9CTHg5bAOjgm8B2+EB504tsFJKzU27YiD+Ejv4D2s9B5zpSTQshiHor7wmlkrCPP6OC/gGhUdgg==","signatures":[{"sig":"MEQCIGHy9seIftEU6xVCfPNEF4jaQDa+vBCxec51Eh/4MUPdAiBA6Gnts//IbLt78IBPe78dD87QBsj5XW+sPBs5V1nmng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9ICRA9TVsSAnZWagAAAAoP/339nliK0e54RXHY7a5Y\nmpYSbBsWCWPD1YI2PapBwsF9aMb7dUkgEUyGBg8PGdiSDD+iqGMZtVlKVuFz\nuYWnmkBhmbtGkXHIEhtNL0Hahz0nhvhZRPEYxyTLopxLJ5wmC6tVkSIOm2b+\nQScAU3IjMrxO/mGtMfQ3C3K25hDpZxtksSXHI77nks4TSxZfWuEn8PUSYAGt\nMeEMeekTdUrEWXzP7zbUQeABANXqqEIy8ZKHABER8XaWy44LgljTOW+wnLuW\nBfZhaqGCWN20XQk+z5s8WzMPO/v226ITYVTCP5aY7S3gAU/F5SRQl2mq24w7\nJ2Aeh/toyMPUHy6hY/gYucFWAWubR+e9kaY4y1Hb+gSNPhLLYWnI3NAXwpCL\n6X6Hsol56fOIUmIfPmNoSyKJ1diJmxrlWa/Y2bmbIwmyxZ88OzDz7cSK3+oy\nuAwOHd8jrM7z6v/Dg4K+acizB5n0gFG/QfHboR5BIbpigAZDscApX42D2cq7\nJa7+3WSSGLAT/aWyWK3/m++GP4QRdw7qLomVQOxajyvfkPRujOIaRVcaopRR\nzij/naa4u5HtZ+RFAED5BeYPP0Eap0e3xjYLhzpSaX1UJo3rM9DrIm8xfQzR\nfjCFqsBDyGk0icjQMeviyHXtB5uYq44lEnKI2+E3peX2STHae+XVCwvz27ex\nC5OV\r\n=05Cz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f7abc7a43.0","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/elevation":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.f7abc7a43.0_1578508104407_0.1935003846136638","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/switch","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c66359f46549dcef45ef83e7f4a98ee6846d4d9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.bf7b4a061.0.tgz","fileCount":31,"integrity":"sha512-Px8ZO1lpTqxAPPWG9s1w75EqSt91JaXSL5xfll40Read7re72xYsMb1TyTET2dU6lzkIUOU7I4x5zpA9/IpxWg==","signatures":[{"sig":"MEYCIQDhse/mNJgJ1rAstgyGlUAu6lnvNPb9ieMQ9P052p80MwIhAIyq0Dq9GqPeRjRyT9yc7WvWmkUhlJ4U4KDjNUDxQo2t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJ8CRA9TVsSAnZWagAAf+8P/iSPJ1Fi3oDaGtZG0hNr\nVjkXrLovuCb/21D/cSqIppOZ6ebaBxt5rm0OLCBti2uj16/CPHKdTf7pNNNM\nBi+JjdiaWtIdRG7qAvS8driXjcJFLJXj6W5Bq+fU3nltw5YV7J9YlAsfeZ5s\ne+skHp8g//ldqVpnUegrXeorWodS+WoVMKoOfiKKMjoGpch+e1HDA2I5nuuJ\nqX525kHQA/ZYgUB4xPLbToz7Q7nY+NoL+6XCs/u+94Il2R86ZXW6a/DQ6/NM\nsFyXQbkkNB+a/uoU29+95E6uNS2c7hfo/J3W0ydnp+a73Fy3CRSsDIURTDW1\nEt79hLvBVMntQ1+EfynCrOYxPdxR5/7/lwJontKXrZWag9FF40BtP1SGpIuv\n2bJzugpCgXbYSg+FRq31FqO2Kyyrtsj9qMo7/HlmkpO+ZCxd0CDrY7mT4LT8\n0EtKcZXLybpXuImMsG5dDKOoAX8Ax7uzuoo8v4NKGpG5mtwJaezt/oEDNkZh\nOZNe4g0/iXNW1gnTgt8kRJJtnWqxNQof3AnJfgTZH4R3mVuuklEfPWqRU5Ou\n39all7Tcvpy2srjNxR+6oPigrHQPbFVUlpohuT/brUenLOce+VPutVuMpie8\nKoDtGQHF3KuW9H2wAyL4KPDG8vKyb/WOZj5Efpx2gzJlbPRMFBv2DlGOpdJt\nX9dX\r\n=q6Iy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bf7b4a061.0","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/elevation":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.bf7b4a061.0_1578508923680_0.8127067224185331","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/switch","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2110ee262aa6464ab262ac382c366a0ecc5127c3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.784fa7903.0.tgz","fileCount":31,"integrity":"sha512-wv87//ot8GjlWn6hF+akQ/QkiLRI1kN6mmo+XE7Af73Ppc9bQtK9QN34hkfITui4qQ5AXkoGFDiiuTQ2YhLyoA==","signatures":[{"sig":"MEYCIQD/OHTHaKfAwhtCeUsESGiIekCEFOMSKy1asaSufsZgZAIhAPdxKoxmIYj+ZJv7zwoIDA9uKcVN1A8cgSFrfl04OLKk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFik6CRA9TVsSAnZWagAAjBMP/R3RJDVIYlzeRJYT+Uuh\n43nXwLRFCi5ZdbGFFMujrXAu7Adr/iulU8vrdxz3zRiGTCoJUcHGXF0UKZ+p\nfjjPUHgeiXJmmQSW20erSztWeqqqbTBP7K8gsSC8S5REujlGQDzQ7xum1OEw\nN57I/tCpA92d6HhR7rCC+MWFn8555ZeS2mKN3vTcyIkC/JJNwhjkT1QApL47\nmu6uaVoOWJ7h0m/34bJEqroGBt6gyBahSeAxP2e7oHwhfcTn27CuQN77WifU\nnvfmsMM9gsYI8AwGGGieZZ8P19LXOaz0EGtulGPwTZfOXGcPlaQ2geP7s6T6\nTHmwSD5nath1mi1q+iGLQi381pXGN+tf/mZvZcbrHM9jPDL1pRBUvtSQdMGU\nYGjYokwEClcqYSSJj8MrrU2vQLLmKpOhOnWAxzpD1r1paQtKzb4mEy5qjQKB\n1q2VehBFFhe5DyTqipUDQVjuHCjyZ6KFSuD1MhxnShKrs4jTrhvYUAS6HECT\nYjAr+MrOHkF+hlQqv2hh4gmH0sjus09m0UMHX1Wz6kprdzeinIQAqKNW1IFD\niRicjMrJvzsV4ejW/h1fg9yYRSte0JrF+i1xrzJq4xTJcGLa/GVDZ6DYIJ0Y\nUi0lDYLLZJgBAOtbBhqkWiJ5uWIKknveaYcDPtPViD1Eeun1F9DatlXYVRFB\nPXQt\r\n=wbUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.784fa7903.0","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/elevation":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.784fa7903.0_1578510650294_0.24117354871513763","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/switch","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecfa6d0df976f48f6f60960ab686981833c0c507","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.823c050ba.0.tgz","fileCount":31,"integrity":"sha512-qQZpqSKXUncw9J3VzZcUYRlq28u8dEIHlKwoRzEGqoTyNqvXQPnSlSNnFI0L2tJQ13oCci3LFrrSssgtClpbtA==","signatures":[{"sig":"MEUCIQDOCMsecIF1usZ510WBN0z9ssUcUH7vqQBCNdpjP3QqLgIgGucp1u4JVoaidI2j5U5+Babl9URduD2VETEgdMyT07U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdrCRA9TVsSAnZWagAAUkUP/0x56FrcUeV35GlBGGkQ\nMq2uYnSaRaE+QjdiNvQUPk4VlwtaXZYq1L9XXtrjquA9vdNj987WxWNonWgP\nT5nqaYCgHrCrG/HnITtrhHL0PdUXE/8wckLBEa+SWZvTHFJxGBUKgzyuFrAc\nYxc6DM+dAm7AKhHFoDORJcJxEmlBH0/2qcEKl0SewyfUo4AMW9paeBzLCPVL\nIpzPjNrF6WvUEhnKCTcKmOhbtoj0qQRucYHEin6NomKNj+kchzNso015ib8T\nxkcKofNvS6j3xOVX5gJp2zWHcqchwc/baeFmnmdwod+aLbTwpWqkz7yaC5sU\nT0UXTAeJpYT+FbjZmz8PX0tUWTp/MydCgchVrK7wRRdrKTEw4Mc4gnP+iPYg\nOnK9pc2sjQYIRMimsEX5qFRA4jN/o2+1DIfiql3vWr13Z163YEx9S3r+jWSO\nQkSiE6sRieTroH0RMwlDowceBt8g5FVIJXPjlaRaVgK5BnS2QmO40X7242U9\ngQHSEfS/zfN0KcNe0GAGxQj+TBAdt7Drne+QaBF5NalNXkcLqPKKh/4O+8gD\nKqvTXcfGbRME6uObswLNGdkJnXIUQFVxDfhbsh/kINcTMxWSiJjh5durA0Hj\nN+Gey42voamcDVX/vdIBTjHEP2qj3vFZHjEe3A+7SMQLwxv4kSG7goUVkXXo\n/BDI\r\n=XLCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.823c050ba.0","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/elevation":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.823c050ba.0_1578514283488_0.5602497829780271","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/switch","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cb10c527c04f1d6ca1b2250af4e2423a2f15c6e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.70c708dee.0.tgz","fileCount":31,"integrity":"sha512-tg/VNdt/k4qor4MCQNM2+G81J+La1JJ6WZpfcW35uJLzS3WIGrcR+2vfhpc5tGu48uYCBoHQ0POn+9Ajs0lYCg==","signatures":[{"sig":"MEUCIQCXG0JcLqWNpuNLsEPg08rdx3duPWFAQE31JZTmWecvJAIgEXYo9i8AsuiDzAEUHXhoMtsSqZxVLHf8nX5IjUIsv6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjocCRA9TVsSAnZWagAAhXcQAJ/ViUvljzE1ZQC94cwa\nK5hKoQft3Sr8B13SX4rtLD8O7MvH/HMHafZUn8HRXIFGtl6jwjg1nqyG+jLl\n0JQ81/0hvUYHqKDWBwtg3G6bOKGIRWB4qJHbh5Xxyy0CHnkMSeutMZB7A/Eb\nGfTOdb29XXucPxq4o60nCCVwnxQckdd5btv4RxVK79st6sDRlHoA2xayMr4M\nFJ8fxwEiRtm98WBfuWNSYNeo1bc/evY4BQ94sB2MO11gpVfHTrr9fw1tJn37\nlUnu90muMq/3oW//9N7eb3EP3wSVj3Ki+bHRAPvKvam1gcMMyTtijocYQzuR\n9Ch2XkVVOONUfjjB24ta7cJ7rD4pvXD5fbKX6Xs+oQE9tyyIIsbANuwV1n5v\nnzvWdEBemnWcLnBK6GNynCNCZFlzgzNLBEkv2sHTo2nHjKenlSkT0sHQGM/T\nEmBcq7kCkCvl8nOhnTttuLWawi4FbrEl+/AHqjLcvEqD1hy0432WyVPqahcW\nx1dv4+0hMkLb3biqPyT7oKfGpWdIU3pDAknf8nBOQw+5qIqZMlelbEb9lBRA\nUCN9EDUXiY/VXS2fMHD8E+BGs9Mwj17/baRwGrcCYVI8jZNxJ5woRqnN//VM\nrDc/uPTimdiGFuqQArWEDMUlzn5dBvJS4mjwcmf1eZUKB0mDSIWOr5egZMW9\nYxsa\r\n=oA9t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.70c708dee.0","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/elevation":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.70c708dee.0_1578514971785_0.766417057846098","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/switch","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4675492e5e974a8e5f5ffc92fbc71c4b3be3a1de","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":31,"integrity":"sha512-0ICEf1Lf2H3GKco+PWtYY8HM5RbF92tJhMqlAlaDoXg8Ri5EZx+BzTvt23gtfwGMKW1OUxYANN1nF/WULEa15Q==","signatures":[{"sig":"MEYCIQDqueM3qX7Df35DZDIfUSB/LprbPicjq3gFwHVixZW4kAIhAO/AItoSkIO6DSK1pMBhNLQlILKfIe/6XGPuly09yi5V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkztCRA9TVsSAnZWagAAf0UP/Rz2+fc0YRaZtZIhvqIK\nMbLYPeplpbQgOJCeCc4OtjN4NYguFtQO0xLqqqdLWgBl/t1Jnn5hT3h0A5Bz\nCLvwlpQzbVDzfzk1UPU6Df6bFygYHHRPzszHN1evXmSC0yS6kRGqNAtLr6Dx\nnNVjPIs+VGm6eGdgG5X0EsJjkz5b+XfmvtfuVD7xhUpEs2zIrTriksluiut4\nDhieyXaHah1wIbYP+ddCZjBGcaMfVdhFTdFW8tQhHw3llSTkvZy7x1734u1Y\n5djS1XIeVfSf0Fni4tHLMioiNpJ6mrXW5SOdZ6bq6qTWR7QuZzvnFxjXFzT+\nvIE4qg1i2QnUwzJ5V+dBYTP24Fmr/DEyPApDhNgh5tCfblfE5oC83QlaI3Jw\nLEMl1TJXMVBl83gnr2J4AHZiiz2Yzur0xyecdy2An0A+kxj/ht7DPH4Tq9jJ\n577rnXifYeWviLn3MjZdmLhPROm9Up6K/ibGcuet+a2EIxyZZ0nYWJe3DaNR\njte3MwSpBVL9dY3KEv4uR/MbFns0/cYHxsBmwk/uWDjVvV9CDHkAv5LnvdJN\nYIDwDtXG0/kqkB8mDIsITkYM63XhHhx4TyTm3LAh86C9GUGrTUuq/xe8v8dr\nNjV1xLBL8JcVLvnzeT8guTHaiq+TbKsaFSpi3qChczpJjfCVz5dq3W78Ybth\n0/g3\r\n=euHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ed9d13d0.0","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/elevation":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.5ed9d13d0.0_1578519789385_0.4363293790489937","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/switch","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ae1e11019c7a7b99f6fd8f7bddf5cf3c58c84d4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.4819cc7e5.0.tgz","fileCount":31,"integrity":"sha512-wX3xqefE9y6SwT5UmIsFQV4OEurJvYjKRKsJwmTLWyLH6KTbVhbrB70Xlo2HUHmI9fMtrKNIcB6Zdnws62rZyA==","signatures":[{"sig":"MEUCIBkz1HRy50wWExPeqM8z91uX1zjv+r8TgXSXZFX/TktgAiEA4Rdd9Ir/f4arEhTIwtrp/pAoxGYUfPx/L0anFI+cT74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCZCRA9TVsSAnZWagAANfUP/iV1s7iKAyP9aGzmBwNq\nrzYzxFKHPpt1ikq4MqbXJtHZG2aDGsc8R3z/cp813M+S7OTytNCI0UgSEn/G\nguzWAUr4d5NBxj9czqNwLCQUBYYr6gEUIGOItAsdzoOZNFZxhkhttjLKaQvu\n1mQDzlm2p0WA9NzocWZ0jQXJjJUC1uXcplXIQE2wV8qVk3i+XDFHLrC+RKkp\nk2NpnFRMYP+GVx3RwL8+pPlRU9HvEpHMRK0gMp+x4TfldOBUdDdSnSZxFadg\nBWRNOUWEfx0wD/itRRvn+W0xRZxMcznx5m2Aw3W+Mi6OKzi6X0/6oeoDMoQP\ne7Fo0jyAvcFfvLw7e2m4OPFE5AYuSxJvZjUKSfioUh15bHLPGjEM+h6lbCyH\nNDrHZMJi3ia2BSm9eTE4lMY9B7eaTFYj30N8KKO0PTLJk/g7RlXh1wzWfwPI\nQN1zUC9XWfl2j92PbYLUT1li3NTfLAyA+dDjRIkefn2v4OTjLvZBJifzJtvu\nHa0lOANbriNWceeIONa9+WHjDOSWJLTmBXuMVFz65v2DQwzoyIb7psEpX2Xc\n8MNroUl877J7yDUoR40zQG+NHim8SZdw8IOJd2EqILxQX/9ufUbt6xpXAH3Z\nAE4aqNARGe9XXS2w074ZRvv3UPHNzZ9lM3nY0JAYTYd221od9TCKgi3ypo9t\n1mIO\r\n=DMbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4819cc7e5.0","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/elevation":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.4819cc7e5.0_1578520729234_0.03683255148232978","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/switch","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e87d60b026cce83bee97bbba42602731276e06c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":31,"integrity":"sha512-TzQa2lKNbcvsA6TgPhCPjMcJCZ+9uUYbfiq75S30C+uL9lCJwf2QH+kj8jALGeuzXTUG+HkLAs4SiuO/p9F1AQ==","signatures":[{"sig":"MEUCIF2/mFG/dYWiN88Ezd0u2JbkfLPfWF+iisk5w+7Yeq1qAiEA0bhntv+6gTXPnl10Th2OzJdQp837TWHdbpOZ597+Rh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTfCRA9TVsSAnZWagAAwYQP/jKmH2Tj4HTNdfjYBA0V\nByYoHkZ7WORgObP8nrnIyoYlv586QxW7rLoeYxcDbhWU9CH138kgJKQ5niux\nyUvMDA/yq7FIxoLF5NVc891KNjHZ7ut+PvLw37nh1aYOgGys2I1lGRyHcd4s\nCKx9s9DW3xz3nOxKi2VQbCmvtjlv3K/Gj71vtszRiv+g+pp77yTKUYX6mB6U\nGaAr7liNFr90/X6eXLvBlqfrnqlTs53Piq5sexXJ/JE0fg5JSLU/huAr81uA\n5pdsUE6C5BPQE3hs9nsu3ANUDGlO1TX7XdcILt4iF1LCnjI/rzlylLtZSvJO\nzmdejc2KvUaHx9VpZnRqAQqYajRE6Cjh9V2Et7gUGhDvZo9fpF1LdqVR0l89\ngPS0hDSIy2ynPZL3/h33TuZGmLpnxP8nCZyngfXPK5YY27/1cIfJr0HLSZ6C\n0QD9l+hZJcHJfLmkmBYY+mMpxcWNvXJhldqBv5ZMRZctgTLrVW2GPO+Wgtii\nUEysshmbtLQ1rM6581gA8IbF3HNbarq7VjYm0T5nht806lS/GqwO2lIlQKr9\nbpNMgevCvIwZYaTbYqrPUoMHIKyYaVlbdczucwfHI5OJFKT9LGfWYQTGP8Ep\nvlkXd7hjgQzmLMl14Tp4X1Qa7gIj5oO388T8P0fehATGQotbs11avc2oHCAV\n5UBr\r\n=U3B8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe3ffd2c3.0","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/elevation":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.fe3ffd2c3.0_1578521822583_0.07993850657087465","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/switch","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a8c7e706dc3e4d2adafe579a51929917fb4963f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.c0e850090.0.tgz","fileCount":31,"integrity":"sha512-xzpwnL0b6vdB58e5n3M2QsZ9rj47L9z3dx0qQAn5HzPJKGIzvAOzipZEvoiA2VZdZL+HOZdxfaLq5wP7uOt23w==","signatures":[{"sig":"MEYCIQCYCiYr4oa/hE3j5uKYZ71LZLCCLM+UOT4Ji+pg2F+9sgIhAIFX1wmm16wxD5r+hwnYMouEwRJMEdsfQ5XtAa5Z9YQd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZqCRA9TVsSAnZWagAADXEP/jjd4Ku46Y3fvzqhLOzB\nVoA0nXo7jSVv1nFGzufwsDnLIO8SOp0KAA83xFPIjbfFrDW1iyERyij2ho8f\nmf/75wvOXjDuSOvjNwTaiPdqlFhlkGYPKo2x5NMMuTQJR/N/FljVXbymJN79\ngkXjlNRal0KRJeK7sr1zQhNUXl/5WmvJBtov93PEv17gE7GW85AmVIF8d9KZ\nUqVORWnr2nwu46zpWG+6OnBrXHPY3udgGpdYpbEYfZKm1+D17hm382ZvOTuq\nbO4Vfx5ZqnDRQmzB1OnJ8TaDloQWgfhaRrQNl4Y1srdIgHHI2LcjCeFoIkSJ\nI+uj6aIpbUOBGpJKKsMhgHuaKpZESXkYz5NRXYPQg4nCMDKaYIqRj/A7svRu\nCUxEuZCQslcuPDZWfyEfEJ3G1qazhbIe+SfC1T894iUAtMDFTDfIq3ug10kk\n0baWyRE6EVWsQHQeywEQ4PpJ557Npx6Di3sdLoBAOdPeQrfndVHLo2dKyuxb\nEugxcdBNBOtFWhuvAUF9tRRaH2GnD3BoPkOhiLM6WRhi7A/odaCFLMGng+tE\nQO7TsiK/B+7HnD1U8wP8ffOKcFsHkaGBd2XpPgKxkSH3JOiotsKkZgYl8ibc\n/TBBU2IB+zLW6CoYbsWpkjjT9XQCV/Mdg2hhq2CZUtQmmJk4QC4rgukE7Nyh\nVsCI\r\n=Iu7H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c0e850090.0","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/elevation":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.c0e850090.0_1578522217893_0.05804688607430353","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/switch","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94e55ded094021468d63757425e0c825071ae180","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.615f86f38.0.tgz","fileCount":31,"integrity":"sha512-5UVsT/OC83SjF3VqwFhuOVSSaOu7DGIzOtAZj132aLBU3BBV1aHY/2Uy5lMhEu98kFtEhBRIKug3qjr/GBc8rg==","signatures":[{"sig":"MEUCIQC8ERhXKbXPm56Wrmr495GOx6sSlUL2H74qVqC2wfXBgQIgRF8OdLziDW1SRShDm1r77j1UlCyPNTc6isZx2iwHS0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpyCRA9TVsSAnZWagAAm9AP/0zfSYHa+ANk4OXqSVSD\niMg/HHBP68ltVbwo8XpKsu5l5WKKstGomoRNStjgW+/IViGN+Gb6fJf8HCb3\nKsRi3DGpiAe8N3krXgOYGs2acii264KM/BNiFGZ/5hZjDrnz6c0MmlPGzpix\n3zE6/wUDlDt5XFjAZQbXO+OkF07Ha8rtFhzxO3SbLa96t9eGEC0Wybik1r0K\nmk/cZTQFpDjd10jWx1qCZuuXmJ7FVMyil/Wg+iWBWJ0e2vgyrWbXEx1nPHjo\nCShsJh4427zBdK8kT2GdIp77OLfATeBfIrP+OXcctgllr+GmU0cWts50xCy0\ngKe8Qkrsv3axqV7dPzUKl7g8Kd7WP7zJViVybJy+biQ+75aQXn2Kq+ylWEps\nDWWaCJ9Ggf0gKV6mkg6NXu9NuYmTGA73CS6QyEm44flLgCDAMWV/L78APOve\nbPQRMZfwRHPJCOh2tKHcJHCyIFQiEsdmQzVw4QiMT+oBkZESyq71Tat6BpIS\nMyPGF2+qbKgT/wVGA71RJOZcdR52CSiHajsHwuKXV5RuIWDnFBMJsN9DWmz8\nQ02ITQLQDFSUwGNFjO2wG+gWdhosIjWpBI2ZPCN1vKWRVVRDDZM4nDToLm/M\nIuMVEq7uSrugH5IaZgnitZuCHs7kgRtYS0RFVtAMZ1c0l9CvsC/FWSHEKMn2\nAQwD\r\n=aHm7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.615f86f38.0","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/elevation":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.615f86f38.0_1578523250420_0.25623244770241715","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/switch","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86c6439a5389963fb5ba3d0d0324291d7330b515","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.1eb032637.0.tgz","fileCount":31,"integrity":"sha512-wMkPvc151Ql7ZLpkrwyE7SBwW0bf2mtikfIggpeV79grdfR2eF4dg8gKOMu2tWHZbMqbP17uE8iBPwuGfBQ1Pg==","signatures":[{"sig":"MEQCIGK5KpOc1b3m3DCrZsPCeu9Bl1OTem8pmLiZjclFAGOpAiA2uQ5Vjf+nIMjOMkaZaK4E+oo2MT0iYZiW+Ua/2hj+cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8OCRA9TVsSAnZWagAAoUwP/jPNmNDclwIwzzeOv1Hd\ndP82gyADLazb4apC1LkNg/KDmBmFg9Z/WuBWtVnQOOwWE/6dmgrmsS9vpaN/\n4l/WFSxJmDDiEfRP0vpZgXemd1ZzjDsC63dk683EsOTDSNQn7vcVNJ39S3D8\nj0ZZw6pk0hXeldUsDjGEnRYL4TdQr4KKn2mQvctHlZppJNpDPpF0+PCEQdiJ\nVEFSYolI4C9C6hfj6Yt2/tm/ihUBporBwDNpVKZQik9hml27udXYPaK3e51b\nrS0Nkzr2fUo0fUmf3ts8DZlSP59E0mxAYeGbE4pqYOV0ldkKY9N9cfveRWAF\n8FLTHWimvaBp++zfCtqM3LJovN/TjuoCq2OVHxILRivbfpQWPlbsS+pk81OM\njrU+4luA2MuVTA50Bx5OPfz+N9TTs1HaqiTaXAA58Q1HKvDzdhsJgCwhrERh\nGDLnC/8aDj9qCYpvRaBlDSNK8vn720M/ljKu9yXtaBe8obPWvWacKNaNtKX7\n0oZh/9RV8QOHqTWMAZzQi1uqcCWGpj+LiYLP/eEWOX02zK42OJEbrS7/YmGN\nzWJyLj79G1VmFmdx01Zi/gENrPn06SaGUNOUoV8aVIcfudLOgf5xemycgxXp\nbnPybcJIuovapfO67y9x81I+IbYTElo3g9udOWdkKJBjxioC+aGu0KpzW6sh\nFE0n\r\n=Ura+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb032637.0","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/elevation":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.1eb032637.0_1578524430579_0.5519535628580812","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/switch","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bfac5ef3e2e8625367ad42be3f4f3474bd1a7c6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":31,"integrity":"sha512-BBy0KsuzBvzKv5HMlXP7fsITIkJesjZ3Ot3AZjvHRsj+p8PEhc01g+3qAwTwP/06TN27Ts2LgeOOmxJOQ3drFQ==","signatures":[{"sig":"MEUCIDfoNXG2nMLTvWj6tlqeuFO+b4jUS/aePiq9Bps31nA8AiEAg72W9Y9CWwAqJT4z7v/J1OfyksdVkYcl1fmBHrccrzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl9BCRA9TVsSAnZWagAA4BEP/i1SL5FSOsbgb6ChN5m7\nN/yDbgiN5hQ2zAEEJj0YrX77xgI3X27i0fqTwPGY4ZMpMvtZ+uwgh2RmHlf+\n/X6qt2dIB2oRAzUtLHAxOKVIC3XVwBO9Si25Iy32rYohCKdnwWPQqOvdUQic\nyXC91pzl8WaiTecJQnlIDkPQUT31iheEa/DyJiSKTkXUd4zlrZQ8bWo5BOuE\nU27O/zXY9SecMnEZO/XpMjzjCs8EAlmc1KSdboV1kk0GfzmadXAD0mc0UlOD\nwpqDCU9w42RgCnFE3XQG4BOVXOhQLKJhT3xG9Ak9waNFFv85q4rS5Qt6lnas\nY3CxOnseFyd7GJ2X2BfuNq+YDQVkYkl8ImAgIYVBpP1pbRH6kLAM3enlOA/r\n7Edw5m9PX68dAQrehnZHLSUQJIba10SBd5rZhOOC6vlNSxfWRILkXbAYQeWY\nUcqgmDtUjCDXXYHFFkB6aT7WM/XSgwDuqwrGWR89JAYtj5ZUbpCD7mlOPf4X\nj12+on6EP96jGsjeQwEb+zxMcw3cNt6CoG/bNs45sKC2GC7GIx/SC61UDwR2\n9//HhUETE7q2RR+Bgq2+7ZRNhdZNAh1rNQUKig56CBA53kawpDLvAmo2AmWL\nwgIh0VsArlq13wOh+9ROY/Or+HvnMgQDm/Z2DcxEIGJPUNwNYFDzCCR5aj6W\n0tvF\r\n=l91R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5bc5ebfea.0","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/elevation":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.5bc5ebfea.0_1578524481560_0.02125890409600295","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/switch","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d37e5e96920ea7f7913ee133f330f3bd4cc07072","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.1112b8def.0.tgz","fileCount":31,"integrity":"sha512-YEgoi99E3cFQcRMYSf+LWDXJ3LByG/At3B3QpfVvDqE+2W43sBt3qg5E4S9xDl0DIwnYUfwcd1e5nS0skylbKA==","signatures":[{"sig":"MEQCIFSFaCSXYGAQYZ80Qttgt+etBavCpvs72DZQKY60wwzIAiBdZ8nmAMB9ZXdi4s8sVb8tOIJZ/JGdx6h5OcmS9OuV4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TmCRA9TVsSAnZWagAAuSwQAIjqupXl8zhHbzayh1i3\npckDaGrLFLxVXjTmcijOAAcajZhN0YvlqvSeeL1RTXv4fxgcaZfCRz92geuh\nTCdVO2arHYD7juAil5OHLgysQy/9Z0mykUNC1CQuhYJfKEovFBlH/u7ambgc\nblvvGKLwPd9UggHGnKq541CyKEdMscBUtI6O1+ffhJTedSisLnkNOEGpBhsD\ngkkcw+NhL94nCZZyyhP3DAmDNulvcjAje086nY8Eo/M5wk0gtCP7JUSFn4bt\nbYoj8q2oEVW6qQb/bcwvZagsN/Spiwf4ETHEP1SJLE1tplX56jB4yog5izKs\nEe/dJ97yV3SrGQhZrWSnEdPYBdOhTvDSgGFEQ7gVNs/rD3FCVqk57OfN4pK6\nDgL3a/dNuRncsrpGHgjy/iyF6n9y5LXRA4zJ5HPNpo1rdElPTpa0gj0kEMj8\nMcPcpgULLo+NAKSFegDVvSHm4AiJvofQS6M/jacf3nduLjSzk9VqIIHsLzpV\nvlBfCYNyiZ3TRWmlS3DLWq/wUKLtrr206LU/wWMqRKvv2LKoMGImOd7TjUoQ\nnTdQfBDgGXd7UXNinnuHgsLgdMXosv16ghYRFuq3hExo/teDaRmF7faPuST8\nZSHjTHEFHZc2PzdeDH7FxzZD6Zf9Lx8nBHzKz2OFDOBlQ/RAd7qlY8WJmGGF\nQx6p\r\n=ChYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1112b8def.0","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/elevation":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.1112b8def.0_1578607846535_0.6181906872255694","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/switch","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f6d5782727499b575c18470827f11c21ee919b7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.aab102017.0.tgz","fileCount":31,"integrity":"sha512-ltcstTpKddA9bqd3WRomcp6iKKnL0tFzO73gYHaUJE4byCOTVRiy6QX3DslrGcO8QExXP6lncj35AzcfJqqPtw==","signatures":[{"sig":"MEQCIGEd9oVuztxvKbLyWtFZeH6K7U5KoNrPrXvVHb8pvZ2oAiAtMQlWIcXTdV7ynrZUu2K72fMSmdMGZgVZvoLInL/KlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8GCCRA9TVsSAnZWagAAik0P/R1+qauNycyV6SEigD6c\no+SunLc2p5j64X7+EOV8u35FNJHWD9HBQVNIqrs3b1eZ4cps/O/gtCDgy5yZ\nQbxU67Btj83fr8tBVp0fjWnsr1t3Skvy2HHi55gd6PHqv8jyypTIAz93mb+P\n8LT8CfYpLSQs2R73EHcKiW7DS0IMAw3nMz6GKqpWB3h2lXzMJfHc+DmAR5iQ\n6oumMujyS9dtXIsi2oXiC2AS7dg0Kxjh0m+nToHKdqjdNRcPvcBeY6BuEWiU\nGYhW3BSmgwOVacxWcZ5MSMPxZBu8ddVuhfakS7eqBzG04bWw8YnpTT6vekFx\n930j72QL99ToOWvDmBZtO9qF/f2IwTPLkVGjkuXCcc4J1ttBZvNo3yhRYFXD\nyChMR5kYlC66Viow36ACTLQ6L0E6bJ7TSZ/v03RSNLfTcmThVE+6jzBTF+Yl\nEhEts/QYeXwJdOCnvzH6RZhaEWlUWdP8kUiq24uainqZVz0syM8hWb+LuqFQ\nRCqQw9rkgttzE9AxcKEPCpc2AKSmtnFFpKrXo2OAWCJ3HtERF/zak2qV8/SM\nIdpBrV1maZ/rjpCZ0XS+X06nW+pJQHoq6xeeFyNhwhjoFZZ3AIK93NHmaHAv\nhu4gIJ38deKZcHbZiSuXG8Qymx25QI4rCKTVmQMtoWlJYfRx9v4zyY16hyQL\nrSFQ\r\n=FToE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aab102017.0","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/elevation":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.aab102017.0_1578615169699_0.5833538847305062","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/switch","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"855ac50f97522ec210e8db244cb44e9b1155c303","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.426913342.0.tgz","fileCount":31,"integrity":"sha512-otzDEZRDmFLPbLn+s7vu72gY4kgTbLO2hqAa5XeICyEDKK4nsVWr6Xh2w+F0bpEQ14L56R5cr0/AYbtdey/c4Q==","signatures":[{"sig":"MEUCIDwaZwTvM1ibEVEscZdAL0SfZQ+xEw/hmFMSp2zBjsh3AiEA1Wq/ZDRUsqCLpZp87kzPZv3K8/zyXpKujxO37kJE95A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cPCRA9TVsSAnZWagAAUfUQAJCzhhbHTkfGTj/IvlGy\nd+7JG+vJoatEIT3+LLfFDXSrNEZIsN3FARZbko+Y6AXBE9bOQqri1HtLjOFr\n4Q4q45PuQg4SaunNW+6YcU2kao31AsK7nWR69Bx8qZhGV0qPn1/4FGap9i9u\nYXiVHZ+jL8Bo5PsTG99FXET4v534vEJAtFywsPemy4ku7m94yeIdmp7lCjyl\nhzNtZx1ZeC0yOn+bNaaBWAMqISIHC8xd4+3/Po/m2zPD37MUyv69NWT8BwDf\nu0pZMVDa3B18/8+NofwtTdCS14I7dQa/GmHXiB8kcy+kPMbNR2V2zjRSIzkB\nM+sxFq9U69WvJ2TxrfWUxScBTv7RHaUkJUpZSDvLj9Vj+XZoxNZC4/fjfDFS\nuVOjyJvsp4Dyjl1Qo2lmuM8x3A4RbVpJEGB1l0IbnJmVJUho9uyS6Wrg8Lsk\nsyQxfjfen4kW50g3I4ALhnMc/YKNdJ/tNRwhLJ0IfEKSChGLO+1BRs+gcGUz\n2uNNQgMnPK5w6xvleL5L51CINEHGCrVMvOyApuP8huz4tuy/d+ogicShzWP+\nQvkDXwY+KyZGRG2bDC8RCvukAPS85/j8rVW4nmo5GWUe8c4XBMT1BGrL1g1u\nPBaWszFayPaFzU/y/FrEpAV+vAZZdbKRyoW2e4wBJI03W3puNxXIpohfwrri\nT3Pd\r\n=2cmB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.426913342.0","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/elevation":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.426913342.0_1578620686527_0.4141268600562029","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/switch","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85a102b5bf1f80760619a06421dd953899019344","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d4ea9a706.0.tgz","fileCount":31,"integrity":"sha512-6Sygm1qJUFfFrhsZDttQctHm5hqfj2kHMuA/Dg5Bm9W9M5cGclaYhYaw24LbvxHn0vVlaqTy0flW3O2c/gBniw==","signatures":[{"sig":"MEUCIQCOLNtsYNrzVxLpmap/lvtsWehN51sMGThyAtdgt+C3/QIgCZt53x8/ytSvlSnaS/g78ZzbCZbjeBwhI33ezWWdIxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOiCRA9TVsSAnZWagAAkC0QAJ9vM7BsqEEClQcXbm2m\nE8aaPPBdUP2JNZ5yVWa8dgBLs7Q8PBA79WYeWABNe8waAvsFQBcE//jrIJ80\nmeFXYHUD0xdKVxtvvaxPnX9wq3WzH+utE8TBA/aYnP+yMBiHF8jN3p2zyGpD\nNeK02ZphXAIGpumKaY8Muw67VaDL87ruBaMCSTsfOdc2cCExJMwYeCZwJJNn\nFEp2qnjlZCgXdH4NbpFpsYdIa5H4azdGi9Ty4uPCqGqPTB0dey6/llu4cnfN\nK/fP3MryLSxOqSuqK45kVwyfxUX9eIoe91mW7AtwbKslhL6SfmsXyvJd7KaX\n5BiFJqaNR1TtxBswADFa8C8QeuULlmQSJZ2o4dpI+yu7TRciYlzPfiQx9G76\nyPZI3mxtQe7Kr065uVcFMJbY/re1Ub8H0Kos4jpLSlEnAYIRMB6Tf+UrlBYS\nYsBJ2EAvFA4cODDNZzSmss0/X6VXWyu2GmpLWwPyJ5T3FPrEt+3EPHtcVZZP\nQgi/Sd2G3Z8rouYqTLviOigtoDXuqmp+GHRiqiNlQ+zKkU259uUmGltimftS\nK2q+1sacHyjEeGh5Shjjw+V3si76W6vtQhb5yOQy1Q5AwdmQvyAGHf7YI4hx\nN6iHFy4NOVjodi1j/MJ4XRmy7D3qc27ymcdl7ICshEMrsmjGiL1TsIKoXTIX\nJowW\r\n=lDOy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d4ea9a706.0","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/elevation":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d4ea9a706.0_1578677153638_0.828904228432908","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/switch","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6212bc1901e1a5b705c6c5c55fa6f636cb0d3231","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7d4ee2996.0.tgz","fileCount":31,"integrity":"sha512-mj25BjkIobbbShpc5bYBKbq0hkmakpmssfwW05cXgxXvdRwM6b8YjQLQoQzoVG6zVeJrWnzPdfYrXfbhKPi0lw==","signatures":[{"sig":"MEYCIQDZX8HbWSh0EJ+CG688Al6IdW/2DVETWYJMjp9QkG6FjQIhAIj+IiFW6Cddpoypkw53LaVKQQCF1q/7B+wG+DBjcCCJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsECRA9TVsSAnZWagAA4L4P/1CBOjRem3Vu0uTVFkm7\nUXa7Y2ohN6ZTRv99x/Rxwv5w4d8qth8DkJX8nCuDHCH5oCDy6jDzUFSy5VFl\nfl5Z5mq64I82MNYEafIUoLxYJE4Aog+Zjl05bEHtELkdQ5NjX3kOyAN1VQMY\ngQqnkR1vEvwH1c500MIrNVGVwPPUj0b7KzPu/bAtcWphxD35NDBNDfBxYG/r\nJ/LTt8pN2ZsV6AOxGPL0TuhSqk5wf9uT/1CB8ktffFLbcJgv2lPo+noj2EFc\nDl99KcNoYtQ/ociV/2rLIqRyK1kC+UU45tGhfyHJi+SdiNvJnx4J01kqJH41\n/z9AuJ+T7Ggpdj33GUKvaCSAYmW9jjIPQR50OGPTgCnUtUBtnINhT7vD4dan\n4tsuMQ39NdDYLmhBzZlMOEq3OMEg4cdvaRkJXMkm6TmwGnzAbi/nlDmkNsTP\nnYjwR1o6wRDGyINXIQ7zYRfxOZ9hZpn72Cg6e1ojx4jQ4DBOl43zJeco+Syj\njSyNrqNfEFN53JpGdWqwhOj09OENmGuU4spXQ6lmD8Tl01aTEvaz/OR1ehj5\nEbpRRN3XBSQ/4zPKzcxeENUq8xzvCPOoEebw6hiOUB2FCKIKEtGo6OIxXB1i\n57zeTHI6TUPyQOjyb93wMXBX4xyhGeV+Woxp05nXsF9DUusvO7LvuebABLR0\nwqkM\r\n=MpAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7d4ee2996.0","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/elevation":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7d4ee2996.0_1578679044345_0.6224211528125205","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/switch","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66d01e160988bd9e86a4626f58162c073b94841f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.981ec9b6f.0.tgz","fileCount":31,"integrity":"sha512-26bnvMivBjqZoziomQw09E0B+pQFspV6xMiOjpomCECtHKlBJIF2B/XGdlAP5KaUH6pjxDJHwImGv0xjGCc12A==","signatures":[{"sig":"MEQCIEboyEfZDVkFCs+dvJMkEVOV4rqsWetg40lLUhJBpGA7AiAeqxzAAMv7glVawSFFmtlOxdDJ6fP92plQu46PTpQ+cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":378520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNArCRA9TVsSAnZWagAARKYP/AoflrrZ0E+WvSprSXfp\n0ox2NxICXTJS5sN2fpuHTF+RbDNYM8f5UGLmzSu/fl0A/ygQrI9rGiuvyZjb\npzpG+7vQi1V4R5T5qbB9ml3POo2TlWMctrQvmM1q/UkZebiYTagjemutmIq+\njw9mo3//vFCdwjpRUmi9yGk7ldZakxmyGGhQaqYGDBULjfrZcYDRCOWLMk8A\ncCEfaIdqZOxtL5aTDa95IXLlE3f/Td6LBhH6/asMLW4vgovg+cVTXqBzGSrG\nmhQcgITQ3hxHOdKQRlCncS2woLlY51JYiNMCISJMtkjS2UxSmWWxyem9jjHp\nqzNm7xPvTcXgaacOVCQMWptzw0Omubb6JepPe/vqGOhjGGuAErq4gcCfMB27\nY1/KCyyV3gfHHY37tXsb+Qp1vqeCNsH1EA1/0y4dhNsFRJLdq8CAukarqo3D\nCElqMLgMk1HpdHcN2vDaN692+TheeLBBUfvUDdYPqPmuvavNVvnZjaCEV/16\nGoGusXcBnIFcyizfFO8uJfqmAG8+mUx4czugMuNShEjcsac6sBK4JUWA83Bm\n8pWzqfVWJ1yVBZUmtAfwRLYU0bASXNkj1EDjyKA3ZApixWquf0NRLhgGBJYB\nqr+jR8BMsVS259UPDESGfaLqVyXpYpNs3yH6/yhV7vAupqW48o75irGm8thR\ncxmj\r\n=9Drf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.981ec9b6f.0","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/elevation":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.981ec9b6f.0_1578684459362_0.46840892236976805","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/switch","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff1ec2bb75d040246d197a906653f13646a54d3c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.737da83fc.0.tgz","fileCount":31,"integrity":"sha512-NLOy9/GGt0vl2tPo8t6lqFWntdIn/DMvsv6vfvC+OHYEjVe0s2wDrNqQlcHlts8o59OkZtyfSaSuMybXKooIDg==","signatures":[{"sig":"MEUCIBwc1frgnmW72rybZtWlbzvhN4mhPLmidGRsc5TYi5UHAiEAiiCJxhak1gWkCtCxlk9D6FGFoiY5FaJ7ueXurgS444k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":378520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpYCRA9TVsSAnZWagAAg0cP/j493kQYPMTYPvuRtYWm\nNL9+QuPUAZMycN28osr0vLdbiJFo5B9uYDGrkic0RpTUv1HpAWzBu8m06hyj\nxVwsGLHfm9Mj00O+TdSmDbQWwQKa3e6kvUjEf/xf36/IEBQ8hD3mYuXviJGv\nCiE0qO4orIH7G+nJm/YHnkmcF6VLIPq8eMwh1JZ6Fo4OET8IlYsBlZJCt0Kp\nOS97Aq+2WiAnHxJsyith5nKLpm+yeZcF7h3QBkFBbKKkH5x5nyfUmTXe3KXa\nSOpCM80I7h4b+7YblaPzwlLrTw0MAW9q87pf/iDNT52qVWSVuavG6Ij8ZTzB\n8KG4CI54WkFMgUpx4q99l2L98x8JJIdEcL91BM7GVN1Tv5EddEV4Qhkz+t1w\n+Zc54WyNeLbAKwAQx+TnWMvGoBLWy3v01bFNSy+coYgT9YE7p4peV61dKiIp\ntwRLWPulVDoRTiiHeV1A6zQvsYwbmzqUs4XC3KvobrrtEBZXBDzyiuPBXUPv\noT/0pli9jwMGp2xlyqVd/orre41ZXA3TLw/+qlUlXuiSQ6eFeTsEwFn1d4U1\n2DrHHbySedbXOcyoxl/mqvEo34bWkpWiTdTVm8KzYZN5Foesi2li6NA/srYu\nKs8h3Av+fDrigIR009BbMqnOxGlNV/bycVzhqbNQ24TgbrFQ5UpRc8TGFr4q\nTXlH\r\n=AANC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.737da83fc.0","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/elevation":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.737da83fc.0_1578691160102_0.3846573181561477","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/switch","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"116a07c2ab57737d1801dd4f5a0f5c472ab62884","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.aca8e6c18.0.tgz","fileCount":31,"integrity":"sha512-NHHqmJnwKHiYXCjM+UErchAG26ZEVvh/v8//kkU0MSOds1TcuT/GreYtrbXCOGAqbjNzqIIcGSn9rqlxC2aEuQ==","signatures":[{"sig":"MEUCIQCzUaFsKlPMMW2Qg7aiIzSl6mAtFKqKwriugUJ7/ccDWgIgOMDsB1Q0wuvB8hnXqxyibKMx5nFaHpzSKNUsw1xYPkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":378520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXsCRA9TVsSAnZWagAALO8P/3uXYNBN3Ptjnc3JKs2J\nmghHN87H6ewLKl295tI598XfazsjMtmCc40RgyWJ6Htv73feAiBMmirFhkh2\njT8wT1RAfUlnWUHf4LMDpmpZfpwntevItyk6DVl2Rrqd5207C6FH9cCcbmyJ\n4tFkU3aOx4u4ldiXJGBYe34KvZRylyzL6DFiO3aTnTCoUp+eIoFMrbD4aIjR\n56+HOlac9u0/W9rfWydb6fPAgJzfcSpUOnuvbvqmSMdZVYWDbH/iOHgHjQca\nyz/eo6m0QNYv/PwvM2bwPiOThZcSfRCDe57B4A0Fd48Q3XUtfqe07Vv1kXyk\nQZ1Tna3T+du1woWDRfIMqKfqdIGEuIdxRhKoZHCf0vzWWv5/3lXhVqTAksg+\nA3xbwijGxenTsycYsi0Gsh3NyPWtv3TOGPDJ2HWhIfmOYe2OXeg0J92XSpIa\n2mdEfGAPs3dQ44ZLQKZ2TtoPhtI+wh+FmcuIW7cW46YzD0KR8EEiGzQgXvl6\nyOTeeqolkBwh0jsc1Q1um5i127OfgY01IP/gR2vtGag6kB7Q5cIQTloBcu8B\nSQZIYrS7inU2t/HuonTEQqXP1rqb2Fid+hyVzZ6hk6PSj7NAxrtgoXiYMZoi\nbxFiOhT+iCGrdzOMjticLYArumfO1zIRvN1C5QmY26hzoEBqJ4pwBlDI/Fkg\nRpfT\r\n=+zp7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aca8e6c18.0","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/elevation":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.aca8e6c18.0_1578943979641_0.6426860752177848","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/switch","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86fc9939cc2523a3cfa96decbeaf56685074f0d3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.c38d84e21.0.tgz","fileCount":31,"integrity":"sha512-VmzLLWua7GzrSvbx3/UUgXfzscG6IM1URRgkHLKOi0vwwPaJ4FGoI1qJ0fUOAk2VLPej9SCMWL+je8NU0U04Zw==","signatures":[{"sig":"MEYCIQDCnfRaA1x1WogQfmdOOXRRtctlFIzzJY1hP4N+ilzQGQIhAPYL7VgbNuxjOD+mu6pCxQi2AN39SfhagDq2rRY9m6F/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":378520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOu2CRA9TVsSAnZWagAATM0P/Az/DWZyT2nAkviD9LfC\nNf67WKUT63ITSE5BBqzGIm1OqMWs9Mk57+6GHz50DIJYuPYCP7UtrP1GQ3FC\n+J+4uT17CVcSu9tNmyWs8VYeCd9olE9JA0sKLBySRxt9BbbfOcqdXwPuSn2v\nxe5PlZ2UHv8r0G6T9lLtCfFdI8P4za7bPWtXTVWlENZT9qzfA3nkqO7CVLT6\nDbtLlbGAEUJAqOAVLfAGR8OPC0DwSZG2NQ/06a5Pi7Y49RuMV19MS1RuVa1/\nxeLmAyYRLN96IkonlAsP19VvhhJZmOcncZY6vEQoS3rcfksSNUeYFlNQqKlQ\nNioB2qfL7O7QIXKh7cMj43jgMOR7C/yLwrBiA0q9J+f/SyrKZS24TT/ab2Zj\nlgjCOARBa1iDdyEB1WVgexFrUuEBo+5wkaf9bC4+71GwbIpjXVP7PrSrDB3+\nDHujmzMW5LUxCCXgGj+Uj5+9IeZQY+jAbKTQpc+pvOtcni3kHOeReJzy2/Zx\nAHZ5NSNtd74kCwbnXdRgr7pTjhmRrElacfLZgP7OTEbjtfKxKDJHZ9anfblR\nVKhnsk0rPZeD4VZxfOOFeJSAjcZMlxw690+kvCG0zJVmsB6b/2ReF3KmVPkj\n5AHQP1kpLMICvitXxAYCKzbxofiOabOjADZZIecJHwjGkC9TWAi5u0KlzKBO\norCa\r\n=N+b1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c38d84e21.0","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/elevation":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.c38d84e21.0_1578953653641_0.48265725954858496","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/switch","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fef39e41a797f375e2f848f35099dfadae414430","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a4db5fbad.0.tgz","fileCount":31,"integrity":"sha512-qf0l91lD9Tikb6cGCn0f0UR/hki8/wznp5y14U6693Mtl9FxwH4KHOhYap187rcB2vxoLpfeqDcojl55zSaTWw==","signatures":[{"sig":"MEQCIETpIS6zhMzxuHZHPmIR2075YGqYa6EpzJsYkxT7Im2uAiBf7Gg4XtW6dTls/EqJE5aPO3jnmj2fCGKfZLKmIXipXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":378520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRYCRA9TVsSAnZWagAA7/gP/AxwWCvXOmqoi78XzUJU\nbc0uKljx3omuMdIjuE+IyCBCngshuaw4s7gAou+gq+7ZvdPr7tjRlhyowmBY\nVloHre1uzfGt+KpF0dHMLVabT8l/Ew5LHFnniF/5FmWB8wq6/fnIrwmXfxEW\nkddF8lNSaNi152q+6yoTELn5VfZ+nxS2AbET+4zbDCCvc0BcRTFZgn11THDe\nFndDiZ6QRhylGXQ5fYuHDgIKMdKPJKkg3aynvwdalnhXlWPDMqyJWQgLSWoZ\n3pgBLGIaz1e6gRvZt9YCE7hT6+kBLCWP0jnWPOf2CBGBDo8XFgYLTkcURNVa\nt8KzIUabGVg2gQITwQJv8Ffif2lx1K3rBfPLHnWM2fWRY0s2dYLWkwUrH+fR\n0t79Qi7cKH9MVK7UliJ4TLG8P/yCa/mNuERYZV6YLMzDceqfAFNrHPA8EdAm\nyzyoAggepaJnm3jg9fu0kDkdhupSQPHUWL7ydDzp7RGuhhfmKWNOAqv9Nhka\nIDZ8BGNhcjFGPreUf4ZzIqp3zMhsmhHVU0suUGzERM7kkvylCPrA5Z1ZjEIG\nl5g9xFsgghV5lr+uMifMAXLeQvnxFJTB/Lu/GaVF1WoyKw3aBm77b90SwCIT\ncFNUQNtL59PHDAhu85qsMggLPPJ+d227CHdZL7+NARc6CzcChGKs2J3LfuCQ\nvFt6\r\n=5pxe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4db5fbad.0","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/elevation":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a4db5fbad.0_1578968151757_0.5184377727435745","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/switch","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4911fe4c98b071d3df9a419eb8096198f1d4d212","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.faa9af310.0.tgz","fileCount":35,"integrity":"sha512-8VQ/r+qXQLUvzrnyhjsxn4+BRJh3PTJG8g6Yp0JtwmwUoZpVYcec97v/oZZREPTRgo8jbl+62YnjVal2oa0yYw==","signatures":[{"sig":"MEUCIHF+iaciUBz95y1bpLLVc310zTL3lZxbpRJt9S3xxiN7AiEA0YLrfzKC+EKSO69wM/v8aw+DJIRrqAYpY4n7MD0ZsiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfIeCRA9TVsSAnZWagAAOREP/0y/iielzS+kFfoXJS2a\n6pnSAbj8nrcX0KVyHfhmKKdskcDp4eDZM5m2r0aESDw7gv5Hf/FQTsdHsV2d\nsCohOHIOlx2I3nQmpFMnM22wAaCHDgwkoqj4fp3I2r52Zcy/O+LpXNPjcyQS\nbHQVZgarJFwkIAGb2mQIor/dgmzFNUhoQiM4naxexoupNMf7lFxSxoJt443L\n4tXAY9Sb60zCQ3b2GUq+LwtTH2vs0VVTUOQJdCZJF8F2tzzD7uStcivPW+H3\n8nCsw/shSxGMSKBMIeqflot+xyepDGhpss33RuFgSmvcI3mr8fu7rX7/4FEl\n0P8dvrGP1Z1MliGROPd9lDcuLhARCViVdN7LMc641sqQFefhyoL0eMTAkt/0\n7rO5mtwJ9ipZqcj13Qpr3DRao7lxpxgEuxlF1q5dFk+2IgC23WsnYg5VRLKn\nzRr2qetML6yK7EFT3qAUamR8g2kLcsn7AKsxome6diZtfcSFFrsFjYDLKptD\n/bOuGwPpqAohFuGhfnctYKo6A8BKaGfRKhqmVokxu6WFrLapaAjVavbnHKwj\nIgmrQ2SLiPmOoSmroD6NRoKj4ydoASVES9sfwG8RbJFWmrJhPiRZbpIYX+LN\nIIixIfbPnzXqZbLZJTRi4td36PK/YABdmIwCtKE7ngXU0Jp06Eo7WUfYdG1L\nl2p7\r\n=d/Mp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.faa9af310.0","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/elevation":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.faa9af310.0_1579020829472_0.7671824471558564","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/switch","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e80ddd8168d665d76c6ca17a3849241a05073d56","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.60354c577.0.tgz","fileCount":35,"integrity":"sha512-7UXDW0u3DZumaMy/rUKnhL/N2SUVBqu0eIop2PBbtF4tKG1MvCQIx8BupGwvUn3WNBP6PCQgScRS2Gdn9Q28Ug==","signatures":[{"sig":"MEUCIGExrp1lVPGjSbgakWA2Kj7gz31+anfSVTcQeJkFiG9AAiEAvT7htw7lu4EzoTNwrqVgLgiGEYZdkuGOjCLYfQz0FIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkTOCRA9TVsSAnZWagAA+HIP/A8m3Yx+62D6fvya/qXC\nNmYwY0yq0LHZu6hMEU6xhiwkGQdS3/k6zzr8x5+ZzSWoXhzV1gsvgqHQTV/P\niIjACx4wDG3yoMb3/NMXht6V568vhYbQWabuF4hPiPPZ8ATNnJU2NHMlZwoN\nCOmNdMSEjlhdxYC/SMzpiUmZPlpgVBnqtaGWf7UbQcREC6l3y87mNHzP8GKN\nDHCKeHX5CJsgYkhTqiluidkfLd6lGP01zntKnXzO+hcGz94cel5I4oRxf/Zq\nIYCj2AbsmbKbV0M7oO7bMMLKngeQ2jbmo91Wkjl2ulBvQfPMXU2T7mnAApML\nROYaUkvnyPAVr2rv3WUbod9xhTaTrdauM8Z1O6HiggEmrYLdZjAUvSIXQQS1\ngjyV15fhlmoPyjiu1quyBP32CIKf3jFYKu1Vt+kgQ2TyQzHyuzfGu01tzMqR\nBbGotNxWgyYO34x2xE+7LymYSshnCZ1iaAdKTU3HfFfoKiMNdIfOKOg8n++5\nj8D4NhW1Wq/iKX/a6qywHjUZOW9/BY4TN6CHr4QSmiFJcV2rqt1xvFIDP2Bu\nfSfHWqly0whDhVKBk/WC72Ss5x5R88uGIKGkPagwe3KoLtFJsp2H9Ikll5b6\nIIW/GiTNgrnwyv53NpVzdE556m0Sp6JlDdSZzw+ZaI389NE8sMlBOJ6WM69e\nooLz\r\n=2hvV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.60354c577.0","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/elevation":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.60354c577.0_1579041998159_0.6551490226808567","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/switch","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf44720308597c9cb95748db105e9b55b9af94b1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d07c78daa.0.tgz","fileCount":35,"integrity":"sha512-SNSspGtRVYS9jhztzifiqe2THJa4sCUTLAWoztyQ7EyxXKItXubbwM19bIyxgPsnnXCXYairVquUg9JnK5s7sw==","signatures":[{"sig":"MEYCIQD+cofJx1hUwSBhBpn1OnFVkgtmSxHa/Omy9a9nya9qcwIhAICnUrxbPKjpBjujciDHdVzIF5wEZB2qz5uQ/7wzseaL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEqCRA9TVsSAnZWagAAj6AQAKOSXeMka9LaSFzGoNjY\nvOM6xwQ90HpiQh9ct7aZTkzn7GjVsWIieczym03LchYkGISQI5a3ehNW46yJ\nl7hpOCehycA7/sKuJs4OiiKn+wDVBYuRU1w06jI/nGCkB0TL5wEgMm5c5dOW\nMLAJSwU+GcprKLTMylhOyCpQC+i8HSO05bkryX8dMvnfxzyxwgaxcHy5Xz6B\nY7F8KBJSNOySmBny3n+VqI4TbNfMCmLJguzeriCO1ozY+sQoYKuVxa+D9hrp\ndpUxbY4PXX12bOQ5iKpnXl6IqV20p+f9scMWNFPbv3OzbwPtmT5c95nblBSz\nmmZcm69FwXiwd/qm7YTCDYavxI/diAobf8Wf265OYEa04fqnioT+NekcPNk6\nipR+XIg94p7BjnzAGrD57ith165GPjCv0JktdGQUnlHW2OYEqvZYbAzqGT3Q\nn1SOvLx69ZbiAk2m+NLZF4uv1Xh3ydToTtU45MY3CLKgMuIxfuu4vk59QiQK\nND1XqUlk4AL9fuRlF1KpdymAWdWUe6NgOUe46A/kRxzek2YP1mIoM0DGdiS0\n37cA9k7c6fJaqPZOSUHLM3vX0N/Osk9abGN13PQYvi+Xmgot3WHgJGifZAwb\n03+KLv/bupoLwRU1MdU9ch9W2bQfNlny2YOoXwa2SSQ0uI6O0Kd2zYbYse3K\nqm/D\r\n=X6+J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d07c78daa.0","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/elevation":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d07c78daa.0_1579045161814_0.96564631380584","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/switch","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a21c4442dcb2a45b56c70e9d23efbeb6cba492b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":35,"integrity":"sha512-ru7aSfn9YB5cimfaAEwfxVmI5e6rRfF9PhMyL78udkUWMhddO8InbnHDXVu/HjVPLKOryz2KSUMHKkiZrQtNxA==","signatures":[{"sig":"MEYCIQCjeXDK+5D/ui4/CVQbf552S12A9wSvUV4R9dkCndLy1AIhAN9+spiC4M6d+XD/4XGS4ZR43qKi6EFbNfp0qqRQkVyG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5CCRA9TVsSAnZWagAAp+oP/2vf/PHfBJ0rV30vunlq\nhMuIPI0SSudPU81ZxyFHjoagXtb6gmovA39GWOi6YGV5vay6uVcbsQf3xciy\n19oz2v6mB0RhOcdDxyNk/KirC0PYvWQw5eJlVbhwCGmJZ36RTiNGOnIql17R\nVwE/l35bdVoW0f4wJ3R083Yiyz6HhjsCFf5d4iI3SgRZRKxNHr2jiK2X/Msv\nWV5dWRoP72Hn1ENIodP9lK4WN3oDz//JbxpsTqV+VWe/bHEQGKJecYGl+J8H\n3L/EFEWGyChbzfnZIxwQQpIka1pAYMADepklOWa2GGzUIJISGJo182o5GJqC\n2Dk7gIvFh3e7DYl33cwEFMtklm8Y0MqS34UvBVn3Yp3eRNgNDBTveDu5Blpq\nMl7UpNLnYrwciehDeuGFYaYoZmTGZsaZ+zcAddgEgp2mouaneFG4D53Gaef2\nFcKHBFnGm5xBhtHXQjyM3zL3Wl0z/Lk6GflduVtNo3vAPvPc+224rThWmVlL\ncMR4YF9omQDU/wI7L/SjAtIxNt6ItB3MlKNr+DaPhqNdY7HHDwQNJE/+Xs56\nXD3iiyw18laY/gxs42bmBq4fdzteA/pqLCJCE+Y5bhyQdthmH+TGL8niE8NG\ni2Xgj9Q8dnHZMNuvhN0/9cDF9ELUkTiZNkVAf6qsl0zSyhJZbA7Li99g9qEI\nUO2Z\r\n=sBMW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8ddd5c6dc.0","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/elevation":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.8ddd5c6dc.0_1579052610164_0.04237207410644839","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/switch","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de951111f20d388222ac75c900267353e1523e0c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a9511d870.0.tgz","fileCount":35,"integrity":"sha512-9mzbHUxQLycoJaiB0okxgHsgS31G33VbDhALglBChVnpzsuLFBRriMT/eBCWTORnNrjX+sz60OwJlzQZG8hUgQ==","signatures":[{"sig":"MEUCIDlh+EhI+xAmUvc8YVg/XovJkORX7qUY9uQXPKlYj9W7AiEA+Vc4aYPCNb401VHetBTUV6GgeIHNqS0KW5r0Ao/S0vo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":386994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2O9CRA9TVsSAnZWagAAEUAP/RZrqglkSx/Gym4EC2At\noKs76rPDIX3CBEuHSojxEcsV1YvHHtUEj1FY4ZBjWryJ5s4wocxStbp+gEpF\nNOuQE/+IuAeXacqNA0Alz9ODGx7q83JQ/mFsYBKAMjZyPyD1VY5vbi+9ConN\nhmmS6zN9yEnBAXNqUibt1df58PxWLWcE2RW00aNttGKiHFA7lVQj10lSv/qs\nP8PxkKQVr6ndAxP7ZNR0qduXn+KNxtJnLtFDI7OIF8htCz6AJ06jE+TAW5nB\nL+ISkIVQ0SlVnaYS+CJ6DzPp1c3nWKPJ4agUO45v7sh4BSkRrFq+hZrbEdtz\n/cYwBzESdbxk4U8h8KfnFxs9FVxFocb1EJCX1HC5SD2VunNQO2Eyas30PD2S\n0xRdtANtWYUZGPQMU6PV3d3ODYJee7s66vbZoXFQ8zISmKDiotv0paHDunmU\n0DPkSm+Nh+F3//K2a5pqciHqK6RMvTg9mn6z+yKE9TtmiS4q+0epM4t0bNJ4\n9EeaPA09C2GDmqurBF/kN3peetrzFrc+E5QYJTdqVnc57dDFHglkgEkcMjsD\niNJKta30a+pUzXn5w9ym/J28qUl70Hdi/uWBykN9vXBR3KV7lWO0EITljxPO\nGIU9XrJeQaR5731WoEnJpgXrEtkkQLY51QBM4tVgYereu6VZArkvYhmW2bEp\nQjOl\r\n=aK0M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a9511d870.0","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/elevation":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a9511d870.0_1579115452899_0.17962399605537072","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/switch","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4821c70b1c87d6b8ce3bbfe2ec441ed7b1bbea3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7c8583c4c.0.tgz","fileCount":35,"integrity":"sha512-PixS/rKqozYX8uhvhlmbcK7R+6MGFUbLWUV68NPWK0KERS+/7Qhcjr4C+MfKNf4yiBfT9I1+Km+XX3llY2ktmg==","signatures":[{"sig":"MEYCIQCrFLFBGVlkqfVDFL+Abv2+62YKi1UijKiWALdq8vQcRQIhAO00+EC8yzKE3VTTualS7odDs+aUxOTAAG9yfEx2XXdp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bDCRA9TVsSAnZWagAAl0oQAJB5k0ElTQevTsOFftoR\nZ4HU/YhgmVGmqUN/7jtlciix61L63lFEj1k1vuL/FfMPdlArh5FvQi/t4dtD\nJCfAQSx+13/+pKOHI3NUJWq2cZX9uH0GUvTPUcBpzk3MU6wBsCtnTjJO8Sja\n85tcmzJxZEe9pXeqXW5bR8VGrgx8VN74qbPH83XKIYnhIEBTNNs9fJ3+zVXz\n4ouN+JFqSRPCcsVh6BQKBUlDFtwKm/FJNPWqPuvw/Q9cxAzZTSzPJItDIT/Y\nBoOTzcble/Oc2ExcXJeofsQVnLxQwgesDMIfze51x0vnU84xJIANIdoJ+BCJ\nWXW2P52fOFG/gifi48ngNVIjGBGo5d4ldHxZJqaiLY+WLouO8wU9KLVPgEzD\nAQWGFOf9/M4JdjdOCXosbOI6Waqk47RzO/qgF+DiyCeUbCN6zmCZ0LH3VrHI\n1IzREjLGOdiCEzSW3f5BEbyiwfhVhmwavme/EE+rGGNcWEZTrLwJQLM7M+hH\nste55+ED/518cCBJQUCtLDfGh0E57iSA3sKcO75RKZfuVip/Q72ILIOeMh/q\nyWwl1tQBx7b5+UTeN6DA9qWZW/pa4aU6+W3Npv1i/k8P/KWQduZXR8A7tXQQ\n64HrSHmFA9bmvuJvxjqrPS3ckif98OZP1HFviOLp31t0q82ipIXBWVEman/g\ns+SU\r\n=gcwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c8583c4c.0","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/density":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/elevation":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7c8583c4c.0_1579128515109_0.2932772315800658","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/switch","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f6e8186410904080e8f5140f86f534de17148e1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.5d4b82bac.0.tgz","fileCount":35,"integrity":"sha512-wVJp8i8Whn/BCijBd+BfaYWAe1PiL/32knfyrqdE0gqN0Bwp7hOU3i0PQmyiZv73Rs/o+EAaSVUulDx0fFo7Jw==","signatures":[{"sig":"MEYCIQDunx6lES7nW2tDWGMMoos0Cipfolw6OH18MNPUfFCMKAIhANcF4vjI9UFR+TJ5nBPHkjK5W+Oipz1GWDDH1unSzXMo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bWCRA9TVsSAnZWagAAhoIP/R57qIvh0kAIUQFrk5dX\nEWncK2098i2hsXU0OJHdQ/W9ZuhM7FaV4Fq90UZRu9PUvny1ot3eQ4TDg3S4\nbRTZ6WUhxhZwSWYP4cv1meOhVQVS+o9b3Ux6abXkttuivXCeAWhoxPwqGEfJ\nrAvVFcG7NH9cjN9Dy9+8wwmkERDdu1EgT6hec51zPBKdAbN/QLN43Y6QOYe7\nXsqCI5FIlpg7/QpPGfOIrmkgvY7J+rt3LSgBNcJEce4MVv5V8Aed9VwmPbwY\nZ7N/iHycZS5kJl04p4id2f/8wtY8Hw5cSkJEwbfdLrdbXuhqhuD+Zzg7mJPj\nNzycKYRhe0SCBUU0/HHZgynDY4SGAauSQNS0LassRVMyACz2HbddYC95UmkY\n+c/HlDQu+PsReNT5jdxfkkPQMn6ExNam7oO4bHrfme/oUvYZ8Eco+hfTfvAV\n6ATi9lXemJJbHDpYQ8A3Fhc7N7pgaoj9yolmFYz19SRvj1+KXPteElfDLUVB\nBo3SleaeWCaLhQ4Rf8eI+/1sPWIllNC6XuO1xWf8yOiyBWWlK1g4n5fTVi1P\nKXMQyV703iCNCMrVZK5dxl4U3E7z9Vu9JJMqPOaddKFwvqgtSo+raGfwiTQY\n9zWRPKhqUnL1wZU7aEEiNH3LIyIeMM4dCsDbQ7g1CQaFe4bz/xqcc1mPXj2S\nHMrk\r\n=Oag9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5d4b82bac.0","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/density":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/elevation":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.5d4b82bac.0_1579128534079_0.2198344028921646","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/switch","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ed36ea5ecaccf2f06db4482bfe748b61f5c541f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.57d0186e4.0.tgz","fileCount":35,"integrity":"sha512-YDNXnalFF1HR5IRRw02HhXM+nZOBQ29b6oXGg8hUrsg297kPMw+pYkvGjZnSgmfIE1+GiJKqZkAI3KG6Wv9zug==","signatures":[{"sig":"MEQCIDy4xgDb13Upx2HfV4O2vX5VDY4IPiN2mIVuAnXSI+kOAiA0jnBRGpCa9tbqAmrj6+lVuXaadsKtgz3eP6joTc/PbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjTCRA9TVsSAnZWagAAN4IP/iWNR+ujX/fsy5qOf3Re\nKKAqPoRgfd2WtbzTQaFWSZJJeGAZ1Lhxd8vmCUBfYKEz89g1JsKwuakRqX0Z\ntZbNd+bd/JdD6TgSfQ+yVHQn9UyX6VL+4H7R8EldHRP8hYBZAEkVHCU9mbHB\nH0Rhi760EqaPjE627w9gv1we/B522P8Ghg1WT0f3ZVnZHdI4PuKtHm1lcmbE\nYgJ8E0ywNizSAVt0SITWqW/xWWnZOnsMv/ZwHkylUVLeWq9GZcPtlv0p4har\nabfd1DqV95gmh4THl5uhhCNUA21xrUbq6l8gsG+6z4c/s/An8xRTQlRUZClc\n1xR/D/To1R/Hn0MvnTzlwlLlHMsp6lGfzmiZ/THO8VgK+kfFjc7ru2LML/pj\nLW+YSHZGITnXvQhwml7PFX6NPljx8Eslq/35iPPGCxljDM3UP73TQXtUcCSX\nztUXloh3ZFmMjcDsem7GGmEsL9WdJAwoYiILx2fCYMCeuRJxx+AsTJwUbl1W\niRzWfqyTZ65T+e0EpeuMWiG1Fsy5Ztl0LnOAMOtbXpqF2Eq12a2hY8u679Dt\nXcuVQv4NlkXLtnJl1HLQgitoCLL7pFceTNF9RxTZiOqWH5ERAhdbgc+95/ha\narVQoiI6j2nPc+JEkleBrwERfAD8FYFUrC7uPckqxeOsjz9waJ6N13T5B8wp\nrdJ0\r\n=szOM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.57d0186e4.0","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/density":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/elevation":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.57d0186e4.0_1579198675414_0.7476445150732831","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/switch","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"786ca7b872361359ecdbf4bc8283b4e8a6c1dd3b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.071a6ab70.0.tgz","fileCount":35,"integrity":"sha512-bm5IEexOyqh6CwLJZTREBkGbLNpCGSm3qNFDBrNFxN6G9CJe+QuyIJBhyZKcFjziY8CXb2+OnDTsgFwWNa9Rzw==","signatures":[{"sig":"MEQCIF82VvD/EajzqiVrVrphUoOTOitN34nA48nkCcRtnPADAiAyvBTEw8+7L1pybMiYH3PGXcXHV5fCNAKPFKH40L4IvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpfCRA9TVsSAnZWagAAEWUQAJcJJXnnkCmxYFqqMpWz\nMb6HQbqp6TiYk3aQ/VEBomzdaLZavXlv32CyKdjyVelzFj2IXSE95nK/iX7o\ntVzMuwjx+yfnEYWtRxoQBpPcGiaKxw+yH82HNc+cG3E7td5eHCNm6kg5gvvP\ngqgFrLDKJ6CBsXrQoaBMVBhZgaQnaZMDKBLC6tU7u4HvtWoHCIVHpZlgUa+j\nX87kGuNk/kl1IKvRW3VIaF0zbU3/uvr7M8ie0irMja/cNcxFekZBGNpJRqTz\nVjTT2jieDGGbpaaH19IoEpLIHsGvoUSgzahnzUN18aqUQF3lpKcCUZbk6tqM\nZSBMkhaThnXBpXx4XRd5t/F4OYtHHxwxRxTZ9AxrPimtocYop6zHBP2EaZX9\npV+7/Bc8YAePSPcRtj7JzwuvO510ELJ4NypGQUsxoXvkJ5vvTQgSeZXr3gLE\ngIAWqRKel3VSPOpIuIrIajYpmn8+GfbxcRS8W3PwUbXGeqkMG7U4aoge8qvV\nNgcPwIwCxr+1EP32eqca4Vj1ITGbFoDm2/Sf+hZ4hVaayyGc+Ut1OL467YOJ\n4VVLD5G9QgDShpkbAkH2NbYCXwbdXMh8mtHcTDKONn/P/5yBgmqvdhnOW72G\nAZ04JyJAfKD+GQcbs/INTTIYcJqmAtxyYdpwesBD3nfaMGuEzdmOtvKFJ+os\ngi87\r\n=e9AO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.071a6ab70.0","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/density":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/elevation":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.071a6ab70.0_1579199070763_0.6804116441220132","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/switch","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36e7c3fe073729c266064cc3d18eeaa45843a429","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.22e0cb618.0.tgz","fileCount":35,"integrity":"sha512-GUtLEBqu5hLdwF/GElVre36NYZrSmr+e0XtPgSAwmKLotnQYPq9YOTQbRw4nGrdzDn/Ll9Bg5rpmIM1mWSvKiw==","signatures":[{"sig":"MEQCIGRZEM3QQoP9n+T+5vh9OAUhMwRUe8OzPj8/hudmpUk7AiBdyr2TJsGf/dvWzY+n0jQVh7oW1axPJ5AiHpokTRetgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK/CCRA9TVsSAnZWagAARaoP/1sg7nVCZp5P1QGhj4kM\nxCkgsV0S8liN+GIWBIQWpbhmKa4d5pT4yzcbSPLozBfiIYnToW3nl7zxaj6j\nGIvUoQuJZvhj34ihmk1NoxYE8bYIgJ6U090otOh/rUo1xnSodiaK+7hUeEXz\nlM2ApE+z7rW3BRWyXXqQIhHazpYuNE//qOsCHquqrSYjAxowHbaZxQERZOFu\ndUO1CvY9wkp4jD8+OPVNOhI9nugvLUVhGe2RVdnur6z3j7iHdElNogeVpBY2\nUSgWj96lSgzpzqbW3cnqoElBDEeAVjENd9zRcPmIGAh5ll1YqwzsvDx2qjuK\nwdWg+jy4Y150WmJ4ipl/9z0XMY4Hc/sVKoK6T5dBcOjZJKnRCBzUkzBlSTBc\nPmkgAVupnqscd46oJkFUaCqaJWxNw9nbuV1hty5oNWiHxuOX/kBKz5sHLlh8\nfQRogHTPt2WugDxrqdw3cWLxhzcFmHT1rSQ+qdvbEXxBAdFc2HJ4X9eowfhC\nXDjnFxnXIcxGdzY6JOpUmkS+jgkKT72jNYWhknP/V1cTSZeMNLiaccfSIBLk\n5uhIiyNcbhdAcJYclyRNR3ZtOmX0lqE61OrHc62YDfp1PBvplaQpvPTWYAni\nkjpDYPV5fHM5jv0y7kqjap66xuUPmwbhALsvLd9BVQcCgzuyX/b47r53o5V+\nOUFT\r\n=9ZOM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.22e0cb618.0","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/density":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/elevation":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.22e0cb618.0_1579200449738_0.8111146613690967","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/switch","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"167b94f737f90f74713c9885c672372169e4ea85","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.f16f15b8f.0.tgz","fileCount":35,"integrity":"sha512-0QKzbKrCJnfn73qAjPb0XZyINb9Ju2zpnNRCchVETSSteoa/wVEhnsXgNDMkCj9eVgyja7ZpEejOtexKWwYe8w==","signatures":[{"sig":"MEUCIQDkyrIjHDlC450qxHigo6RrtrTApzOj0RcmwPlIddt4gAIge1OxpHOH1GS5o+LXMCUlOUdXUKrcA5p0C+xI2tU5AKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPrUCRA9TVsSAnZWagAAdQ8P/RtUfnAJd3SyC9ky1vRL\nE5I5yc02USLpd5VbM2wWmBSg6ctKzo6qz6epxrIVT0qvU90oGd5Fcxd52p3Y\nla8y8+XwH7kK4zEgMWbXIBy+v/r1TkubeHlo4sZvgOb5pdvnI5wTifL8FOtw\nNFN5Bp2VqOWAp7gVyoq8FjBzvBHCA99YAZrIzVfT7kARgP7ZBUYNne6s5zKp\nir1yn7rjlRCh/c4d3ZcBk0nPNuH8O21LYe+Rb22u4xr2o9oEd1sVMP3FgJxO\n6C5epkFItmrdeXVgdadFjRkvDLWHiVpeVHxDWKj4Cy82jr2BxIfpYZzFLpXK\nZCNM24HzerYCIJ/+z/QaQFPQAnkZjei/Zy/btELjLCOoE6PyiF86tx3tWoMm\nzkm3AevVd9PrfmCF952A9SxJhYBvFH2Cn21wXaZcSGVBFc6IKkCckyTdf5nV\nUG/0D/l7uaijANwprs1dBXOUpGtTnB6PoAVSGG5WuTPguxw7naAu5iGz+Pnh\nMgCaridlnVEx4L+enVms5AWallQayeBhJTsBXqIm/zLaJYWrxwI6Qmz0P8kM\nIdhzzl4xk7A35L3cDMNTxA0HzpKtDw0Qji1wtcwWS74Po7iPSmN46fqC5wXv\nWsoTJ5c3/l7b+XqDvJJq4PFutfw5blyNuQyYG4jtPZVTZxPhDjy335haT1Un\nvCG/\r\n=kyFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f16f15b8f.0","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/density":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/elevation":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.f16f15b8f.0_1579219668108_0.6299895136247444","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/switch","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09a26f271a8f7e75adc2753363118b2b00b418ba","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":35,"integrity":"sha512-athn6yKnG7t5JL7m9XECjnZqigyjM9nnD8tuM6b3cwX6DwYHGk1GtDCQBE0Z6nlUJluJtlrrAX1uvcqEuSN6WA==","signatures":[{"sig":"MEUCIQDgF5IcLIqpG3tsDeb9gSmbhVszocqoZEDFjxGa6+vZ+gIgZHZlPjCiZW1WvmRlZ52DAxMAFmPY0osXwMGYIi5XRtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQG5CRA9TVsSAnZWagAAd8UP/3Z/25miPcTpwdff3BpS\n5nkHuTu0tTHR75bASyOJLTovx1JkBIZWsCb2eR/H6aHlVxU+5+MxeNPaVykN\n97XZIYRWv/5Ssqj36R1ky2SOo05I3caG7Zj6OfM4fgII+92Tb/VBOybVV9yG\nzeuIFw08KpZ3duwOfhzvHAp8GLJmigpNji9vUE2oeG+bgibw96HIBVZRmEId\nkJ0j+xaB1tXnhSM+59B9zTy5SSDZRftQVfY5XSvoM5G+KkRbXSvotrN/Vp4U\nTeKwXumNJ1Kf9zDBqvbfs6eXl+GgF5Ur/xIQZdStnatl6XhiMGhIUtsZVYUH\nKU0337eXvjgMiqiQU2NfX2xn6NbIG3TJcq2PPGHp8AZs36j1nff9pKKU+m8O\nowDMHOyVlN7Nt/vPEjOjDwKLDs6qnU+XjrrHdPYFZaybG4ceQXCE4AT7CJd9\ntkrVlAtc8hltSXH7+Klm90Q41rFSDquePCJZUbx2z9Msj6YLnDgvANKnKbmz\nJ0jemDFt+Z2febVSKl6BR0T0jnPncMwejAbF0IewgnE2evKeKyCqXBMpkK3V\nANkmcdL5GxNg9iyF3gl6WK2SQn0NLoTMMdYMwqO3tbBbsUEDa0BTdMbPSuWY\nOq1ZfrVM0dVBBV337cjLzR1Cm2agbUe989lIgyUK2XiCnkpS7xMCDizuLQpi\nlbvY\r\n=Sc/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa8e43e9a.0","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/density":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/elevation":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.aa8e43e9a.0_1579221432926_0.7110790264721936","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/switch","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48945ceb199017a8c29df82d05e79ab68809241a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":35,"integrity":"sha512-23hvc2BzUkVfGUAKd5KXS/turOA61PRPA7ol11BWlqu0caX2SO08luagRd6MZJs+URChmpLJ7RGqKCYjUDbOyQ==","signatures":[{"sig":"MEQCIAw4Y+mt12mePgH5gAfZt0OSU2Db5st0ntcalqJM7OcVAiBrp1q9O+V2ZIcG9kpEwBnixXQ1e+E2RTPvaodEirUbhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQdACRA9TVsSAnZWagAADJMP/jaAnl4Ie073OwGnbR75\ns5ycOH2dppgOXduhgz3gCRroL1NNiZBOHKa3PBsnpfsskjKxSNeCCTv35kPt\ndv2gMM1sBXYxNUCVAtYhJSGf94bQQCnDHZC+fN0YJAV93leoCWovwBtcwyH1\n3V7ky/i4nl4NY+5qmaNIKfHHweKd0oDHDLL1FMLBVshBvS3ZS8CWmy0wNjfb\ndSKZksU3eUdimD2cXbmUxndCyGJzgygBhob0qohi9ZcFgDDSfPQdkzQh3l0c\nJXcNTXJsLx6TxYHjTu/uHrJFyiUqlz7GjerCTEBkokfzt/2F+7cuX350o7gf\nQfK+QAkDq6jVTb50vyMkWhHyvRgOQVBQx3n/yxbbYpThHm8puR7P31oPB59m\nORp6+iJ3G/eBsS/Y7aOWjFJVqi2dYMjrqYcYzxakvr9Lsj5eRIfuobJlbgSI\nWeT0tuy3sFRaA/wadH+mjNUh7piQCDCYvy5gBCu3uOKnQxOg8u9Jmh/vuG97\nf0es5r2QKj2uFtUIcLDedR3KPjASDgY/jtdNvFhPeiq8r2U9fknv5FdxJiUD\njMCA+0jBNqYtPE+xVVDNJTZZ0KSM1j4Q+RUzUsTC81CZr6yg/QmyEITBynoL\nU9EJzQK4MT8BPnKiz9DRoiTlshDbCAapso7Waj4s2VlTtX+YbDr+TA7xRDeB\nrxpK\r\n=su3t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe1f3ca07.0","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/density":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/elevation":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.fe1f3ca07.0_1579222847656_0.47375109046276576","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/switch","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df8998937d5b6f264c1b16fc241a2f71e3c88ba3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d405af26b.0.tgz","fileCount":35,"integrity":"sha512-ekq/bihNiBupr6XUteKM1gdRxUw+jsKd0ACXSjqqMd7P0ofX/2UqvqipZznyHDKeW0jv/pm4Y4vsIR3IPU2ZvQ==","signatures":[{"sig":"MEUCIQDRl8dT/uI8pqLmzDjArsUZe5HNM5CZdqSl7hl7kGxExwIgGzw6AsFXHV8kMn06T90uhXrkmagvNB0PTqGK6TWm/l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpNCRA9TVsSAnZWagAA2mQP/iJlsgaAR9hqL+9/Zyuj\n5ipJFyoDST/JiszfGcrb4Gbff/U+A9XjJuz+YFL3gTjqri+Ieo0aMDTxco5k\nXjIAaH5MdkrjKwYXZ9FTdzsL0xGu8akeb9nwIf9aIRuzajHhRFgxcvhrRIQ7\n/vNXVlwjX4ocartMtZwzwSkGxF8EnBwUDfPTgdzcfFvYxSrxVpR3ndiXUZib\neNo7EgSQYYmKQUextTtIYNUAQjUUu8MyN96UZaBE7kvUPcjrmzcG/Eph3AWy\nQ51RswM+O2UBGRN35stH/BfNA6M/XUGb1WMWLgTOdJC/2x3CYEvYDkuCFvBo\nfscrkU/XwfKahkrFhGwWnDkeAfXacUcGvC3mUQWnYizA/EqfWxlu59KtZyi8\n54Hsr2yfFTNShckmJy0/0bqPzudx7RBzaenAjlBEbwQAB94uGvrij6ns3U9V\nx/ZeXQW46hXzFfrHGlhBuPLwKuwgIC5dGrV4g+uL3H59LXjxcMBQpOm+pTFA\nrjn6x8nbpiVNFfW2XapE+lSqePsZXMPAgPbokhsdqsgSv/hxU1UN7ifJuKKB\n65l3UkVKP7fDdOw60Vbosy7rb3FX8ZeAcrWhCc0+Ory+llNkAvECZt5omvzq\n7t5DDugS0w0BePpzCZHFrSnao//2IdT8OI/IcARQ0lsqKKge78pWdYsL0JEx\npvD8\r\n=FROE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d405af26b.0","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/density":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/elevation":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d405af26b.0_1579285068741_0.04413114483990377","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/switch","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e4c6fa566c8393da3f14acfbae86b8390b090e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.6e857aae2.0.tgz","fileCount":35,"integrity":"sha512-f3n85Cxyb63IAL82EGRgTbEgVJ7Dqk7nh2OG0Tw5ZWDaYZhULnSVILiiWbnvXpZshNpOvfB3Y+ZUGFSv7p7R6g==","signatures":[{"sig":"MEUCIQCXCdZnb6SUf2Q0g5F1bl4h60sJE4sD+q6RuOv/fDQvGQIgCVkQJLwDMwPVjPAnh5IZuO4Y9/vs9s44xivv41jXu5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsbCRA9TVsSAnZWagAAQsUP/2WdfRujKBdtXBFqo8vx\nPdEUP1pyJBSfGnGPYcYEswdL62SHqG6Qm8N93xNZ33K2xR9hlyjd5LfcnuMn\njkkCSjd+ejneQz5qhHgkdOrYu2Vv2vZ7ulqbBmVcyMqpv+snTdwtUmSCN9EA\nsm5n9nsozY1iQ9E90WgJfTXxW5gVIFk5bCEH+/bw5uRejXkLQoRq2QGIuwu7\nMs4pO9hZmoOBsRPQSX+Kq0PHOtoWtNGn4bD8ZY3L42LVW7gpDwC1kW6FwRgr\nrKJZq/eTqrt0kx3tuiBRulau2IFu8G6cfVgKEhpDo2r0Ve3NYTaHcgwfyQ69\nN4AhzgODF17/VW91iq1bJWKHYesUWa22Nd15p4rbBmUMcmArRtwVpOyMc5zD\nB3/mGhNniLlsJ8wRnU40dSKnCS75KMrq2tWCV0BRfAavtjmep2CtIe6gBGpc\n11OkxjAr9p/RMsBRQDq3zUyPEVPNAOFzldVKFOunsrvAtB3GBl8lZLtKJjVT\nWoLmt7Ew+TxuM6RiKDIk/tr1OgOFaf7UB0BKPS78hreISq5JmJheW6qfb4wr\nxJXWonXI+XoAPGLaiaRfZ7RNivE382OBrFEOJjWaMlOKufV6hChizIJmU5Xb\nhaAk/AGuMNx8GXMoTMlGJoDBBmyu6dqxnZ3bK9FiZuO0j4zsaSpanc0DqaE3\nImUv\r\n=2rW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6e857aae2.0","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/density":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/elevation":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.6e857aae2.0_1579285274848_0.7541919858472754","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/switch","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e495d0ce3c4fe90edc6d970f47179cfbde82693f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.e2e764f7c.0.tgz","fileCount":35,"integrity":"sha512-4G+6P16j7Gu4j0H/eoadrh4bdQqgcQq9MLYN4enOiJNAFWRBOsYg9x/NVce0w1VUVLayQN/KtekwRwW6Z+JLmw==","signatures":[{"sig":"MEQCIH7xWqCIJ4wePCC/WazqNPqAJ/Qd1sSXzYHYLxoUd5opAiBBZUh6ymHzjqDW3SYEmhGprbdEi7wQDBWcwDyVSzIU/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6uCRA9TVsSAnZWagAA5uQQAItJPiit+RGdTtAOzYj1\ntsYeAlE3EU/krLN2gk8c9ujCXSpSff4AUkAz4aS8Y0Rfr6zuAfodq2lsSVqc\nd7X58VT+/c2TKub3XPBFae4J1PfIy3+sX1z9q6KGskrR7b+py1mc+ZwXiu1k\n2mUaNfVnvOMuVuZKPurSjBiVzKH4EUVx5Uhw+3iSSGF2T5QcMo4DOR0vHbNh\nyGyemwcp8clRAHXLtlbz4fHhfjhryHNtIbiVUkOhlS0ncMYJ+6MjmL0LgVfO\nSCMNP+zV+10+l1mhb24naZst4mbfjVDsGBsNmNODkCH+1YDUgvmSfbbW5y8J\ntJzvbUuE5T5gif+QRri8w0fL5YLOq9J9w3Z6XKYfql1ZCSMju46qdwKtIeGB\nUVksu4Le589Ox66s5SZxz1lwE2oUcq31DbdA2x/lwrrOMkMF+XcvcO3a4yYD\n6fjRm7zG0VJRIGPZfxu8gktBozYulHQ8sIsSY9gv6h1ldG3FbfdF9270bnxA\nC2cX8jPTRpPn8oP9AA9R+lPPTwCwbcqDYeT73RDzGxOZKuCiH1hijXqXV+Eh\niq002UmKMFNgtSQEFlE2uHb5pBFsLJTNrZSh20rEkCAvq00C5WgUlPl1Oqoj\nn4UTrRB4uQkMX7aWbnhxWme2+dBEjoe94v/l6tRo6okgVpIzquAd5/VLseg+\nLtUZ\r\n=7U4f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e2e764f7c.0","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/density":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/elevation":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.e2e764f7c.0_1579286189953_0.4082377134640349","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/switch","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a5582be9d108394cd9783f304615dcc8a4e31cd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7ef986a87.0.tgz","fileCount":35,"integrity":"sha512-ucBO/ivGZuDgXMDvtvuDe9oyyIil4KcjKcZVhvnujNPCQ6DFQFPMxuTr0ssxpCw6LKh/E/qxyd4Y52V3l2PylA==","signatures":[{"sig":"MEUCIQDSNkd2P4YmilqQ6xrK5vb41XQs8gPUo3N3QEvcdL1TogIgfRYd7CNt/P7/eWNWGPZC5AMztTDYLImIa2XmWbPedB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIguHCRA9TVsSAnZWagAA73oQAIBI9YLweXMDOssuYF/R\nyhhnVwZH2J3/RJKtRdssM0NCA/Ip9U8MA2Wu6QVkC/c73dRIspSCInX7ea0X\nrRjc3+rwOGuiCzRbd5UFEcEh3rPJoiv1ijK7pDvyzARg6sEuKxu3q7L7CKgh\n0xmWJglrdREnd/p/rIRZrkFqGS8An5qr0u43/zxXXcWH2M/tGVHF7q6sHVwe\ndh1io+N8KS2bAr/8kIBYZgYUrSk0zNOKvkjBBgqqIpEgPvd6soAxlOThOS0A\nW3+qM3B1J0PNrW2dI3K3C/Uj0fRVAfmp3lLh78XbTFSVOgfXqKz+tVRsf29t\nl4PIAxoWONV3Bayx1FrRz0sNPRrwDrot3tDW5H6aq4a59gdc047/TpbEhcP+\nao+wnts6NUiNARTwB9UouGZ0BedJyI5p08tFgeAeyFuDK5+M9hpKyo6cJac5\nDZvdQivTKnTtDLVhnOIICFHu7cKhMnqt3HMYLsTqflsE+DDQaZ1nv/Mg6M7Y\n5k1CNRJ3SBU5RqtNSj7w6byHv02riyAJFYFJNFDKKJ5Eiv0/tiJckzVruaCj\nneFH0oqKOrmqmnECRJ/efPkGZOA8TRxTMDfVfo391HmngfeAqZw4Zj3fPfra\nGhCeUIJ4tS+bvVoMdUfwoY+zF1zAl+wAdHxjGAr7tasjBbWWpmBJS08Kpt/9\na65f\r\n=JnP8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7ef986a87.0","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/density":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/elevation":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7ef986a87.0_1579289479164_0.3319403428464234","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/switch","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffafbe75cc06402eb63c471a6e24d908d1b761d4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.29402e2d4.0.tgz","fileCount":35,"integrity":"sha512-B7cbcrCXIIYU8/fg7ON58pViEPyqM3LqsnThlzMcpC+5qfTRs3DqSc8cz1Amy+d4bbg863qWd7Cw+0EL1OfucQ==","signatures":[{"sig":"MEYCIQC4uiMj3xN7yemFz465qZf2yES56S317cVclicuEz0U4QIhAKrru4AWl/evLnnh9WBgv3vcZOkaN1h5MQnU4XKy23Vt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhu3CRA9TVsSAnZWagAA0XYP/19J5GMRY52FIuPIECBy\npH+dGZJnBoi29ogixs+aFOKphl5BBZARuPpsmgrcjiFGMNpzmBytZyjSy0ap\nVuS/+McUDIOOEyWjzBuiSdqLe1AuGQvySPW7lTG+VDwLqrTLMrVpZ/6TguTS\nJv8A8rM+ugSo6eSWli+/ywVx1RBikkvwCEYhLarxIeK4f0I8D3IvdzcXkGTF\nsJowvUo4vKXOOeSfMZM5nrOOsjnpF3ATHIdpGPwE5t9FmzvXEY2sy3OzcSJ5\nkKMTCJjoapzFDQ6EMwD44hccaLK1/gl437+39TAkc0P7F3PO0naQMNJBc++N\nfgrZ41+2KBp0lTgozW7pS4e7/QIEKxKlJk9XgK6yF2L5/5rtEdZQChgf3Z8g\nay3br4ChYjal2UnyZOJzQIjSJMx7zLuahUTBVIaM/rSza5WJSPU1VS4aU8bl\nNPUjyfxi1grHpQSgK6lB7mJy6Cv/GCNbnDKgh20df1M0Xhcwg7yk4q8NYSju\nit4N6YzyxmKgypsLxSt+7WkV3UpT0UcOrWqjKPpEZI6hXzUO5TEjT2JseHu5\nllbnqcVLZwLdVjRyy6DulK9OuQw47K/VMZ4kkHzhDcBxR8MhJo+4jNvfxKj/\nz5mN9cRVGtog88l/VObDtkfHhXhl2n3jafJmpF0Atd8Bxj8RUL5OjajojOfn\n5JS3\r\n=ISDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29402e2d4.0","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/density":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/elevation":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.29402e2d4.0_1579293621931_0.23849382302441002","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/switch","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00d424d8643ced9f795bacf7d02fb19b4ceb578f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.2b3ec563c.0.tgz","fileCount":35,"integrity":"sha512-Dpsz0pz1Xd/XmcZyTOzANrJ3zgJHHQYT+PrtXZZyyYuLT99woBlXGcXclew8I72M2nROloTrjhipyFKZV8d3ZQ==","signatures":[{"sig":"MEUCIDBoncqnWkeXmIwEb+JQkDERHI4omSiXeEohN4mHHJOrAiEA+jxZxl4ycSw3kZAjsgQBSR6VN3M8EE7LVUX6QQe/IYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9HCRA9TVsSAnZWagAAfW0P/jodZDG/NK14eApRS4ES\n+1ACXRI/sSPEwom85v+6FgRljc+k76LE6CeZcInAIN9S08/qgeCbn6zFb1fQ\nTtfPwJ8lm7mDcL3RapCeQxjBL0M2rnd5p+pfDjE+UYOyE1FVT/JEoYj8KLuc\nWMYy5cEDrEUHa0YU+uOv8E1VB8xm7qCgfP2N0QelcnkBLVc0vLXY7vG+QdNZ\nJ7PxjW3UoA+ZijZb8U+Lp9hl9w1tyvmhU8rht4sXa4p0irlsHXVb4MXglTcV\nLQO8AtRxmvad6Xfb/GTz7KRgt2HE2KVwwjD8c7Km+oTsFnlTPjeaRIgAawq0\nuxrm8H9K2A+mL4qJYfYD2mUGGWlT2j+5MUlU9drUwTs1iQLkHx16W+Rh5X6e\nvwDmXX9xo2Bk/k2Fhz/c9GiiHhUHU7RdCNePjlQaP8uc6Mm2QGw+dupC6WPA\nAm0AcA6klvWnFDr3rPPXMvD9ludwQ0+6LUgsbK/7kZgTpophlNUqKPRh/NNr\nXKDD8e1PVH049LzfyjCqYdWUW7iD6F4ED2Gn1gp79C1DaL9a2I6UH51lIFF3\nByd5LDt0+l8sMF85AZS9iyY3qBV0MAUaeVonBlbl86g8VfKgSA+ird0Qa+gp\n6guKdQIWd87yCsBnN0qm49BUVSr/JE/s+TArO6hLAGD5ocZPHi8RVPm++YRq\naDNv\r\n=10CZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2b3ec563c.0","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/density":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/elevation":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.2b3ec563c.0_1579302727137_0.20978221673252406","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/switch","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04774b2e46fbcf0ec1724283e14e34279b44cc7b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.e8a993677.0.tgz","fileCount":35,"integrity":"sha512-+5YHId2dDonRruAd7LGgq2XL8/2okTttuhMum4VX+Hq8P1HJ5q6as4OQpeJ7hfXka6HZoDA/skbhvNPHO0QH3A==","signatures":[{"sig":"MEMCIDUzk0WUrMEO5LDYK0DlnUi5S/tnb3zHQ+UVA7+m39seAh8dY3zqbI85ArEKULGFCYZr+17lli5zedTFnVZD7Cni","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvTCRA9TVsSAnZWagAAH9EP+wRm0HXHap2bv+0ATPQM\nvS6WIAANcBeuaWbRZi6Ii7Vy2deUcCEDUhM0kpUmkMNBOnmPZx2VUKioAQzb\nhazoF+cmWe5D1Zcvj0uJQs1XcaAIMPje8yEDVgWiNJBSj/C0mpqrw1Od56uj\nsrmmijFbay5tgGXWVpYvgSIvlrEBG7DNj9lNVX6f3OlM23VXdcGeHpunr63/\nGpYYnIMOaeo7/xZUaCxR+qIh/wmRxYwZlSjaPGCsWGHVvtGHJZg3gZxMKZNt\ngbuKzZ0x992XUqgI88rnycS+KGZ3/w4hSogiyLVaQYaKAkChymXIwGeabPIt\n5AcnsaJkMQVO2ohD7l1TooP0hhsB/KVuj2Tkn4XoK7M3DJtieEKMePcVn2o6\nmfC1ATGlnPl6ndTtGBWxXt0KBuqfRXm/eKxPhEsMkccxJPzwxT7FIBBhT5uj\nrevAGLf0mS5qGdNAOESnFgS2wQ1gPRwOKMRgmkNQZ35tn/2m+USM/MrEM9Y+\nuRHTTKEdbEo8xxRSNqWPX623xsfucDCDAo8O3JggfOdakx92ozEx3BBbYWhZ\nQnaM22VF/T+viJK2jsNj4A/wd33JUbCM4v46hgIiHPAbDd7SAQbG1WtCbBMB\nSiK0PCc4sb2weV9+HdOKcV2sc+voMDAi7rjnnYNWNVZTtPJrdVi9mfAxAPYu\nAzrp\r\n=teLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e8a993677.0","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/density":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/elevation":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.e8a993677.0_1579625426897_0.40525501676444353","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/switch","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef524be192488d817130934ca6c59e98cbc51ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.cd4903304.0.tgz","fileCount":35,"integrity":"sha512-KB+7bKTCdYCM08xActkd2XGL+gBZckfd2qzCKNE59vSH2QWYs3tBjBtQo/rIKG4Ix2IdZ7Q33gISxhMyLMlpBQ==","signatures":[{"sig":"MEUCIQDdgsS3RjOpG6wcaaiIqds7To0O2Oz4fcczziquXI3yLQIgfkotagMloRpaSa1DwC0YZaE3KEWLNv/zK6uPng2MtiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28sCRA9TVsSAnZWagAAZ10QAJ9HRc9+wa2kTknGCX/R\nZ+NNA2n3O+dr0CESP3kjL9107eWqukW/g1gMojdC+j2csOqk7MoLhWh63blO\nBixGkHwcbLvA0i01eI6/GcQH8jm7c7E6Yk3E7KIozFfifUiOOh/SRj3sdl4A\noxlKlijX+4+xpQHhKhQrmr9WXB7sLRyWMogdb/roYbAMir3ZPyonPO9+p2fX\nMExu4zhYox8jo1HyKdyz7CTB+fMb9krsyGDzYSCDWzbXcZ/Cgfsph8WWSv78\na2wTj79l2Sw0aU7dkFiJITgGpS/zf2FLqDMA2ievr0l253yhpaYnTKe2CULY\nsmA7N4xy2CrSI3lBFdJuv/geea8TMlMO8ywSnIR1mswRuxZLO1C5NNSeAuxg\npUqLn371X6q02F1lnfCbv2pbEYTHU99EcPWaKkmTU8xnyL0tg9xbHp0vQMV1\npTsFqaQxHIJTnNB9cAyKNq8A0FCw10dbPX10hSOnD2AqbMP/pLjbd69/tH0K\nsmjF0rHa8tXK2ZHgoAihx8oOiN3r0wRJ3VyNcV27Hmbdq4n1NwtQ/Q9X5B8P\nGZ9j7Rh+lMFn94VdVqFfryhvsV0+hh0kodvPycIxmrkZBkAU4I5+RuPVcWBE\nRJtrCn/XHk6kXtBrZhZJOy+bUsM275/Lqxqu19lbRAXjoFEj//PrItBSoEFO\nqTsW\r\n=ehSz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cd4903304.0","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/density":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/elevation":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.cd4903304.0_1579642667848_0.1442244575520204","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/switch","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1573ec63733e62ebfb339da112b9025fb3365593","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7e4b04b25.0.tgz","fileCount":35,"integrity":"sha512-aabrIOOYH6tXG+RXzxodHs+sDqOzL3oUWQJFcfIWxVeesBYiNs6W7iavzO6yek4nNseGC0Mtj+Fn0gEuXHa+tg==","signatures":[{"sig":"MEUCIGP4LWSHhZz+fO3rhJKViAucJmiepHtP9gc7m0w8g2kYAiEAiR6IAHsGw+n32jUB/T04vxHQVPNm0fDGSS/3XLZ73Mw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39bCRA9TVsSAnZWagAAytcQAIchwGWoYZj7wz/Eh7FG\nO27dHvLGLjcf84ACbX9Bhm3lyMFx6LIPjswQslbs6NHEht8VnQ8Av+G76K3m\nc0DdLzCCNP0adfJDxPPYpPxdtCJrdlW2JZgYOV7GXIbb/FR3QE80zU+dl9U9\nRxMi+Ce/m+Qp+NEunJczLVnz+2mnfqGjG8iwovdFWuW58FvTCtu8pUNYJNOc\ntuKl8A0CgK4eKEI5fvFC9nwc00l2tDlQMu45LV64pwiqgragFKLwhZIGyVKF\n5P3+k0B9zyE0ylqQh9X8DrAUepUcX2FUxFps020tiDKk7BtfuJrGwy83iknq\ncZ+qsd2hFxX9GHdzKj8C02HF6AsqjggZqP3pjU40dn30HF2kNCRxdzyL1O6b\nhmHXXlbJUkGjNVJpbqtYf8V3K+kofS10JZSfD6KocpJlF4EyeQWIyiG3xCJ8\nVjCowujBu4IiwjMY3/l1XabWdZ/H15P+3I/saGkZ6Q2jAqmUMAMTWVOMtfLR\nSLKE6c+gLKH0sjlHlGuTZVN8h+BVML1dSpRW8BYhMA8Flc73rhmrfuUWrKVe\ngmoSJbjZBJ7Ur+4HnoB9VstJbk9AsAr6IS8Km6N6wZBKJTtDsUcyY2Tp5k25\nNno1HMtIMHCEPRwUv1ME3zEBLAwAEc2ACa8w7wfLJaZjR5UJJqjbXHZZajgF\nWv6J\r\n=lBcl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7e4b04b25.0","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/density":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/elevation":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7e4b04b25.0_1579646811214_0.2867404163318543","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/switch","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33c13427ecb663e7edf0e5b000e6d46b61829764","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ebc296937.0.tgz","fileCount":35,"integrity":"sha512-C9Zee4PwOKfblu0Kf9+0KqsVSfDMQ+TGrBzEmZ1RlXkLqA9e1mWNXyosi8trPiDeE4x2HjdJ8dmijFoBIUVQ7g==","signatures":[{"sig":"MEQCIEsTDVzzeqoyEDINulaWJ8be6Zi2jrBJtLnj6eR78er6AiA9VoeC2JSP0ZOl473zpg67dg4WhFzQNwn4Ek0S785hWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40XCRA9TVsSAnZWagAAaeYP/2sMMiB8pv7DeAcjHRmt\nNSGjry37JO6iH+t/mOlqwU/BEuUk8nNjACczwDhTgtl59mIjgOPSLuRaMlDV\nGipwP5SHY+3C7apfcAoj94865rthOT6X5gG0T3LUI7/t9J1nNCYPxHJ06UcB\nbB/2Bj+Vv2Mv8ueGy64tX0/+JBDK6IRdQhbG07wJX8qVNIn+3kHzoFp80ypM\nnIffQQj9x4rXqFUlsoXL2nTTc4YlYoRT+kRcSKOyqHwvJfkrymc2Mjq2V29I\nCI3ojjqTG7NiBVopyxx70TsYqdpeCBCfVOad7CvNIu8rS7AH6voiP0H0mFdr\nht5+M/OBNt8RoodLoM5oT6SMC5C26GbAkmMkt0LAIF7s0IJ3fILNRf35ljk9\n+sfGSiVvrtA9qTG0EBymm3zdBoalJSdMV1VpLcXoL3SISmiob8cHjmS0uh/d\nei0R78lzW9dHAZAswrl8whQUdVgxU9PKDONwKdbDOdt4zMcATYfZZ+g5La8z\nHy5yBq+T5L5AgTO15Rb/mCRg8HiROpUeor7KBOKzTqBxIlmPjCwzqKI5IMMu\n6J/mRyNuME9UdrgcLMe31vO+wfOhjieJy4NSjDxtQfawkxXYFratwqj+0kg6\n73ljEedlwM2Qox6ZAPUSGJsUW2Uq8CWzKEbXt0VExN6XkQ7tDhvElTdh4m/P\nX2ab\r\n=j7jJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ebc296937.0","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/density":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/elevation":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ebc296937.0_1579650326764_0.5025275839672088","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/switch","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19677e3464d410f7c335599e021d32fe09b78f84","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.cf33f113d.0.tgz","fileCount":35,"integrity":"sha512-+b4JsW0aWMsf/y6addR2Lfrv6Lr/ipW2djL2he9bZRy5469fOdoK4cQYxLB7Tms0I2kz8Jh/kPE25jOIsFS2pw==","signatures":[{"sig":"MEUCIQDL337wIo9i6rJiyYFqz2SMNRxjF4flws1YDWxoL1ZRjQIgQvvMjtymVjKkcPEjWk3AD7d1oTMIK4eOS1rAPzByVTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6P6CRA9TVsSAnZWagAAn4EP+gJTxHCZOYIfGdJybT+N\nc2Ix/3/OYg4avvua7D+0VFQCTuJWvw+Pj3ZMJp62OJ5qWW5/NBTM+iDzozi0\n8NOwQ07vBSWdJNhQV/4+Cv/hGEK2wcjOkNpT63QUIX/nV7HydDHSMAwd1XXR\nAY0eT8BYyMg4G5R6mFp1nrN/CGCbg1yPYzo+OkocI6c9a+bsaBdqzGZa9ltP\nJpcF6byOcOfFpocA9QnyhIdTjL/Er3ATWGHnjBATrK87cOthRJS9aj//hWSq\na4ulOWXxM+AxpwJfzBp0S6ibybuegho7TQmz4MomRWU4gEkHufJ4cdPC47jn\n84c0OCoWwlKJoQjYwwgHtVS+TC0LGRt0u6Kzd3ktRUCdZH7L8Fgm4INgx1Sp\n0J6+529vANGVnU5ubye874svLSEbe0TEtRtyj1GpOAmk0aZUw9F8v8ysjgFL\nSC3+0WFDK26gtF9pkRVCkD3qNjgZqpySrF5CZ7RanUFkP5pWn5Dhycx2WYTz\nPyw19wSmE3MQI0JEzxANKEp0/7JunEWd0WaDzpDwi24x+8tm3Vd6uJZNo9Pj\nllXwknOEsj75yTgiPA3ydaoJ4461+MKqbkrJ+M1Kou/cHJ+fgWgWjsJEp4gu\n/QLM3AcC5/bL+xvm0FICZIq7fZ76IvbQFyMXgsxrSV7VKpvnyJAJYwKBqHDr\nT0B7\r\n=Zg97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cf33f113d.0","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/density":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/elevation":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.cf33f113d.0_1579656186167_0.09205265511650129","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/switch","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"050b1410523ccdbcc3683fc0a8d2513c52e30876","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":37,"integrity":"sha512-CKGmrLAd/BFviF9MfeVXCTIR/CxqMOCH40KMXLZl9Smn9/S51bJoOmB4+MbEKx3N6Z9r6d/hAN4tiX1g3a1xrA==","signatures":[{"sig":"MEQCIB62dMd6x5OLpv/xGa6MqJd+qVIIyQp5FFNvcGaEu4miAiBE6A140uc5VfwCUpADU64YwkIqhXuAqqKKng+cyNvltw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6nCRA9TVsSAnZWagAAnskP/2HAt7X96Cgny6DIQ5ab\nve6oLa+53Zek3kZd1AnkpqbJgtJWxVtT2qsMSTr0o+qre6wgJyvBZipiE9p3\nVhbQiCDuvcVT8OjTKnPlKOTApARgesKJKcNAUQXj9TLGkR/EqDjSizihfbro\n0IedjOjWgIEH7c6KW5eJJq1JnZRobpe1R5oNKBWh6RWvaj2RsXmuWAE8LiRu\nVb8rLYZ1qw1h5X6XQZzFa1zjyAegPeziTyt5H9qiJXaa+LXaSh1xf3rFFqSc\nljWSsfIdOAgqv6np38cyqd92bpBATFJgCFvmvBQGKSf/20hcl90n3hZ2wVZi\nHoVRKCylVi3Meg8MDtphA7uVihl3N2gIkzpwjNCWK9SorqTpVXop6zjZBT/e\nsfkNPZAwXaQnUiRwu1XakSHYDnF2h25u1Ts8OjiNFXCTgmfH73SaV66AIWjO\n+YN+zXgevhSjVveIMbvpvCSFBfNrUoQ/ZQ5cFm2fHtd0UKGER8mOYoQsvaSA\nFDElgnAsrDA0YKivS3U36LHhgjtj8piCvg3cD/1LY32uDWvxooRNZ8kUQubA\n8T6cXDls6JeUKgGGWL599mcTYAUc4S31ddERCpZN8L4nQ7juEWz8pYyLs4u5\nGzRjb1oaDrrvq6/0gpgz9Yr7ShSBJyNm5ITjvYQX5Cg0HmWwLFJXTn6u7Vq4\ns8AS\r\n=K3Hh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e1d5f1be5.0","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/density":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/elevation":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.e1d5f1be5.0_1579712167202_0.3397045899307205","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/switch","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e79e573a850bc870300c64b7bf0bc3f76b22b8a8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":37,"integrity":"sha512-EeMQz5nZy6+SZAoVQ1apcqRdg4EdyAaJHwbb3A2P13iReD79dgTXo+ZdSXKZkECCNr9O0yIoIXnFNtjnzNh97g==","signatures":[{"sig":"MEUCIHdlQnhD9ExlLVpJPAvEKp3zLyOZbQYpRRD7+/RIxE+rAiEAn3aUVmpSHw4oz0mTosewxFqoTkeSIi/qT5eLteHcP6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI00CRA9TVsSAnZWagAAOU4P/2Z5cr2iX/Nn5p7alZGH\n0qRRZrn5GbaX7A/CW8dn2tqJHdJsnMZHakbRnmbDC24rd7sZsqhuDeKfyGMB\nUAuOt0UOP1BaIEpqnZkIE/pQq2nLn6C3ZMy8e3UY2CFvZeXBLfGlI015NCDj\njRJn1xoQF/LDbopexKRhsfrF7dM9/p0Tu0CsnLRCAyQ8JPumLW8yO9OFzUP9\nx0FT9vAXt4aQlvLHW0k9S7nUZBhLkKY4tjg8nkmlfFGxRl/GO9cPHHQoBrMY\nVY6QMbJDNS/K0NFnF7VYvZuWSni3iv6mHk6jSKluF+QfzESpthE0QpmZbB5e\nppDBcw0vBfdYgTzSeV0bl2/PA/5A3EUv3EfNWJUes+I6kGfP50ggUMsSU2bc\nrH83Lpt6gMZqIpWkx2wzx6xbdneE7ZepEhTD71cofNdNZWGLew4LQIynj2qV\nXhCcY90hgMg639RrjFuopWgac4A9FZK0uOXFR39VEzH5ZwJNcNUpaS7mNOBY\nvmttL7klWLVxPwJbUlr/vyvkmlZR/AEixt99QBxmh8L/rgpHSScaeTtXQhHZ\n7QiwzZGyOiGoqC1q8WQnkx5xbh1Zy78SOviIylRop18OvoMjU3fUVAS2wteP\nGq3hpph0X+UqNpIjNRYcsemMUkXRsuF6RoqrfXRgj+4xcTHk50jY70DaV9y4\ngSmK\r\n=ZSKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6b6a4ff92.0","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/density":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/elevation":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.6b6a4ff92.0_1579715892074_0.5345768127416277","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/switch","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ddd47b3ceb991c033554ca2db9a4d01468315a4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.6092f71ee.0.tgz","fileCount":36,"integrity":"sha512-TpfM6ze1iPdVNWlY4xVjvWuDXDxMcJujYiYaAN7WETPSCBbZZnax5MigsAuTSDMCWcR2NOcy5u+aa+rAf4HCYg==","signatures":[{"sig":"MEQCICl6A7e4JyITjjtpHToBqx3XIL4Y3kSIKxhUKpStOSLwAiAnV2iEaOvZWpR6SGtSVuJA4Ahmvolz0c6C1AxBwS3rjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLv5CRA9TVsSAnZWagAAvj0P/A5SlfAV8Tb3zHUcQn3U\nTC3jFfX8sfkATeVEzlEiayly92okAdcezdYYSNK33Th/e7wefoR3JZY/mLd8\ne6YDjQ4lhg6LPRtOuB5wiLLbiWN4N/3JpI824MQlOUKs4IZWYLQdX9JxAoIW\nD+kObHqJA/sR+izKTi2LlCyjO9D6vdLz7wHwrJV2afGxAK23KwDCdMWHkTUe\nnso/lk8LpPjtCBywGp4qgy5XfcLdgBdlPniK2GlfL9M6jvWSZmmN07W1UUEK\nM8jtFnG7EerCqKDzLOjCKgQ9KOdPEEGi1J7Ca91S/B9ub5+8E0AsUEh49tHR\nimUxsibR7g4x7P1t0iefYyOnQwd4xZUz4TmYtRUETAeePd67doby+9J94XP7\n/Vlp687IoaRqPNSaBwQ6uyF7DkKXWdtQ4FyEP9/eBKLcnD6lEeZuNUMOdeiE\nymMeEs+140FaRO+EHosOhiki+455HPkgG7aedO3ixb73nK6J9HdcAIuYoq30\nZ/+0UY+R4QUX/HZn4BAztID1HMfP6PmPj++/sszkU4JpBnOLZtr/QzKI3+7E\nRXSa7JQq8ZqP/UK5GG60caj4JdNM2/yY9o10qKtOSo1z0PXt66I+VszdG1Uc\ng4Stuv/2OXMo//9IaXAsww92B51k/pnZwXBBzqm9vfbTp2hCHw6tDNHlL6Xm\nqTcP\r\n=Aj/J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6092f71ee.0","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/density":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/elevation":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.6092f71ee.0_1579727864738_0.28004434787618315","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/switch","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ace13ba17bdda3ed8379de20c5d1ddae7e3294c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d8d95020f.0.tgz","fileCount":36,"integrity":"sha512-NZbQ/aeuQwq1cRIcf7wlE51x9zJ25qjR4xrplFIM7waFFDT/YMlo5c7cY3AlOAu1NJhiKv5I0HbTsYx1wmlhqA==","signatures":[{"sig":"MEUCIQCDKnaqKWQICvVUqu0aDI3lt/Xeus6sIfk+fzzrcqiWHQIgG+XoZLuUmMVxmi9SVSdEJaBF2rzMR//h4+xK48mLOd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZDCRA9TVsSAnZWagAAC4AP/0AHebxlJHRh4VoxoEqJ\noqYc7WCgPqPO6bMkztbDC47RMW8igMu+H6UuTZxZBUHZA6eJQSFndsXgpymD\n6ydZCEMBo3WcW0ydmg8ZF1Iq5ME+HVuKpvE+ihM5hnu5N9fsgrMBzIYJ4Udn\n0agxqi+yaMnNOqctt3n/bDbnroCiG6HjQHUo50RRcmfHzOYz3gCoPukNDga1\nG1TdFvIu00lho947lwbH9VPqnGi0VdoOzVcsLTCXIacXWrSR7miVHQzfIwaj\nr7ZcM50pJOCypg+JP1lhHkzi9BQ2Dp+5azs/haRRmKw6rJA0qw+6ZBulJLv6\nHeuLjti8ieBI3q+aWI+FtHdyIT61tb3uVHAf+qiJ5GXCv5Y410/9BT9f2G6V\neQOvt1pdvCiBbBGX0STljrhLgE9m4No1Gdjapy6X7A453S7x+6oi8FXxZcCA\n55XkFa7Dt2ilbfY4F4CONtfpEDa9k0HJ1AwmYF0pGs/6u0SpGj6vNDJTzR6i\nJi0yxrAFukdIBItvi8tFhp79z7OOV92rzSFFKeVZ5RtCGtSgeb4Vas3D86cD\nT7f9EzmZiYLJ0KEwuhuVFYMhUmjjldwAt/v5YzzojZHoAfg5H2vAqNIFr5GH\nvkutQyXHHhyVcS70dhvv0r9MYtIadDCn12CAmfN6LFXbkw3a3HH2zpmXpVPW\nKqCK\r\n=o5mP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d8d95020f.0","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/density":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/elevation":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d8d95020f.0_1579734594619_0.7072527913992044","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/switch","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a74291b2fa1d3111164829961d93359e215e682d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b7facc628.0.tgz","fileCount":36,"integrity":"sha512-L90TFQ89NHYWLhttl9TP+80EvrgvzPnHoT4ek95VHhGXgTNWXD1Ac3GBZPmDdHMP88eWTNMOIyyTHIHDPkPWQQ==","signatures":[{"sig":"MEQCIF8+pcYm9uBoevjsn3DEJVe+hbYkCJlgTibqThNbA7YFAiBAhkDF4KNwClWWhIL1+jFh4DbW+kXcmSr6dRq2X+4Bpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIzCRA9TVsSAnZWagAAlbIQAIGZ4rJZ9gc4k4CkY5s2\ndWPlwLTGlRFaoqu5Ter3JDBfH3Or3sf5HyHcBDof5Jmmwk81kWvUXHryh3Fo\nItOea+4GGwF9itHmX4vpGdQeNxWr7tv/McDDe8DNCrH9OukVLzjwKv2/g1qm\nhrN/L+LsGIeX6tTIfCqO7UcYCfOEx445OY8A5dbRDaFZXu7G40OAHKO5AvWe\nkxRJSbaZGpTdl5KpAr6EOZAsf/W4SGgs/HR+blNFlrkQgUxRtc+lWQTwEutd\nhlItRt7cyo2APn8afr3OAPUjba2YTTD3fa7I66UwxXVDnI7ZYZ5hMLyPlKrR\nuf8QOa7EJwQ9YwSDGABGvtXjqp+H/wLBTqWCJPlYGktzQtCh/cHdhoO+n08R\nrBsT0kwarK+fqT7RXm1+l491ypraRT9ZpomcjT7OPicl1kX/TECApm0rizyP\nDIjfBe+kaT6DxmQrjtCeLWWAbWzxm7U7VC793Hm2pBDTj6BEdnaIv6A/sWH9\n06cDfLufbhQ93T5PoEoHbuKrlp/gmSk1bo5zD/eeGYTALePbH1Cy9iUIe/Jc\n2bejCY2wuz7eQ2yhE0q00ymAgv9xgSVd9+Z3V3D73oXqFtiBZRjlkWKR5HJe\na5y/ucGaxYpNDX2hqJFzhb8sMu7ZroVv/mmGqRWxL/9tYRioowvNyuneR8YN\nlPJ4\r\n=L6t6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b7facc628.0","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/density":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/elevation":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b7facc628.0_1579803186527_0.8805042375638754","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/switch","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d1e62a7f42b39444e6c5e7a9fc86019dfab8f7d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.63f357dbf.0.tgz","fileCount":36,"integrity":"sha512-h7z9eiPz3lLhG4lM9WkT/ZQjKfhWIpXXmt69n69MOsVqOaZCHniSAU6ccU3vq2D8aV7ICOA5EdBf1aXi15mslw==","signatures":[{"sig":"MEYCIQDyodkrkf98AK0ismCyZj7ojnH3y1xUNyeceZlbYghv6AIhAJXcb9rVZbkWPCyo7x39rANLiPbpdhai1U+SMJVvC6xI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZjCRA9TVsSAnZWagAAvpQP/3brXpGjGQEIFA0AwVUv\n99xboRQRIz+8QVLyG9mzEOoS1U5hDqAXma0WbI00PrjaGU7prgPf5CCYHkDa\nOlIy7XWm9RIvZrimUkKAXsoCbzmZKQ3sR4zd1RZrsEghEuGqiuaaXA2Ogn8f\nQbCxViVvHezg2byldyTpMuxFH8FamF5H/agLSUi4R4YYt+RjA0eMuy5sZ169\nMdIwojkedSOI9fYVvia2CQSOEloX8vPuX4uh4xbYE45xs7nRSjJfEnlE2TYA\n97r3pjMIFH7z3zJGJAOQU16mjWpia07H/NV1s7KozzSAA0Vd+kVrQAG9fd/H\npcwQs/85ZwfW5tINOaD9Wta/keODdHqemYJbxg2XrK1nDJgKxqciK2aD7BYN\nrR6oI5SfB7W2UC7ROucar7n2yYLWKszLEbO5iSYVVCJAylUlshHOjo9RL8Vx\na5mqPOqTvusAYH0ggsPrZ5p4hXY5EukLNo+1w7JXq7/mSemA8y0dM2J7NaJb\nNaP7LBOpi2HuDiNe+Tm+RhECUtsP2G9lQUN0DfaCRoImq4NqKXLQGlbFosKI\nFB8c39K+Hwi2Q+D24eZX+Nmyxsvx/Tvvz6GRuJkThnaGCV4ko5CIglYHu+y0\ne9MuK1EJerMk7H/zK2PDZULj7Za0G3FDrpT+nhc0WjuPuVW3zd/N09M7Kyij\nGRa/\r\n=5qWy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.63f357dbf.0","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/density":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/elevation":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.63f357dbf.0_1579816546333_0.9046957325605713","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/switch","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a990ff7f2a7fa830fc0186d0e29541c3bc1eab76","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.f2426d26e.0.tgz","fileCount":36,"integrity":"sha512-qKbIXh1nWg8YvaXIBNFKBM9rpEXRkg5T1YJ/CJfFWLPJKnqwqnuFABy7/sBWuQqis4tR6htUoaeByxSEx6DPVg==","signatures":[{"sig":"MEQCIBQ69Rddqi3xLy4SIz0cOghyEpMVWh5HwLn8KrNcUum1AiAojLlUh+8pO7p71TOla5DWXuEqB8gp4HLH5joKP+FkbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJ5CRA9TVsSAnZWagAAZi8P/2qcZVkFbp8b2YM+wA9C\nArEicfZIf1jX4UEYzB85aQ2mqlK1zUZRzAvcI6q20y3yv9LBg7xTa5Mt680Q\nXEWNlPGCnTG1SpzT5lQv08Ta68nb9FspAEa3iLgALqfy+vwZnrShjPdtI0/u\nw1s560rL8GclPisE1n2wPi7BjOW/agPmd3UUQUAz32+kT0YSY0bKBzD1SE39\n01MxbU5cKSYlqqqNgM9aRgRS8ggGb2DpiqISurervEInlWLeXAgz0EblDJmo\n5Z5Xmy0wusDHMBoxagUbGp5Mk75jjV4hiWiiTWvLhif77OE9HDShr7eOjNqD\ncJKwv4pG39zt4S+QoWUiQxazaE6dF9rvRS/bCuuSo3xpVu3Eg4YU0PH2jBkY\nEvIK7cYTKRNculMoOEKdSxXWCYJhTeNkRXk51ZH50fyl785oa44qz9j2bG93\ndnCr5XOMlwfqUJZ65bCXLRzRouGiB8pEYfnyDa4llGziOf7DEYzw+1VgU32/\nqXbB5BSUtF75Qh4EGUj6He88p5cgOct5dnpWIk2Xojg7DbiKy6nfFRgqknW5\nwr7f5dmJjXxAtSjMzgSMy7B/rH7PvnKRfIF/r2DVwGaoywTZuP3O+H7bZcBr\nC8D0tBtn0lHJoWD5ONlESJ5h+SSrflu+O6Lv0p3Xzx4993veCJ0x6fqTQGCt\ncqqI\r\n=RQT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f2426d26e.0","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/density":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/elevation":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.f2426d26e.0_1579823737446_0.07902179677814591","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/switch","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88967a0903b8c8448b2eb43cfe7ea54946643b6d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":36,"integrity":"sha512-KMMAX+KDiYON1Pw4vZeqX+eIg4R5DWpeOfG7n/EQjV4OtIf68tSPu27YCtzlEOYNtAiN9urWUmaebH4RcGQ9ZQ==","signatures":[{"sig":"MEYCIQD+O2i2InWYZRk9wZdhh5C0TzLRKXIjKPgZJ65u7w4TPwIhAKEY4SZiFrL1ktjI+hK6fj3Dv7bXqBxAINRUrBa6nemX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/FCRA9TVsSAnZWagAA4BcP/2hjR/atBWhONKlByarJ\nh3gbB9H4nlWlOoJYS/EoGHmjl/8s6I4bhY77ZaD710idR4TjE84nejj6BbRx\nRF66dnO6/+e+VyNRUtxP3YBW801XMQaCgeqNnt6hDHP1JhOE73rzibN2oUGU\nTj21Up0c0BhaAxeRa4xuRriQYepTm+gUmwoaqon800e/97NzGNfNhKBRAdTu\nHx13yNzNK/LhIlf3639iexnqBzRU9BSmAu+NNrnTdhP9+IcZqp3jxtIpnSha\n+EolCnOh42NF89/YYYd6sxNJKUxeHLyIQHjG0Mv0CpeP/XkzSdcJM7DPc8Ur\n3K/SZDh6YQWv9LgHyUcV+pOUkXOSQP0FjI+4ljpOH78nqO5hZUT6hxDQ6TnU\n+1aF7uOaMGgr0XQZjSZKC+WTuNePgOGKkrsOWNM6cH4N7ZWc55GYhJcAo6pJ\nLPQCZvTWhQArv86Di4tCBbsw/IZ2XdwElMbl9YdLRol6IWcIY1BwIcKeJ1x8\n0FTQVcl5eNnimLtfDs/f8EHX7YZc6hrALsYciv9AMGZ7MSkiz6N6PBcDISw3\nVguc1jW6vrFftHASPkdB3opKB+gQc7bVR07EFH2H7z/wXdrXRVUu+jonqmHP\nsGtH6tjtAb/R0ETXLVGRNJYbmmR/dlnw2C2rNwp+0c9PTwX/rXO8dwvsqD1s\ntbLZ\r\n=3SFQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7f5e0c23f.0","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/density":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/elevation":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.7f5e0c23f.0_1579884485413_0.8918312969801978","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/switch","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32be5b71be9ed83a27d3aba51cfa127d2cac7ea6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.3fc3ab520.0.tgz","fileCount":36,"integrity":"sha512-4BDxcrAN1tMrNABpotpAti598jqtrfNV+QVIp63oQ+PVl5XzAfuFf5v3a8R58GDn7JxUxMJqn4I6MtVzl4Dh3w==","signatures":[{"sig":"MEQCIE6M196J84qOXOLUc8vVEU0kyAHeL1j1hbVp+gyTKnRAAiAl+T6A6ArOe9YLvt9X2/J1+BAWpp6rbt9ybCcOlI+Cdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyehCRA9TVsSAnZWagAAlKoP/2DkWEIf6vRXNsz6c6bQ\nAcX1tx8JpyDvypfEfwh5IWkbg3I9XaNbgOkTReI8zIpJmTXNgXDB7NTy56id\nUeZkpQsovh+hgpi371Qj4gs4kqYjp0LfOB4CuCFrOz2+AtdJ6dcGiaBLEya3\nKSoAFSWtmsf6B+z2jICb/n6AppJuVBom6jhsfDOLoWDiPE5HBGY54Hk9c2tI\nd6wHUYnUqkX4+WQmn9sJviXXEuiuv0pAtCXWGgEcxLbqHfzNB3PNqhTOx+ys\nfx/QHWv2wX6STMMpj+5hU70fJ84tQX0Pk7Cz4NOdIrOcMXj/rAkzradOSdQw\nz65Olw+TTGBv/kDkbETq379EkV+AWGzEgV4erEsC1OTT0ro8+Iex2z6mxdi3\nhn20P4JM5yJrec/Zjjs6DjKhdnvPnSPa/TTX0SC4GBkZ/e+gZfa/qTxMBNIE\n9A/njrBch24c6xrNgE2W3fVNzUMhkOoBYYnqAkNBHJ7QwoD4MGvVWahvV4FN\nuzTKW2aKOzynz61nsisgTxTi9JNRWr69QgJ8UjRKBIOIOLwwzQhoNw9OgRj3\n1De7VHGdTOjYA1JQ4ET4SfbTOvbWcg1Npv12Sk2UzvpptpYBKI5y6ScS5E81\n9uALcqs0UI4fwOUrFbinIFKQ/IFOt2AGUtb8sj2tQAp1OgSP+YNp729e4XtT\nCSEh\r\n=itQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3fc3ab520.0","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/density":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/elevation":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.3fc3ab520.0_1579886497113_0.4276360172100997","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/switch","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21de413f1d7cc581bb3bc178ad14fcad2b5f390c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.80a4d326f.0.tgz","fileCount":36,"integrity":"sha512-b4VXqw/8Lyd7pcQTtAsXTW3CZpTNtCVbwIrO6t1/QvreR7XoH3yQvNrsDPN8PJFPUu/TDmPirqDrttMr2lr7rQ==","signatures":[{"sig":"MEQCIBnUvchphnfycqbQqqnzTtDKRNpvw8UfPOYKKw+uoz41AiB2D7wJVTe3uhmCVXbwyMidlrgAsTeo10HoLewPBFvHrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1edCRA9TVsSAnZWagAAxOsQAJDZuT7T7WmrNrVeVaHa\nzl+oDTDJmP4DWJOpFXppdtTwhALIcjff0JJRWaAVqXCLMxoiy7C+ncbUv15D\nvcVDcwELCaeWsltTGC69Ibnm3ob8APeeGBQfFqtQJDeC4cXtBUPCeKba1gM+\nNrnaAgE8+bOMwwX+a+94HcKIl16lexjUfZpLtS4iT64q1INCemRwcoJgU+Ur\n33epWiO2goWJg5o6Pa8eyA96aAGGvHKU2k6tpU8oW4TMbrxfnzKnujCLdx5r\ncmZ4d6j4Jw1O18wMKHvOUke39jaDSZEwEDlgYz18Uj/PXEG7RbKjxlF+lfMh\nFwOUkRXFSsfdT7jJDxxvyXWTZ9NkqUzb5tB2UJuuXXLjILwqi79wZjBWwfAA\nzZm9S9n5jAex5XlmXTCoOAIDQZ0Qt4uu0cqdW/G7LZyGEDaxO1xG8zSVbZeq\n+3rXChnWVibxahjuY38O/Bxt/QuqJ6KZu1J2cH17Ha5Jn8VUDLv6tzimp0Yp\nbPdR1yFa8D1Dz/PfNQAzH7BppyflP3V4Xn/fd65GhWaRsDnFfk4XStwjEhj7\nr/s22BYtvzMx4ImBLmNR5zwJ6XEiXUC3SkJ979dDQbnVto74aJiRq6faLoHQ\njQDXDzAv1uiw3MEE5bPWYoRV+Cz+HYEK+dRtfLnFZiByNPOPArTL4Ug7mwlO\nTCXH\r\n=kIf6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.80a4d326f.0","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/density":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/elevation":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.80a4d326f.0_1579898781358_0.864729161361562","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/switch","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74198a9b0abd3fce364177a7d3b4aad6dd719e24","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ef7de4def.0.tgz","fileCount":36,"integrity":"sha512-FiWum4Sq1A1KWuynJgy8yYxJasXLKsN5Q9gOQUBWLFyB+MSVEcbwa5l+sQZpYIf6f5FOVv1IRoBV/Anc0QGOPg==","signatures":[{"sig":"MEQCIE7tswDvOOEqNJmg+kCJgTBPWN9AOVYcMhsCDglo10t7AiBfoaIwTA8CHUxSt2qkHOENvoFIqCjW+kqo2QlneqFaYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2KGCRA9TVsSAnZWagAAAq8P/07KDrQ0h1vtuU70ErJi\n0fYY9wTt6ERaG1phscQCdkL5wB/G00ONzvH6lDk0JA5oHJHSkKYjpqHareSM\n1D1z13S86KQ7ai9Fc5b2Rey/YXpC1dtu0WyYkm/wnzRKw39+6FyV6t9ojnnt\n5/ZXIwW+spoLd4iP3eJCCn3K2h5l9E43F9JMXYvtEfHSP80qSSwqk86/tNW9\n2T/Zh4lxrUsrrUp1ekV6UnqfXbaUChE5rK8Dyjzu1H1aDfBMrCW84Id+XV6/\n8uGXGm4jnotj22MyfnBiLlM5uxNr6uXEOEvDDlxE5xjUHpd9KkWVpTDQA6Id\nKpKKOwt3wbiGe+gkAAfoIknpsOJdjU6695KFs/PHkxG+ddrohw/vI8Svp3na\n6L1QwGfgTlYXAaU56SFotd+4hGO8iAiMFdiqgWWdraIfySEVznjAfD1hGF/5\nBsThxKvWqBPzGvNbV1PW501GFK5jEDoHjInSUA6t/X9Te4UNBUreoLax3eKr\nPZELlHx0VrZx/bIQC9F8OOr04FE94rF8FFahUsVGNHPQpdWSOFUeppO3ClXN\nW05AO4EgTWcj8ufQKjrVQSiAE3BEne0jnZMuLfkanykQW+pNWycMLXoJkCE3\nL3QgVnWlJsRowu0cXgnsnAnUTFAALhZ8bwyfxJF4fxpgjhtUOd5QNTo5+XhS\nff+G\r\n=mvCh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ef7de4def.0","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/density":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/elevation":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ef7de4def.0_1579901573631_0.5669385150275783","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/switch","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b76e86ea9ba8fea29c4904f9b64e9c938b9c7e9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.93e2288b6.0.tgz","fileCount":36,"integrity":"sha512-nJFe95kTlMV5NZlSgkhe/zP12v1C4S2kBJLkRAK7RJ+4gPnf77aTcpWmsXNm5tVEJdCxtRSqj2sPKYcNk+qU7w==","signatures":[{"sig":"MEYCIQCUlCSKWCr8om/51fkXk4nbM941zlV/ejchkb4g20YwiAIhALR2H5tCMYUDe73Cmlg1te+CvKWw3EEP3YJsKwZFxYtD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGe/CRA9TVsSAnZWagAA0xwQAJU5HG6wSHh3O3XmwZ4z\nXAwoKRt0lXkhc/X2SqcAuIMi32PBub0D7Bxvz2AH6tCuKccuYg3FL6is7bSd\niORVngfmOccFW51Uqfnv0xeMutCfnGaYG/c8iCOItevT3T7tcCVOHw801yvm\nXLRTU/zbnzxu0eMM2CReeitKvoleEhs6oVaAeS+oip1zXOD2sCI4T3BmhvGy\npdg2JzVex8yZ8PL9nU0F03iQhIJPz1WvEfn16NJT/wijUvgvIs5YfXxMGTLq\n2ixE17bEUrnATwk1N8Z0VuosoJg3+0vE7BRlOwWFdsHYqh66vZ0dhcCK5Qeh\n+qc0ULj8IcVBcD/bbcIaQY/NXfFoVimLqDGoOjPicn5qqES3oPOJSAMtTZ92\nvCaykn4gfeEeeZDZo5dyJAf8ig8/zuS+LEHiV0dnwAzbFDYq+7kE3VubHbum\n2Qnt7GFAfknol68A571jUXEOaBaKj8kQVcueWkmuEtG2n4JSKwpw7Wd7hQVh\nRnjm7yppAfxO9CstfFqcqVRDXSW/izzifL4pNKw+mwmD0d5Q4xV9IUvPHmT4\ntSa6NZtv4BNv5JqmhSZLCdIZjufaVzlfS/qLeRR9BCPHoaLbtyoVm8RUoXhD\n5APe3SBakaFkwOLA68UD+n72NNuVbAOVBU1qT1vmdjZ+TLXXxt4jraEEqsWt\nmBjW\r\n=dhUU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.93e2288b6.0","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/density":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/elevation":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.93e2288b6.0_1580230591179_0.9067511809004218","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/switch","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91efe56612c0de240d28c840d05db4a821a7c607","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.34ef15f67.0.tgz","fileCount":36,"integrity":"sha512-cBSYcyMyZIhc9EC7C3dVkXHFZVjQq12xcBAK/bhOU/h4J1FJ+iwuK/IaHjvwRyC9B5EN3ATxbOgKxRcpE0vJRA==","signatures":[{"sig":"MEUCIQCV0pu+zXLSQcLhwPheKN7GabJKvuVWfIZcgSsf9P4g/wIgSgPTrYu6OZlt/ufKTJhnkAju/8keVzx1RrYG3mgV+V8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5ZCRA9TVsSAnZWagAAYpAQAIXQgprpjmkcgwTTdmw3\nq0ecJjrP/9Qe8Q55nfXVo8l4M8U+68dRmF69r4De9qZXvb1jd3L7Lc5G7+kx\nUFP0NG2kIOmAQwvgT4sXLWTQeZKyn9nGu/Pc5moWVBFSd/vvKy74b8Ff4mjT\nKj3SDtdgLKOebKPklRdR3AkaH3Zu9340HSm6K9zcIonwCi4IaYQ09qUZy341\n/zp5YONslNxv0fb8u+T3boGhGhgZhZ8fHTkgk7gIZmiVL1OmKe2JKdFZu2eD\nJkswm2VOcBoCuAkIRdUQgzKEm6yE8kbaLxg6DzUVk2/Jj7xQGnrAdQeCwqD5\nUZ+uYKIFBcpLFbP1cNlAw/iYm/2w1vQPbKMMSpikJAhqZBtBRpPQQTigjNVw\nPJAAj8bh9N/nu+nHcUspeGvrXRuQJXftjCqtP2X4jpdlv0z2xyPsM5AV0P+c\nqU6/1mEUDRX+BieAoUpowUg92CjBvf+NoQLWq7wvnFJrwmBzOazOkwkSyyZA\nHLkYwB0h49BlLNl1G8IJ4Uc2tcaK/K10fxhgbjiICAmqbdH5wm6XD3EoMOEJ\nso6oRICQgxO30C2KSIrBO4+oZD+bE07pYcnNjj6quvaPUrkLNb/ni4p08zRf\nlNbwGJEu8NL9QbXYk0FsGgc1EBo8V6EBP1//Iu5jssficyW9OWI4OZGNu4rI\nmXVQ\r\n=8uLi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.34ef15f67.0","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/density":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/elevation":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.34ef15f67.0_1580232280648_0.19159573646582762","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/switch","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bcc87ab14a5232f5d4a88372a69def762d120f7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d3d176ba5.0.tgz","fileCount":36,"integrity":"sha512-v0sj4JpD9w9klvWm8dZxVNHCRFow07HuTY+60F6dunql5Lp6Eyv8GQ5myLw87RrBJ/c7BLC2FLVB01BVINucOg==","signatures":[{"sig":"MEQCIHPZ4f13/MyeruP873VqaGaH/sDMbNaO/kuugctakpbLAiB7yfR80P5Y5NJLdLhxsotFBXozebz3VOBY5LsDhT2jbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+OCRA9TVsSAnZWagAA9MEP/R/MRy8P1lzmEyLmzrO2\nSnt6z2ma0GIpELt0D638IFik8i8QJN9jsZ+/6FZCV393RhKI9ctnVZXu6tfq\n1jyzg+fo4kmjjJ8pPvSU65qmXI/xNN2pXJFFs4Hj34skAa7QxXK79uub84ow\nGajY0pYLF/VeE/FwtcnY1KkflsOGIb95tjm9y+EJXsr2eP7KIX6fU1fAXoeT\nSUSOCgn9UIkMj0w9+kIxgKBcs+GRcojE8PN4y8TqcVa7TRvp0EWKq2fmW44E\nzVmElCTs/+9qh/IieyxZ7VphIjrYh//gnbxB8WwgoOx1Vz6uIi7bWmvuOy3b\ncEj65R5idH5+KJXS+142bCbQPfHfuVjFhnjv99ZPB2Vt4Wv6P94LaUxedIPb\nORQahtMVHk74TULVS809vD25GCBOwEskAQEUqdXpaiPzxDtAaJPESD8obcMc\nh1z5qr6Xyphp87Rn1L8kV+mWftqJ18P7clYzb8NqPrDdAo0AlEmn1ZM+kWnu\n5OyUaHG0mAwbJvdRSSwYepxNkwq7+BEZD0kk7Lwxxl43i6jHIR9NPJHPgqOg\npJUYLedVSALBaKSv9GDkd94Z6TbzPCUjlOTBpF+NIYBExlp2oGDLNY76lI1Y\nk/nZsbsr3JnFsCw+K2AolKcJ2Y2kIavzorXWRYmbHRitPtnel2wMj9douwRl\nzGvU\r\n=1sCX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d3d176ba5.0","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/density":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/elevation":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d3d176ba5.0_1580232590377_0.6804257189913738","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/switch","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dd0ea57886b6e0a629032315a1c0339f0b20ecf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.32c1df133.0.tgz","fileCount":36,"integrity":"sha512-yfRuuYTQC5jIROg/byec/SWUVleOnGJLgx3HEj6YhaC1JmeMq50EzloIi6tEztI3jxYMBSCmj9o321RvgQiPUA==","signatures":[{"sig":"MEQCICCgXP/x9EipX8Q7RIcKy0ravrR8/NCW+t4LA5UpYkUjAiA+4xQxUzmkA2CYEmiKRf/bCL0rnRm785dGaOOjYUDo4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI71CRA9TVsSAnZWagAA1RUP/0Jeb+PXAraUCdk0qbO5\nP7tYwvSnNZgZcWhBIZgDlPs0vIjAyELRzHtYJKE/LdPPEwr7otldqBaY+LbQ\n4p+mytE9fgF9AZ1yaGjaFPdB7vMwxZ2TxCjGqTR195dFOFrr45lEWWo9xQAd\na61YzarvRJNs+CE4YqSs/fXgZIRBn78dzFXGo2Iuo2EQWGPD2CYXKOl2qzkd\nXZFxDIIrjZdviFbqmxXYgkNG1anckd7Gkp3ZRX2ERe1OcF2Vb4a13pzTLCPF\nlzYIWSLnlFPqZk3KvpPA3jKSTdyertzEinoe4Wpe/TkVifNpQLVTQAISsfT9\nHsYIB0jOquTZjirDEc/++SjEZ9R65sM2WzOMw+qQGwuYCIbR23PUvib+Rn6g\nsPC6TShXzTcCvGZV3dmBCzHZpzBMTBAjvqYS7bb97/8Xj/2ujoUHOLOkFNx/\n2mRZNLdKhCmkaueqr7WICP+m7GtXkTX9IUOdMfbBr9eCZ7c6OgS/DqysbvRq\nraYGWMMEdb0v04PFKf+TTavkdsyOFPkCw05iYEG214yzAqOfdMp2DdLfuO6C\nlIalLbyhsD7jXJ0ayg5DLhtkPrTH9Z4DHHcfXtvsdCuOn+22GAZVJqw9NIJi\nwRHjlMNrou8wm2O8vcYmSiaCufDaoxTs4zHM9eajPGpwJYYNn2sig8ExzL6C\n4clc\r\n=NFws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.32c1df133.0","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/density":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/elevation":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.32c1df133.0_1580240629183_0.7235100520296487","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/switch","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efe9be6ce56bf1b4509db54b5b41c958095ad07f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.f3adce86f.0.tgz","fileCount":36,"integrity":"sha512-whaQjXfVir/K/GEYmmGXxn8WCoMHi1q4sqxR0b/IXfytQvPHveAp3GByA4MndAVaCrx05rY+yJfjWVBp3RoGgw==","signatures":[{"sig":"MEUCIQC91ds2UyPNkAEeziJmE7y2qsXQNHvNmkb2odliWA7pugIgJ1XjN2kQV/8AAy/xZHvOJW45k0VBOXutiGjlv9Sk0wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxkCRA9TVsSAnZWagAA8moP+wfHCu1qfon4AkkupAxh\nhHEjs+GDrDwFGcV+1tQj3Wco/3j6+3A/H4Kog9cmwnyFrXwwqE6ZWv0OHMMB\nMFoqFvM2CgjseyPi0DDOonvK/xNL4aAG7mWjj71hYrRpGfArkhkSfhFclfyK\nRzvt0ujgtlLEjMNo1mO7Cc+FBzMpmM0scjg5LvWMsVQsS0lYSV8fP/ORM5aE\nJBfNPquYfmCjQFujVvAjiCYD+sok0AcLYjU+yB6WkHyuUkrhVlFGF988UTFe\neHUrS2SfgK2qFJqN9GK40+cvDI4QW5dFp6byM5jxUhPTFpYKT5WrOXWwguQy\najC47xeNQ9h+NLyhiqavE7jbHxjfijdcNJa/16CMPVRsQc2pqmWi+aVCIbK3\nRYwqruVt0JWp+9mNK2j7uWBiUrf7DiaDOMd3ENOFi23sfcE8STBSiOWn2fUZ\nE6vQFgOedEsceCH+g/E3uxH+ib7lV3Lm9ocSlEqgVefQNDJs2Vgj3iKDceqI\nWXwkM2U+Smc8tlA7kA7BXr1d4CjjLh7CMlYTnO7lzS7tfunHBz8sU9/+mskA\nPHJVwaNutpHEZ8FufJ1PVGAu/HSLdVOcgUtOyBbK2GBT6FEORzMkZcg57c0E\nfJ1TLFfaVb+6hhYHr1Rmj8zoly8S+QwoCAMXwKxGOy5IU6o7TBBI1K9peuTr\nufLO\r\n=pbwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f3adce86f.0","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/density":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/elevation":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.f3adce86f.0_1580248164266_0.20103539641493673","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/switch","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c83585e6e35ab4926086a2a0204389b30035cba5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a4423f890.0.tgz","fileCount":36,"integrity":"sha512-RK5dLvfvINZ8HZUQY9mepuuANzjXRYFxyTdMtfQZRR5B6YVdDKVCzDCp1Hlpgra1NySdnNWCg7y0ckw32OU+uw==","signatures":[{"sig":"MEYCIQCIeMjo3GZg1RvXIbCD5AHCBeW418VzXN74LV14mbFmeAIhAKmUIOtV9NIoFwXNqHvu2zL9IyuLVIZ9i/GOt71nYHha","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSvCRA9TVsSAnZWagAAl44P/R7KJ3275zI2Qh6pYQ2f\nuxbwLWGg9BqWkyp0m4WnMgrdoYzZloW/ETiTsVuT9LBB/gT0YhFLJvRbgc1L\nPM7VaqJFHqDpm7hcJujvFGWpplrv09Id9teoQALleQSkqvzLKWqv0IW7Ehq9\nT/PulEz8/EdSOEGIad9Y9UJRsIUmlmnPgA+rxFZjB3g28q+R/k7Axx0cNhoI\ns9KP05ksamLomhhbTvfUOR066DFkEwt3IAKYUtGvHW3ecqDmTLdRW2A3bG0Y\nNcJqGEm6po5NGS0vylyFVVwtESmAXShpHvbx2PqYfLNwKgpxu4WsCXog8EBi\nfHlD/PdgvnBl3K4FejHCTRiQc5x13sqCKqkLSVQ//QQsyvo1ud9Y7/xXpw0/\nktiG1pVJ2d5XFUSk7uG8AkE7XMMr+NuQWe6trBK/5yHXWwWWTmt6nEmXjwn3\naR/K1ESFCku59n6ruo+r1b1UOVx4PNssoLlHfh9Yy+5qTnjk85a5+4KtB6U4\n8mhLGFN5sBlHDW+QHeOgkGaHgmUoN5tZc0sRoSFh3Q+G9bkLVSzPsn4k+dOY\nbBIW9boAm7TK9j5ymizQl3J/Blc6q8OyeseoWLN3s4clP7ff5m6RzRAucI/I\ngVahavu8/kzbdmK1Upexz7UYJMc9Cei1MK6adgK9iF3B7l1uCT3I2xCVezEq\nzGRo\r\n=6QX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4423f890.0","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/density":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/elevation":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a4423f890.0_1580332207135_0.6257546572051969","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/switch","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a01a91e779efc836cd50a53bc347c965bf784bf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.9351f167d.0.tgz","fileCount":36,"integrity":"sha512-zi2ItvpAVkNtz0K7g1+QVsou5ohTldMzmRZeiUOmJTGrhqNxpCDk+/rijToHaTlUilgAJSpmuEBEuSD9NJ608A==","signatures":[{"sig":"MEYCIQC3HnkgpdZdtPSeJrnObx2Hy2uPOypMAP41YSlxVj8yCAIhAODXkXmVp51Th5vUF/rTyp4ZpMxGy0XV7RI6oR873z3y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf99CRA9TVsSAnZWagAAsj8P/1vh61oetyJ1NeqE2YDX\nYm/s0cx6Ry7LJD8Je/84NOHNELmt+UOG6v6t+vw30FNFMcjIcjeyEzTLlj+q\nuavVmVArvkjzwA6hJ5j7MYw3egY2ngLxaCkOa/gMWhBY8jJNPd51QTu1i3xg\nzncun2r/EGaXGl4x9oHdRtqRV8xF6lMPrR47MHj0upMVlVomfOgt6IlyQ5xf\nr+iNFG7+iwdJ5QhoooyI6Eq3A1eDpeFtsTSBiLj6KsaAr1VIPDEVBEaqAi4H\nM+r1ES96sf9q1OXcUPyAb3xk8m5M9ySaP62cxT3TiZmiiPJpiXjJjm8465dw\nd5/3Wp7MdxVwvu+x0Qc9kQABnsOxzbhMq/oE4fCSbpHCBOllBeUNao9GdMiJ\nLhXzr+ZQnneR9WIFpSzVvd6vMS5ToS9+tQElCIFNs5+kQb3jqlXMmlzPfvHq\nPkfQOe1T/9GfTVRhzozlY9NmKlWHcPLf79ViFNTUSa4LJxnx7ovKCOzWu2rb\nSiDi3jJLqYpSTYSmd0g7rn/gTjDt2xTFq+OIuZLQKMZXjw90jcaHyps9kaiP\nXfbCxNEWzERHz34L6KR2eyxVjWlnzu6dBN7WN54oPXzAdqxovlGknCxXahIi\n+nBNOB61nnstoiaB9aH48PMetbzgWZr0sC9dp7vxTBiEIrFuuyD7p+DenZuw\nysvb\r\n=mGyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9351f167d.0","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/density":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/elevation":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.9351f167d.0_1580334972667_0.539080696523319","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/switch","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26a1f7924d00a9d07acef77ed1f58d9d8dd04570","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.29b89dbc1.0.tgz","fileCount":36,"integrity":"sha512-haJXdWnyCcYmWoxZWks6O8QZxVe+ESjahtHu9sw1wN2f8p+PEuv0RKc2mVuPmI5dD+RC0g+y25NybHBrLLSjuQ==","signatures":[{"sig":"MEYCIQC5PLzatwks8IBISlO2uJ/RxsySeV4bFyP17nj6GJogGAIhAJPdPQBvh5Ze7qDlH0qUQs92dOi/vlKY8N0MHMTPa6lr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRcCRA9TVsSAnZWagAACkUP/iH/h3asdgj+wm55j/Co\ncbHPwo2zZ2RhGqOrVA4IFKXE2e2u7KQ0A6knL0UEp/U/sGKOC++jv5wpIYXa\nxUmWEUqb4tqxuJGYcR6bGyHlVVp4Y5YCu2EETpI0ZAM7sjytApIQ6QZc+ZGe\nl06xlcPOlAxHKgKyOoi+Ae0dx+PENLk/YgtHD21ftfZ8ChQ09Yg+CsPiFhfx\noyhTS8Pm+2dTVoQjszHZEPK/SlmbhJgdmYQvl2ylmJKv14EdkaeQsFMvIhh2\nAbc8qgfzWaJefhCA4rELfRyW1uxQTDoC+ctUqDo7JYfvjz/zUZ5r3XF2BWQx\nJiqfzcYorudOKPWAhOsfdhq+990q1R3QnjfHTyehDw0p86WDtVoiuPgYPH87\nkfW43xGps6YgohyjYCWAyq/YADwJmANtXYuQq+KvJHZomJis1AK/HjBNkGMZ\nhIKKJav1MEYtlBZwGbgPA7JpJ2hYLm99LPfAICQq9ymQzMBdwUq93lLOMorD\n8CLGw3T6sD0zLn+fJwNiLZJxFmG30xJh4S0+CeD6z1pZ2qy2SYXDf4spikcU\n2b+Bihjcb9lmtQT9dk35sLCJBJmQXtFZlvbcbEDeH9x7aaIMYxyEYrmFn3CI\nLBVZJrbogryjWJpsGUk4vV1XB8dX5+ScsjJ2EPpG9P0Mi5plnRBd5UW/Pe95\npLhI\r\n=2hW+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29b89dbc1.0","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/density":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/elevation":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.29b89dbc1.0_1580336220133_0.35417263820180134","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/switch","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51228f648e481590cef98add2670279bc1b48e45","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.45985457b.0.tgz","fileCount":36,"integrity":"sha512-Xghoq/vnNGkgkYKCLS+A6MCpCPzX6mZ7Su0jmtxNyNgwE+h8/BPvis/HBn4tEMOOVjP7T2cHW/uXbZu8f8nDlQ==","signatures":[{"sig":"MEUCIBRfQVxNokgHf8qEm9gQ1oiQwxDAej+v/cJKXJbFEQ6bAiEAvbXsiKV21FBZx2rLLRkeMuToeaQ6oUpvUOwGjIdi/dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhZNCRA9TVsSAnZWagAAuJMQAKC6svX9Obg+5WQXv48g\nlh7U07HzWCZT4owu7rw3/fK5PPfs+7IUam23uCiNl1JnXxC/+zPHCJTtlQN8\nzQNqclV3NBoF3+106tSsCNtwoHujLJ59X3OzwMGBT4O0iSrGPamb1gH/zGpd\nhB/ammPNjl+fLy785sV/GfHLV+rbGUPSRJoUDwKng6+Cgpfk66eYmu6UdwB6\nbaKH3skdv8bYNeoKe61Y+qOk+clBPXjZ7Do8RXQXQQkvKE4xaX5WoM76lxFx\nmtVEMToTEa3Qb94mqE0sVgxAlDJssbDj/mO8zYUmY8GmwqovuAve8BsMSYqX\nUj7QL3XPFQP6WsjfxSdRG4njukY0j2T8T846rGBnv1+FOi/hzyEXZIdeZizh\n8qp1GL4lGAlR+7eM+/7zrpxOZ3QyO+XUcYu44c+NOEh/tTEUVyE1FdfElS1Z\nfHM4j8RsRpFATtXSDpmUNRIrEmF83Y//9U2wuwbLHJWY2n8o6X0iS018UtZU\n2JHysabq6xHhopXBUDNRzlAC/CP+Apz++PQbabySG1/L8Uy+U0+s2gisextn\ntcPER8W9tv0zPkJQYYliuYWodjDfKDpsUVYhwTltGBvWnvvrmDM7WA31yHuR\nCnStGgacau6ixDlEiOqXNyVlqlCANGXq/xCDRvMQ9KX0aZulODz6ec3yYBf6\n9Pmh\r\n=l4vl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.45985457b.0","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/density":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/elevation":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.45985457b.0_1580340813313_0.7447774844279087","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/switch","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14a5f1e7c31c6e25b56a1f03a15f4124c51f3bb6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":36,"integrity":"sha512-PcmtZdty0YysnFfYxFof/Pq0VW9DjmbHLPHnTzn2SAQH5CKyIiB6LAzKebm3CCwcFo53eeOgSK/sCbsLtrCzaQ==","signatures":[{"sig":"MEYCIQDcEAEq9Zc8pWLlCP7Bls51pVwbac1XUanihOfUMZFHCQIhAKupNprPCR/5e9GxTE8g+Yo/mNWId2KDgitOna37CTpo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":388583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRsCRA9TVsSAnZWagAAy3AQAJREf/3yTy8RtgWX98wY\n/2vWFZdXccmzxTXmuQDjJLVnD1KWLC31/7Wa2E8TXwBn6klumhqgVCe846IP\nlmuYMtVz2eI82KNzwXyoSb9jCONz5N7UFOIjaT4+dy9dsUKRqoJa6FbAgMMR\nSsA31yWXewP0KKJJQqBqN24ouusPxT6YKy2EHA+ZrhcSm0YnkCWiOAsCIwou\nJm110dzOKdUoJaczhOA5P2bTRnnOwMzIlj3x0dZ8K+gPM5mIHLXQ/teR7LuO\nPe0CqV1l2snzRyDD4m6RrIZSRopn2dLWcY2dwoHQ+kcrtGQuEkunAQVMRg9R\n5yVf8z919fUaPW1rua3NUgj98/w9SB/8wrz4zyhjfq/u8GBlzEUwYY61gdo1\n0IgjhLdfnNYLZUTjNPdGl0jp4EG1oGVrU1QCAd0hvhe0/5eQkJ8EPBR3i1jf\n9bcOxQOGwTM0Cizz6OAvGnxuD45NeZUA3zwDg0SRmroBZ3A2JzSXN0Ah8bUD\nGdxl0EaD1OQHpRjiSjt3s/5JEA7D4SAd19s6BNKQTQdtS6vxOvkdeTZK44Nl\ncAHyEDHBJChDen0XKC1blf+v94Omh3CirTyGCXBjlqkzOFqT4sz82kpO8SR4\nutrlkQ2HyqL9gP8l0LFYhRL0StI4kms6gWuWkPG1p2wCQY+yKO0Rnf6iYEyH\nv+Tm\r\n=YVAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1a0deb3e.0","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/density":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/elevation":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.a1a0deb3e.0_1580405867777_0.7783287567039598","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/switch","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d93aa6ea64fa7fa9fa1581ec591512aada1be407","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.181486643.0.tgz","fileCount":37,"integrity":"sha512-fmErSp2fcg0iuurCi/oVDdjdRIXDWKrrz3Ud84eXBj+J5i8mOk/Y1wtdEE4n5BNzkKPWGb6vrcvUW89ZdWAIcA==","signatures":[{"sig":"MEYCIQDkonRIPENrsdSlz9jhGHzyNidTMXqpxHnNe2OTHRxW5wIhAI4Hha0DCaGlLHM4THvo+/UQ8+bBAFvJzUmVJs8bIF4L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MHCRA9TVsSAnZWagAAyYwP/1VCEL+pJLqDBKTncRIe\nyuF65iCPhh/mPfkhRXPRg8v9kt7Ys8zlsjkIZNy0dCGh3Uo+xdKDmPsON/ED\nh3Bh7sfr/NGX+5VKxFdN9Mv0Fy0ANLhnDyTscuyAcMmawD3hAGxDtNu+1DuU\nEMAfV6fPKkzYO6bDtGE05789AimadzITdPM9TZ26YEMftGri8QCfOIG3FRKu\n6VJZCPQicBIYDZgwwFV8cCPcZFPXGA/WD6W9xwDpTy6mjYkS77IWR7YZbyzJ\n0wSCcYoqaGqlvN2nkY5JLIkTXmK/jTna39g1ynH94gMo3ottbRK039KeTULr\nkEgqxg2BhSvHDK5q+KXVJDHOQ/QYUDEySPbSoxuUKJIOJ0ud//R2qN5ZmFOA\n4qHM3Ymnz9+TvJCUHVmtywcTuvl1jaCLuX3LX0x0I6uRan7oGXWGJ05EKK5u\nbyPdvolyHZn5ULg7cocYiX4TWBF9L/zHeWizZVlfYFfj2bqnwYy8TjZYoY2V\nrTnGobbh0W+lgVhi8DhpySBI++RtWlYr5fs+IBBvUtsn5DgEnZi1fYzQGzdj\ncRCEzMbOeU+3unlfRVZXVYzKUly80zNpZTnouRF6+/kJ2wa/pg+GTzBgiPAs\nZ+mKXxlLdjzntnGL1thxxF5jkXSndmYdmLzBz6ZPfVQ5wVZCWxyrqsU2O7yT\neARz\r\n=FcU1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.181486643.0","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/density":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/elevation":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.181486643.0_1580417799257_0.11615879009007335","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/switch","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6d26493b0cb69b4d32ce7080e2ebadf70c72ce6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.3a85313ac.0.tgz","fileCount":37,"integrity":"sha512-E65FTt8DBhVAXrnVu5fl/WXTywh9E9HQ0IM/tny4e69fgZYQQ8ARF213UV+hNiPPTFm3Mtc6UB0NbvHy2s0d5A==","signatures":[{"sig":"MEQCIFHlD4XPBaWm5LQIyMYsJzssu3xoNxzkiZ4HLp5XigVfAiBZ2n08eOOZHZFxF1UPAtiTqaKgfdYvMNsNVaevvrIAAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSLCRA9TVsSAnZWagAAHJoP/0sY5IKo9xQYUf+XHzE3\ngut8uOJyeAW0mYiSZZ7EAZrasN8V7U2fFMelUagbIVt1btjrUJNYvziz8+uC\nqZOBueh2cVp+xhJZC3+1c9Yq61CVToEaEd+r4jnp2/ZfWKzbnV5sjIbblb72\n54FMqdXoU1vGcm11dTt6KosQHM3HvorePEwuOdsQdkNTLwbRpjCXnk3hSDWB\nHiZInmyyuU5UumP4ezBZnmIsvcs/kq2kGr2a+K2rTs5CQtpryvrG7oi8xBQV\nmumtbRj5sn08x2lWXZGSG2h1aEf7GTGAFSJJfFJBfaE0iVjQ1l0LtYeTx2o0\nqYQOCjPvub6LBWuXsDPeHnwxeb2pesglI0onhNL9ezXtzIGCM+FqnWKPpazr\nyJKUv6aBwv+/yO//SmeSkvySRgQ5G640WnfdWp6GvNjV2seWuk2rpAR3MUjm\nPmBakVgpsiUeXdIxeet4UEA5jxQw6FJJOrpx5P/eYbCe76VQnNhFmtAYjPs9\nk6AOG8IhmqmEdAz4NMZGwhaztsw/ok+0KXbHTQylKUw0vjGfoIlPerusmEuz\noWv59v3NwbJHxru+3crq1ATp2Oj4ByMLTP1N70SIVBVLu3GdOjqEPusSPrk9\n9Y+ZWOve7bR3wmAwaFmU32jzykkUnUiRX70cC1mHiuOnLXt4RAQnI88tYKXa\nht56\r\n=sbwh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3a85313ac.0","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/density":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/elevation":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.3a85313ac.0_1580487819360_0.10951068746082449","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/switch","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42852afacfe4d016c7e3359df8204eccc628ad89","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b6c7f624b.0.tgz","fileCount":37,"integrity":"sha512-x4fm/nQjhlR6ztj4x15QIUJerdD99XNFiyyTyXIwwjKCvJmA65p1Hr9LcTxX3Myqjbuh5h2OfpVrHglChV8DSw==","signatures":[{"sig":"MEUCIClDsIzusq2sbNUJTZAxyxj4UBdsWTrRlIVQ/IFGsxP/AiEA3cKp+bRAStwleNXs4Ly3j3KYYBis8wWPsUF0S7bjLAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3gCRA9TVsSAnZWagAAbvAP/0SVLZNBILfrRUFoATuP\ntu5cDupFDJ1rZKarmbpeD7UEkhlTnILXT95H3IL6e7NrznzsTMDlK597h2Fg\nQtnY54Eyhq/VVc115PD68AGKVjji5n7U8SX79ySjWiz96ZBfRMtGanR+L9PE\nqMhSy1ljxb1DB55LZs/5T7UOmBoCBko7zNNkYfsHo/5U/AUDCqWZL/SD4XUz\nTqZYPcOMevYzczvsso3JCGl3AN8AfG63XqIcD79CrZ5BKpBER7mjWZV1Mf8U\nyqU8e9rrWBQ/r5315Pv2X6dnGzHKQxRzB2R6jHWMPURL5MMi0TD0iFpqzsFU\nW1lBznM9hv1xnZ1IJzmdrS5sjhVcDfYRtVPE43JFHc/QCyYjzOQJdjCO7b+G\nEUGkKkCqNJrgd/EoPRJYhaB3pluRnRxGrsCqhKK0UYdNvjtvArkr9JA84Hv9\n47htGMtosOcCBY5ONmXMEFm4RL9NIk2raI9IcR1ONdy5V7oBJu5qBHfzJjHZ\n2eMOFP3Ewvlt0iNPuunbb0erI31iSSkG1alYnqKjTj2Lc7LJpGxz50r+mUgY\neDZNXLNC8zj8x1gQTs8ch3eTIyHt99p4Og9JI6vp/vR1JKA7wTZhSYlwePQ8\n1FeNBrsemYEeStJ7/3RDDfJR7ZYH48d1QZ/+7GLHQ2V9uaS4ID5Nj0XYBLwe\n/2s9\r\n=WEWL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b6c7f624b.0","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/density":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/elevation":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b6c7f624b.0_1580490207726_0.4564286195998646","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/switch","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2996932dedca32351421b0b63cc3feaf9a996f92","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b3f70ebde.0.tgz","fileCount":37,"integrity":"sha512-r3nup4txOhOY6x+rxHLjVIBHFRPKG9fgraAqaFmvw5wmxHD4GAUbAuQ3pTYPpBnI/1h/Uik/m9nJ/bj4aVVjMA==","signatures":[{"sig":"MEUCIGsj4jvkm4yeMqDVDTwCuRCaEGcKXhvbThkd6AmwTLDNAiEAjKmr6C+CNuz9x1Jg+tQgNiXJ0jRrknPe4Gye0TF2dkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNInHCRA9TVsSAnZWagAAlsEP/2E5srAU7BQOxm5Xu6m7\nuAcvrNNsnxfVWS9Q+o69itYIDgyFi7UrM6AJpygs3XPmAYTa/jwzdtpOX//A\nsXLyIiQj7es0PygszSz+yXizfa7BesYGep05jFvdVpVw0EKx0Q1nRSYtDYwu\nr1+em3sbkkZUIE1wptUFbOpHyKrxe03O6TCUyUrfzwC9fVYDgzDDj92AIR25\nfvZlxZo6to6WpaaD0d8AEsinTBJ0B7Cq9hKyabvILMBrhIZUXkzidGEJ+Asc\noFibnC+sSTtOorms6522f42MwLAFrcDu62YRD3PKDnHGb4MFjFx4grL2Ztvh\nTMB3Dh0y0CLJ+8HHin1Q+N2XQbAXadA2oPJptNIhxrY+Bd4nwSaVcHyNQ3lR\nnNxIGPwL+1pktkFnnWQkDuqajYNpVEJO9mdGzFHZbfL3DkDbDyDFl6g3FjSI\nQLNmyoVD9Bfn9ehOJgE2VinNSbI2xG+0YT06nliMkYhk3KQRL0tB6ZS5wRno\nD/S8G96J2s+Ta+HMdw+I+DfCBT2LqVVYy0obNXs8u1nBFgszflzccsMpcGSW\nk2MANyjZfF15q2jBLSkGC8S+x4/80AzrAiK5nXfdu3qR5OjA6gDH3WeGdoPA\nNEqIZz5vG8LWtsWPvRfc6GkP5ElJPSOy4aRXqKDBb6BvooDhohhZMNFCebzw\nAmsU\r\n=l2H2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b3f70ebde.0","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/density":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/elevation":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b3f70ebde.0_1580501447416_0.7530361943532946","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/switch","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"583364d355be57f11009ac6f08cdb80fbc4ef390","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.3e782d8f8.0.tgz","fileCount":37,"integrity":"sha512-datGA6duuMk3MF7Eua70mUm1J3ACVOMWx4cvaYuDX6DkVcVDxIrgrCUKaSeNR8Mpojp3PMNsPhXEwiqyuLzm/w==","signatures":[{"sig":"MEYCIQDDuSSnGisVG7H7cve0YoPQE9H5wI2nVrOTGsVcbzaOGQIhAIMXkLBldkylMc+1B2R4LQHuexvWECGuD82eXeHJYFyW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIhCRA9TVsSAnZWagAAvTIP/i+uiKKyOSjSs5ZICWoU\nOPqiCVNmygS5l4gu2RiF7PVFlLS8ugY7b5lRIvOXCrz7jVe/ELSTSGTdpM92\n+0GPOogWVytkYAxqmj8pW9vRphLduZEbXBBMrjmBbhqLt8d6dGdTO/BI68Na\nrdaxxmmyVXdU7T2LpruEMHZQGRfcSZ7EsobU6hFpngR+twWELQlfK+/ma77R\n9bW5gGGpf50zmU0mWyW+tgxGzpVwtUmhulM6dDGpoRMQbmRyNwkDwxbI0Y2U\nCh1us7Ug85fb3fO3cmcHfp3dD4dtWPVd6VCNprSK/WSY9c05FDe5dXZzkOQ0\n3rvEeo27Z3qho2Wf0r9koLLsti6PxpgLn4ntwp1X7fdLstTOL9pD/kLXvwT9\nF6E9UNrMXKC2rVjv6EaYabHglbrVIXs9mQ9rAuYssS1s5UBgZB7ZbAeAM4Ga\n7Oypqy6Ue9kMX2QmPbjYcfQ0oTId3YNz0kPiV/aRQyhLqEwcSTcPYeRZcKX2\ns1OCoD2jM11WXSWu+oEY+EruDDuU3Gq/OotlG9zesFtFvyxh4fCxyNlQNMmK\nPS/iupqoc4wBBxnXKB95csOAdAYs0mv8y7wwKuWCaR/042RONmpb0MPd9AhX\n4LKbCdcDfgYDCrBr+fP5/WQwxfWWxWG5qdfKlf0EVqlCCIWiaW+g9HyGRHrx\npYMx\r\n=v8+N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e782d8f8.0","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/density":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/elevation":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.3e782d8f8.0_1580605985093_0.6980653940702994","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/switch","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6dc884a7c1ca4df7f10e058ada21f0df042a297","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.535398572.0.tgz","fileCount":37,"integrity":"sha512-hc59WZoFD2UBFjOkpOBv6sFekGZuJR1B3gmXX2q44KdvnmSxPrTN1R2APuMt97t6cwctDbdw5KyNjNI+9+cQnQ==","signatures":[{"sig":"MEQCIF915aQYH0+w69bektaSyXtD+qGKySdgQ1/rsUBmcLoSAiB+itQwzsenIU1QLDSg95fKJu5U8RfnIQvSp5tIIFMouQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKECRA9TVsSAnZWagAATO8QAIZ0JgNzLzMlXoqBMlhH\nLF00+82knHISQf/P3kDoe7M4zL9ajnklvpOljovP3RpJzTD6RDAJaSTb0tyl\n9JLFLR++XDteksCbWVhkscKYdFc6V7F0R3KcHbBvVNb4FYsbaMSLWOFgN4T+\n/tsjCWkKvoitdXKS5lhPy3XqbByQzBAP02e0/E8qr2ZUXmimRRzQGnUYKTr9\nBWI+rVoJp3OOX/MbiOTsSbbLVxctEAQDVE5tkF6uG0vg6FWcd//3SJPz6mbQ\n/w/pVAMGCgY3MkQHlWKYglhbPHyclaZygP1BWS96Tb63ibkXsEfxAHCLZKFz\nHRwXo2NtPgMDmPtii1S7C6dwH//uXEgEVx8Tj6A2wh9SGziGwm59la7XPg9D\nGCsT3p1qoSqnZ7MTLNg6VrfftL2mxbFXLcuHoBTO1Kqb2ayF/vwC5W+rh7UN\n5xS+5bcjKvC+c3/fPNyzNxB+vqun1bqJfaDwMXwsdLu8NcW0SGbrZ3+2IVkU\nKSoUAejB1yEyRfDwESdY8z/8atTVKl74BHAfUaCXv51ByhOpoCL60ZJRL9Xm\nIU3tXf3HZb72rW+quZrUrNLe6foMilE7Sws+ka0/Aw7+lC5TggNbe/nXP2Sv\nMe9X29v3Zb7TlwNppIaGRJH30k0h9C2GUcuaZRPHn9RdOU7qg0hE2PdDxUJZ\nGrhj\r\n=tkIu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.535398572.0","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/density":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/elevation":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.535398572.0_1580753540040_0.7724199386389985","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/switch","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a1c7b3767fdfa36afec1a2b7196aa041a0c6be1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.5ff33802c.0.tgz","fileCount":37,"integrity":"sha512-zImzqjjntrGG4UvR9UhuliKRgmEZbWeDOTYhUu+zN5zTcBgkavcSDBm3ph9b/Y0kpsiUZmloEtCxsXhmSTdwXQ==","signatures":[{"sig":"MEQCIFlHDBfiWL6RVIcrmmekXm+Sz91VNTxhNrqF6AAg8eflAiBXhxdeyuKgK9Ll+DCWGXCZWRFxCCmddyyXoB0ZeaFtTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIhCRA9TVsSAnZWagAAI30QAJKoED/Hrarb7X8kcpDQ\nBtnHwfMs30EM0s91J5XrgSpHz9/OOyt8V4eftxjzIXuDankCHX+6qojzTu4s\no3W5C0iXNyVDimhN9MeHCczUODkwtUbT1oANPsFUwLVHCwGD6sKWgIg9X5E+\n5f3uW6cZuJ26RhqEk2UmQ48VA7iZCI2IQL6NtBLRSHFwfJYmcningGAqF2x0\nWVkdj+xS2w3HAZWPM+y43mhDI/ePeutBMVUR5EkfiXTeJVsP6bMcdvdZ3lpJ\n1Fx+ZH5f4QZwoAi6fjHU2ikCv4hN2nYwfpRQQjzAXKnVbucZMHL0ycEz5dPI\npH+CMc7IhLiS7vXLuZJVTrEsjyfW2kNCznxQ3aQdkoIlExkWZ0eDaVK9M7NP\nub4Rn5lw1Ixnxc8PZNjdwI2Tiz9b8OjKrG6KV4HvkcIM9GcI3GucDTP9q/l5\nJC4YvaAX1PNvAntYsZK5BWeMpWb8zsvBV1NzvwzI3Uu+1P1r/PaOaZ3n94qy\n7R42gGBCyIUPg5pNh2Tpe2fveQoHfHid+ZeFcUoP8hd74/Gace9fB+i4blHK\nCHCkqERFomD4EcG5+SNU18n+LrLi42NIBT+zoTipzIwWDz2TVmIDHK9WvoxW\n+gZuLH4EGgaL2bOS4skPTJrLWdXMmAkqb/JnX4LeZZd03W0v+xXLNjEmLTZU\nIZ8F\r\n=tty3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ff33802c.0","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/density":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/elevation":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.5ff33802c.0_1580839457305_0.39694709797246897","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/switch","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc893aa236ef70473144603830afa9cef97bc337","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.1eb29491c.0.tgz","fileCount":37,"integrity":"sha512-N7Y5pV2mQGwYwrGAeGMxHpa3ufjtZ4z3IgQHP11GT72OTswgXD36IPUP6tbMrkvOOk5Jviu4HSY7bvSStuNR8w==","signatures":[{"sig":"MEYCIQD0kLrTCeBZ62cUWijlrtHYYMu9kGzozl8f/Tk/td7WwAIhAPlb5IC8tLbo/MVtgqsV0vqs5RC2vixfh7SLNYJla+QF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOduVCRA9TVsSAnZWagAA/noP/2H0WrkAj7MDMqTeaDu9\n/DaKwuz44OgNgmKFz7FNN+vgLHcTIufz7/3wICmhYZy252PDzRs0jsMaKOqz\nBxPJxZ+4kJIkHGlWfzfbRHh8ptibzZlwfNnGNKJClX7OUTv8F//QvuYJfJlx\nfZb1LuNL97gkmqfo6qbBNblxn8zLePZ24vZNNqObW1GjhlsjkjhfzzZMbFWX\n3hs3ZN0ItYWr98qBWWKHMxUlRRaPGUHbtpqfUBU4JIVmfcptL7QSzKLm79ZZ\nDh4tMbAj9bfwn7o5hhSLIZIqLcx69O/vXVamVVcC5l2N4uARJZb0Za5nxyUW\n9mxRtZ572J2/ZwaZIEN+LqZ3fDDhonkcFKwNwmj4Hg2DNFOD9aZE0CO3WLWV\nmPIMDHHr7nM6hpY4ikP607lV+JHo85RxMt/58rFzTNBTjw0cMHOpxFp2vBhy\nJNj2SKRGlS22ssRqjHRmdPUe6HvzanQ21gZ/xAhMU7dtokRLO4vyMVNYftFz\nkrR6ykgbVJkBLChJ9LJlDnFIj+g4OTnqV/A1xnb8WW3LkqYJP4mzkFnp8rWp\nYTvaPgPCZqCHJmZmG3kByagFYJsZvSG4UtNl54/CzAOtjNgS3+xL0uem+nYr\nDerExij+1rcyujMPnzs1i3s2/FmKgSvphOqoy5KxaIJ+TSJ2GcwHgVGxqTP9\n+9L9\r\n=7g9K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb29491c.0","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/density":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/elevation":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.1eb29491c.0_1580850069279_0.36546982889547364","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/switch","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87b0d6d992654d0609baf388a9857bef0c6e1f3f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.4c7154b26.0.tgz","fileCount":37,"integrity":"sha512-AtzSEpquJda/tuJs3SvUkpJzQmsi2F513IWPy7+SRZ2S1GjU71fqVVXUpMLfCh4beSXGLsdReSdVw3OcTR/OFQ==","signatures":[{"sig":"MEQCIFbzoJC3JOrO7E64gfTodUFj1rjczJ7Eds7FeNpEOb7mAiA5fs2Lug6LGo5luc9Bq9BySFCeXLCbSL4pAhlDwpPaEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOueDCRA9TVsSAnZWagAAeOgP/it9eLUGKVoeU9stk2HI\niIznPl96YnW4HzCbD+zy7FBeGdWpMPuDNiGXisC9en2jR7NYOii+3EzDkV4V\n59Rc1erJqF5zLTVVtL8KvInCqCqkSAhAlDHwU1+lWs6PhYaARftCe7UZcHEC\nPokI4m0UANehd5b6Ntd2QkPjyVfgL+DhUh/oJg4w1RwtPoF/2Vtww4u24zlF\nBSumwYfHsewlkkkmnMtrpfDKj/7LOi3tKJopPgmLLk43KdR75ww8H6H8PDh6\ngRO2MrYMfF5SdQeELT/EJQYyecL48TzJOlBDrU1oL/ZPm5eOnqheDI1w1naw\nsIv9v27buOgDN57PKP0Y+jEGHSkiH1LCv57/FP9WW++ghY82nefut0Ye38ey\nOVvRzmru7WVcyJz2DnxtVvh/VZICNUdU2EWxsJsvnhxnnghkmrre/VhBynq5\nNdLoFqROqdjR68+TwNzwiMRkidHBjgnSoCIs/dhy/KLeCiCRYlYSCUV/27Ce\nuVAOj/g6UETLDnuNKoXGTnlRlgPoHn/YIGplUnZ0H93h2Ch51QjGj6lOgqRf\neNxYK9awuEkrS2iuO6lxGDDBJJOpuWcJWIS4pNJTOFrP53EVuiFb4PocjPrB\nTK1zbul8OvUcgliqT15jrK2Uht14fzWcLFLSFd7KzPkH5mD7EU0kkomEbHRJ\nHbNU\r\n=ovSi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4c7154b26.0","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/density":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/elevation":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.4c7154b26.0_1580918656868_0.5445710967565707","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/switch","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc6484f9879c30dffe2336df5972a2bd3cec3c89","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":37,"integrity":"sha512-vpdORmUPGGihSiovvDSPHmQe5paN5T0gBn/U+rtL8S7er2P7M7mQ8d2Fo/F4xZ1kducMIHAvOZ11GRhDbg4lrg==","signatures":[{"sig":"MEYCIQCh4qGwASgrvB4CY6h0QoocCIsPBxVUXv6wKFfCbeiKsgIhAKtrlIof21MZsenK+oCml3SSDYXXT/wa8jIwTvbO5lZn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DZCRA9TVsSAnZWagAAjEEP/R0JYyXzRERoWKjmem7h\nvbh9XXVbI4I0abDIt45B+9Dpkx7dRD3wCPkdJis06wkAIL6MdmhQvhA2OFNp\nU3bbLzc0aPXN7t2ysQElNAqd0BK2a4mSr7fxS0qcmmSzy0KMlLtyripIkPU/\nTg1SicnVyy5bAn2w0jK8d6SDS4itjpnVXQCALkLycP7tYQvuBUlxHBFddT9l\nmiWB3h9Oliws/Yoi8lgUwYEYw5sjKL/pwkTaByxn6vDy9Ht5MVdyyJ/AaDAy\ns1snIDbzYwoL/iNciZFuGc/jC8+o7xArp+EIkYDEFGf7ypn23fuFgpT4eX93\n1QpMM7xixG/IWPurM8Gz1gq5noCPeRnTTZIUyzFdH5qSGdOs3NjHSSaEXzc/\ndOl3l4SeVxwabaivbCCFU4ebZqs7rzTmIBwjbT0V9ksld7CVme4u5Cm+6JUS\nW0GD7C9A3iiJfBupu5v88dK4Nd06BkIvmGW4+Mj0ghqeWtcgCAHCnQSUqqh/\nIjl17a83KxwCDCmDt6/V+0Wsp5HsC8I4LblVtDhGntcLfYDXOVDNemtUIWb2\nJMkAp5maStLTn6qcwem7u2mjgMr6TLRzmDAiwLHbBAR+iNHpctR6nJ2b2ANM\n9KlflEiNsbzK4yP8/nw0D3payGcERbRwxehNiP+dDBwVi07tD/zMgUMJBik/\nlIJt\r\n=EVbR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ab5f49a2c.0","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/density":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/elevation":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ab5f49a2c.0_1580945625327_0.314791910646137","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/switch","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5abafc649eae495dfca5d8b63961bd63c5f78468","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.c541ebe15.0.tgz","fileCount":37,"integrity":"sha512-Qt4ZOEH/nfar0Io1gjwKGJVjwAAO77ntyTMeBGrHc77EDvNkCjLOs3B5PAGpPqGKseB2ug3ONAuLs7hOWzbDqw==","signatures":[{"sig":"MEQCIDu82FeKyPzEqTmumUBDY3OEVjMsRoAnSgqVcCrgnqYgAiAG6/RNMN88WaKPsyH4THEq79JjwsZcoaiX90wGqDzNkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJN5CRA9TVsSAnZWagAAS2IP/15nysRY8CZPP3kyZsI9\n9iLa4U+QbpC+XzBdDpVqESD/GJrwYpSPbSLJ4XfK9/27WjsJ/6gZXGutbKMh\nm4TFDPv3IPOadIhp5Rom9iICmXnaLf30aHRbBWAvfhHK7Ffrbr6qrI5h2wYj\nVvt1rQdzmwezFmMLyHVsdj5/VQWr0tmBsi/Tmvgvg0XENIS47XQGFW4Ahk+a\nehvTMmxZ6fD3yqG4FCTEYFt/l9Zj+sI66kGQEjZGILTTmrVuLEonU0nSSZz6\nY1EkVGriOXegWnLhACNMc0YoR4XJ6GYCRy08XLbbEggLkr4EfBAck4wPflsa\nCThHjYD5MEDxGc072lFLhfXUK15Y/iJC+ARoa9RBfQxdBpr7Dgq+0oqrVbZG\nH7hQfg/n3iisAWYU0kS2MYVNCzjgn3kKB1SyhKYlpwULSH1+0JHIwGJNfhJO\nSJwq8sSSmIO9S4sYMLOqe7ahwgEQIHDqq9Pq9wmcP2GO64sd2lMbaneBbX9O\nXpyWI3J3hRJZfP6oWcUau8EO35l1+Z8Mzaa/yPAq6lYD/8vzOVYFcv+fyiXu\naiGlmFPEzmgQRXQmO8F8ta14xQLk2Cctnw39gwr2UBaX+1DqIZwQODpJHkPG\nvgH8qIsJGJFgXUdk9urRciXo0rJsX9dfXRnjmQwWcvRJqSUCnX0t4i52Gv4L\n1AYr\r\n=fM2Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@import \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`mdc-switch-toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`mdc-switch-toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`mdc-switch-toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`mdc-switch-toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`mdc-switch-toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`mdc-switch-ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c541ebe15.0","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/density":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/elevation":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.c541ebe15.0_1581028217294_0.7673037038903623","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/switch","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"696881ab080da10fd09013890ff67a14b2d06de2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.98f7faa05.0.tgz","fileCount":37,"integrity":"sha512-NTP3yL39dVRqHfBEaRknbgZJEBKU7XDT7LvM/lCsUb1W0Zl1mAj9HHwPbI+uZ9O7UPzD2WPcPwtdXfuLR6533w==","signatures":[{"sig":"MEQCIG38yiDDXHmjX7T98n7rLBer2jNa3OwqIljtPwIbTh0FAiARHMGos5mgXJk8Yjo+cJeTe4mzSvGDZa+JGk8KCSk0uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjDCRA9TVsSAnZWagAAqR0QAIp7v+cImkF0OJJ+8QQj\naVtHrMn/zoy1/RJ4aSmFKBG4fVNSj6QXsiMQFbuwSjK97KPY2j1riWDJ3Iop\ny3AhHWhKJoROc0d7N1tC8LVAaPQ0kbF7tFD9xDW1qNqzybEKHFj0RiF93itC\nouyq+C7B2VpbL3Tvcc9+TtIcsV0RAnbLls65nkVub+Vueo435//Jtw9c40B8\nJXSzJbdH/sIhGmNrK4paAtRli/l5pgXCe4GV9eOzN/1VPXrRDjMKLvr7b1qL\n4Q+pFSzpcwivbE8PXokUWVFX0UDpufqJiIZyh7BVO5PaV1+BaL6D2ygdn6f7\nxbnfQQUbFCvIittJBfJHVqN5MpiHnzHrjs2MAd3cxG79OcRcTvJ9pXyCf1ka\nHexJ3OLdRThRU/QnKh6gYeR+k9cyv3sNUiV55ImWw8q4kArYkJ/u4hSkPPPT\nGQSQqpLsTWbbLCtMl8MxxuwPHbnMdxY6POcniqWtPKfyS6DHULhIf9Lae4AI\ncf8dbr7fmFXUnrzolDu1oftc+RybLOudQ2zCrdGoGjLnYp36evp1w0OLMJVy\nhXOwCWyLe4C8HLChWOxbSDYe885K9jl1jLJzmvFMIhwD55Np/sgEBiGo2hTA\nWZpqhsHUP5IBEWgGWSu63ddF17xYBf6d+kWUNZ0hQddAlCKgW44bFsS+mDnu\n1nTj\r\n=DgyU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.98f7faa05.0","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/density":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/elevation":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.98f7faa05.0_1581103299145_0.06393680765694798","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/switch","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f41a7fd8c7bb91e98e05eef06edd3c180554f468","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b4727e43a.0.tgz","fileCount":37,"integrity":"sha512-H5x7Fesrfm37SMvFDiF/9UEciRfJsDSAS+K3kJTHBILnMzuwKas+yDG0MOzGdj3/D7hBHtH8DoaE4F+V7/UIDA==","signatures":[{"sig":"MEUCIAnlDI0/nVWi1mjYfrdpMsVgVu0hTr9O10r79HcFVX3oAiEAhO/oKg+v4TUWWlOfdMl4+jwFQXm0tPvQGHtS8cQnD+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDICRA9TVsSAnZWagAAZEkP/0C5s2SNK+2qy3zExaJq\n5MkHML704keDu7Z98co3VjUMveZMcojuew7eNXGlT/EEaZDYdD64ym7DJl14\n+uCf1ZGcD1zxelbYEodRCKbyrpy33cr1Zej3ZwpOPZDND2TF3j8POaTNJGQm\nFWayNGYDBxYwtFR0/t1+yQ6l/YRjIOqkbu1yon5ZWnlv6R+eBLxLJDnJJYcL\n+h3cDOPLAd76sLdknl6oqId1wMARPqw2RQlM0yfq4wAAZHIdBjYjVatiJ9NQ\nkm3w+ClYNy5v5gYr6rwNwG51lfuNA1yJkHYsCImZq1jRpZ0zNmDoWwvkWWzy\nuY2cV2jLHIic85tXiRVd8l2Wv19M9hYfBohFUHvxQFShiHNCKap20eSXZeCV\nCwq4M6iMghHrQg43rYTi2Q01Kc46s50Ckw9FVNNqC5xEQ97/nAbiCoVBJPeQ\n8FwJL7K5Lb9kK1nMOfHanT16Cjt96NOerpHgwP8TgSZbr8+8Gbr3uLzw1+xW\nVHFANxzZtIU64w368+9QbQYXORG8b2uzZf8AoqN+Rmu0QtYc1kACKM9jVH7p\nBEq0T1D2uTVIvgay//bNMJXoddpsnf11eTXuZkAb6PrjhGEmmi+PD9lplzM0\nJA75fmLRIaR+OVD275oGoUkKS3HkTzPIeKCs4vJIBA2rrOEw/l9eSUiDUF9T\nRb6m\r\n=x75f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4727e43a.0","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/density":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/elevation":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b4727e43a.0_1581105351741_0.5611027124163188","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/switch","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57e9dd6e5c12b211445f3afa7f81b0d0785660ec","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.91d9d5a65.0.tgz","fileCount":37,"integrity":"sha512-7m5mR1QkTvpEax8gahswe4/psIaGWPwYPdPGfQ/tgSIsb2xyjhGAf+H5hd6dXpAD8C+xRVp2YdBtDIav6wx4Ag==","signatures":[{"sig":"MEYCIQCFsyws6Ta1AHz0dBl6xVbfb6GelmklHIJion50McG3AgIhAMngHJKcmnBmwh2Sp/3b5BjhOifmTlt8s1X5xY7A2GCY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevpCRA9TVsSAnZWagAACVIQAIma8MVvEKxitOsBBNUq\n/0e8V6ih7mmXFm+LChO3jjX7tHpqo2MGIPkaKzd5UzvUeYX9JaGg3/zvj0cC\nUERcXxu2BVScE1Vbas2t6f76iJPS8NDHr+TQAqu0riGdQJNWwGXb3FlOFK9a\nxaB66zeNoJJEHkp8Vg9tPonJUyaNLtFJG5/3gPmkw/TTqeglXawpRpZatbd+\n36ytNJ5o6jPIWEeJyyLIooPfYEH5WIKUESuTfENApxb//sXXoNfXGEYiU7vQ\nT0m5sOpda7cKhUESjcKC6N4vqhYzfU9nHmDjhDC2kTQBOWrkJeeiidI/0fmm\nLW1XXg1q/yjDU6hLjE/hIsU9E5YqcIq2tl7zdSepUcXAQShOiqT0Bul1f3gb\np0t6LaWBBIlaqH3KwZdpR4BT4+9lQaCDT7FRzE4cNJzXXB3o8JYnaaSk77gg\n32zAuZ3agSxdSAVOCNBoKWkMuz3yo4Dtv8De2WaiEz3ky9wOnwkt661TzvnI\nIxZZe9vIIpKbLs+tjmFcSdrIASn+Bsah8+QfeOHSuK5M/3Qr4WhblNEjlPWf\n/kCljdugDEatEwaKSLL/PIqR2PsfFuWYGXnWDDaH+2mLjLFhgau0+tMcvUb7\nzHlVg10dNwkFy9RDOV6O/FiMf8gNsnOxniN84dy9atztsbH/6MugLRzlKfZD\nzuvi\r\n=bm2E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.91d9d5a65.0","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/density":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/elevation":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.91d9d5a65.0_1581116392639_0.156386416004765","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/switch","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed77740cf45d4d3febacf8fd2dcf7f974733738","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.d5c006ed1.0.tgz","fileCount":37,"integrity":"sha512-TBdX+Esr9NcvhsIFl74yXm3d+16sfK0CYC7lE8eC/uqOT/6tk7XATw6Rg2KDJNCJJfeGglOhz3FFpXkeMmf6XQ==","signatures":[{"sig":"MEUCIQDUttnHISjO3FT+vCaJphJB7/NXlFeqCXKx69phXDcUXgIgGORu1tmhNFdUpjt7MIpPXPbbspiBd3sef9uF1N3rAKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmHCRA9TVsSAnZWagAAwaIP/0WVrsDTbtAJ2aloedxH\n2CZURgX1JD6I5lqwznQaDB2Z4Yr9smqdZecnQUDG5njK21a9WqmCEpBKd8cD\nTerFECukokJdtU5kBGx3v59rUTFSF88d89D3h2VowzVXhUbWiEool9qsmYxd\nXOVyqreC2KqaqictJY0EFiHsYeZOuU9Jj4evM9zSyeYrcYcZ6a96Ej3H0UB5\npnaQxWYd91sw6AM8+3akX3QOZyb2IP8tpumNm0mo5uK9kpAQf4p3WTteLWPT\nPV/KGPfm5LtAB2UY3yWANSDz9uktZtoYJAfDm2X1I+N+spGqgkrVNTyAKStv\nX1FIhgauWG6BXMVOHV+V0inr+PIgvZPHZGMv+Ws07LYJ6IvsRlG3IwBiLsG1\n6m3tfayescK0IEqWcQEobvbf7SX224M6qCyB3hRv2RVFs58M7EyVUt+KVV+K\nghzyVEj/xZAHyDPBTuUl4JHRFTlwSRo02OeCGKsDNUHVbHKCg0VD+BtdYsNM\nkKGquSsdTvSnU3Z1edeMw3/9fW5KV6xntjse9qhmdtppWxsI+hZByG1oR+YG\nAKz7IHe/VD366g+AHLHXwcF6Y/7lb3xPvSiamDMhs93tHWzCUwDnlPoNtIUy\nMuImEyoBkOAMs1X0ajsI/IA36f48Vch/GV9LDOqOFJZdfZsl1GjzXLmF6zpR\nZOBR\r\n=OE1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d5c006ed1.0","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/density":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/elevation":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.d5c006ed1.0_1581353351414_0.3137822070074272","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/switch","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4175e73071fd14539816bc7ce2e345552666a437","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.559f1a570.0.tgz","fileCount":37,"integrity":"sha512-eDnNewT0e1y0RPv8/rUhkgjQScQplRPjmw0Wf6nFC5TyJ29WGJkNpP/sjiFTtpMxJmT+r8Lq9DrymNVoksyykg==","signatures":[{"sig":"MEUCIDjzLjC8oY8fgeGtM+NXkBzWS+ROC/DiVFwT4NXoD6ThAiEA6jgSWy52ZG2G7LPxQ/1FKLpghHZnJbkJNMLPQI9+22I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIVCRA9TVsSAnZWagAAJa4P/RXL/tU7BRrNI/KOUzg6\ns7oam6MS161rhATj1ahxcOYWJop2T1sRa+6WmA1NvSstUzqVqaFuyC1lLYmv\nD4zdzJBrrjIjLxqbp3WDqTsHaSb6zHZhpcChQwMX7Zb9Ayvl0GI7K5qNnkCA\nYgnWWBZRFP52Y7LzVsg61Ir3onJpijBR9ZRbo927oLmoB4i+Yy+HOMMHLdOf\ndNPAzv+0sfhFrzEaLzIT/TuPJngU41P4ChCW7wjM/kbu0Ueb6too8JSlBRwS\no4oaRtEmByvoQqekEtaN6cu++RuM1jCoIJt1oTRAtRfIxOp4oRK5TPZ5aBJ+\nzNYlgjXYsTz8FDrELg8zcSA2TMpsc82oYo7/yrKAfjfyZIDHl1NU3zrAX1sQ\nL4yM2hJUaOrBU5N+r7VbMqCdE9YwtpKYtcswLXqjmx+6aiLWQ0Wbm6PU3pOF\nfIxmrO8tUIYkD1udq9J26I+EC1Xar9JRwFf9dAq+5CJzXYZjAEC3Gt5FM+bI\ne/9bBEw3AbsfXYMMGAQYNG9zF2GhI+q7sFU9zo042gqQpL/lKpPIG8VjPexs\nvC1XTgyAmuZYrph+k9E1fGU9WbeUMT50NrtmViM0l2SWXlMMS1HdxxcULrii\nyPk/txf/1+HI2PeTJ4qKDwAMT14wlxYfS+BkRCaBSBT1qO2w01m0l5qK+msz\nSeBf\r\n=Svln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.559f1a570.0","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/density":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/elevation":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.559f1a570.0_1581355541410_0.681926182100729","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/switch","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5a2d2a07490027fbe72b96859f507729d848749","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.ad3bbf782.0.tgz","fileCount":37,"integrity":"sha512-vUYn/PLi+lCNOshiEyssMllaiX8IiLzAFv/c8WrliRLUMzBSkcOdi3gAP+gXHhroCu5FvSueh9ZVyD2AWskjwA==","signatures":[{"sig":"MEUCICC97nDUJzSyiak28cjAcbKSfbvAzRF8auxmAH032SK4AiEA3SABO/Q2ES+hzKe3Uo/IxCEFV4NrOeB42A2UHhJ8l3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQasDCRA9TVsSAnZWagAAQ20QAImMPm91dik7A/i9AEZh\npxVkiHVAT3H1EszzE6J/4nJgqSYpDXfYJ0hVygTIchePUM52/a0YiVbJuv1u\n3HB86iBoxg+HxIjrSnie02+ribGLqkvoxuYuSLkd8QhKvexA2p8tqHCXrtoc\nDvit+U1amzv91HcJHQ+2cdMvCqf4C6AV83WRuVrRpiCeE6DUb7vRDDlr/yB4\nYRcO3qmEf39v2OShES26oMbtjAEyI4OoJL0L2brsPQoRcOd4Ebn3Ph4U0ofp\nxxkmpAkznsrpDaWhBQwF125ef3FovIUx0v8oWsN4+0YoFbc/1FOD61F5xOUD\nJCQNEEgf2oiEsJWTarr3djtgs8/jRDvyzH479AlxHMtCxQteIWaCr56OMWKX\nFZGl8R/4lboI2DmLl98sJQEhywu+HFcJ2sCjI6+4WlViSlsUm6xNNOyp+qMN\nGEVAejQbZQmB/UxheMBnciT9oC5/NBTTx3Rv0rOdfNILyAyPt4PtV16Cx9yd\ngi8oPr5sdEgOSBSlNp+HiNa1+zFuBqOt5Et+ZdGXkfYXqnPsFoRBVeVbI2U8\nMS9UNBp4MZC+d/y4lCDptvWfHACWy1YbWbWad93eG9jNT4SbdwB4q21+sOEk\nFP0icTI2zwz48I1Cd9MjJyqmBGH6L/dp0Om8jwLOyGnmbR84cMBxIGjT5FuM\nIaw2\r\n=Vpmu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad3bbf782.0","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/density":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/elevation":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.ad3bbf782.0_1581361922665_0.8144842708539475","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/switch","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8625348fc96cc772843534fc43a2a8004d9e823","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.570d8e49c.0.tgz","fileCount":37,"integrity":"sha512-lfnCETOmY3uIBYpNYvREupe5vAWtYec7OIboYWjV827JH4j0uc5mgStQXv7D0n/b17r8V358DJkxaiTgkmpX/w==","signatures":[{"sig":"MEUCICUTYMxG3lPM4m9m8PhVR0eUSU2i5BXA9ebJLoA1toOZAiEAnwV7yrMt4FCs5IsI7cg0xu5TDks8Uztra1LiPzjw10c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCICRA9TVsSAnZWagAAb3cP/2wOZcGrGjV1qDSKDHfC\nbIamDoP8Wpy01dFeA2dGp86CfUYrhkrBjLhvGEjrm3SEODz0M3SkYu48BCOg\n5xUMAoedq286bcL6FSQsllAet8m6YTJCczRDjgrSNw2fh1TK7TYvKzIpZWYj\nKjY7SXHQ56DW3cTgHlyFz+7ZUDA30EGY+tHGlF7LkSkPDRUZ8Y8+cw/kQIf5\nj7l+GI2OXO+LyxstMGzOKVhVYbbbZLqF+8DkMHQSnlwio+rTtti9vbE6g3ep\nZQ65P3c0Zcy+CC/UGGXnF0ktVckDqucDXDoY6b2/AH8gx1JQsbxQ1d/p5mJw\nLVPhGH/HKGNRgGRsuyjzBgp3El1TLCV7vx9JfelvAEwO90c3dmA91UXwhGvz\n7Dg3etP9+3JQV+LOU8WIOY2chGg8eLmaIF55IZbEVOAGN4dksmkPNQg4wmjb\nWOdtIbAQLAtBARwAX4YlB1s5nnG2pmW0XlD8uhScyMcEusM/Lx1f+kpe5iC9\nSFWUdhxr0hWcP1rXFARAhqzi6tGLQwVv+J11E/OIDDaQA0WEfr/FJhDJ01bf\n1XJwMvk+DM0fsBUnA6pzzL0W29u7wFP1kirFnzS1BlRudLpbKjXJmMzr0DdE\nfcC7TpBPCTgZMB5V2xQE/VglZFJfDvgDIj7m0coifUQJxa+yP7kPHUnXQC6o\nvw+C\r\n=JQMT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.570d8e49c.0","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/density":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/elevation":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.570d8e49c.0_1581367431770_0.005251706521284261","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/switch","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"428233b6bfa55fac9862e6a91c3f31870f37d92f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.48b06b89a.0.tgz","fileCount":37,"integrity":"sha512-H7xC6ScQdLRw73Z65gYIV62iuj5zsDNACrDs3CfJ7p7xCTyN6z/UB1mw2o9Sw4E+xMwMWHbVUTkaxg3lRGeKtA==","signatures":[{"sig":"MEUCIQC7vcRi+b2kjGPT7Mqw3gi/xuttBBf+mDQeaHNYW0EeggIgCA7s4lN3s8JiQtD1dJV+0xy/S1qAwr2CuO4z9SWbF0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXYCRA9TVsSAnZWagAAxysP/jCqGa4VMX86W4TEkIi9\nQBWNvDyi1jI/LmaJwFa5/2qoPp2Wu6r3FuhRg5a3v3j7SEZyeIXamhwG7n00\n27SQrYPxj1FxZIkrT05GG0qjRkNC0CMM/koCg65VIZGLLuMap/Wyl79cLT7M\numcKn5wmSv8HU18HRdVAqOgvdhHSxwc32VxB9DoBAP6Kv5N99BtBpgTS4Xlo\nI2p0LRcoBhzGN5VYHTBr4lA0q4wo8V1YbU9PqYFk1ranRWnmz3o68PdaCkmw\nRDKNHc5u3utTHE8pPJGZn36LRNBCpW/zRqwgcugqoV+6PoinoBt1G25d2h9V\nl0aaD9X9rL08wiPobLNxI7pv+OkSMY77CkFZQrkN2IJ0U+4KhQakui59rZq/\nmAeiPyDFWP6bNr1grBvNt5hpsrssKE+1s13AlTLykQLg2QJzg4ZurLiaR4IM\nrkECaWiLa707J8Lfjk6I8cXafbMErXbob5CyghjGzLpkd9BdbWI0EB5V4Yjj\nrPawq6fI616utzRBgBJnsndf7jBRS6KYkX3MkwlGbFvx/5EasCHBR43xrP1G\no3kaxjtxxYdKqRycpFUoZYwgq4PJQTachrr2XXfJo+sRo4LXRVDmJnURvZCo\nfT758JuEYhtO98noR4w3lP7G1pnIPI0RxrNBSP1lou5/C8cID60sgG+DpgTQ\nFHLV\r\n=wCuL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.48b06b89a.0","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/density":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/elevation":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.48b06b89a.0_1581446616160_0.8317793072047206","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/switch","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dab6cd411cd6785b6325a9368726991ffb3c0e8d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.612443dfb.0.tgz","fileCount":37,"integrity":"sha512-Vux2fePIXVXTjJAWxDXJA3C2usoIaPmqUZXCzpWwaBTbDAzMfA1RXy0wnTYmt5eRt0JqWSWfyEi3+uI8y9l7jQ==","signatures":[{"sig":"MEQCIGbWPRSqAwsTgrPrqWmilnD9oywKy9NkYlUPrnX4Vo7jAiBV177PWdejhyTxmuiWt96cOKXTJrEW06mkuou/cecjDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwVTCRA9TVsSAnZWagAA6hUP/2gBkxuDQI0nzxM+ob7C\nQHUTFJm79w+vrT0S0xlSw5qDjSa/urWps7fwVqxedBdW1qYvsxrS0BO92HsB\nM+O+zmuPFPSimLr8XULwRQ8GXJjSPTFBMJGudwPnYhUfyYi91vBAF3D4YKjQ\njx+Xzm821tMhep6z6NLoHELPbU9k4AfO8wDKRBUJRtpot2bd1MLXNWIAM/uR\nwlHD1yRkhIH8wHoSt4Xpnd90J+6BwCkEGAYc35/+mCZZ2gGN9t9lOyRdAdFd\nEYBeVtZk3R+jsPKOX33Df14GiJmVebXt+qXi8+4JZXF3Dg4RZsrCgC/Y/og8\ndcL47lEFYd8IhfXVK8ibfvIcAG2rzKrGDlRx6DpmyfJx+tqXKUHizuunkq02\nyReYrirjWrGOzVYJFajwNSbfez51W71R1hQe4Uj7ZFHl+phGisIzAO4Ahh+w\nam7FC7dsqfcIJMbJrXWcP08tBUKi4pZC9Jsu5THPOo3ms/DEP5yGMJGUmJqw\nDfQfxigj/cugww1iWFDzVigWCuZBNALGab+hLxRX4MRSft7ChzXhlpuxLmOO\nFqY0Y9HKoFw1rzZtXjqxabR2t1RcOm6j6/bWxxn08yQ9S4PlW1LenNZUWx/F\n0kRgys67HVc7vv8mDTkWUXKbPsQYZkh7QYh4zRMxpIVwiMpQlXQCg2sPpWxW\nRVHE\r\n=8skb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.612443dfb.0","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/density":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/elevation":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.612443dfb.0_1581450578041_0.8100454133735144","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/switch","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b866699d1d1982a6b7df5b5205a412e43d904f5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":37,"integrity":"sha512-4N8yc01qAHzvGFLE2DM4BBwCRFU0SDbHNryGtMVT8P8Umzgu2a0UwVLu43ILDsK2FyK/iK1/1bag2sqZCaL+UQ==","signatures":[{"sig":"MEQCIAjmAEFHfF5pjbM6ZH5TV2dO+pMjB0PnCbaDufZGFss1AiA/hROytL82I7hSt4oPBEvwvabbu7FBQIcQg4e/eKgwdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yxCRA9TVsSAnZWagAAPhQP/jHQwI5D4U3MnoMjSIi5\notJ01WLaao2rI9eH6zW900ZUvj35/LVVzIPopUpeTBy/J9zqCUltDyhsHQRr\n/S7b+9g8Wv6WTTw25oAEFHD3J3uFtsR8Cxa6H1bnW3BPiAR09U/8lVcr1F0u\n3EMpsSZPPkR2I/xWCJsDzkqioWH/DO/yAu2dzzuaeSeLR0z/Ad26R8nbsF/z\nwtMP+6N4qWCdjzPVTCuyi2KZhh9CpqFsX1HwK3XPcfu53D1mi8SxCJRIc1d1\n/wUY+JQaSr4pognHhDYorJIGyq4sWryj1WINKmMafuez7gL75bCl3B/jH08v\n9/vPUuY1EpddP+xo2TiYahbDl6WvJiBSn0zIufgCWUrjuwXOrqOc7i4mlNYQ\nDpSsTh9dR0CqwSJzlfvCcQeKCvV/OuDc9/WnomxFLlG9Z9hT6kcwGVzTY+m1\nYcKyfl/u3PLcC4iMxWzssLxWOflNzFbPZJmaPUgPG4wa9IqVWBW5nu0Ifv0+\nxRsvJh+ADkLdCQfjodnNmF2JbwqFWIKCGtcazGWOpUHg55SjqzkOYrpzsQqU\nXENgfG4V3yXby9KV5DUmoxWwBm+uG05S1FRf6Dn3pYMvj8p4SxZ4Z+ywc+Uq\np1BRHwRSu1qx908wtoIQ2SsMlDri1hGM6tyoJZg/OLQ27Mm0Otj2Q5tYoxah\nukzq\r\n=QoxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8c11ea2a3.0","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/density":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/elevation":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.8c11ea2a3.0_1581497520836_0.009694471326062937","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/switch","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08528b9bad234ad2f1e177613b24a2c2b095d08e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.b2f3d311e.0.tgz","fileCount":36,"integrity":"sha512-zYn9Oic1Ef9dgsjuCGwT4idFTE35MJz2RzAeGQfUjGjmb7INzHPQ2F97htqkUMBlRFzOBmNV7weRb/FasoX1Fg==","signatures":[{"sig":"MEYCIQCQwcimaAnOmu/tk0aX5WJr1YLNk3H4856TLgvMowJ+9gIhALv8hgOWJulEwC7leMWvRvciKGDdn5N07yTppVdJkRhq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcM2CRA9TVsSAnZWagAAgjIQAJVUZUYZhk1+IeInUyP4\n4Ag0+5ufgFd5VOJ2YjAoKVb1fWCUbfgaCTL5969lEvdJGytUC1vvx6XjHUxU\nPafEUgricjWMwpv2LD1dyJNPKLumiMQ104j7wp0ab6wtixxFJeDZf3yKJxo6\nRCKqF0RwEjKgFBvYXQTtFoH8J/F4rcTLV7uGkS7BD/btwRbwHpjUMAjYfeAy\nCAg1XMw/HAf6CMQV0aaAfZoJrWOaAofvpz9nsAV59xD0CAfQnEWMA+TVU9ES\nyVXMbHrUQChZ3X6zlKOs9UZzR+KYpc+ojDihdaaMYUuvUjtNUGZuH4e+Udrd\nAXxsm83yWFhmSfS3NlHja5tyvKRzlBU7GLB+ykuMMg4sEQBfWgmNKdqHesjv\nZnbL4FpWI7NYQJk/tToNuCt7PrKGd5oyyiH7G8CPGO3ENlRbyDzqMSG6x1Ky\n1HDLi7yQ8wB3/jhAPf+eW03czpfjtCPqHtborjTtQ987qNK+3aV1VejW7GgC\nEWrE4kOxVrvKzcJLPdDRG1Pk5C3v2ZITwUUcarB9++o8huBgUK/2/C7q4ARA\nI+36oj6zqNJRC5ADjsSuFDK/21O+On/TVxZKoYFQP/oYyFFSRFe3m4ZPJXKw\ncYUx6bD7ko4HaxApbzNszaJaSzq7+X5TPj5iwxU/IlMl5fXEX3rRjJqMt3g7\nbZQ9\r\n=tjdj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2f3d311e.0","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/density":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/elevation":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.b2f3d311e.0_1581630261714_0.018618739335298784","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/switch","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe601e42bbe3289c8d8d44178c1612297f1cf0f3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0-canary.4f488d0ee.0.tgz","fileCount":36,"integrity":"sha512-I8CFl2FfWYm8RJy/tjAxA/qRJzu4g26rcNuY+nRRXwuea39G3EkOAUYnILlnJQrMUmop/3eagPEbxyPV7ZBLFQ==","signatures":[{"sig":"MEQCIGE/FIUMLdFw1uHqjVXP3eu6t5BkWZ8iNaQnX8HGzrCsAiBc2NyUC/xBSGauprP3Zz+4qe6Gm8g1ioc2a8I/RhTwpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdaACRA9TVsSAnZWagAAw/kP/3PnbQuUXtTDQwDmTTP4\nE53r5QewogPNwLY7AXmF5MawK03THSX+bRNgnm8b3U0yAYK43wsKlX091CXN\nnTW8tsBc3hAHqjQdTHW1oCxXzoFd+hXSlGNnNDNKz0scnL6On3lbWBETzeBT\n2fB5jP7/trAURVzQOGZAGOTjtsk8W1Jis4TmF/NRQXipMuu5xBD2dWDuuyEK\nkI3g7fPyCPBxyhilLrzraO9nyfVjNSoJgywW1JTFHa0fiUbAwF0BvIFVfWBv\nV5QMy2IMBY5LqrL5DKnpZ1slgs4/hZ6UsFCIi/CMyOcmLjUkeEBxeeE69LGj\n/Dq4hI//wm2F1VFyYYYyy2Jd0EppID6+B1ObqylmUTpIF8+VRSlC02NgoTMH\n2KYGxj2nYB1Ioqm5ev9bk0DygNtw7oGyt1GqqccKwCZ3r+yS5EZwKvAwFcO2\ntd3Wvraf6HRFKXVDxslcnxWGWT85nnt7ThBO5rKHMhuWgtJ3+QZgsXZe+k8e\nrNqaqk8DG7p4zMsbwNPxG/vZhG59mU3L66Y7qmpO8AfjKArw5zJLGhwFh9aY\nE8lvSvqXA5jfYK6WME/0Rugv70eXpj9rG8dhIjEvyooT0kbW0+U/vh9EGX92\nHlTEcj0Sp1vN0jLYzy6jnj6tZpcMcKiAkzCaIYEV61SbjT8BzCYFqnfQrPku\nFCan\r\n=B1GQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4f488d0ee.0","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/density":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/elevation":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0-canary.4f488d0ee.0_1581635200366_0.1512701326544088","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/switch","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c4dafc4fad4e483a961b2368b2fb7aea2c100bb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.fe79de07d.0.tgz","fileCount":36,"integrity":"sha512-K4WgXdpnJarC9dtsQC9mp3+tnJcm5wupayza1W+IzXLg8U2RL6Vp8hXaeTMw5bGC8uZC6GetQxvpskOVqKdlrA==","signatures":[{"sig":"MEUCIQDj1l6zWT6K3JFB4hhnJnGAtWM2sC51IMQZh6q8fDmYOQIgPS9qVziJEtbuoMEhvjn68U5LprwQyH3HywTNnhb99ZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqVCRA9TVsSAnZWagAAJToP/jOnKmV0Hz3KqFZq74nt\nDtpwqFyWv48UbZGx2hYKmyTWWx/gVHVBp1gaiS8p6ZkXECTy8sxLf/HuYc+I\nMeC2bc+3SWg1aZmvegyhKnGb+XGNneGhpR4HAFEsGTbkOBqF2q4W1sZIPZkU\nxkXMGGkksI0ZyU4qQqK94MOfF7jsNPDxBRidnef+YFKFS0OlcRnISZ+pq8vy\nRAlr2229Cr7P7DFX2XRJUNivplcn+gI4h9XYO+E1S5TpwwN2p5IlHEa2XYMi\nV5n9ScPREG/I2d4Mi3enWeMCMvr8G4xCXCgp8d6MRYk2hVfoUVjHjZZS5G3W\nPlukkHECOlpxCPOCbKWjWgCeJi87YSjZ0G636Z8a+/AUCj5V1CJzvxOeV93v\nbKPGfGGrfuqLtQW/Y8zcmdHb75YpFoe6I0ZiJX3AlnA4xMzqYia2/LgHk9gd\n2U/ypSvaQZpjguCRcmlAZUHc4kDn3M2nb6xy+GmM6mGf/fL3FF30D0KfESHK\n5A/8uET3JK0t6+YsSnftAPwL0t8YY4K/699xQlWrENlp12gUUCsXEe7nRAXp\nBSRvCFsrHeTzJyZK7NXzFRYhRHascQqekB53hChQtA2DVPIty47WKQXnjv0o\nI1DjhNRWkXPBaD3Pf2yFP9TQpiyw5f/LKdH+SYnrwBfm40D8ZTvEKFBpJQmx\nVEfr\r\n=5y70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.fe79de07d.0","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/density":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/elevation":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.fe79de07d.0_1581636245445_0.37460852507533016","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/switch","version":"5.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e5cb4bda46ca17a5135b30bdd892d1c6e27fa0b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.0.0.tgz","fileCount":35,"integrity":"sha512-OFLOzdCp6a4NlL6tKbqf8/9Iniy+EjO3NT4i63y0xDPgIrBPxOgWUvxlpF2ysZNghx1QcMzwgsDp4oBRrVwMRg==","signatures":[{"sig":"MEUCIQDkcFkeaPU1TDkrujNz5Va9lqQ34/jpXJTcn7dAqUNFPwIgXNDee9u/BOdRzEkTDoFeW86hMHba6Qhz+o+eF33pc2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUvCRA9TVsSAnZWagAA2MUP/3XtbXhoAr36edORRGDD\now/SFfOIEPJq2wA8/sSN/kihSoRTTMMGYapWa39rZmAtlhAYlcbIV/IoLPCA\nqBfJYvPlSkFn4K4w7nzjN+EUEy7bUVrCsbeHd4cH2TFvsUSC/QD1h5Y/VJD6\nJhS3Gl344Nws8AuAHrHZfCb6AcwYMjSOWS549nG66psifOYBS380ElDy3Wkf\nEjPGDiaw3KTYWXrBiiEkeSthYhq3a/DUgbJOr29MXW4a2KHvGb16aICG3+mv\n8LpPISJJkTWJxZKulgga7PML3QH5a6B2mohQrGIcoKecNiyPMLpBkKhXPqeM\n1uYQFs4vUbMbXn2rZujWIqmZcI64tFk3kEeiCUx1M/Zt5tnykkA7EuSXnnBB\nahSG1DUezLcvF5gfwDqzjm9WLklIFFRgOahtWPlrKj/EuMhtpG31YJtYzwzm\nAKyuT5BlXPW80KAA3fGj1ni0O6uaxll3V6ewC7g8jYS0HoAL92ZsIeXfXMPL\nOILgPCvsc9ZbsAQcwVMwvIXModr/YK1k6wcJP0sutXLET4agFBAetz9ihq9f\nt/tOBzKa5/fgvhCdOeSqLdO9PF5ss35UV7REZxl4IGA+/tYPo3uSDRtP4gTO\nswobQuxdFGDEYxlUzBKFYS9ktvGnOno5ku0Kovu5blZSDy6XpL8EShdanGWk\nAUXI\r\n=NKUY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/density":"^5.0.0","@material/animation":"^5.0.0","@material/elevation":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_5.0.0_1581638958972_0.09337986114160346","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/switch","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c1abb5b0492464461378d391aac1edf8e586ad1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.5e313b1f2.0.tgz","fileCount":36,"integrity":"sha512-vbrF1bKCSZ9kIHQo5/jcR6CcWcEcd+DH8B2czB48qdHFliGVb6Kvy2nfTzNjlDDa05ouVDirbFHvNbda5Hp5Hg==","signatures":[{"sig":"MEUCIQCYh2YmI3f82fY9EXuv3qUKNC21QYw8AhfI67EPs2PE0QIgAIm8oCaswJfCV9BzXdli7mdv4h71psFx3x+coEufN1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHVCRA9TVsSAnZWagAAvd8QAJQflHbuKV+ZUhDO1amy\ncVcG97TyAalFty/MQI7VH8RpfvcFHFUqParjmv3zTCqr4IPcpuA1ySDfRNXE\n+IJtuIymDhDpY3TalRrPYImnvXFnG5m/LGUFppkWS40JU3MyR97rv14GbIwh\nmE/4+pRmNLcmlLEgnQ/qlkDIW3FNw60Mqmza5EaOdewE57FNeuHUi616+VWQ\nMtHhfmyBbB5dWF7qFreUZj/A8gSwL05o38v54WwSKFdMbMDneewOuoDUlrKW\nNCVWiHa8k0HSyPnPEi0x2CWu0brPSrlF1Dkn3rwhLuHOPodC5YZvMT1JAI5X\n1PM2v6sQ+wwF/KaSddLsnZ7IDYdgq3OQbsy4VvKjQEw3OhCbHVinn0L5iuYg\n0RC/Yu5IbB9vb5D9LOKJxAz9uH4RqUpGrxFDmvObtSinGEFe3ciV0cfsSpXj\n2rEvN/QHKCEuXF1IjDGieqvXQNVDnwkkLSepl5M7FvUVneFbMkSPA0885Clx\nSjjIFL6vHOcYcd4ndJeNYbY1G444YKOwt95tl5tU4b8cTH5gKqhPsS/dqyEE\nPpXphlyfDKNKO0G0K0H0n2DVz4bK0zQfmwmRSZ+k8Km3kBlvzPMGzFO19D6f\nwdsFfqIReFHwmaXUZ0CQs2ZnFvzcd8lF9VvGB2a9YyK5hx3i6yF29kW46KEw\njI0V\r\n=wLkL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5e313b1f2.0","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/density":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/elevation":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.5e313b1f2.0_1581724116928_0.11292641513197399","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/switch","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bde384350855aeca45f7e5351e093608f039e182","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.6a56f387c.0.tgz","fileCount":36,"integrity":"sha512-TGpes2Uyp+2+GvEuF9asFfqlfehE61jbxVXlpR6GNfZeX2v98S3jQJE/nSem+N2UbS1vkiOs1cvgMs8IQzgbzg==","signatures":[{"sig":"MEYCIQCNvULVx3j2D892NVT/FpTaDd1UKfweyXaCpqY3nsbsJwIhAKpo2HSm8Ru5Kc39aEqLNETXWxGwkwaElToJ6lg57wNF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD51CRA9TVsSAnZWagAA4ooP/ArHmjo3KokQoKeOzeyh\n12rsYC4y2caI6U4XyKsOtdDhOF7ZEcPJKKYFrsZFuImQYlkWgZ5YaB3ni3rV\nPqRK/FApu+Gqb0iUhKNBeSNIwHGqNx/Eo/svkSIWZ/E7xIG6piQno/El7JDb\nPPNPsD3cT9bj9PtMz/NQ58pDcpx4qclCyMdPta0rmdiVLq8P2LuQ4oDE3d3W\nNKwbX2CwCBU83OaAn7w33KvWfZ54D5FZsZ1DJ7RVUI8ogmGyPF9X0iutx5C5\nW43FblAO0vzxRn8VPp58c591Xw/XCw78dUh2HNtx+f+yLyNbJYEpzk8H6FZ7\nN1jBuU9nn93Pg1x16pBC6M68c9kQ6taAvQv87EAwBLdn/pzO8yKb2NAv2ffi\nwXAhficKDXgnOQexJYJ5fYDhvDbrpZuyXU7cr5bPp8ZlI7+Ps0nDS6Yi6fIT\nxIIZ55k4V8sD9EgIIRVIkLlYDkA07DiOz8/2KfhONI+PCssFY3QXQ2oi9roS\n1l5X+D4J1+bk4ANqfMG3K8YT0eWaCGb3P6BtkuDG9uG+46w2rEKgbYWeIc8u\no1tG2rmOcqY75YB0bmdXMmryhP9jkGvxUtUEkPfDp4f+huE3zTQiuzYkL3yd\novWQ6oeAxNJp9UV3PJlo9xdldezDaT2SIgv9FdLZd+A70CcB/w+l5q0N1Y9S\nGf/m\r\n=70N1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a56f387c.0","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/density":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/elevation":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.6a56f387c.0_1582055028594_0.4800727366172892","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/switch","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c4600f4f74807d2b0fde5a0a6d0e712dbd8361","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.bdfd52632.0.tgz","fileCount":36,"integrity":"sha512-6JCdnp3+dxafYlaTaiY+4fpL367D0U7GEAPC2a1cgflxL26saaVQ1VbfeSpj+uaq1cEafsHVOo0dKytXuVRnMQ==","signatures":[{"sig":"MEUCIQD/pbtduk3BYLKrQc5CF5q+AD+DyonEemqYimNheiYltwIgeRMm/GhPL3gcBMmnxcs+45wS3OSbctEhSMvO7/isvb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkRCRA9TVsSAnZWagAA+n4P/A6tV5+DtCniXBAxlfS/\nH48XReIqgEEgdEkjBs72Ngaw7clt+uLb9eyzR9ML36e6eFQGxBT6EtvcS76a\noqqKmwjOSXKg1hMCV+WUjBSUtM0vKUOo+kq1leSLOIWdDetc+wHdmBadaXtk\npmcRrtOI/8OYZJ4F2ot2m9reTXHm8gZuXvxhwO4ADe8pTsiyUDknPZHKLtZE\nxTdewoYxS5uq2UrvV+fXzYuZ5MNU6ZoW3tPNQ2X1I2J1u7k1fqsp/WdNXN2+\nuBWrOBP/IvDjKoktd1xifgCvlyV3Jg5BbQzKJ/8m/nsXDjb5DM1utLUqkRJd\nAJBzgFaMIiLs5Ua/x77dkSJAcog8FG3iGh+tIIGu63dAmY83qK0YBt7uJZW0\niLnoMHTQsPM4BWY5FP94UO6wF8e8Hu/0rp/3fV60szqthAgdkP0Baf4m3MAt\neeUcgyfkYqwJiOjlL5djx6hBDiR2Rds9fl43Br+t3pnk53YmiSsyaRqGzROJ\ner7JdkC5pfTvfR+zLOoSldH5T72HCqjYcmE0lIVIhyvmuT+yxXrJshDzwuh1\nmY2Y0KPWODivB6oEwqg6H94chvjwBkoqXRF4b2/UF/QWsPxrpnozkxPJOdgA\nG6i+XKvuEGngfo8y5sV9Ktf8VDZeNx1nzzrUU6PblUuZW3eIwdGVyCxanAYB\nDoOQ\r\n=mvq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bdfd52632.0","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/density":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/elevation":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.bdfd52632.0_1582143761161_0.054611381889297705","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/switch","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4542bbbf0f137451feac702c9a62c86c29aeff","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.ad2e4376a.0.tgz","fileCount":36,"integrity":"sha512-Hmyfqn+SU1BssHPPGGpffWn3jZ9Lr0PFjiHqm2TNBhCoOzcb2eVtlXZjCuh8FAbfYvrA/TsNk1jUUrAfXQ3+yQ==","signatures":[{"sig":"MEYCIQCrAPSe9caKTSmmUtBUz/N04LdRTPQnKHrNfwto3xwC+wIhAOEis9h7xqJWkUTZ/QSYbQ8cXTqLKsoXZwKXoHATkvak","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxM8CRA9TVsSAnZWagAA6gMP/2i5P493tvul1n/LaWGb\nQoMRIEnOpQsaVuEvyqvkjpWVG2QYWKEQ92H8xlfPu6fpfe99OpZed7jcY/IP\nC6LuYMezxlOMcl5CmAXPZTaThwJjofGBZZm+sGWIX8eC0w5DJRUIlyd09ejL\n20z/mpGfCDAXjF0wdT+nU/KI1U++e/VZVEd1+guAV64EyPul9Tv7sA6UjH8Z\n+2WZ5gJ7CbJqEmjRLxoCywZ0F6eWif6+Xv0uMZCuBhGm9cMc35Gatvo75GWX\nC/do3Wi8ziGwfXqeBRJkkzAHYUb5QEyirYzgWhp5STs19W2FOBf2mGMhDPI/\npqrEkt0AYu5IWWUOJhoeMWubaKZuyfQJ/ZhuzPVh3L3SuMMrYkgSyVg36q5T\nfkE3a2xSrZ00UtYXhlq/obSeMefVLcP2b33moKVQjpZBaRfShT4ERd/gilVe\nnjO6pdNpzSbIiysnrpIARS4PHz2+wtxvCZCx9JhJ3sM32dxB23nC01Vaf2Nz\nETcq/cf3mX2Z0PC/TsYC5Ft4KGr6uAQB7M7NlSO63Iult/szrxi8MCK9f10k\nnssWXWTlZIQW6Cx6asxMd5rpJnfemd7bj37SeuJLco93gg6tLTVEODtXCvks\nTdxzUT20gXGsFNdUQBEXC4V+2iPtqX4HYuyHXeTZBkVJNYGZ6Ff9MXMOVE45\nLAVa\r\n=oIAN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ad2e4376a.0","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/density":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/elevation":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.ad2e4376a.0_1582240572525_0.8939687061387112","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/switch","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4db3ed71ee4849befc9bef6262eaa38bf0db2567","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.765caef18.0.tgz","fileCount":36,"integrity":"sha512-Js5hIU0NcD9VI2mS9Fb4UyL4Vn3z3cOd3jystoTuVmhnIdKfYcTsDC1HNM1HoQpH/UL58mdC2CdiBh1R0s7o5g==","signatures":[{"sig":"MEUCIHm99ECQ++n1W8L+pvCjCCbhTCotR8IpD0oX3gbjwzy5AiEAoolKc/C8Jovy592XA9UzsEdPhRxsntre7+81HlJnmXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRPCRA9TVsSAnZWagAAzZ0QAIIU/JbJijZocj4ciH/j\nbNjDnDO3JCx92KMXutp7hDSyyYks1VO5y6sxcwbKg9AhjDYTh7KAAk953nJE\n2rFXoVNwrRY7x/HvJYVWSYlGWxVRb1R68gDOCmGO6B42vaV0/2CrkVPslrCJ\nR4JZlSFjHCUNAA0G5IZIxO8hyrUC6nnUoQV1fErlA0OT151CRltZ+EddHHN+\nOFhpmBwTee8IzwOwK/l7qLn0Ts0uj9OMuO9Xe0jEAUQ2EKvVTyNUC+UW2RkO\nWiwXVDTLRqhG3tQv05OB65w5aPIEzjrKGHBS0zxBVlSHtpPsuYJr9BhwWGWw\nERuIzwiBH9l85Wf9x3cHGLMS/nZ9+BTLU2iOKEK/EnukOMrsnd15qa3GqhT6\nEwGSgAFgW/qYM2+ZyWoUfDaUQd9RGDkf5YaocEeVfytOVguFuI+3FaFr16bB\n755nAt0I8MrsI2Cw6D0nBvOjg8xoj/6B3niljefaZD3LOjrOe44bGtYL8BOP\nGFHjzF5Zz5YUt+pZhzQQHNNaWw6bcDy55Eqan3qqPsW2Q23wZ754oY9MFDzN\nhONKdFZSF6l4kSCf++MclCCnh43bMW0sBADALHmf3lxLVRIJUdGNz5i1TlJb\n17qN5w0P7MLP2qpe6C1wyXY1VvxarFQOqRZkdmY+srRXxnslsUiUjoKGDTYu\n1f3j\r\n=1zqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.765caef18.0","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/density":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/elevation":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.765caef18.0_1582306383391_0.07238058366367661","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/switch","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a8118d54673ce26f051669a8b98852f0fb336fa","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.949562303.0.tgz","fileCount":36,"integrity":"sha512-iyt+eBvOu+wmfl6v/85+ORsyrZGxhd44n4oJKFb+pSuleSLyzT9ODb6zhhc3bH6xzPtIVTkA9rJ9PL474R1m2w==","signatures":[{"sig":"MEQCICcQ2Tl9QYUdQPPMsCPc2aKWu6JieDQ8greuqBPuz/ZnAiAmKKfbHbGIJBegc+tnVVbD3/3HiBltemsfNN/AYukEIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+dCRA9TVsSAnZWagAA128P/28rco3QU6qhqg7YQm4B\n3+R7XRl0/rknr+MaoVdUhBkkk1k1726ibq5kR1didOde3Kbz1F3AxDf1ZSNK\nnjiGUM6PiJ3MVXm0w6qK7eYTx8Lu2EZBfXOKZaeTX4fXE7EE0u25Oj09fa3n\nXHCH29taCHHnYLyK3pGj5AYV52LJUscndGUTvdjV83kmZVJ00V6mFbbZzezj\n3KRS22wlM7j3yOxj1h5NEJO1+CYVecqSixoa64JgdYH3ZAPbtOKtpDMEqeSf\nriRiS3SHDWOBrR56jy+nu9artfiucf3/c8wSLorZG6eOhPf1aCt+UPGlUE3f\nC4hsjLVUFreCeBEsF6u/ktHxmXJeRNHvlgTP0viMybwq9n1C/ShWew0SqOiQ\nkhogodEMapD0cYiThP1RBDdKkTm6p26a9ZNorXHqVN11K+cumDufnVKR9Zsf\nhejfmHvQ2Djw5ITbyNX1Qberu+2A3NZ7Wp5Aptb3ys/oVtBBUETKbfrq+gYD\ndHCA6yB+ifP8a/9pRy4ETwrThINGvAuIZdJzIrWJG8J7rpMYx5ikgJB9AiqP\npocSg493vL7VjKY+zuWXsgdpC2QuTFegQi1IUtR1NaVLOorXeH+OMPLD2z3X\n4jzyGy8VE19AqYhMEO6OdW8kOIAD284LIaJCFEnCG4umEwc6/0jz5ep6W2AE\nG4kq\r\n=9WwP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.949562303.0","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/density":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/elevation":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.949562303.0_1582317469449_0.8025966159667959","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/switch","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d598fb9e4fae91339720516a0f884ffa0881b137","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.7ec96974e.0.tgz","fileCount":36,"integrity":"sha512-UMnwNerHVpLt9Izr6b3Uy13VLH0uRLMkvumNbgA5f9bmValrmhxZ/QnbVjLSwXtbfZF04BTvc9sslpgT49D3sw==","signatures":[{"sig":"MEUCIQDkZ5+AZIWL5KIym0Cj10XTT+f/CDsUquuWTTY+M0n0GAIgbpQRUxNevkT5LPt5XSC1D3dETwd+S/lwobqVwy1V9Z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzCCRA9TVsSAnZWagAAr78P/i2ud8camUofaHPHdPdS\n2xObboc0Y6vrVrAuhKGH6NgRiImX+cnP5WrnKR+DJdZqW/Z1mu8eMz6541sQ\n4UCM6CSQ27/lYs3LGZSa+stR7X0yONq8DbVRakSxtc9t7vKhCLflDLOhqQrC\nW3ZZO6bOB9TzchW5NLjtOvz7W6fCDdKP3OPMLO4S8YjdtoXVVIyldPayfjhj\nUEZ1F493AjWRVliOEDaP7FFX6Xdkt09tHoOlN8npIJTRPSFklwtE3XXFkYkb\nk44GE6bwUeca8kApDsxxH1xGi6hb45AkPQZnlbiyyRnvPYnQVU8T0HxGsg1c\nZYYPsJyqyZMCRahYRiplbuCyffVBKzxHZK8nMf5Ze6vs8kwoXctn2ddic5ko\neFmGhSIXY0iVFqZlwDxblYst+jHAbvtpFfifqeqrd+efTJvgBj28c9psuHaG\nhAA3OHOkylyRXR3E6uvLY+GWcEkHxSSfwIrCnUlHttle5Kpy97MoJzaP1DLw\nAmLwlQ0DyeMtc0Ll8V3OSN/rshc2hsfIcDbANydJbbu7ao96yAKIHowyfAzg\nxKgKkz+bYUTIwj6hq6T5yGsgZhv7nWGWs+WFy4M4oGbhuht6MbuAItAaNdu8\nQwMtxQG+GSfII8fvll+s+E/xzvqjAiZ6LN5xBL88orv0NHEX+5Qoj7G4AaQ7\n56zz\r\n=jjtg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7ec96974e.0","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/density":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/elevation":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.7ec96974e.0_1582570689779_0.25634441159512944","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/switch","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83adb84b8ed16b412fc53b52a30cc6ce267b806e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.265ecbad5.0.tgz","fileCount":36,"integrity":"sha512-/v8ITIZ6Buy7XuzWRT0YrVI1gStb7ZwWjTPtcLGMGe3fM8wVpysfaoQMNASn8muK60FhM0i9zq4YlTu9lJZFZw==","signatures":[{"sig":"MEQCICW7b1SAPtB6k3QubtbwlTy+pwGvuWMUiTKbgvpE0PEFAiBSFX8+Ag2cXLFg2Z8C/3zAIUXaxA1yt7aKiOPe4Iy+3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYsBCRA9TVsSAnZWagAAxK0QAIyTmyNY3e+cQ25X0KMB\nBhiNpJ3hOzTwPiRxWDXHtnXhKkRt+Xl0GcaDHSFMNdyYBjMIY6Tu6uWh+9MG\nYsGiEuG/5J/m5+S87Vi+VC9rJeoy/shzZATXcgkep5WOv4mKgzBNrO+6PZav\ndKj8r7zV7kJBGBLgClkgnJkgxr/2lc8tY1OcNsxpuXFxExHyT8wiERikr2Gj\n4lEb39quiFQRXzh5GluE79R6IyPMzdaaP0XQU6BJ9UkqRBRWcMSf1CKB5JjG\nWKupikgX/9HxOeN1UraSH7RukUV9xUGLgLEkgn09N04OU5klBbWwhDGpiG5y\nSx7c1epkuxaujuwXUXte5RxXyVYH2xcGFH9H8n/36+jPWwnpj7U/NAMQTeqm\nJbw80QPQd+1t9D7tIc3mamRXD6C88k/YIohrvpJCkPb3u+oeACeCvuPk47nj\nMCEYOwpgzMq3xHpHwZlOmOeXet6iBhc0IJSKck9s+8JWgUCEJm/fFuCrA8+L\nra6YdTeYdAQGdRCD6e/vOOeUGyVXPP6ED9NImmHdIKDeYFF3vXeOKhnkeqO3\nHV6HWd0BeexHK5SXxwj1V4aLFr3YTvkfNYEeOwMS1lzxYO+FrfGbEiN6Mlqf\nFVkUw46WLHSDF+j45XaAqP/bpsFmlAS7DGS6ay7xt3IjfgAr0ttPMxJ80OI9\n+ViR\r\n=NZHC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.265ecbad5.0","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/density":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/elevation":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.265ecbad5.0_1582664448813_0.18383684294850822","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/switch","version":"5.1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80894dbfdf799aa4220189f39fcd3100722df2b6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-5.1.0.tgz","fileCount":35,"integrity":"sha512-cHFzquY8NINZIIaDdA+T3gwBR5V0lRORh6BNq4EBD69GiGQamoz1S8APr5ea1Sodt7Dm1yzkDRbbDO+yoNgR9g==","signatures":[{"sig":"MEUCIQCOvg6VXcIWbtc9xbwNtRyJt+7foE3b5ULsVEGnGxCtDAIgd/Ho2hLefHWuz1but68ICsX+wlC5PqBqCY7uQUfdHBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPGCRA9TVsSAnZWagAAKmEP/0hi40kfGATXSFsdLhv3\nkkNladRb7YjYaGIVMgewYQmQdVBKJo0+IGOIsDXrLqJH4b0y58jFG49yK19m\nqHNLWacqAB/5j61snJtM6TNpX5wpc3KsvPrJdGayRnzUuDZh2nvwnDd9LAJn\n0PxCnlW3h+CupowenNnxnjqWfJm6GJ6hf5Db8AUHrYbL7beaIt1mfo47Mugq\nS/AWCG//v5H5OeWieYkqip2o8iCsshGhsRZ+tpwHYjLwi2t8I0LWRI5JBAn9\n6sHNVW6bNthYxjcQ38NIA565wdC3eaV/dBTsJ5AJkXvRFpSLX371YNAUos2+\nS0SgLBSRt9xbgEfF7eXvbuEGdAdAiGikpANyF1FvrpAzq082BR/tSPbDAKDS\nHCEhG0KC7RDtgs971xD0hRUiIGpwj4Tvj8yzstTOSAwSp5Y5NQPOy+8HAbwf\naTiW4j/CZER1Uso+hhd7TJ46AYPqmnbzaYFAj3WMBdADdB7lAGCmElXdAhQE\n4y5DEnlEKNrwfoxzL35jqDXyytBiJWFSoKo1kYcSI8arDxcIJC7leB7Y2ODV\nj3hMqtMCXldBrSSGmKNxjw5x75S4g5OYeA8Ff90EvMayQr0yaktX/T6W/eQV\ngBKx2MvlOcHgjeRGPSX6M292dAP2AVRavskahhQrjXolWCBORdob2QMKTm4+\n4F7l\r\n=e465\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/density":"^5.1.0","@material/animation":"^5.1.0","@material/elevation":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_5.1.0_1582666693457_0.9383831230006592","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/switch","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1b67d11302b290ebff88c79a96d2109a2cdc9d6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.2cf87456f.0.tgz","fileCount":36,"integrity":"sha512-u30/vVbBEBLj7MdudQsoR+rzFWCwsVWSnAZqxWkA7arCZt4r6S6N78AmkuBHwLUXi89CZwz+Mo+tEwMHP578OQ==","signatures":[{"sig":"MEYCIQD24HfFnl1j+kZgPchWxjqpz8SPEaEJ20dzP0AL+P9PRwIhAKw8DrdTpBpdaVX87V29qbSeQNFdz7QEjmuPeGj+g3j+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPkCRA9TVsSAnZWagAAx4EP/1RHoDifa2u1etBalxoQ\nbHz7mqMMzZYCRHVcKpqDOMKN78aJs4umP4+cPihW+T1Uhsx/MdCqQGJ/9PCW\nEz/reWNYtwEObGaWEZH7ud/MmMUoSfXG++NqbsrCKO53Yql3J1slA5ZeiWar\n/7SOpgwZXIUOAbpp3+XF5ue4g6mlv0lu6LmZLW0WcC3N8hRle2Hx0BedciZK\n3td2JjZYey/uC8s+ef8cVmTN4vRq3KAmU43w6PQAleOyN+wguP86YNOPQHBF\nrQejNYMDc6QVTVpGKPF6xOnXGpUaBssEsjus/M+rjBvOKjCMtz6mYOWlJeCv\nsikuwpFtctHpmc+v7xeDGCtIYNMvDWrs6CJ7wOBrvSnO5ohfQMdxZW16/V07\nPjEl0NHwNexQQcXMRworUZ/12uu4U+kSoybkI9xMaYdQsCtlJk+qPbzge2ZA\nRjGj0sEvGKvIdbUPxGkshPY8sm+oIiVTfe8N03zkKR6MJabEaxCo2KMqZi7T\nBcMr6Va5GxLeWvs5tjcNqsY2xw2OIuqTfR5asl6dG5gHYy9WyCSXUV8oOuwP\nqstNvzkQTt/61HmkHAOtkZ5TGKBVm2/+DX3PkvXkSGMQMY2LQRUKjHgtYAF4\nSiU/PLgp8B7Nhdy+/7nMw7mRhliKC8IkHvn+nU2mRwbn7Oq5EfleIK/4lXDz\nlHc2\r\n=Xmz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cf87456f.0","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/density":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/elevation":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.2cf87456f.0_1582666724529_0.29910611074891946","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/switch","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1d0ffc8484dc9d07cf040685e0728728caa2c03","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.781434a92.0.tgz","fileCount":36,"integrity":"sha512-oYiCHMKlAhtyJlRlqYOVfeEdRYidblJkWjcybWnzAb6LHLSVpRbWDx5ePjMXlyJHN3Uvxa6H8CnD8NH4x4DAbg==","signatures":[{"sig":"MEQCIHUSoCVhzkdV8Xs2qMq32BWZcB5L7fGCToSB3E/ddXKTAiA8XFDBBR59Oig/MvfXoVqMpOv/DZwdDo8QBJYYGnTwnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2ECRA9TVsSAnZWagAAqDkQAIL7rU6AkRS7i32YEyBt\n7D3I9qG6I88Q8ZJOGeLtJaRdIGGWhHkvEPq0VZPBEql0IMLNYjr2uPszCLeY\ntodRDLMz/cPTwFyvDeMKW5I5p7bmVutZpxJnjaDUXUkSpXumOGhhw3NVbCSj\nIuGsW7A234XGByCtsjZFtR3C/0RZ8jlawhFU48SPsNeo8+NAWGdU5YfOeuSY\nd9+kACPEhJZBiZ4Yffp3kD5QMRhyBdZXnpjQQzU1hQFXjGXIC+80WxLCa1J+\n2xP/jQ18Ox6loUy5/8XwEfsm6B3hitpjcIAZXr73isl7Cf565TqXFJo76KI5\nWnuxwAqMLwP12yzY242jKulWKII9DA12CRM9qTnDw9i/4SZWtV1bxl7hF6ex\n90P0ULa3OcDMP1B80v3PaTBBX5OfHzyOnEtm1XoDQm24gCUDJv+SDFLIrevp\n50XeQ7+X9+X2JJd7DcXLGdBqiiFj2C9N0EybQnGV1x6YhnRPidwFDmFLc0wV\nBEhLpI5DJ145MvZNqFpMyqnkTPZYU1rwTmGKj6XzMnutfzws4f4Sh8ciidpi\nbKL67niq40yvqPwSTZS2EUOfiahfijy594eqRfpYCoUbmLMjYpPvWeBcq0py\nr7UkQtIkKe92nEN71wYLrk/Dgu3mk2FhOif/seTCy6TRz5TBvNivR7cb1mv3\nUud6\r\n=sCoU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.781434a92.0","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/density":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/elevation":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.781434a92.0_1582673283761_0.20254383439433088","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/switch","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9f0a09413820787d41483d242d037a493497e07","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.d6f60c98b.0.tgz","fileCount":36,"integrity":"sha512-9Z1JfX/XdbwH2CB/Yro4imHJtcIWEym16OdAWx+eo1K+gCZ5P3sOrL2Y4GZWSWzVehg5aWJ5v8IleoVpjKVzrA==","signatures":[{"sig":"MEUCIGRTC4+zLpuTxKjHqsex6DntU9Cw07JIJQ4bRE384hccAiEAvpnEUscHMh2yyHi2me7dCb0cVqJtGYuLck2QwgMkpbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY44CRA9TVsSAnZWagAAY/kP/jKIABGgbApsRJuvB3vF\ngHZo49VeG3jiplM9RrS5gWYsVYSdmBklpmCeh7SBd+uTEDTy65nIbhqVC4au\nhG0Qj7Mxr3obRxqAcnYa4Z4ufdQNKUxFHGneUrd1BkuYOncXgYSY8BC1CWhw\nYXCubTuMYNVYozG82+bI2AVKsXoQ8TTmPmQnHV4dkTwoI2sEbkaH3J2skMXf\nB9q/7TSClhzvf5YRX2oIBUnGBbCk51m5l+87Di+5Fu0bqsTHwhueOHPhoatO\nll7lTVLcyO663gWzIJll2/t/Q3/Cr1+fCCsjAAsWjY6H+LSU3K7H86RsCqOc\nKESvigNs/k6foOv+qcCKOFRDS1fXiDWnt3a2LX3UC5Qu372ZLI/El6GvLlz/\nljUR39iR4vLZjG8f/w+SitwWZw7WrSbzWnyyk7nkCSewTDz84wPfhaakNzPE\nSfpwahGlG3WEQOsqr/gBYIUOtGIgGKFhCrEMNbRMZIAab6y3//an+h0Mrhf0\ni7lZbj8F0TKbVBeiDmsRh8rpg8nLS/WOPeSElz+k+Oh5U0rPlaUYMa9G2G+I\nqcpe7G8c5Ej6Elw3EHuPmwJ+I6vD9T7dXVDTpelK4Ip7QivP2MjupJKkihyq\nOdPJFF9hNXFfzq0sqPlOGY9asye+Fhmx9O15vOkYpArLk+OeH/6tq5eJWgvA\nM7pJ\r\n=MEot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6f60c98b.0","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/density":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/elevation":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.d6f60c98b.0_1582927416226_0.5894688147885947","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/switch","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05e3435b25e0719207afdf5734969f2735b88e7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.69edc6e28.0.tgz","fileCount":36,"integrity":"sha512-J0saCH17vhzak0vv8ND82/jwZG8sQU62YOFWC0zfQiXjdqtMQeFeWgNUZKUucZRUtsKY9z80/ZojFJDAXqU0ow==","signatures":[{"sig":"MEUCIQCB7IGv1qSceHHcxJBE0nO46/PZHSfznwuqXodSNff3nQIgUOVhDrlunRyiuqXlyJ4Ljh1Ht3IoisRX69QC1k2ufgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZA9CRA9TVsSAnZWagAAV8QP/1IFhzTiE00C2Z8W5I6S\nSwxFiKVidbRjBufMM5/g58nkICS69u9+hkzbwB5U7g7Py/8uIu0GXQ3l7ha/\n5szfx9tbG19uQy7nziz/40Hcb0nKsw1qXLHwpDwiZtM0ShFkEKiIkiENrYtI\n4rHBMN3AolHeJMrhI5zigOLR3aWCssWlS3CEFaaGsdBMUvSzcVBAHXQzQ2FM\nXBb7uJIEpMXBF7/z2pUFYt/gG0MhEt9mW+oVgjjFqpvGmuBQ4e/sJyC2D9xK\njXwjjQGaTlpTJfFsI0TlGC+o+xRZVNSvNQNpbBzjJi5pRL14+VIMuSTWikmv\nbBt4J66+UyoDkTpxpCXoP/KAC5EXtpSTVnruWXVxH7AMmBK5684/Oz1Rk7jo\n10RovfTg8rk2PHc07PeJm0jbJidIpR+V3YxT0Hw3RbgOKERvd3VmTqq8epVX\n8LMtrJQdOX+uKEBUECDj8oXswLGPV9paJLv22jdMN8E9b2vfk7Y7wouh06DR\n9uxe/f8+R43DUCO5SECXH2bSUpLTt506gdrz6QfE5+LRYbYnxGOMfKDvu5M9\npLDNVImjZkiJeR1VRGtBclq5KHneVnzLjxMrWH4eeD4BZaGfbbC6sj1x8aII\nITb2us0JJjJF0tqG1DxFiUsaqHN70otxS1sh4b42OL74TFKC81ZD19e3esBS\nIAMA\r\n=WSkf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.69edc6e28.0","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/density":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/elevation":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.69edc6e28.0_1582927932592_0.2520328704885839","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/switch","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b526f4f451af473b6c200619c413683fbc60327","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.9372e4939.0.tgz","fileCount":36,"integrity":"sha512-mSRm75Au1n9EcmYXDj57NNsvesbfmLKXQPtPuXpYBSwSVSfDfxNXRHKv4SjIE/L2eMXPHjMnpXMOuHFC0w7CHQ==","signatures":[{"sig":"MEUCIQDYIn9Qu9HmS9oSNyXZpwyHqcKq1ibWTzockVGNkJcnXQIgR/D50+zm/TR4Ma/+5HW9p5h88UgJn0fpw4N5SCZiFsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqujCRA9TVsSAnZWagAA7DYP/3zBwNkFAdosbdTulcEX\nwjjSasNWb7I7fWlq820oGhHoymR0MtFTzLkGT9+H9hnj4R1TykgvgwB+YVrX\nRVD/W1CuT/vZTqbUXALnep4Nb7LC/e5oYEZL+nykOMGhnrJN0aJM/uYh9DO8\nzKf5E87RP70I5Cj/aD+vrntLb2K4zJLQYlpKKZK2dTjB9wo241H0b1NVqhqc\nUclHjJISNqarv4BNQDut5qE5UYNx/I/Iq68fWpxvoa2h6Qzvy0rfW+eij82b\nZRQPBLnNewP13OptXWNt1krEfQ2y8tMXGdgAz+xzWEuIEisrrEhzTqEnQUeN\nqauonOp55rCFqiPBiCc+QKrEdJsdLghVdMA+cRNIvAMF5ub53bjSIpPQBFYR\nhSun9gI5U6vOVSDJXyV2hHpV/FLlYmCWoRA3vwvseDc0N2qsmQyasnUafIx7\nKwb1CWqIEndmIlYoljEPPuQvdXzsAPzzlf0oNOjPRi6s/pnRiiCgn8bEOPBR\nFf8Cjnnljx9KC1YIusI/E1iQyEK7EIeDOHS0iExnPrRh0KWSBmcmgbTosZ+c\ncLvaAV6rHPm3X1M8BBaWPMXvQcGWcOtTMWlKw7gtd9p8nIC6MhRkJYKCl0Rc\nIjx3kdR/1D2a5TjTZ4fSTaca+XauPQqoN+kSlzw0nr3JvrxzBZ9Jh8hLMM5s\nO0yF\r\n=cOyS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9372e4939.0","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/density":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/elevation":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.9372e4939.0_1583262627364_0.5226550356857713","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/switch","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1bcdadfdf03274b09f86aa00bdfdf2d63566723","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.9cf5e9842.0.tgz","fileCount":36,"integrity":"sha512-g4DqUrAUvU7QU0fXsOK7oLnhJI/n0/ovEe2pFPoant4XKEohVY2agSE4LGJbD9pMT8S3cByzq55UMxM1AfMMTg==","signatures":[{"sig":"MEYCIQDdtc/spQBdLjkbryk/Qj+xsvrh9/tYZhTvCNgifdmR/QIhAO7UYHs4jiYxv2ViK5SoBCnJFxIPGzo4VNjweYAtWZ5N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXud+CRA9TVsSAnZWagAACcoP/3KvGaKMzWzIEyLKmbY3\nxXaAfPuPNC3vSVVIFsHmIyJOTbhKk1FzpJpbuZ9Oap6jbDtboTyWX5n7soAH\ndYjFzsbPkPN4/kpceSTkPdO7MZBjHfPHfjzw7nfwKh8VtJQnzSziCIlmz1tO\n7a9QlvEqAiDKTjpiU7BkcLspDYL+QzK75uO9hHglnb7aZE6gOsM0dkXPPyIN\nKs4lJgZ9vEEa7HH/nH1U0mU6dJ1C8w3uWbttbvRib5B8wBIFjQ3SwVk6NzXv\nkJGF2GA++gT7dt1ES8boSroTWgN5ru7HHHXubslziL9xOK0cUb6AqhAwsaNP\nbJnIgGa70WJrlSMYjuGehpI2Kjsgceq7Ke1AajCmrhYeDx+1BuB8X4Nm5L4N\ndxznQ6EWwth8PzoqDQb67h/6Uem+ya5Vcfn2wBxzUN/ESGkxtHEXvYfE5CCw\ndf38l3cdOkE1PdBbWMsWBTfezcegH7EjcZuEBg7E/oyN4FFEINHzaC4zT+j8\nVR+lRYlAhkQcBmz8ggmGqi9sm9GvKUmShv0RoLpiHUsRy+raIwY8pc7KrEUM\nZ820FHZvhTc4hs/+7vCnFnXtWlGWFBL8K2htIqkGkxGFJtX17+YkcmU0dExR\nfh0+RrlD0+bf1RFFr3bSf3asM4dCEoZJM+ursktpJFkjvCTTr/IsWzQVpU/v\nrFda\r\n=NJZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cf5e9842.0","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/density":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/elevation":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.9cf5e9842.0_1583277950327_0.0003086524841870997","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/switch","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6561adb2c47755c73523d156e613f2e255bac64","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.3657f8863.0.tgz","fileCount":36,"integrity":"sha512-cimimGjboPKlo8csqoy3xA8Fcd+Upd5s7A8htFi+G7Ym9bTRM2Mxm7A/RahhR5xjCoQ/RmhfBG/6stNmOPwfpQ==","signatures":[{"sig":"MEYCIQDiU5SRfKrzUogO9lbc+WHWFf8STNUKV8hojkCnwaNggAIhAMf3H3M2ZoZInU4lXx2KVLZSwuhDXdWHJ+n/AyNfrv4B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+juCRA9TVsSAnZWagAAvKkP/13WiYtmpKxnm8aquzSn\nOjAlN6I2XlPVl+JWz4tLlWN2Jk1V/An6fI8m3POIXLg1OAGNutrf7cAyqc/H\nHpL7c1X5CvSwZEMUW6kqVm7qxYV+1jeQ8LWeIXNY6m+R6Xr+skvpb0WOGtOr\ngm26sAvImoXm7pwk59+52lI1LUe/OYpL2vdQ5C7Y3P9L0kuV6NFaiTJfWB8J\nFv6zbyurk7qQz66qWQ9sIsVe+v4hd2hTszWUpuUMMhIvEhLKF+i16qRMu9an\nWgMwGH2uF6iTl9BtYYCIdqNC0Y+ly8/qEpDOFNioM2HcAJ18vl2EKYhlUTbV\nUqVkcf9YHV4cZW6pF/d61h9UsdrHxnkuqd6k/WEgWo4qVh4bpfL8DDUnn8c8\ncmaaeOekeAFtbD8P4c28IJjrwMz2cG1eRdzdTPDK3P+s6DYVImwuqg35rw//\nOQRjX/UKoL3jiOJ2U+Sz6dA9T4DKOL5W9YNTyLUS1BiGigFz5wluQjz4FmWZ\nCSYK+SeE5hGFklwIsBuFz8y9iU1K7JhQ8dZbeQ64e6m+HQy9iwh34i/G2hut\nYAAdZqK1wgSEFVdlnL3sEn+K1PpLeKZIRyDRHQ8MEl5UQvTkll7xdSAFx+LM\nnsUvkUWd/7+oHGFwb9NqcM7W8f63d11kx/IQhuQRWzhL9Z/DwUblBVTxmsQ1\n2joN\r\n=2A6J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.3657f8863.0","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/density":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/elevation":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.3657f8863.0_1583343854464_0.5119975626263118","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/switch","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9befce66d4e536aa7c417eeb443383c6e3c1fe78","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.98b843417.0.tgz","fileCount":36,"integrity":"sha512-dbq4Ayv1kt8ZNpihSJTa+Ct8QRp9cbeRXdfkkr5m6qjfiYo3QXG6rXiT6R7+doDKsy29Wq+6ePvlTjV0KBGAag==","signatures":[{"sig":"MEUCIQD56RtEjRSJfAWFNcA9I2eHQpQNm+B4TlmZDFMFOW3NGgIgYjlTFA3ixOs3UFcF9H7lFYsnGvAFnnZdPBOXdJvCmHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVsCRA9TVsSAnZWagAAJ9sP/Ry5etaUTk3kw5VyNY21\n5dogGHcZXhHdQJZJjb62AskoTjbYBuwfHsEI9TNDAR5NUHp7PZ8dZz3CzTL1\nMe/Adjk5MolQeoCiH5iHcmznogBdgYJuilxfKWpnpBg8pySfCupMtpDdNi8D\nADj2XR3iruhP3QP+X9coY7hDOKxj/pCN9/C/IpPVVOlbaeLGP2Is2Nh03NAM\nC4nabkRdWH8eOp+jdp7QDvJU+/lk+zZgXzZ7a5k9fD8zSNAX0tMR00YrGaxM\npe7rQQafneiWNO4i+nsqIY/hunIrcmJ1Rmfm3rHFwXfcfsCU+f3Z5Yf86Em8\n3YOPNlEEXsteLVZp+m4hFO2NWDGbycpQW9wGZKTHgXRc0lKLjogePDYW0oSv\nZQ3B9IJTOxJLD7Hb3RXcrrVD5a3hH5PptERknSpB7gcj8waHcLDikTYPgni+\nEnMghpsQXcKCvV58432hAGhycKKA3gJLRkKx13JZZqncnr7zZ6XrPPqs4IF/\nT6/r/4TKh2k9iBGVDublnTlEPIcm6wGTw+yemaJ/JBio2Il243dr7xAaD0AP\n/j2YLRO8oe9rtmdHHPHbnDH4btXIc+OZ+M7U0UvRDLhkYOsrFlWiXghmdiSc\naQWjJ/Y33EdvZTX8DQ0Wh8uhHLMiiUnpaMC8w7JeecpCE0YuQgFRAKQdHROA\nvVwi\r\n=/tpf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.98b843417.0","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/density":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/elevation":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.98b843417.0_1583433067902_0.47444227413379614","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/switch","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7bae0907b1677afdbc22ebc7d0bf79c799bc26b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.17b9699c4.0.tgz","fileCount":36,"integrity":"sha512-4ZNHY1Je96nnHTe5aq9wGmloLkF68zHTNM3tlWVWBVWOnXLU7C7NfrMWKHJ9Z49g1OsvEuHNwNZlxQ3c98tWsA==","signatures":[{"sig":"MEYCIQDWSzMI92ofleusygZoIV0NR47nUTf+LV7jvgsSkF8HswIhAJp2Ojf9fRV+/akKSAr/LMGBO7earZMTZ+Cw8YfOKwmz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFvCRA9TVsSAnZWagAAGRUP/1ioynn3AwDFKPDC4F1B\nQLgAxI75urmVM6c9ZA2ctY035PAjOqVuKINTX0sihaHhsZN5AnIRxrUYA/Xa\nSZzX47IBaqrPyr7WurY6dWRPit03feRT2jmU8saXka+het4LKI3S125QtHQ3\nQX84ou0/WOgweH4LiGRy9LxxAHmi7o+XNdcb9aHNz39iB+wJYa2kcYS9bTgw\nHn0OQB0AWQQLVLcy3JhCuwb5YOI4Qjmxb0VS138xZsfq17C6mTrHHAZI+5yO\nGf2+Chw9KlwmDglHmIO9DObfS75qUZuPdHtNZW2HQiX7ZxhyO1PogBFmzQK6\nZGAOzS8GaBPSA6IPTzocrh5qmVBMj8fWe/qQUHlK/FB1t9Trx8vgek1f0THR\nwFpsEE5LpdAA28HOC71NUKe3Zw0nKwcpxooDaXq6Qa2/rmpx+aWW0acJBoQz\n7xU/gWxSnTf8EIPf/f8hBEuDOSJsmh25ajrk88XNYLDPI2kI4sEqR1W8fSyR\nxvnIk//sKnu7NFYWVLybVLK8vUjXBH8biS2cUppA2P4VaAKGZYLlC3OfaboB\nyxVOAFD/2uigiUKBYgsYuevictO2FwanjMZL8UbPzT+iiQyzxSDqvO8VI67S\nSrsD6WIVnBMJX3WMExngv/XtF4AaP8REHBJasPiCQjKpw/2pGZXj043fnRMi\nrY2l\r\n=65Bc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.17b9699c4.0","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/density":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/elevation":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.17b9699c4.0_1583436143142_0.048276400436476186","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/switch","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5837d9586d20a6dad93042115638a36ab111b5a1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.6ee035572.0.tgz","fileCount":36,"integrity":"sha512-eWdb66ImlAh0laHpUkozpLK1x+y5SDKG7O+zQCGr8vWGwK2kvZIzc9abIlPDVsUxxizZ1p0kg7g8fRjKjDLFWw==","signatures":[{"sig":"MEYCIQDohgJyudOG1DLmAwpiHZkVDR8Imwi1m40XovNz8MV2GAIhANMR7YDERb5ORzsJUQ7iOudqrsw5vN+CusjBPtLhzkyd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnL4CRA9TVsSAnZWagAAoaYP/jzUzfwdYw2ZiLLxdZ0E\n6JuximV/IuQZVSop1eBBWQvSJH8nwNxoe/zYAhnWsAUOM40t6/YAUZRVJjDx\nPLn9FGmLIVu8FyR7a6EuWalVDRdaWZ+YsQAgLD8qg5VaIDt0YCv22FnJn2VK\nB7I3zUS4rBjomOnooU/eFNeSO5j9MbcX4kfwe4bACppxqyjRRRewCTkOh2KM\neVi1yih+gebT0VJwvG2EVJOBEwa4i6/E7krHJnTp4pxfkLTLTIjwMz5+B+dr\nU31OaUism5blS326oEIaZCTZbNBDrjoXswzFZL0GRQHQPAD/3EPU1WiHOxsQ\nkmacmGlktDwcywXmqVued8ceOzAtAY/r5BneCP4+SDANIv+vkMfUx5YsbmZ8\n9PhWXxSFBp7jU+9oT0Cc2gXyNk/pNARcpXwWUYRnorykoHs0GqSCkNn+FNRD\nJOspkUL3ZVh4AiNuLhphKkzAC647sjakBOQu4zr/kARyRfjsnkZKWQezmqbT\nFRTmZ1Y+YZ1pWN8JeXh/qBqFKWmdW4t+yOSMEYJ7djnA/5EbzhQO93kiMoy3\np02k5X5pbLGZlGbsEo4KzdXN4PcC4CEgldhXq3RUOUdataoefBcYXT3J03d1\nbEoiP6gOTMwhVufkuNRROYO24FSQddSj78UGM5Zc1nTpwL7HNJi7fUTY6zL2\n67tc\r\n=axVY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6ee035572.0","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/density":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/elevation":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.6ee035572.0_1583772408216_0.8950433165164668","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/switch","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a6639c8bce6c10e56b1d2b07558d5e11136eb89","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.bd33cb56b.0.tgz","fileCount":36,"integrity":"sha512-JGMUchSwAY0VLXHbeG6293dF2LWK/l61Q46FnTTURT3joJRQ+21Xtpx+QFEINqM07sKrQULLLnav/R7Fc1SRKQ==","signatures":[{"sig":"MEUCIQCnkCqhCu26o72Lt5vmdPwa3cG2JFlvYKeiCDRuma68NwIgDSW4b/5klLcWc62jSWo/ooMQ4CN5XrutsCGaRCjlBXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZns+CRA9TVsSAnZWagAAvAIP/Aq1VYfvJnEIZ7Qjj7+Q\nW4jdRNGBNlPBbEjA0TKYvIlIP1rkbntuMq3nBWqq98VZgcfyn0lNvsVP1aya\nQ6ApKDw7b2sLdY0spx0dkByLpEAZnXKgr74GLUaLDVM0kq+b3mYd2kXZTbkk\n+NheU1QxRd/JXV5CELItubLuHm88JoqTzEXx/SGnuow+/VADuyd5JpGtEeH1\nAVwiOWDWYodDibrq+v/5HHY1ufLFrBKEEqdsHKnpHaT7WotMkfwvnSHoehr7\n4Gg5xcg9SnurkosQBB5k1/due39HJZZIFBJBPSqRKnQhvcWU74uhcADQtQUk\njuOXtit4ErGL9YSdiJeM3O149GlP7gw/ALLWyYLg+d39S1ofp7656XwyH9Iy\nr4PcLGWSbdn64CZvUxjfpZRcZHGno3UEm+8PxaFR+XYydXndsXA0u4YqGZ1p\nHuXe8lVfgwD02s/XOKJhqENmxuFrjsnCt66kS70L3GlIJ/r43kmZGqHYcaV8\nfBePdyN/tfXX5CwA9aA03QYPv5W/MfQJSDm6NpPjPP4+xk9zytRWjRCzYx2L\naV+JDH/mcPtxgyeC5vdSHa+H6W12nxVyJr7Sj1dam9zBhf0fKTCxnbeZJyBU\nHqKPANseeBVihNejSf3b7qjzmrG2hKHDb7z+NItoDF+g5yNYdZHD+/gFde7o\n2kj9\r\n=0HZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bd33cb56b.0","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/density":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/elevation":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.bd33cb56b.0_1583774526248_0.692461958747981","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/switch","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f9a55fb2a8d5ba20bdffef87b0ad66b894e1182","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.26c049afa.0.tgz","fileCount":36,"integrity":"sha512-npf38T/XqVa6e8Nzfe/jK8o3FOOEBBGW2wykorju518Ie2ZpeprpXPt05OLrMi6hpn7SGcw/oxZs9tZma0TQLA==","signatures":[{"sig":"MEUCIQDNf96ibTEMoaklJU73aNKWehASLRWRjIzsv2wk7oM3QQIgd2cUGPbvsDNjHJVgsu/m/kHCKpa5Goa3ogMh6J+J+3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gjCRA9TVsSAnZWagAAp+oQAJtkVcprQBZbfuGCFqFl\n/A4UFVhGL6lTj4jA6gXcmLn/Bu2+uJnj5mnqkgFzzpMXn6q3R3QbYWZSEWG2\nuKdmlAXAFBzq6ydLgkvZa8XsT6PoFSWOVOoy1pr5+8YSySDguPZ+ZJa3M3q5\n6iPo3hEDCsK8a4hdxdYdk5U9c3lkBG+1IVis17ROctIQl5YKRPDlPucxaQKe\neannO4rdw3raEmJ9/mFF72YSy5d6MZqtdbAUE3ZCGQKOce4rPDm/aHESFpUa\n/EjfbkuDDZty/RX8iyOOC50SfUaAYt5fnu2trlWty395mbf/3idr8UP1v2ud\nHGYANDoOnhM9pnP9ZFV/Eh+RFbIgog+pY12eHVPam3JACrnO9GUXzr9g1v/I\nnIUQFhLvPdXiWpgugf4+dXG+Iizw1HUD/q6Ut65Cirh0R81sdMfKvgbhAOEG\npoADJPl3lhyPTcxnRzAtS/V3KSon+GJOfC83m932qkfoJvJpxW7k0uBpzHja\npx8PK2nceUDnrR5ZEfQLTlCPhsPElQsnYMOg9NgyEf4z5e/gPQUUc9ekM/PZ\nFCNX7D1kjG4o/z98W/mHLrOqxWJX0ohbV4oWZfHxRewzUPnSnvDmnge1qmVq\nhQBybgXzyelGRF2nQxzSY7rXENtJLTKCn6ZcWJfWqKKlmVKgp2AGDPj/2lnx\nI87T\r\n=rlpk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.26c049afa.0","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/density":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/elevation":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.26c049afa.0_1583859747000_0.05551568779215632","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/switch","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"038eec18edb9ed9484346c6b31f8beb5d3a8d05c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":36,"integrity":"sha512-XkfKSiKFcb4s5oq6uedyXB663rr3Qu72GvFY2pd+8upE7xoDAO5AAh4oRn9r2ji0zTREoiuq5jYDPt0+jW1TZA==","signatures":[{"sig":"MEYCIQC6OJqfcdBUZB4mJYyzoYTjvkDpH9+LWmSFcZkbDGOLRgIhANE1gwJNgh+3DxNFkVcbzfJc7GFBQ67ogvd32br/tJqq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/p5CRA9TVsSAnZWagAAbywP/1DUGxtfnluQFSemXsyG\n4xsNKeDwjnhr9q/23RB7Y+kcT9CSuLLR8bCHCgmDAFSYy6TSH4Hw3CCaiv5U\ntWqJuQaT0PB8lG25+7FbezgfFwlMzj74T/OkyMqTuL5/SPx7RYZxaB/RD4Su\nf992LlZHSMKkIaybTYa+eH608guBHGLfZYHXcPC82i7AYS9T/Ic5KMv5WZ2+\n2X7iw1A6jJBJo+iBHuZ5yvezU2S+nfps7xXSN54Ga6tzNS8CRX6lZoen3wim\nCzT6VLCSptHyygMNW5GmG8DAW+jbBd94xZxMapCI6R3QEVKCRgmKfo+f2Vnt\ncpyO5cIIsgYfI3SlpivUxQdZMTlDyTqY+lKCRYBQ58hqBWH9e3gC8eTyseUU\nMyXUul27WwJWyKm3qnSH17pMLkh8nJF9NiHaG1vlSGAE+v6NpRaTP9jbpr5z\nlktMiylOLBDtzoxFvWSfqxHGNJ6R1calNxXkdb+W5zXvfHBPI9VzD2EHJR5D\nPWKLLWe2h5tv5Olw2Qllz4dOgD1cOMkjlgCeJbAxCdROLk33xaesgKBUL6Lg\nL9ZoNDmy3ekNd86zApdEYddRi22ZBWVXabu6arIIpg6Vhx6st+EpSZbdqDpm\nHAW0glX3sMHm1ZkjNvmCK+B6UgKN2LvCQla+K39K7W4BdzI3ObLjxqXtd+IR\nPVds\r\n=V/61\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1db5c9fc8.0","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/density":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/elevation":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.1db5c9fc8.0_1583872633294_0.9759238169345361","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/switch","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26cc9c525af31f724c4820fca6626a0d91e8ed2c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.4971637f4.0.tgz","fileCount":36,"integrity":"sha512-UqHpIfTfmvElpur6fSVoEwqeYqAL3IcRIUzwFk/FaOwzOh/vwEp6owwfz3ZXOMtXd1nV/kjc3VfKna1FJ8X9pw==","signatures":[{"sig":"MEUCIQD2c/9eBL0JujI+twCXDtwqmOTAX9G9A8z+OI9UGfX7hQIgDyA0hEOJ5VnrCT1hcIIQcyKt/7kKRaJ3JharQSJMXeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuTCRA9TVsSAnZWagAA2cIP/3dmB7MizoFn/ljImWzP\n1uQaliPcI6CWHfkafG+c9pp6wtMhmkXud9I19LfRSNK6KkeZtPXle7dIPXQ1\n+AbGf2hmRRiuqUUF9SFieh9f7amxB5bT9cRgVySjwsFA6JaGlgtBHiU271S7\nEV797JG8+9P7IxpMEisC6u8W/i40Nrp67JInpecIdVCZCygY1qjIbAm+QxKG\noapNMNeaFPxr69C7DL5yng/0GE7oJoUpl8hnLOjb+ArP2J8fO4NRG5RUyTPV\n0Z69eiF2gcctAfU/hBx39iOtjqfINc+46boJZRdzeWLYiCf08GavhDRiyBoS\nxf+04lLsmJX0kjS3EVTAcSFT4ty8TuR9D38FJcHSFnADaNoYMrnCR3ZRT7JN\nLPqcG0i+szfN5EOMdX2HhS1WKUoEWJGAUsf40dzvYt8AqQ7BOJsDuUdEAoWV\nt7Ev39jOL/OcwCvv8AOXeptieAUsBivOw6bgqpsmWzXJ39AMcRxITibuR/i5\n+PBpeITxPKzeaciYmgX1GCi5ls11kp8dxhfw+spTb474HULI0Tym1Dc6sU3i\nWU6Q2FQPdoG9zF/+1qWkruswwNADO9rJBBuyy9VsJ8+k8Dha/u5fmTlOZqBE\nXLBjifwBpTk+5Ur5PJThg0W5IJLXC2MGOkzFtnYfPm6pEMtAVZrRIWSsFcJD\n0yZk\r\n=m4Q3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4971637f4.0","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/density":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/elevation":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.4971637f4.0_1583881106867_0.19607714510866536","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/switch","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2938069591d87992509c945c5c7abbea404cac99","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.1ae8130ce.0.tgz","fileCount":36,"integrity":"sha512-J01WhL8h6D2GklANnuSM9A0VSACY6p1/hkv9kzIvvB5ZsDE1c0Jw3d3cdxar6y9XXx04GdKCRQ9MrF4Or/0E2A==","signatures":[{"sig":"MEYCIQCzF1Br89wzZ6nGStm6Z/gjp3ki6imws7kJixPH/eDnAQIhALkpK906t2Dju6YN9xLgWlLGOWpjxLuHEPridVVciy/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB09CRA9TVsSAnZWagAAeIkP/2OlQikDNkBrP7GBGsfv\nuNdO5KWAVZsIV/5TdZwCIf5GmSWWPMUoKuS/AOaJ/VCsMeKzZXRkmFovDDt7\nzLcuL5oCxKjVZNMPV52NbIF94Ui7CQc4f+bN35aB4vkIuIbZK85U5WYvsuRn\nvCJM6Yz/X3o/T+5bfvPBTlJC53xl4gZjfA9Tjb+1EML/O2DyiAVtygsJxJwe\njQOUuUaID7mVZFl4MhSlW3r4pGv/MK70BeRJphV1JumQf9yRIfjwQ1SXq9IN\nUhIgJrso8ClMWXxgf/LNk9SP5ICXCIoGZjPfP4VMJyfB0sHjjwJo0OkMwSUk\nE4F3CTya5g9znHnaw42DaA5ql1U701fhS634U2S9EfUW8+RX2XKXDDrd0vb5\nTkF8qa9S8IlVtLYHpYsO5BYTGbaAxIAWApUAL34lkb0SBZHtsfoUxptXYRvm\nA0iqcUh67O7ZT9KnEPzMweiPe/rxvZ+QMR+vcp4+RagxYgLhy3Ns1Vn14K2y\n7+xlX6yW9UlZey/9bMcVJ5lSgyFIpwBLzbsFKLDmEnaiLPiWMyyqHQ5wzDu5\n2nmjFV53xu4Htp5gYQjdoLr9xVd+YiMqxWzj/5RwI+N6lBctFxxqVXOAsjyA\nmZAjYfx4eMvOntIJzCYPDpQ6vDYbg2jwvLke20TCJTN5QJTT/ks2txmwvr96\nc6eW\r\n=s7LE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1ae8130ce.0","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/density":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/elevation":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.1ae8130ce.0_1583881533620_0.8734891984722601","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/switch","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e4333e1e7c1fa4091d01b98f9fc10a1d516a119","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.8639c2690.0.tgz","fileCount":36,"integrity":"sha512-1sSl9LGHkUhbxrYQRZkYU7E94MM/vCHp69+lHpogClADxI6JE8LNLGknhJl5ZUwGo7zBg1jTemVO4xDT2z8WhA==","signatures":[{"sig":"MEUCID7Bv/boowKNfw49wDEJ6C9vBQLDkQYr29eyTxYmc0+TAiEAizbY43OuzDqFtFtyD1tNJd1o3Ef3TKgZN3+Pgww8zi4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIY0CRA9TVsSAnZWagAAOSgP/0njiZoUFVC2syo90QsB\njsotC8BkbA2oVqEiydzsVJ8wbLzpTOBXbtgyN3H3QPKD1ngnunxBw21iK7NF\n9JdJbbyN+KeAqWfPoaUJf+1RFdf0zlFaz+PTNHWyQVpkviedfsjY96QuWmcy\nBG/BGgQvx2BuGXZpe0j4kC7AZyM76mNu4MaSO0ghbLZUCt1UWWyQnixJN0NJ\nhaEACdks6u8Z+k0ybdKkNYeR8MPzrmp05Q6X+mmBzVh0J9YPVXaXhohu4nlr\n816SsH/Cew3A6Vq5v6wI0DefN7Q8BKPfzrqa0XmxHVAeIPzYqEpddOOOQYnD\nXcvYMauDq92tPLw4DDW+r5DSSYB8gskIBHmVgke2KD2BoCF7YgLGFRRJc5Em\nymJB2Cym2Hz5Z0xR4Ec7NHQ/PPaKDjp6WmvgRHRlpkXxKEqT+GIHubUr7DOR\np92j1cI1C+uNcLeNL+377Ix0maeitj6vQyCnbOBr3jV7Z/lIEVu4zHzOSQ1O\njHqor+Dwj1+UGh4+aErmLJep4xVFUYYgXuLavKY0lhs8iz5qxPPc6tWm5WD9\nPvIKtJLVBEg2C5DCjFE/PgABy/b7TPz2a5j9bKcfruYWMnuOrDGIkBnONDa5\nqdry4BLrrh+jZ4c67Yo8BsgLiqb9kVUfHCpv/SOKqggWMMM86v1nABu2syiu\nkbOI\r\n=qg26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8639c2690.0","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/density":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/elevation":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.8639c2690.0_1583908404501_0.6602605084679438","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/switch","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb89f816d8dfcaeb1ecc5b6caf4caa7857dad43d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.d5808057f.0.tgz","fileCount":36,"integrity":"sha512-HEM52u73wpeu4DkLurSRRxx3OH6ShREsG1+WqyW+ri5s/L0icDZBiE6iXa8LOj3iNbURu9nh6VY6/XXWNb9++w==","signatures":[{"sig":"MEUCIEhk5K9R7oVFG0+daTLakwm6XGJU8zDrPu719kq0YAbrAiEA7fgeC6FI0Lwkk89m5NTozCUoWn3RaG5ce/GT6wT8riQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRD/CRA9TVsSAnZWagAARZUP/2Dnz+3GqjP6L8URYm6L\nC24j57NX1KGtAIEYdr0RrZZWR5tuoAM4JG4DPs+IKYfR41FjTkD8J6AAjiZu\nSIE5wa8mQt9bnyxxeJrm19p1qroC5mbv9PNqgdElgQhUbvWMrO46Y4OYo7DS\nR52pRN0Pia+bQ4NizuMS7OHG/RPKJRqQ6dwcSPFYUN2xH+7OHp2GA1xmOwCN\nY78urbroHRwgBXHrxg8go7R34dq8SOY+agIigBthElPiIOPz3RP2lNM1Uu0W\nSPKl8Epy1r60W6u6cTRHFO6RUcpR1X6RYCJ9IXW9DXi4MtixVhDmd35f9vUI\nnhZF4NsdDYxSckJtmQfdS77YYeGfIl32ukRGS9AkgEZ78Z6hY3JMjJWnjGJh\nQB8pndtz3JwQsJlrQA64y0l56RTkiVuZxbWP8IEEzgC3cc/tRRoiLZnjj7Tx\n046B3+zulxVZgzdjtzhGXpTgmL6P9DevsovHtAChN+XUiXqaO/CsjEta8PLM\n0DS3vWwEX1pH7DcYLowLpFG5RaoigabXZBGN0grxpeha5i4XSwYrJQEmmBIQ\nTtG9LhIuPq8DaRtRyimxH0NMtYxjVIi2s94IVa4kiUKLmCmPEotdKgQ602EI\nG/deArFd5MeA7fKp7JOKigVdfhlQyLI2kdYD2NuiC/PQH3UGNf19Kj0kQ4Fg\nmVy9\r\n=mV5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d5808057f.0","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/density":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/elevation":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.d5808057f.0_1583943935276_0.9553966380226604","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/switch","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cff7b247f60c7ea239b4dafff4e781f246cd7a6c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.b3f58203d.0.tgz","fileCount":36,"integrity":"sha512-gMoJoVkanP7cgLcW4H2VSddVBrEtvWWjpoOu3YzmA2SazjZCaJHwZ/TY8EZ+Q2J3BEnWk3cHG6ZyROPbxDJspA==","signatures":[{"sig":"MEYCIQDatoHTy+2Yp9JXAr+GffEhDFt9s5ACV9V+quANy37OwwIhAM1dDuAT1hYZ+jcuQy7gUNSJfpuiJBmwC5gF0Esr7oKD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4hCRA9TVsSAnZWagAAybEP/irIAe8Br9I3uwf7SMHA\nOflxmrltqBvezY4s20EBXVlERU7E0kSXzzjcLqdTaG07fRbydra+wFFO4BDE\niVfuI1d7ce5C/5XMQ5lnz2yEJKim0t55FFnkYTBuHaG/gfpRv1+jg8/Kd0Ud\nI5i45cA9HOA56fm35ti0SQhTVEA1N/u24lhVPWgvxWINxpMzWdKofnHsu+kl\nqFSfEiu9iiEdPLlyscU6ePEKLup7Coa6P+PXYD+iQ4IU6FM8FG+om1VvEZhg\nJVC/MVPXEm3V0amXU50MRHLIUu1NRctWcwgeqLmAf2GMiCCwX8ntBtFaMKtA\n/oR67yVUb5Vs+loOa9oZpxyko/AZXqVztUxK/D5tUDfcjMsCCvMKWkavK4u1\n+mQuvx14GD48YHfB/8weiUdWy7YKVEtKRJickkAiBtZMwkfK6FEg4nCNQwA+\nC+J1TCl05nCVID1tMaL4QJR4NrT4Of5WdwylkVE/wwqQdeMLUZjowfA9mRdU\n7KCpWl1kLYfzocuc8g+8uJyy72X5hYwbMFiKvx9/HyNqvqlatmoMNEXG6FdN\nuaAQ2r/zBh0GvEj8t1aE4gSmOqBfeBGeBTiFBlLNdDvFvlGY8q3CSm3ECUZo\njR81NP7HzmKcj0jOnQsGJo3rzZcarPJEx3lGNl8wu3fipCLjzpJZwZw2GnKl\nxohK\r\n=UOln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b3f58203d.0","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/density":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/elevation":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.b3f58203d.0_1583955488941_0.7123671615986489","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/switch","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f46df206fa07839532d9c82eee4e2e1c24a4618e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.bec065920.0.tgz","fileCount":36,"integrity":"sha512-GvHpjdwo+2iW+tyVsr0BmMd5THbpYuyOtf1nye4CDQQgCutzYlVQ7JxEojpP0Kmcv60W639ZJYBd/9rMmWJraQ==","signatures":[{"sig":"MEYCIQDsN2GeXqIrGVCW7NlckupYplTTVJlpAN+UQWtNDWvm+wIhAL3rjern3PbAz6I6j+J0T7OgiPvnoF+ClVXoN697d/wy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmDCRA9TVsSAnZWagAAs9EP/1LT79egNbd+TDyjcN1y\n1zPe1ToNCMi1Cs3PtNEMwAWu4PSJGMT9NpHaUa8ZOeqkVYgVMR8cN1i7OPOY\nU+MYzX4cAYmSXbtTivY36+pGfA+K++ueWt3BOuV1TaxzCh83N4llqhx/eYxH\n0z7dRlIZ4PD1WCyfd5yQUDCZHrmPVrdjI/+SMCAzm1DtqbSpshnyt8/hk+/V\noRb6BT7sw9eaXPtY5NituAh0++rC9xNtVROFVb2TKvsz8GpV1CfyYBMU9Hy2\nWYgZmcrYTVqQKm/U3eB6zuJtwj0YVOxSNnYtTnwoiPF5oDouZD0u6E+ptLjR\n+snXBVM99O7Nnt/fW5mskSaZdDaz6QzQYMk8YADxPIZSaqMlOMRj8b4O9wf4\nSSdJb3+F6RSFbGT7LNMe7q1QPK8Zkr++Z4fvXS8hqD3XM6yoZ+dV3JyMwqiM\nOF/Z5T1ftyDZeL5m9H8Q4B7w+FYwQt8Xplyzy45zvAZT0zA6dLTKQRsPTlu/\nahKle7IfNZyvyo2snjF+3tIOpIYeZjwUwV/kfzqcIPgcCOWLjTY7wqoI+dIv\nmSkA35rnTse8LCN/Wg2oKu9vZUnE/DBCrobnwivGdYcOLgYjyMgCJuMYIky+\ncq9iZ7+NugxKgZ9ngomKYrT9eldo/OdsttHhD4hH8tpFoYHPUWF08AgWC3VL\n8+fQ\r\n=tBIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bec065920.0","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/density":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/elevation":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.bec065920.0_1584044418634_0.44109279779671495","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/switch","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fd570c2698d0d0198a12cbe0ba2d4ef7f6ce23a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.776291ef0.0.tgz","fileCount":36,"integrity":"sha512-JFuHU0tIQoE8zq4eDGZWkKuscS+eNQsUc2YKMjBauBLEM0bb/fyvvil6kYWR6jooyEVURidzuezxZ0yuITrMqQ==","signatures":[{"sig":"MEQCIB8smxN5Roh7BUP53uoQRdpA6kIc3PcA1MEFq8Zfgvp9AiAqTzAtnwKMafPKWNRqeZa/7ipgqqMu4lRGsT4gBIr9UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMuCRA9TVsSAnZWagAA9RUP/1VeJkwWU5bkgWibCVkB\nxRJF3fhjspPrQFjN686vIdqhseUjYfU5SGWsM9eWfP7jYUyxxIxl/3sT9awM\ngj8pyZcuiraJL6xZXJ+ckTBdB6QK4KBblv1XLpXIKFoCvGZkyJa4Y2KmGx0N\n/h9y6WqmmCX8YQ1jcP3SCQdHJ/C3z2642vFV0gESbKxFESEEo/tAI7LS3R+g\nPHFKDz6EzSvvD7QS1fIZWHIVlfsB5O6ILwjyQx/x6NvLaYpZHQs1BRhLPeGW\nrRrpsxS0jasIRv39xN9h6Hv+VR4mToQ8bV97Y6KtHceLApqG8FzGAhYdrJNM\n9K0X1DQc9+bijg+rwZxNE+fkng69sxAiZBcw4Uz+pRuN37C42k0nLTQG9vOZ\nypii25j2HFYJJdmkntBAD24d4gZrbD+VLNh5gZl73safdNjd/W6gPSi0oroR\nxdgCaXXe2YFdnYoIkGR+eG0ybx2RHnqi4bnrvGeQ1W1IMDAnYd4w3v3RJCRq\nKyx2TYvqqczj8WvSk7Jp8OBtjczxjOzewPlPiCUexO8PHjE4tcEOQGaAiFRU\nD0sCA937snLz79fCdh/yByKeWV+qlOQC2qNbpytUP0fJAAbI6HNAtIBAMzJH\njI53ViTyLQcflHC0SNZcpwFS8BqITboQeO6QpsUuHRlths6DeWuEaovtHkHf\nI9gL\r\n=Nba/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.776291ef0.0","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/density":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/elevation":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.776291ef0.0_1584472878528_0.30660533587428596","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/switch","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f755d1c91eb2f7fea64e1cf05a743e65a6ea471","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.ece19f3dd.0.tgz","fileCount":36,"integrity":"sha512-+A53ywpj2+ArbsT7n+LB89yLu3DwgSb+4eIkukgnP8dH3i1/u6Cz6CqRqrFiLZKvGodjFupa9SAWuQRryMwfKg==","signatures":[{"sig":"MEUCIFDPHc4wSSr5jVCG/inFWKlrXHXMYXi8Nss8cM9R5rJjAiEA4v2TBTKbJcI6BPVOqY3+NHh6UBVZXmvT3wTJpDc6EX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUivCRA9TVsSAnZWagAApiYP/2jzemqHZu7v7N0FtouR\nYf5PX2OebRHeAFtZclspmmZNYqiGPxjnyvuVh6Pt1eLC9fx8KDX5aFoyzFnd\nP7t5t4z5I8JiNri/gGERbaM1DpO/t4QebMev6RHUH2VGAh/z2/3fuNao5xoa\nC4+3eUPytw19IOFRyhvxrxul2i4hzGPbM+Id1p6d5cEiJNf8Y//KCKpf72kx\nUiDwmhzQuPouiPxwC0wE7LJBSP0YqYMdd2LvuPOS1j2OlX3orQ0q3ac2eorj\n5R6q77s5hJg9TQ9hzmuDMbwZxPBzT2NSoVnonXF8IT0lPnEOO7tpG7X+znEK\nz61jUdMnfwuxnu/hyiqVNwxBAhsL5+6FFhQ0sXuDeQSGgtl3VHE/Uxs805OR\nj06mvEEQq7lIJP3cK6R8lSb+HsSMLPOVZCobdALeQ4D574zZRwuKdoHnOqP8\njUYtxHAcaQK6BnzV8B4+/kOV8tDF7/MpqAc2YXT/ncJua7/aguepB7Cj/Lku\n8Pw7q+j7g07p/e8lXyDU+JOvU/6XwdBuLoFXNuK4fYc4/G6I2bwaRiLzsdgx\njQLSa7WbB+hCsH4cFntarecjGxGpUIxiraRDIHn1WuGi1Su9+C03NH5jj/cF\nfmyAxTKK6WUkpcJGRZXzKKHI0B7H6xF68sAwWUfpsLpSRbLllyquJvVVsM5t\nWto7\r\n=z0ei\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ece19f3dd.0","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/density":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/elevation":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.ece19f3dd.0_1584482479176_0.43354193904900407","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/switch","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a68cad8e5ba985c0a32f5bc2bac109415404263","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.4dc45af6c.0.tgz","fileCount":36,"integrity":"sha512-W9S2qZ4MUGE1e5N6baSduNH838691kOkHLsHDtCu0NzrVb5SRT48n77nudYveXrdEwsSfhBWdC1afRDHSk74VA==","signatures":[{"sig":"MEYCIQCvM41C1IXV+pnT3xwIbokbKxsf8WXwHck116zE+YNGeQIhAJZ+d1NUnm7TV7MtrsoLMxE34MLKV0NHyjL9Us7VTtIG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3TCRA9TVsSAnZWagAAsHcP/RY/qrC/iKEGW7wqJRVD\nrqSnS/hIHGAsq4aBkbrHoOW9lqS33P+Dkfus4Nu82TMKbZBfDNiZqJMHYqv9\ndItq4XgxLG6N3ruihb/RHn726XQEEiBaLEiVsamN+JnFbFQhGR9e8dvF37rW\n+HKbDJnqrOA4s0LyFg8xjS2fAucYyJEC0x/68tCaDr8p1bC4WA/SgJBjx4aO\nWxVNV+90d0WxPmbpOLovPskOaY0Z7K5P+mH+W1bcqwdOKqOEWLU/C/8TxfPo\npfqlz9lmZ/+0o1FUEFPiraYG3C7mpRexy947Yh3qfGEllnsfdOpUgXsuHGg9\nL9688SU4OarXndAmqlfX4fH3a717QTT5qA7o/mTz+sfilKBOPTnqtWBHe5hw\npMdB7rYaqkkwKSgkkOiEFm+SYI0DLVOdntUkiMwlTfNxgK4taQHnawqR9Ren\nyYTFdfSyawjYYqvuxxMMfWKccJbz0nM7hMp66ex7cHoZVj7YcWS23pqZcghM\nt1MrIfaQHbhq3rEarB1jX64KAB+pqLSefJXSHdJUpsA4q2QEFydCD/QNr82V\nZdG9edM8HgeNE5kgB+iD8oJFB2rvS8buqbUwGWI++XAVj/kuvMWktsgK8la1\nAXqZicxulx1vkBMAlQnaobYGH6y9HQuh//jZ+zYAQVldiCYe9DRC0bb/u8q7\nx8wc\r\n=hvwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4dc45af6c.0","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/density":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/elevation":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.4dc45af6c.0_1584496082955_0.99228504682416","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/switch","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c59fc51620358dfb5d5c276db5bbcd10d6ef826","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.6b48781bf.0.tgz","fileCount":36,"integrity":"sha512-zWmiczGXxariH7bBmywmozHD+m80ELpFZyUtkutCyqPJLU38qT6a9iLx7faN/wgK6fkWnzok5cvW4nAbKl3FRg==","signatures":[{"sig":"MEUCIQCn48uNg4uTxu7fg05t9G7/u93xF9LQkOcPwKxhSywg7QIgNpRDWr3x3DdJTh2w541f9XpihiRmn46o3NJ00VctRnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+aCRA9TVsSAnZWagAAjj4P/041NjH2f/cJ4gg7IauI\nGniD1LlcQhk1yK+zgUdHONIALa7hTPRGhWFGCywebRq5oYgnq7PeRxrHSiuz\nTqdL/2X8Th1R9oElFq1ATLRHaipaYfjqzBkbF7F08NRAEoAtMxbIEf72sB9R\njhWEOU7RwVHNhWNAoihEhYLSDQkr7ombGcnbiC34EQOMHfr/ioezV9HVbnNA\nMjrI1o6245DdW56Q4bOVLoMp15jTzrdGyU+H83Iidv5WhPoYN3Jahzht7u1h\n6kxYEwTy2ufH2WH8Hhwp6n0lNZgvMSuVa/E1kz2xzA93FF/SRPcX2bJPNxNF\nyeybHHqHZqNHZZvJ6ItYE0uhB5ZeLM7Dq+eahVeOdHgxrqDz4gq6q3tZeN0N\nQoNyN3R51vR1ek8OERKHj8VhAYS13mkvOzdUmEm9zreWUBOAfabj0E+0AH4f\nY5NvvQUvZ64A8081qu1HexUfYLQnYDGhEluaIBIMiQgs+ijLbAMK53OiRj+g\n5ciFQv7sDjmfFKQIm85AA1jwHExOjF6+6fO72mq4pX5m50zAlEuDqfx89xUk\nz2eQeaYSwihGeY6rkb2gfSKOIb3H6XGnLfqun36yx2Vrj7zGGhoLP2TajmhJ\nQQZ9vVUaTdtBLddETAw8DXwMIjRB0Tea+4fM4bJteib8NkD+JJEYJULdohol\nENHq\r\n=6l1/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6b48781bf.0","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/density":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/elevation":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.6b48781bf.0_1584545689953_0.29328587020374397","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/switch","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0713627bd70af75266883a6f79374c0f45c560a3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":36,"integrity":"sha512-D2tPf8G7vd3wfPXIxjpubOMCbFh/sAWl3ytQXnBnQes/uKq81VhjHGtpFhGwzSDhWHehYqjcxNsza4o4llp6MA==","signatures":[{"sig":"MEUCIQCqHzHO0dwKyPO/WUOEP3BoVJ0T0O2Vy4M5scY6SHR3ogIgRgh0GuHEfUHRqoNBjxQj3yLT2LVBs8I7Fe2Yy2rql6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62BCRA9TVsSAnZWagAAKRoP/08JLshxaabS3zz2Fc+s\nlTY1RaGgj9hCu9dpaWA1sZwQqdSVNR2ch1tXnEx1bP0twiCsX+jIz4my8M76\nVZCsN9HOvk+9UblJ0Yz4lKZy3ZBs0pZGIxYuU6knXMy5sMpmGBayuuMGIeKT\nvXxm0QVlwBXASV3h0sRB1Tec8aVBQivReKNDzW95YYazkIhpVC8MAdKFYr71\n80q3KZCEeGcVBxAq+6VfC7cwEzsP8cqryQHNR7rbeF4jJd58SLUACSZdS1mp\nlAPuZ8kdzbiEBx7ak9RVIbf3OZpB1jRmwHnfoYlX0RQaWBvv0PoKv7SKbBxs\nU6Oe7Qapgx1OACU9wJegEKGBj/5yLfUfcBlewLKgmBnKur+YAPw/8igqFiNu\nLha4RkL4xqAdjBrnYOo18II4VOyphixtFBFwJAXJkS0B3AYaUaAm6xvvq02f\nOsSPxM493VPN0h/phPyKb+hTm6Zl9ssHAF3XzwXhgXxiyJ+ucUWIYk5xS4D+\ndI+q38WlYAUo56Ta7sR9mgJjAc4iwyAsctK4z+iuQT2i6YEO11ztCjcV2xe4\n0bBM3t7y2uKilQ1F8jlCyDTnxdLZcRPGD+kQawNzL78Qju+1Lx9i7n7iq2sA\nD564MXwf98wG/H60dR3ridRuDh66Zio3iKjqkrdv8t9Gr58U/D98ghvL6TXO\nQBGD\r\n=yMBQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a88c8e4dc.0","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/density":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/elevation":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.a88c8e4dc.0_1584639360356_0.4806238226146675","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/switch","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6364dcad01f470a78f404ef7d8531ab8545aa4e7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.cafe18860.0.tgz","fileCount":36,"integrity":"sha512-THQifqgM6B2sDE9fvLyNhww/q2JVFZGMTcmDs24CH+t9Y/l1/GoQqzeqyMG++lUla5coJQeSEl5GgowLpQJmAA==","signatures":[{"sig":"MEYCIQDs91Y7ElfIZTkzqtjk1eFfqKy2fwEkAVdwgN1Nfd+YRQIhALS6HfxBNALrZBqdSCXs0laRxuAddf40VniPAsl0R6/v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjvCRA9TVsSAnZWagAAx0wQAINMVpIbWQ34nFJVkY8e\n293YtAha96jD2qMvkntb3WIGvj1C66bmuHKnPYdA3assqXnInPNj8tX2QPio\nKz2uGwH6y1FTEFYQrjDdYVy0oke3n8TqJCKuFlCIBX+I4CrTqMonWjeTOh6T\nydE/3xc8FFS4IZzhRqLoNCytSB05kRy6/f1Q7nckoS7R7XRlfX6lghq1uXxb\nh/ag0rB7znba9IcwRTYDtIirvxUc158sPzrLoq/998X0C9TKghaElbQDJ+ao\n4AlpZ7+2D+Gwx0JFRLbrhC2JS7UU+j3s0URlMoFWVmajhTusQWcLzgyJd1Ox\n7MkBIyMk1ehDDsF/ArHNsXrTzQQpRWIdxHpUsz1eBolvo4BaQQAJu2gYA9jH\nzE/CCTFwt7uno+1QxVAC7bvPa5DI4Gxlk8jZNYAOfh510P4wQ2Vn80h2itAA\nGP1UaANle3zv23lSx6RQUr2TyYPFsW3Wj/geYvvJ4aCBbDPNSzD7I1C5CGLx\nsm7KiyHwoOK1byBRqQXy+DxRSi2bSMaGE8d4RIvYQ8tzKKCX8dRG0FUeteuW\noKmO3oyn02lCZ1kGY6Y5+xj3zUtOnWECqmclCr//tBZg6Bdj7w2Hd121j+Va\n9IMwMhm0r+7rQej7R1o6yJXRq3ajVduWLFapSkrzIq3r5wkD8dvfQlj+FRPT\nn3v2\r\n=NUgv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cafe18860.0","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/density":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/elevation":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.cafe18860.0_1584716015465_0.04760208577896652","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/switch","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc8e9aeadc2ee1a08cf7b057f9f1d1b2282c9ca1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.35a32aaea.0.tgz","fileCount":36,"integrity":"sha512-tyMX2VBoXJtSbi6w+jk7RMZSA9hzvM1hDH9i+Mz5EQSj+mtzqPBQTBNFlRGmglMSZi6WQ/4x04OBZxjpZOHLAg==","signatures":[{"sig":"MEUCIQDd8iYQCPBtVHoXD+LzGWMh53yzKZdJ9Xzx23D1mlsdsAIgN/J/ll7pkEA9/xwmaH+QaDcQvX7MNDa845KCEyxsKzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCVCRA9TVsSAnZWagAAhaoP/iIwL5chrSmINRnNLBtr\naxcgA7FWoGlRZ4CXb1q440RgjkF1zi98ENrXqtksLYAchJ+Nbdp95JB2FqyZ\nuUPQje1m29vbP39wefV9qLA2juBWA2H0sFKcvupXLTCnlBP9KQ2V5V8eYsXa\n1uekHGcg1VwRBzNvLxS337rVCIPC59IoEXgpg/uMzwSCmcZSP/xNiPopcEKj\nXjMcaHp0Vr4Pv7VVNC8o4azrXmWbZtMy/4Px1U3MCHTIQHGgot6dgS+SdySV\nXvJnBJ/GcMHIl+nkM6Q5g3pZ4tGlyWAiMnpZsE2cy9eu1uApjGzVwKIX1IwY\n6wnW0cXPDlZGzDKSUKuwoQP7TdVeYXIOAOLsa0Hd7XvuSaFzhsY/NeGV0mfN\nwBGQmti6YmPT7Xk1m2plwlPaon87PaHokuDYqetDgCsjkQG+g16HSf/8Gfvo\n6sLgNDbaeiWb/9FMTaCdy875bzViAtyxcvXGf8laUC+Cqv1CBGnY4m0Cll0j\nnEomw86Tpc8bt4vc5mYEH6KqembNpgkkmuwibi0xtJKgqEWsFSbjU/29jruX\nAA9899DzOO3UvaMdUyyjDOwrRh96LLbPOuAIIDV80NQrXploSRqd+/uo5EnD\nJPFfVqL7Qzi+TE7/7YvDO6DbJIsyhODd8nx7CMGwzsixNh6zv07FySutFC5I\nP0ts\r\n=wrlI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.35a32aaea.0","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/density":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/elevation":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.35a32aaea.0_1584734357342_0.864424229275975","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/switch","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4a10f21dfe53f9fa7185e66af0b899f26bd4b06","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.e75deb854.0.tgz","fileCount":36,"integrity":"sha512-iXUE32r/TJ5b3KMdGs8HTqqWw1JiP1wqUI7GCGbF4sG/NM8xz0d8ncnlc0mhYVrRQFrRQgpsW8PA/JD+BnX9vw==","signatures":[{"sig":"MEQCIGIGKXTzALPdRYg84upu+MoyK4MOi95m0XfNSRVnG1myAiBU2qmEaKacQx9e15pRRptToWqRFOK48dWz/OkoWfuLZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUB5CRA9TVsSAnZWagAARDgP/jMAY1CtVosXT0/lJlOM\n11t1tA4iqYySLw7F3GeN5YcjKHZsTbo42xTM98gJmJlG0R+uajjK8oVXfu7x\nYvAm6vrZzkTtHEOFqTbrUStGC2tlwJMfmlRaIsL25jMfxQgBoj9cPFLWTv0k\nO36TYp+UXDS8chwryLW7BVrid6/4ryBPeeCGas1Tvqb2OcypLHLySzGEzmas\nv1YPRNVSCzSrrmggrYztJTcUuNfrBVZIJ50hpaHhcwKPMPyMwYOAwdAP265B\n5O1NEPRGo3agyK8+jciCxyBSL8ZzHDDcAnFuKMZu1jt6MBtML4+qxt3BO78p\nsU1tnFBqEvaDGDYnNNOGtmSxhdE60TTmQG/Mrq07NqGYmcvGNKJcGcNqRM1f\noq8PH3do8mfDIove58nrnfc3xa5x2I083KpnESntEW5PR0sVCS/UAe1GFvDk\nNhaWdC77UgJ9xfdVGlBbkksvTieZdE2ufUTsbyb1FR9TKa556/6XxiTESNs6\nuGiXp5QBSPpx2HT0uxY5ziUcG0BnIVuWbqaxC182agwyeinJjvNtQcJm5PRV\nnKtS3pQR1E5C0YDtBnoY3fdNVw3jfb6b7+2b66Tfg9LScE+fHjPFytZPCc+x\n9LWn0NqduqIOldXzDKwUBoHfL9ND7//vJni2RySnK5YyLHfd9k/nDCvGoY00\n/PtE\r\n=dLSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e75deb854.0","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/density":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/elevation":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.e75deb854.0_1584742521493_0.35855185715572535","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/switch","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0081379eb9f23b9773214036a7a94c8bdbc2cc8d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.2cc6966f6.0.tgz","fileCount":36,"integrity":"sha512-j/WmoQpGkDivEUTzZQsDdQeF0facEgEnygxXm6IqgtCHzRMGrYMnkMh+SXjoko1u71hDAQdZ2LhLsP6bRhCO3w==","signatures":[{"sig":"MEYCIQCTi6zoMxFFIoUopQgOlexcIsXgHJuJ5xGxoFWc5QWbDgIhAMrfcUiyCzxJMF8Vi95JnviuZuV10cNI6ruh8cv0yHBV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTYCRA9TVsSAnZWagAAHWQP/iTeQ4SYVRZ/G9PmOAFe\nMhWQfLn6YZmNe+xvqyladoW+whbhIA5j6hNA8VQoKZzaMMC9QOjGjo6P5y+N\nm1Kz9HyfeH5OWuyU/hRNHjKUf/bMBgpq1lcg8Isvm0vXwk/I1aNNrKHBATsH\n4PuuM0oZLaLumLAkjGnhNBRLrIyYmCfI6O9Nrq8usCE1UQioa3i3DwbTBg87\nS7Wq+7++HjxVtAgEErPmysPziGm4QwZH29OY+5omtJQw8s5G5hxXdgJnTxRV\n51yQE4lYFJVjsUCSIC2wCLhk48rmxHpr4TGXIDr3xEiadGIZDTUg+4WZ7vIe\nPNGDmHE9EVH+exbCrLTwRKmc3STJt0r7/oW0rLh7c97WX7X+EwxXxUmykHhG\nTmmI6bfT8dLxV7mRRNQ0YNQAxPNtdh15L8aDMyGYy7tXh5xDb1dNY1dQ2gZN\nwLLd7JXq9LAKkpOhrpGyTJi9oB162gTvyY1j4y47r7jm7U3tW77Pcm41yUHA\nQP/o2A/DV0GtXCcrplrlaOdADdHIwAEFsMRnsVotFiakj1BnjzyQns0GPPG3\nZOrWOxfftmIPW3KlHsyJkmEKqfGjqezVUeCKwzaAWvlTOYesAD/r7K58ngMI\n6VIhbnP1SJPBztPXZUZU7rXJXiQtktV1sw2UrojVYZ5Vx8UE+RlfiSwEI+NN\nYMb/\r\n=Grxv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cc6966f6.0","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/density":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/elevation":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.2cc6966f6.0_1585075416427_0.11207153133059333","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/switch","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba441132df064f4af18b2d2a3a5b4670f35aae95","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.8707953b6.0.tgz","fileCount":36,"integrity":"sha512-ej+UsFVKQF+dtXi3w3UEw67JHl/nqj9DuNCEHzledEPj4MJGtC85g2cpb6WCZ3g7f7sRCyVfYgl2vbGMqkKZqg==","signatures":[{"sig":"MEQCIDaU0BG+aHHC8LlHUoZPabIN1W/cF4djBsdM9eSw8quRAiAH7+Spu1Od7QBzeHy2xfcJQ9+hBNP2i+ajzh5wtL3ADg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWvCRA9TVsSAnZWagAADHcQAKEZvdsjMZbWqyLCG5G7\nn7qnPAzID/jJbrVFQXC0nNFYd1XPhEh8oyB3vJZDs3mja3FYeXvIVII386sf\nl5aL59Ccm3C9cWt0UwwMjyKvyCQxO4gFy6WPKhwKuaXtJtkKNUZDFyG86ZBL\nKHYJluYIXwXdGcVId1V7Xipbc0drf3bZQV6hHuEfeCWhIH6wDKKACBT3r50Y\n257B0D6adw1/eeIbqBbTpKp4WQ+/yALWxUOAbppeve69B7PIemfPj9vILzyX\nlwXZU0XE/svXym42tPKJ0dRGxiJqyK4Ac73lcU185xCzQPw0/7/jWKJUuUlo\nuzp/3nk0cjUOZopd/UgF8/b7pwtjL4+jyw4zkv42scKz59v7oTzFsovmOota\nnWNGHOfa/StoYZgRL3aj7mppetC0vl1VhP7+9OtUThbE4rgXKKJiU76Ycbiq\niyCEMWaYJ1tGBHrgGCCZhqxEQ71VQGH91FpVGe1CTJWbjhxRZvCYNAgJ3yzR\nnSSWJAV/yVp7MBNwcJD/HC3T4AbHFx6wQlSUINr4PNM93DIlhVKlSb73DnCV\nNkU2RiHrIOxzPH94hJLQNQB9g+wjB2KGahUd+zAuhRWzEKYMbBJFY9dkm7N+\n5QgQQAO3Aq8YiQ0IEuVkJWsPZeNyJlSxgUnMvc4DWVmOiiOo/5lhAZa5Z6kE\nkFN1\r\n=S9qZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8707953b6.0","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/density":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/elevation":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.8707953b6.0_1585075630644_0.9221712160068753","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/switch","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e98be7c9a9358617fcd2ba255ceee0e3a1b95440","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.10af6cf39.0.tgz","fileCount":36,"integrity":"sha512-4kn/ekCBeri8J5FuXlqbxeqD8ufqjm6Vlq47Q8KlRSO4/xwje61Z8ecRlMI0la1xiWXNXA6DmaBpXp+feH5EfA==","signatures":[{"sig":"MEUCIGgDmCG0f9TVtY2t95EiqhQSqy82v3FGGvmjIqetuebZAiEA0Jw1J+X2rGpqNczrUTuSwGlUUOjqPwPeuUb/Qq1VIJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6B2CRA9TVsSAnZWagAA/P8P/RviqXMOdmxsqflnF7W5\nrocMqbZ3WaIl+cgxgGs7kh5ODYPUPh1pgVdahuOID8aOakeAjRB6+14YG6ka\ncvdq8cPtW5nTywtOdg5SFxAAmpD9WESk+2VXvrUzeluqAOvft0Ej0e3WpSnd\nP654IcaYl4+dsIoSf1KCSxcG7hZ4yUB4JsUlwApaafI52jNizdY1clnNW1iG\nZBrVIa8amiEuExltzmrDkNTSyPVwZHtGbEIjVPmE+xRj4+Wz7Ftdqn1vKsvB\ngInuht/c5adkauEmq99wvsczsT1/qjcktrK5REllswp6sXSwa6W/CoOYt0Dy\n7c7q6TTSG2ph3mAPiIl3q8uAE0MRGX/nprp0Wp1QjA0ZpsPRX4de4MUxNVq4\naqU0onyB0CXGkzlwHyqPy/EqEcOpTqlO2HQF7LREjNn0wbINcTc1+PEVFC0y\nknDrOw+BNg+MmkjVSZyU3sx7LTGBMHwphLmPkUezoD2q5yUgzHMOhowbtUgp\nPzR6HGNG/VrKq3ztgTBVUHOx2DCxmPh/RritJNo62WQDrwFM3fYbmHeNFQPD\ngzAMy5PAhDLVWz2004xwzTVLazxYkqomXNoGb2eKgvxVVArSTEvndM2DlVaT\nsT1VglMYAI/IVkrU4u59JYtFbEv5nS5Fm8kkt+UE9rqaYYeCpTNutqaw+Ua/\nEeXZ\r\n=wWLw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.10af6cf39.0","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/density":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/elevation":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.10af6cf39.0_1585160309930_0.5222223987840198","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/switch","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25e8f44643f6c87b6cf246433dff05482a97ca30","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":36,"integrity":"sha512-vydxfL6uQflmRQAT+pV/pHpWiN/YLh5pkz1rnRka5e4AMf4NLL5uAnr6XWkmT4pVkegD/blW4DIBKAqmMV3C/Q==","signatures":[{"sig":"MEYCIQC/6hxGb4KDtOemVFPvipryfQK3pDU4mTZlrGW8Ulg79QIhANPuYTEGxJS/W9NycuuogN4GiYi2xcWMLTA4ckxO1QGB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBRCRA9TVsSAnZWagAAuYYQAKG9OlfW7MemTVsOPSOE\nHBkynRRgvIopTZjZl2wwVdUgNlvTKYcHIaiwMR5aaLBdNs2ucvi2T+Ywzh/Q\nEnAu6r8+iKq4KxvUbZ0rGzBQ4seJ7OqDnqOJTlp7d+BZNmfEpVCNOt0bLeWO\n2FV98e9jQc88Dsf2RFExTvL9POa112bC+uPFa3JU6GsCjjF+B1HFY7ClHlDT\nVymXzGG6s1t3+jIudTqcZphu1+N1Ux5psBcemn4J3ywOhAP+FGu+l+Tz4H/+\nt310ssoBUSQruMpdw6bhxtpeK4l3DF1Epz2hH6iLI9Boz8mC2mENiOUDtWGr\nkEi6/YElwwYIVAlDYSGW/gwHBukKHEPVesG5fL0ptd+HD2kcqaAs6LPx/nb+\nU+K8QMzV6Flt4tTZnTb+gsFELhOPWKdThSUCz5J8BIKnx1yDtQEq0UV8ggbW\nDTklvaHjMMtfd2+0s7nDHJjGdX0dFTf/BJU675gFyo6/xbGWsTrSh3RTVPqZ\nmWCIneVezcMVuQgX8Sia8n1Lr1mbOxHvrDNOqYWGprMNrXkKXGG99d8iY9vp\nlzNBp3jk3aXtrzU0NFiEPWNFYjRCUd1/1+GDJQdzKqvwjyw4Dd09ikc0LKpx\nE9dGK1hFMBSfL6lJfPwmkiKMkavquFNiN1fBeKZNJbKZgqvfgVMkhRc4C1G/\n1idT\r\n=Xj7p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7d8f9c8d7.0","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/density":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/elevation":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.7d8f9c8d7.0_1585332304563_0.4707624897932581","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/switch","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24f50692cf1583877a4dbd9b1b826e060b9e2fba","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.d6315efe2.0.tgz","fileCount":36,"integrity":"sha512-5C8BGpEuW9AGzZSwWdeJTLH0LP0Pvy8CjJHiB0K8BCPqpYLH3YkjRqJeHNcouRuFei6Cq59Cyw+WxNZHmtjy0g==","signatures":[{"sig":"MEQCIAdO+qTGvjFVzWb/Mrl3yU7yAG2UtOiNuFjvukN/5oDkAiArNOD04dKOjWEgOKNPnp2jgv4cuHzVQCdT3iLttYlQmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflp0CRA9TVsSAnZWagAAVhQQAJeTmAIq7uT3KfNWuQmK\ndhaYwdMGRbKmtmiSrdHya/4k6nv7M872428yxnCeOwaVckbYfH/TQXuAzFv+\nINgQYSKDtYrwLh0XcmlAWWa2CpwsaAvR+a6+bgZ0AmjjtIZaI2XT7V/k2EMu\n5ZcSC6LVGQwQhSiPJN6XBW8DRXadzXDoFvLP9i89BWB2AGKNnLTD5iDzKwel\nI+e1f0XxHa1dfUleb2qQ9FkLqpO1cf1SyuFKoomEo9X2rNv+A8LOLqIu9PQi\ncCuf2I1VtBluvvXjCUAYjxv0GL3byAqnP4mrjijFrLhLHHC5pC/6wSK1Nxf1\nCpYDMnMF4YkAX+dLF/Hjl3nXM8OVJ8HxIjt5G/eXxiMB3jVrm8Id1q9gRSCw\nO6++KLHASAlUjWBXaRcdVph8yjitts5X8itRfmWSTfzzgirjV2/hiXTo0LTC\nOHL15wRZMK6lVV57bdYPWdZY2KpDCiWGFLqIZstG1t3pedliFVPjFJoigroO\nxRgyd3x1rvbX6rcLRCrTze5AJEeFxsa3iRIYeTEVXKx1D6nV0SBX2OeLdtpr\nOi7g76ek2i+hKYFM1E4Jffjoje6ytiu9fHss/5wmRQkDzIFAgmAVo3HbO/Pw\nWoE7KMFRLMXMaB5+it0U4M4RNfNJNrTI4t/64hsPiLQaJKl+pw0RSK+qOeB+\nmdKU\r\n=dfqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6315efe2.0","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/density":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/elevation":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.d6315efe2.0_1585338995801_0.5362121644891213","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/switch","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80f30d58009076571ae95becb9e972f65187fdc5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.a3016368d.0.tgz","fileCount":36,"integrity":"sha512-xTdua2GbSs+LL6EFdZRVkRam+1lgNQ7X3PuDpW6uqDfVmLzde3AfGG39Cpb2RXI2/kRA8LAYsVrR/5fZGE9z1g==","signatures":[{"sig":"MEUCIQCcrV36/WOG0ee4KBKUNmVk5hAeUb94j7CU2PQ/3rxL+AIgbuy8cbRAv8rVutzaNwtrLJ0IAl+Ifj9m6NjhHsogBjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3tCRA9TVsSAnZWagAA/+0P/AmVXjlD2plBtxv5UQEb\nBbrEAIkId5DKTpfMgplDBjGZCTshfojazGHCsVvrrrfpDcSeFS7o+6vDdNE/\naOeZ31nEO5eyji1OHaU2d++RR7jB0LuXlWTLtPvj5q16tAHR3N3qQ9XSpTki\nw2hCHDtXReijK8C7andocZj5/Uu0ZXIaDuQGuKHQ60zKQtbtja1gJzZrAi8N\ncvZARINxfwSBSNMPbSz8GV12NwejoeQ+XBvFTdbXP1BfqMBuoNVkhp25pSV0\nQVOhmaT3T7oCNR9fBmvl75MBhylzzr+S0wdoMzcGGPvNsCv7pBHB2YRYP7vt\nIPzFZrmDFjLkto2eip1yWrt5ph58DDZkFmdUw/FamHRLOLmSRtzexIAqJs0D\nhn1Gq9oCEFgLzmTC9wR2i6ktxLRdSSj+M6wN3UF3EJ2GVVT7ewmN/2huUjTz\nFLM57cZZ+8b0vaMJsGhGssQ2+EkaL8gpDvDzQzucgj6S+xulZuOxiCWc5owG\noZ3eDf8f3CFX4ot0saNGOE7tk7JuchY7l9dzn+Ao8UKaLPHb4apgccMcEyrZ\ncsjh0oF7geRNxAZTxnJwwU04FNxdOlG30AGYrqOxFL6lM+VfLkkejUW6Z0bz\nvLy+FCRTg8HhF/f75t7PkLXYoKO3aUNwUKIRkmdFHQwJ3LEzAFodKbAQVmWF\nJi2B\r\n=gCn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a3016368d.0","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/density":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/elevation":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.a3016368d.0_1585343981309_0.06669722000937117","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/switch","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7af11369e5feddfdd1d7132bc6b3e36cd06b4695","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.4b45b6620.0.tgz","fileCount":36,"integrity":"sha512-ukA9kQXU+18PHubjhFurIs6A8dyaF++9iun9QDCVLjqLtEbZ3BX9YkbnKMOHN3e3GNtbmgIT71rAq/BFiojk/A==","signatures":[{"sig":"MEUCIQCxId5FiBjn8mg+1gpIHZ39ZZ0vr6ihc+3pBuaUA42PTwIgXvnVqjMtc4u5GLuPllUZPuNaAtOryoc3HiatX8uAQjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gsCRA9TVsSAnZWagAAd+wP/j4yj6WwSHPOOA+6UV6/\nP7+ZYNPQ90H7WPj15XMIJtEHr2ksvYdSZZf6ucbWw18RWQJaMbOv+AUxCd7R\nKtSbEDWK7fwtL7N5GUdUNd4GudJCW6JCaa4LA3Y7EIYYv+oSLLmSeX7v6+Zx\nYdZHuIbC5bomWB7rrQzmncG9o3mIJa3xvl+nsid1hd8wpsHD2GOy+534xTIA\n9JmEkuHiuptmqsh8jjrcp0qwrnG+D5lugCDlKXz10WS4aM/lhtkDoFSEQ2xB\nrwBRliyvDQhLJrGOIskeKgRohCnVFM5GKSDXFYcVMBCLvfMeqy3X+X6+mfOQ\nDvN59a6mO7LPNEiiA7w3YomJFhxKZ9YmCZx3ILjJ4FWXh7VJNorDj9YHAhlp\nNxZEkvb+KxnpQKaswfrKT44FXMvhhvLLVmFKdW2IAdXyq0ThmldEjcNh8/tP\n7e/BFdwpYZtzxJ0CZZbo0N5TjQQADkFQU2yhGCQUUxs14AnCGvJ/CVz3SzN9\nPIsKcCVyMGzdeuiqBHxKjBuJYibxOPf2a3l47hBOUl4HqIJoHVqlKa82LTTs\nXJPxC4yX57KKvO9DPmif3tCdpXCcIbsB7j2WMNZCxmah5BuH/mGdtwm0NO2F\nF8r57KU1VACU8iroTtQ/XY5rwwFXWtXf8XMEpBfN62DFAszecpUqJ9TDZfzv\n56MK\r\n=/2he\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b45b6620.0","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/density":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/elevation":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.4b45b6620.0_1585670187889_0.36985560675252693","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/switch","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6945d5a3dae3a5ba975946efbb169edf4035ed6b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.e84b9c8.0.tgz","fileCount":36,"integrity":"sha512-wW6cSNWuHTSeEzq2fUCMcxr30Nc/7jFScq0Q7qoQ+wcLFkzzFIJNE9nBBEB4vdvhkHoBQ81B2OTtESyeiPpQRg==","signatures":[{"sig":"MEQCIDNd27vj8weuL1ubPGjYUkEcKR7A2nX7vMnbe43OMJ7SAiBFC5M1w8crFDydTqCuZZ+pfJG7hlhlAV6CA0YnGn6k0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMejCRA9TVsSAnZWagAAO5sQAKCf6w+VARZ3mD8KQuRW\nm/eUGSljdA+Kcnl+xQoIJYce4yE7y9aOg6+QhYDp1p5gAaGD87BodWQ6YTex\n2oODUzcFUvB5XVq8YmLY5YMRx/QkH3Id989JQMbZ9iop8Kk/yisYcgPqOMXz\ntEHc9bJZLcWgei2kS7Wq/iyDXPyp8hjjGG1lwXji+P6OMOK436Nyb69kBc3K\n7B3G4Q18A+SWdawPxIsXOif4KFrz0vsk5kwJWstuKTY1e7C2PdZ5aEHmbcBo\nBpgcNY+haVc45S+wN9MvYxbQuKo0+QcQkSZoTH6VtUZ433G1P8Lgu2YZpw2o\n4B2pB65fc5vMTLvJk0CmPzAs8WyqxW62ih0SQgMWLk0EBrfNLtEjoUR3Y9Zx\nmJXTz5Djs+lALrHIKsulGPJgs5i9v7iVFgiWAXpH4ERKebCEt1ZjGURJP7Yy\nXq2WqTlmeBLljmKM8/5SM/rMR3/9xxl9XxI/ykQXWO9cTkT8hl+aX2Z0+N+j\nVnVHjwm7/duPTbLFlLcMz26v5280QLJTh3PDbrdKd068bSK8oMNIXlMBYuAF\n0yu0TXqdbVlIN8sezGGbmeyyYWBJT720GVlepJJzKHT2GhXG/aCVXgwLGrwb\nHZD2MnI7+nJrDvcutTIm+RY/h+Q9EnBlWHM7Nt8pwBtYJgr74+KZjkYDWJaj\nhgeE\r\n=sO7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e84b9c8.0","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/density":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/elevation":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.e84b9c8.0_1585760163240_0.3267248641715208","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/switch","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f99a03128441ee7804366e1179680787049f224","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.e33c49e.0.tgz","fileCount":36,"integrity":"sha512-/oRtFg2HXcwt5hdcpDpKoMaTTXWMcoRGe9nitgAqyq1E7yq93XC+ueZHgECmao5kM10rfWaWsAw8kki3DjzYoA==","signatures":[{"sig":"MEQCIEzJrZeK/5rxF/ICvwc+xk7nbQud6qIg9Z5jKX6TkfEuAiAKm6YGG1IBl5NA2DfL1zVBXJrEZpl4u8ZiA7mOSWhU1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1GCRA9TVsSAnZWagAA0K0QAIi/igkpBpWAhVy0c2HD\nZC0w/9lqisdcD6PK9gfKH60Jw9udO88vNiYsA1XepxaP0UGKEjNqqL88G01e\nJ0dWRfuVSId9i4yUnU08e9PR9YZbeKvMd/cO3ZNv08yZv7pgvn+iD5z9+1Uc\nbxrAZieRsP8HEKugzGbQaVfLfWYIjP+B+FsfWY918ydCs3H0sU47sydwDf3e\nmQNQa9i3rCXhXuZtJBlGthpB/BfYRshh/YjaWrK+tH6Z78c3EdL3hsoTfCrP\nPGm9uY0xsKlg69YFCFBPdBBRlhpyPMpfYKIBcPpXdWlonIvtN44z1W6x4rfX\n0qgjTosL/wESZoa5z03yhcFVc6k7CcaGKzmkt/cyBXRaphQ0OPLSBtNmu373\n4kdw63xAEnsAXdZjrBG/1/IrGenDYnPTBXsx7ehvzw9YQgiFyLG2sPrYLeQH\nETCl1lUFvVxRIDmnJqhtr8idCtDx2K/cJOP7xl0SHdGCzlSqWng/w2OQwKyi\n9CbgxcqbH0cEvkBtGOyZnGcaCL5t7atukJgCvbeu34DFPcfvLdb2l7WMQxH8\nE43F4K5UNT+QWNarfDJcPuyr3qL8wolpxx7ZymhPiMJQ8orrPChuo047sGPj\nNu5UtHveNEpKbJPufJZGqsYszjN9a3lPtsgj1ZXzC/sb4M0PrEexH9KV7L0j\nk6Bz\r\n=cv//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e33c49e.0","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/density":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/elevation":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.e33c49e.0_1585786181896_0.5397743786141009","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/switch","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05a148c7a98d4d8b8645b3ea4badb87f8a620385","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.f1f8e60.0.tgz","fileCount":36,"integrity":"sha512-81RjMN/mAD6fn5rJQGB/pims0VPdaHPNgSt+jegrNu1A07mqkDT2hthufylRha4U4Fa+vP6gnv4B9Cj0oK9djg==","signatures":[{"sig":"MEYCIQCCto5GclIs5vJVNVNKmtHPepAuDRHXOTGUgk8PyiCQRwIhAOvqSm4fQNZm3+58TetIsprXJxgDrg1arQQmU8Pr8FSU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjl4CRA9TVsSAnZWagAAZe4P+wbLm4mQT+uKCo7Tp4sh\nbqZITpI3AOwHXmp51zfRbZpP7uZCtidxXsWuvFS5DJnMxObk5FnXyeZyu11Q\nDIT6BGBOLtzXS1izhgu/+qjfpjEurw/uIYRH3rKvu5ZvgVU3ufPbZDZKP67t\n5ZC2z6WhXW0WnxSS+8dFH/hSupe41asyoOl4cR/0yHteTf+qEgkzsbhbhYsu\nE9GBJUVAd0sbzpkn6Bv7/dvdeiex7yPeoKwfI0hG+n8QvA5cPKsZ3W6ausOQ\nF1ff/HMx4xE4efOuTsIBodgHl0/xBATHF9uMZyZ+erZXDH2ucUIGHruDYHXe\nimaIESGYiA6y8/ittmVFTQDxLIoIyrJZ22EKftCND7KGDQI5jIZmLYKW2Vo9\ntQy+KLat3jdhxRgThYJZJvAKrJT6JsazZBcVfauwHC/SeuK8UA22GtPFHF73\n8el5BouYaq6pdRhRECUw2cAIdC//wC7k064Xd5vjeXUa6qUjrNIdeGlIn9e6\nj3X49WOyA8CsGriQ8Vq+Be6rjPb4Nzgdp7OjVQStoOW8vx4l8P0W69uFUP3Z\nitB7WObvQr7z8308LditfLLvStzizGLwirrP/hkitLLM0gN6koA1k06GpBMT\nyJunEX8TSzyq0bl8sb/iAuovZkaRYNCMyffzUnAAcWnojWBTQI8uzVk69Lbc\npKNP\r\n=VJYh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f1f8e60.0","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/density":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/elevation":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.f1f8e60.0_1585854839941_0.044500839960437855","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/switch","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e82f2b25ee0f3b3dad59d2e44d9326b137803be0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.1e17c49b3.0.tgz","fileCount":36,"integrity":"sha512-w1R/xTVzH6v/ettnA7ywjPRWkOe/a67X5i6aTuH715MZnI3Ja1Kz7Z9ksaMqHMCA7Axr5tVmcQ0u+GS+28jnjA==","signatures":[{"sig":"MEUCIARKtNcf7boKJGqxjZ6z5VAv91AYwuL2QVdNfeN4YHECAiEA4+J6ODBMRz3U6n1BmYLDQz+deAJG1bdH8ahzoU5nr50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qbCRA9TVsSAnZWagAAg0gP/1dCb11QzpxVX3GsngWk\nYKj/ODhtL9AHA7fIWhGwBJkPbRVSBA3ESOEVxwS5FmtNStCwBw5nDsLF5Ixv\n6Fd8CSPt1KcTK3dzxQVJ4+t0N5gzhoqohTL83E0cu5WhcsxAUWR7rD3/tyGz\n3j57tIEvdImCw4bmYR9+nVIL6vh+kwNmUA73hdViFqlGQk/B6u2qDbZhfGGc\nRnuFt3ncMYy/G3WV0FiwWJCJX7Q0mODa7lye3bpfbaPJrxP/6x1XWyDMTux3\n23/fQEGFJTeVGH/aIbgbIxuVeo6UcywJfb0FbFzX4L5LF8ddMqEKPInpp4jm\ng7iVoJhrB+RU2RWrPofP1KkgShYtr8Rs+hcWcNSDomDir8n+vPy2UkqksqzD\nvicAsfDwQY4dW11ZW+3fdNeq7w4XTYJ0lpo7eASed2rxRGH6E16Cu5RRRmDC\nfnaTUs+md1kjMAJ4XzopliHzEtyYwQm7LwlOp75GeNE3UcEqBSZBB3VA/TFQ\nenIMRtIikflRCz7Wq7VlWAhWfnUPmmeqsYJbku7UeAoCj6ALGUz0PN7oCor2\nox5nrcPRgbDNJCL3KLLZAUm5TnSu+96beJr02mEE/AypZ9MRnwWq60rHNWpl\ntOgsfQnSlVuSPc6+c8vNx+qRX6pF9O28ZfUGMP7aG9NByjlzpBVnOrrBxsRb\nGgMe\r\n=8S2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1e17c49b3.0","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/density":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/elevation":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.1e17c49b3.0_1585937050318_0.7975963625173783","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/switch","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc30a3cad299a6ef38cb96d446d7631d23d65c32","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.6a40ef217.0.tgz","fileCount":36,"integrity":"sha512-qi4PMCbCJ1VvCYpI2XoiAeSmj0CbO43naRCbbvRSz7Izixb57Gn1eVL6H6jGSXeLNUpjjdJJBAaytoqnrz2Zjw==","signatures":[{"sig":"MEUCIQDenQYSDzASUDhiUipDIPDvY0tt8TalCzRO/lHLfaQzDAIgJ2MFCNJuPpeDNT+hcZIrPGRrxTBFfgMmL+RHaZxDYRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42ACRA9TVsSAnZWagAA770QAKAl5iD0nIvIHiZAVN71\naqxbqmtLwwtiyLnzCNvddyC0WtUZGa48QlyACF8F5NGLqguk/zm1IFa0d/WT\nXRTzM6hY53RwRn4c6JNyvtfdjvBShmLdaHBBdCe/YWZvSBFmrQC+EX2BbYAw\nm2Z6I8r4lktCThQD1IAHyhks8p4HC74k6DYXOuYJ6oL4ciuFywDYY7b6nuuJ\nHEkxaEBwuhstj9DtDXriVcCkqSY7+SM9/0xoVvaYWICtnmQpGLWIdIdNy3tU\nO7kJLmJos1IEejN7g48QNT5FnqsTLUNNOgPSelCXgpypS6JYE5COJlpdan8Y\n+DiL7U+dZaitAcm615GVYIWqACVjy3MmB+Eh2ycjGW+8sTc4yIO6NCqgM3z2\nussSZVI071GQP7oTiYbfE2SImHYjnCMxnUNtrVVrAYK6yY9OexICG/w9OwWT\nCJRoLTZ+Dzv5GbIg89E7Hbfv4jfdDkvBFCtn8JnKYxmHat5rmiXb2Tpx8z0J\ntclB299nGdGuQH94KEZlzOSewAGGUOp/2UShELVGJ4VIfLmpx6yxhwp9Xr3G\nBHF//xVJw/mzX4teteYTHrqfsIMVEeiOasRWG1MsywxSADanH6M50RNfDNUd\n4dpuPcsX/En/FuM0KNq3UnnZrB3gUbFWJtPbpYAITz/fkLpRhBFIy0ksU2f+\nIT8Z\r\n=uhjf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a40ef217.0","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/density":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/elevation":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.6a40ef217.0_1585941888432_0.7692046853741499","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/switch","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2ff0a2fca6f18932cd74f3f19ecea555f7daa25","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.5f24faacb.0.tgz","fileCount":36,"integrity":"sha512-th0mPhFMdBtdDyVz+2YdEKdm27ePO70dEuaB0HY56N/r73RHr/a45fi7eZzOgVIlkFDTnpBrkVvWDqppA/kwTQ==","signatures":[{"sig":"MEQCIGTCGUeeUUURmRd6u4kBESY64NIkKTQ3pxDo0vzTwbifAiBwCY9slwSody4rAibxa4lyXNGuo6WTA57PhfVHrlm+Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje+HCRA9TVsSAnZWagAAyGIP/0YW3cof5WCa0r74ERxf\nARCr6x4iE19ozfST3nqmVyHVJg+m6Z6vvzjnYsAIrGX6Mqbatqy7xJqJLXrG\nyOPQUQBklQ/IE2Yt00yD317sBzXyUrYKGd+DdnRYhP7A8KGvTedBTs4CXWgz\ns475VuZHWTaZmtGupPQkBND8BEHZLiM4xICQA4peFt/bzilQesxmYlaUn+3O\nvcA3T4oqN9Jg4TFbQa+FrYvMVavl/JJ+uOW9F7NPeRsQ3Fl87u8/KCiTMJ9B\n3AUZZ/QPhzgIf17cGt/ig9hmes8FpJQBmC6UY74qxsRdGvJdniNwz1vacXTb\ndub3CPkCQFK/8B82AxF2JjQbS0GMia46R6rFRcHpZwt22lzOmM6PEZxb3w63\n+a3o/P9DbU60e3vgMwwGnqk1PUHPrsa7lz+WuvG7njKxB3TmWAgxDgMwvo3Q\nbu360ZxIfhkoiqz86vjD5608KTtSxqepGVHMyUfpu5B2DkBF8CVFkrgEb+h2\nPVuycVM1vPCgQqBI+V/IK4/pWE/+WoyVyoZfFDz5eXiBdZSvml7ZXbajtYnS\ndXfx0kWx8gOFte6A8/l7nMYjhdAD1F3775W/LW0pdoxbXRSgTF7pXfQxzVu1\ngx6qXz2yBO8CTdI2oESt0GjN5AsqP47EzJDEnPAn+cjqvl3N0h8E2tDqJmZD\nREgV\r\n=D8Ej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5f24faacb.0","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/density":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/elevation":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.5f24faacb.0_1586360198630_0.03923546840896197","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/switch","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d493483e712612dadeffaedeb8531254c29bd8cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.82fa986b9.0.tgz","fileCount":36,"integrity":"sha512-qQ6fMc4H6we1Tz/VTEXl4DpBq3TrhiCt3jTiG3x5svKGd3AReWSMlDh2wjzD4Uva9Hcmuc3H7XlrBP2xF7Rcfw==","signatures":[{"sig":"MEYCIQDmGhSzJ+tlJf04zpLdjSzdifFtsEd2BVzpBK4i+x9bmAIhAOfJwRW4vQ52OggsqG/Ju52RCSrpLjkADuNbaIrQoi3/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDACRA9TVsSAnZWagAAIMIP+QG1oIcu01lqHn+zWmxc\nbGsfJYbC++r2Zqz6sajP2MznZfu0qfgG2MiKcNCXxanXQVgrbSGGZomi+plR\nd8JeBW9zdOBTpRoe2h7SCSRpAB5DsCWQn5lKt3N2UKJNK8UCAR+gvL7vX4Qs\nxfLCRdkTSAVdLVGuv9cbHAutUf3gVj1eC+ARyRx8LLw+GVYv25ldsaH0xoWR\nuyaQtaqNA+lYWTCpYHy0p4OoKQmfmwZLVcybYEfuFFauYffbQOf0aUGyCwHi\n4pq/HUyFAwROUZN7BNA/X6GERMj6C1zX4nqmmp3LIdz1+kTLIhpUKdlMHl4u\nGyU5F8yOqZO73W8NOEdB5DR2H7RctHXjrhFcv0YeLotndSHOxqu/TVwnQ22/\nWncX1fcqODdPW7tmvoeS0uAFTAEgsExABPF+jlji7VfRiB+wSZufj3zA95Tn\n3kV/oRF8mdAmu3VSCfg3O3IZXSkC+cUoi+jpsNHRiaq/JuzhapdJ7pnoGzCl\nWuDihdrxIfIUxQiv3vzSzWQP14N9jioQ0EO1KSpGRFJsaOmk7ks/bTvsBZmm\npOsUV4QmcPE+Li9grDB85c0yIlpKX23/zB8XwYdaLvNXRKsXxd9dQMhF7SHk\nmaGTCHRqbH/j0hJRaNO89sz9dK8IWM+Vo4NsXKD0iqpznCRjPB70szMOQOIf\nwph6\r\n=hUUv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.82fa986b9.0","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/density":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/elevation":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.82fa986b9.0_1586360512185_0.6727271803760733","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/switch","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb0afe708d6c34dace495292240a83cfaa86d055","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.9930d9cc5.0.tgz","fileCount":36,"integrity":"sha512-Ttg5cViGNvGbdvdPdvufSRNv4/ylbxr8RMlMSH1VgYC86HE+AhAgYKOge0QvowG886ejPJcr+6+88ZzwOGS6Vw==","signatures":[{"sig":"MEQCIC0ncRTFuEQwPqJtEsW+A9TPw4WQeU2iompWFjx+QSCVAiBNoExkBLSlkYK5KiNkRpaRi7WC2//yMkp1htkYZNBUcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibXCRA9TVsSAnZWagAA6CwQAIZVl3taW2uysaaImuhL\nD4aTWOnUWcTiZB/5v/TlxNbS9BXzBQ5F0+XU0NoYM1Uca5jfaVE5lyXPVisO\nd5IMbkStnrrIYZYMB5xNrtXSEGbP5aiYothHttoaKxLSDp0SK8WzTbJHn5++\noa7wDhKGHzekt3c7G5Nz/oUfcsf4ZardnYWXN8eQ/do8FD0abPf0WrAjCCii\nAvNzaiyvG9kqyOP4EoINVK1Iou5FN7BHZvzQrcxJPwsEiMTQNiKtmnZlkLi6\nv/DJoXwjduZSrknM2A55QtmBWlbrH86nHPtUU1LgJNWdfJIBnz/24c00LmeR\nTU80PX0IU9OjkllGqWRibB2zY/oIy9x6MSA7sI14Ubir6PgqEzI+5JWTfuC+\nmRRfRLnregFG4khz/D+YJGli6H+cjuHcVLxlUZD6iEp4QHiO1oKdPKJphPdE\nBE15FBqoib68C0xNnw1lBN+f/wrYIX131MM48NtDXe9sdMghyZViYrVkGjOd\n8ABp0qST8Rbg6Le3v8usO050UnZg6MexHkI0E4cL+MltaWWES6mzyOkCdtqx\n+9omP2APIDe0afHwHcFR+bc+vGIoQbRv07rqIeBIO+h9xHLQVPG9zHLSo0/X\nvKx+BBG14HM2i2NUQHMrf1QjnJ/K1EyQzZpJKJrfeZTf+UZDEzTgmBDSc8/h\nGoKN\r\n=lgMQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9930d9cc5.0","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/density":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/elevation":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.9930d9cc5.0_1586374359080_0.7345214791890022","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/switch","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74b50c5370669066e5d05bdaedd76ced29b506dd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.6601d24af.0.tgz","fileCount":36,"integrity":"sha512-vbTM86u9awAofT4QUGKVBprMHyKuG/ucufbVkATIpt+k6f6a5utyi7m+DFR1O1gaAzxfHE3gRt35uPZV0v8Y3g==","signatures":[{"sig":"MEUCIQDZtRruaam5L0RUtA83kmnrdkSPQbaF1T7Uaj9n40U8IQIgIM2Tzofgq90Ryusq9XRJhuX9FqOsdYUHr04N0BBYVMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyKCRA9TVsSAnZWagAAq+MP/2c6e3ev9GQUeNaI9e9N\nfxunnqbATkgwvdbsL09htJrchs1LwyWjXfhLJ2MKx/5slg5e0DYFAq9OosWh\nYpPle48r/Mf/z78DXd3vdmgusxvIFoJ8GryUmejShlPARIP0aBulErqkffu1\nRQ0toPTGOLuFOOWudjP7eIu+cav7Lq9iPaHXWDQVmkjMax0NKwFdra4rItc4\nL8Lnupjbb6Dje0gMqEvg6FCW01oewq24hO6cuvQ/GMYqo2V9dnkgnFpSfjqL\ngQdwbGd/aLq4QcVoicK/T6uI0qF8PKxeRSKQqJsRxWOwNXtraod9KkKebyOJ\nv2fXT8zAzuVPbsV8PkkwzcXZZ/SueOvci9oml1HmjhyTXIBR72LI24EG5Ywg\n3ACzOkfl6gCuHOkfUVGXcOy1GBWAOraA/Q3rtcJEddG/CLEyiTbMELUbu4rQ\nGYHUJNrCkAfsn8+h3GIC+v/DTDuKCUgLFwsVQoFYQFzEcenGGqxsTXxdVnbY\nZe6Nrf7bxMShVPICEwOK79SlzKtlVnDZvKti1PfXSttHw4XcJahI2oSsaQYl\nHqrzDYZ4zvN/heQxjzJ5VZD5NIUgqt2scPe6gN6XJx2fbRbFrTJB6kWX1WGg\njwA0NEGWXHfomYZO4SdwwDqT6/ySsBFT3v66aUvK2FZv+7y4T+nqauFUOAAb\n2cuR\r\n=6+tf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6601d24af.0","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/density":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/elevation":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.6601d24af.0_1586392202291_0.08948048727283586","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/switch","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"287fe05372efdd30ef02eb6504219686e21163cd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.05f5e1583.0.tgz","fileCount":36,"integrity":"sha512-1yAEshmoZQD3MbI6RjAenj6iLlm7CsM8ADlMW7vVV++qY/7jPNIqHZCSRzuQzbU+MWmm1QK5/WABz4UHWQaCLg==","signatures":[{"sig":"MEYCIQCDRkjARwwxI1oKWInQVGXWApW/ko40+gckMcJ5iU7NBgIhAPkTHAjeMAdmC2rfwiLGCdVWgSy4K7xjbviuN6flPkpO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCfCRA9TVsSAnZWagAAwoIP+QH/SV7jcu1BZjgUpccC\nh+IcWIB+u8x8GeqKsvAdh2eomXw3FD2nNZbbstJzIELAmylYDTLKfzle0wmB\nOHEdbwJkCVZ9y08SOUDIXbi+0a2N10RYlZDwXaw1XJl6d7t6Tj6cSD9M9RdY\nvAMNHctSFspcHhfnrBkyn50Of0+EUa2Zye9OnnM7smbGbAi+eCzUxiV6LWgp\nxik1ImZlrIR2Tpw5xYzN8/WuDnIQD2Sa7HCk4iHRwIy2VOesIOdip7IR8Ome\nmImvOjlqasVmHoNs4npVQZFhaSBuKzFQ2pFwk815ZLYowK8W6W7aksfUl00M\n4d353wpHVhtwy4hqc1lVaIesTpbh+XhbGrJNJ3css8RgbRYQa0eW2+IgHnF6\nLTb+4L9WH3+SkCWspxamG//5Xm6bv+6Y87F+aNlot7MrZal2udi0B+QbuYfn\nM8MPxJ/pHcsX6PUm1S5zkuIX3zb5D7uUcObVUKmbFzEOxv2MtXViMO7gFICU\n9sdfIC5ltKfGI3Mc208d/4EFAndCA8HxyJ4fHrgako3XUFM+mCJMPWe39v4R\nlYyXYC0JqzZfGq6Rsj6jfiAI/qhw5/5s0vHQveWb80eyOXWnueHBIK24zqWo\nYykFADtYktJFOcqDE+OIqaiwU9mupGdADHOZUUE2rbHsEWlwscXLcmoKRync\nnXaa\r\n=xdtM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.05f5e1583.0","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/density":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/elevation":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.05f5e1583.0_1586393247066_0.5534970671586088","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/switch","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"370a496185f8b7d7a8ee9fce9a49ed54f3159e56","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.bce00e186.0.tgz","fileCount":36,"integrity":"sha512-AAAan6vy+BtfKPwnRD+ujVIWksMtaI/iuDM92jAAIp/QjDhExdezeVApLA/yl89NflyTA4aZ5RgHlo7LRjr75g==","signatures":[{"sig":"MEQCIF0bPzUd9/tHwpC1r+3jy7iPQfsOba26Gn442lrc+G5bAiA/uQB4lgrSPbilKj7PIS0KWSRAeoUmUr3vIAoIIAkCMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3UCRA9TVsSAnZWagAAG6gQAJC1eGRhOszIvfBH9dnw\nrzMIoF2eufzsolMAIdarifySrHjVtI+XfPhVTUx18jmvHn+owQnSWK2fQ9qD\nDoP2RqBKHHmSEzTC/18Bkwmuq6lsKd6SmUvJBmdw8ALjcPEIzw6Wh9AglCzn\nRL3j+P5n+kY+N71Qe5Gfiux/ePTRAhrmMq+7y8d1brBRYcTS9nOZkadi4f5Z\noIZ2YcD7prxaI0bDYuM2jj7YAExDe/Uga8KyfrBtXmwigVoOyTzk3V6s4MJ6\naSQXj05zRFyIPxWzad3kyX31c1/sDCfmqb5NmhhEw1etV2z+f3sTVlnbJ2AD\njxu2cCRFsRqD/LBsIyPgk1opzOYK4HX9nZgz9okkqeQA74+j/waNLUDHpaTD\nEsDPX63/Ks2zgEGFv19T4iNy1ogZTsNVmmOuocZeAsxHnngmpUre0lgL8Nu3\nH6bO6cW/2Fo2Qz1k7CdifSP9RwsIyTqU9bHlEfNEUqM7bGxaWh7LhpIzrrWq\nm7ydg3P2cbuJNmjMHZYFfijducXD4xWnX30UNVCmHbLCMsvE1NrlhZxoKqNn\nHFSEmIocf5ZeD8nhYtsJiRv3lyzJ6tiaEUdHJEwO7oNwqnFzfThmj83GS4OR\n4i52FAuq3Rm+3OQ9QTBWx5d5ANdiovakrACPUTtOpuTN0Uc7rpZmS/uIujwK\nA+te\r\n=PEmq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bce00e186.0","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/density":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/elevation":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.bce00e186.0_1586445779468_0.8299964209006465","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/switch","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed4b7d2406eb4c1eb8dd2d7225934bd485384897","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.927fa902c.0.tgz","fileCount":36,"integrity":"sha512-6A/Ia5oZShId5U8kHrzdLJ6xtJ9vnhb+aMuiGcijny1Yk/qnv1+AQW3Qn4AxxzRPBu/eFeq6M+n1YzOGYveziA==","signatures":[{"sig":"MEYCIQDetI7snEM31b927PeyNCbWeUQhob7uvkgHsiuOICKBTwIhANozPX0QH7FINpckIeuKYGXiMzPH9pm/mFnxHQA80TFq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22NCRA9TVsSAnZWagAAuisP/3q3qWZ1771b6hOfYSBP\ncb1yHNpEmlZ8qhGlExpnoIg45Y5lX1hA6z+4PCwdRHn34TWYiRkPRLb0Tyoi\nPmWycJhPyWghjzI59le2NGxzIHnUTL7gEd6E4CQRFdPTAEkgDF8k0a0Bp9sv\nmq71WKVLjImjUadEpkgAd65n73jK3FRdzVaYc4Qz4TQ6DsuHPH42OMR+1PXE\nfTvkPAFV65ieaM1IGyBasP9+7U6yZ0rfEe4VYsNx4LEZMbJm3bbYVuyh1Tux\nYbjphXitNBaqxjnkD2PC87BWvGfFVvfcmJ9KI2gjSFb3kSEGPbDyAv3BrqKR\njq1AuJWAJD+Ssl7lKJJ9EDD1SXiIBifavKz0Ig4bnS8GbGByeEd8Xpj8ScV7\neznhfTXkuaQaJf19BrGccvS2bgckzJnK62UOG03XOCJDyVNEACORjRR0OFRN\noSx75lM/b2/9N37U4YPddCKMYIjlh1NTXjm/b78gg895WCjghzWOHWeKlPJ4\nITqz5XMsukEECkfTd2MF8yi5zC+JjxWmWZAAAL7K/s7iioL5iO+h6vPPryxY\n+hYE1xmJvHBlwK3es8/KDSkIKsntb1xvyKSZk87aV1sfMOjzMC1M8DUQcKHH\nMoy+NQJ+lVMDqvnbrERks1IoHondgq6hto6cQ1ZwCmkkP+31kDnAi53zt/Xg\n31Oj\r\n=hKIo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.927fa902c.0","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/density":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/elevation":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.927fa902c.0_1586457996603_0.8809647506478548","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/switch","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01d995758c13cdc1f18fba8437cf00c5ad9cfe0a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":36,"integrity":"sha512-5qKsxrpwO9LbnrxWgW/yf+m3yarCLY9zztXc3wkI25/vnJKzTuxcvCkQkZjknagdkTzgDxibOnIAqhXsPQSxxg==","signatures":[{"sig":"MEYCIQCI/UaJQv4FVzhs7tRljr6UHyd5hVdgX/kU2nt2DKYC4AIhAJGFTZ12G9MdCgFGKvvE0vhcGoKWF2rGfftZ92nqC3Me","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMl9CRA9TVsSAnZWagAAULgP/3xIwSUTDkB4DE/1RcFj\n38Z5q55GcjIFXf7W9VzW99WgwwI/yfZ/SejEuEjbSCEZ8WufrHK+XDR/kRzx\nkgIh1ZcMye/Rm4EtYUIsGCV5sRHSxi2eDhyDq7VvY/s9DgFByYWpJZVBRmI8\n7o3M6uI2TmixXx3TAs9ecdkFRBYtywpfw/c2gS3Y5PoYnYiUCBR922F8br9c\nB1J8Xvh0s7gzgE2I0pGAJ0fklhjL9+FHWM9gsGBLGBrhTRBJ/T82vTYPuX7O\nPhRNs/Snq8+rC5bKNjjzEhP6bzmOiSgpr2bVUQL2os5x2YFsM01E4KO9I1bt\n7kIKkvjMHIVarOcsy9QGx1DSatgXkFyRDaVvXSQDNXzrS68gefEpFW1C65Zh\nfloDEUf7XXoArSzVCq+xo7c0QUJ1h6UVycsTTX04G0WQdpnLc7atC689tDLt\nixSY32iBLFuhZ3lh1TbY5oGgVYfjiTwVOIO/ksdvFVAfFKr27qEkxl7jzbq2\nHAT+qKCAeEVnJYYUp7qjZnm00GNu8c8Vi8W8oQ/ttzByLX48D3i1wdLIhIDB\nTOqMNkoVQMd9jy+qNfIeGccO92rtFlu0jla4TTBTsCwFnm1puEmzYExzot1h\nrIo7fqqO3MoXhhKkoWoCkzedbKNIUzvReJ3LF0FtOZzHnLUiK/XrZXCYo1Bs\nXAM0\r\n=QwDW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.eb28b6ecc.0","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/density":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/elevation":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.eb28b6ecc.0_1586547069476_0.12034500144099125","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/switch","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b1d77690a6045eb15c2e4a41b003d103bc862ad","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.816a43b42.0.tgz","fileCount":36,"integrity":"sha512-EgK5+Csjl9fgbGGUfEvs5xnxBwgMgjAIrDnpomYsBuIrsRoyfLhNZW4A2O6vdgu3qUF+w8oocBtPkWSXoT011Q==","signatures":[{"sig":"MEYCIQCM1I5dhuPYgNe7FTEZ8qBYBVoTDrFXJ0sodBmM3D9UUwIhAKQf1LnjAlR4S2O52cjhb3XDYNgVXiS/BSrcLDwEpwS3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNykCRA9TVsSAnZWagAAhGsP/iaWYBGjH3PXgM4jB4uZ\n5YT5as1ReMw12YXo3wnHrv2Uc8e+DD4dp91OUjVinVWTCorv30Uj36+wJxHE\n7TYz3x4sF30E7jQ1ekQiBlwvh/EWhThyzpQjhq5YoY6QGiU9l8109wM1tRiE\nRGQcVfCkMC2rXtJ/PVCUit+LGhBZaK6kOpcuCiBUn7ae23lkgzdzgGEb6vY0\njJm3czfCzc8HoPt307lZZTv5bGxk2wSvV+h2ZPZ55AsuMqW370odvpTOZQ4I\nsGfKiltvJv/LZkqoZSDEHPCjlbeX5jdkReIf1AuYOvtmAhPqU8kQhSR+XbkM\nUpPDeWq4zaxHxu3PliHK0j7NLljBf5SOOzqEhZnmLjM+eQZwj633pU9LQPCm\nB87Jh9OxX50LogUFrbTE+vVN+dvGQLwU/iu5Sz2TRXFjRNzLdCnVOKvX/I6F\nP2+5RaKopxZhVzUv5nBhbiCSBmSTAkrtHe7I9bIeBies8R2PJOw8zo9HKUAM\n5+n0CwphEjlGi17SYdjP8Lf0b+S+BfxwR36zst9lk1Hc9aSxsV72cJaDUPqt\nvoVTX4iVVCFlFZo9JbUPRgWhdyLk1mn4Hv7J3Ghp9lRhqxMMTPfLmevI+DvU\n64R8qrgkC99ms7h1QnIKh4YR9l46NL0+A5IP5/UAxu2L60AP6C495rbhuGQW\nxV1H\r\n=Hi/r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.816a43b42.0","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/density":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/elevation":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.816a43b42.0_1586551971756_0.6737760479585242","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/switch","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1a3dcbdaf50ae6c3926948f6db8a247475f1521","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.008c4d319.0.tgz","fileCount":36,"integrity":"sha512-wt69NlckzxIEWlD1n8thYK6STPrQsy/0Hn1XHKBqhaADuVL7pj6ARJ4o0wQXIzqNo2+s2mcR2kwf3ql6kNxaBQ==","signatures":[{"sig":"MEYCIQCHKmlObNSV4saxB8WCX3McDmnsPlWrDRJPVslJBLOTHAIhAOUJyCmGVX5K/CLxzNzzt+t/uXUiMeSLwS83smwSMcSP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJR+CRA9TVsSAnZWagAAVkMP/1r0r3Q/5AMcAAwQI3Iq\nJL6VWI4Inp0Gk6XCqpFAMGJYQN/+N1KOVVUxd5990Gj3CPb+vCsyFl7psvPq\ntgFPvAEyzWATJQteViR4IxFx7z3GeTSsl04TKIzKpz3EtuWqLMINmLYwNN/m\nT5FGOF5WdR+fZJhnP2d3TQKpH7s7kzXISHEYj8zVb0WmnTNEIinpmUxvLNmW\nVI7E1e85Ai2R0lySjpgIBgt1HyDkl0L52NPXgKgJcyGQzERXI7JlQPbXFatL\nvtdedEMCQwFTkb5P8vtipP4YwHVYJ5wfVH5r+OEyoEpKKP/VE3xu0iqn15tT\ngor87VqS/UJjsi1s2gHGpiItSqniGpjBJjkQtc6KVgo1T06Y/GqhwdoBehCt\n4txpdLAuXD0Jj4EH8ZuWdyG/XPuEVpor5+xZS05gm5Q3WlT8d9ASDwm26BOl\njebjRntbLNtKPkHBLapQ5JoQ//Yy4xjaIF4m3KoaY9DbSUXymBRbsazVU5gg\n7HiQSISdu+0rR0fRzi6Pyjst1kKETANV0DbObFnjKSfrZ/grnHXIi4G978wH\nLTMwzA5nrt0VaXABkwqCVAdOe05Z4GsdfZ2JNv7diuVAZVRcvLJIbhQavazr\nqahymvXUb7thRTQuKVKYHW/JqU26muPkSEArPQXKEY608591/Vl9d89LHBGz\nWc/B\r\n=0vGk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.008c4d319.0","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/density":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/elevation":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.008c4d319.0_1586795646377_0.38202919805937596","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/switch","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3b87351fe12e15151010f25a41c13f925da8f8a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":36,"integrity":"sha512-3k7YB0PX+UX70k4beUvNaZbBnSYRM9d6pvKFAWmFK7zWxUTAEhaOxovAKXY+cTaQbo2mADsl9oWGlMLrBfR4hg==","signatures":[{"sig":"MEQCIH6s9kRiFuHsIBlKB54NQ+FyouUI6QUPQ0JaZgxghq9EAiA/3X4MVifSt0WXSdbdOZQEEDsg0okGjW+mLRqV1ay72A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTCCRA9TVsSAnZWagAAB0QP+wV3vs3Ck6jC2IgWkbVv\ntxYGzNQoAx97OaWlUhOoXzCGVWoNAwXLnK3URxVSxLvN1Wv6DQ6f5LeXp0Vx\nSGDqajqb9T3lXUdy7uTBH6JxEYEE1778QG/cypm7jGGJF5mKhx3JKihrZ/Mt\n6hNeaQ6QMTrYwzmSqbT0hyp6fpQwdsJ3M4xJCxaOwM95Lj550b6A1oW/3SjJ\nF2j2/v3fCjXCdR/mgfEQ2fd48XYxP0sBF0kL/OaVKibgj4mSTehyuRrLUSOw\nLRoZqF7Iw1GMUofjTgarS3Inqmg0XGM780emOtEOtBOLVbf0w04Tx6adApW/\nsoUnPTYdt3n7qj4hQzB987vsbz4DvhdeUSvuNSzlcNgk6RjMDt3QACd8pMHB\nf1xHDRGi3nD8ELxS+g36LorKq3ZapPyVvf5A5ABvJLWDZT8miCAdBDLQ3pPS\nKUwwptQ2d8oNeWybBrunJ3AphwzIDN+/57Ttxeu2mV8ixJc5Wb9FFAoqpBC0\nQjH65O6jQP8b1sTPKSjPDfFzGjaCj1617arXWqFRIOYMRcPAC1TLOhOlhms0\n43psfxzOywvze5tXSAVGjtoIgdWQyT2YXOK8UqR5h6Euhh8DrINvEi+NeJdf\nah3fux27+FQf6qx+PpRk45zdfAHyNIsbRgavrj9r+8CAaTLXw6Yz0eYV6ebU\n5pCB\r\n=jpNv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cbb3f28ca.0","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/density":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/elevation":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.cbb3f28ca.0_1586840770392_0.48749881575355114","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/switch","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f305cd50ec3cec19e5ecf45c5d825edd30f6cb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.f172b0f90.0.tgz","fileCount":36,"integrity":"sha512-kvG5p8xytVV5yadUQYXDRmlsqqsgHsCrDD+8ew41TsEcjupDWUhmc1xh/s3wXboaN3XeOKrZmeLVlCKw6sWQeQ==","signatures":[{"sig":"MEYCIQCCPUscZtAAc78+if9vAuhyibEEyDbZyWlT9uGPlkRo8wIhAJFserOzOLrEcLqiBf1KWvxfYqifkd4UWX9suc0RuZWw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLpCRA9TVsSAnZWagAAuBwP+gMml91ksLbgcbktta88\novo85av9JfPBx3B3KJS5ykJ1asdmHFYw0k4e/CMrvJ3He1dFleOxzOYZtWtM\n/IOVe/r8C6ea3uDdxN6O+ZDi2DcHX2SPNesVG85/rbwceMaNFtFOdzd243FP\nalViLNy4qLycTNQvkPrB5d6dhPREIL/FmqcUsHpsQhBIHZA+ynAwG5zFvh6C\nHi37lKTxqYfGvv2aoIKMpgbNYZ4LtgVCAgKV+l0FJ6NB80tkF2JhDUt09+GQ\nQz7uWlPyqzGa0n0Okfq2YAdOUrk9fnAnZHJTeSHVGMN1MwFD2IbEQKCaw+8o\nMsFccmiSIj+aO1YSz/Jo1u3YM+Xe89NThmFZ1S3iLdFhdcE6HLzu1oDy73OA\n0PUe1tjxKsjzyztLnW0fmD20ewX66Slc56DPVZ1J9qdkk1OiKJDurs0pW6sb\n4us5Hs7+88jJ22F29EUV1YWeNJ2gQuEMTlDD/ovdT6la5f6pLYKfV6Opp1C7\n+fc/cGTbnNMifVmr5BsVVxiqErUFRteaPzZ7FtCkB2ZLihz6oPWmLCu4c6aF\nK40lLdOAERfSwn0jSyHAq5OcvcOPMi2M280gMDS5/f2NnbqiiRgfs7Tl2XN7\n3zja11SqGjnM9jFvkmC0K0sk7ksTdxV2XfeLsvnA8TuBO25ox6I0j9jFRhZb\n+H2S\r\n=CzSz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f172b0f90.0","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/density":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/elevation":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.f172b0f90.0_1586905832730_0.3911902322518579","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/switch","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77a437f7f69911729bef8b694deaa142b0b73b9b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.c02642273.0.tgz","fileCount":36,"integrity":"sha512-/CKXMckx4iQsrhAQrSu+Ofsr/oF/9eazqnJBigJayUwmefxJshGX6+1ZHhm+Kks+x00l8BWXskzxRCPAC4yXcQ==","signatures":[{"sig":"MEUCIQC8UXsu/mhJq8L4S/LF2eoskWpd7lR7+p3ZFdbbDQnKHQIga9/DP/TDS0BkxkfyUpo4eDpKYWQnBQomQtmcEBbGYzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOhCRA9TVsSAnZWagAAkDgP/i/bmtrl2H/OvFIeNPiE\nNbfa/UmfQVXMRwT7vkjB5MzN2GaaEvSh83QuHE2ybcvP16ze4mFvnkDyRh0U\nG5hAfPvbHgcpEgpTwHLFVInGW63L8o+iu44REo0+td3vYtftC106Q2yy8WdZ\nkaktvlN0hTudcNAfJ88xgPF9E+MMB+oXqTzk/R1T4rYJmty6V3D2X9vQQdSd\nau7thmSuZPhmlIKRKtdg9sm3uUfVjTNAkxrOXKuJUzj1IM7Bag9FVXP1Wwge\n7Y/poMn2WEJrWzDd8Znvro21hgzvia+VaEJn0Bh7Vkv55IClKPERxCUggSYg\n81d1Z8c/jqS3WMbORJqqPUzdYX/l6HzifEJ9PD1i+zU6izxrRJOiCUxYf6Zm\nZcbpUA9GciUHjFgreIuwP+vVfEz+srtekJnEtlp3ZwcMsUTfLMKMLyNHtwCs\nkJEguKoZNB4g4K0+j8esoBg1wXQWCBtxQfDXhykilW3yVtAcupcCVJIg69fS\nbzHddSfi/M73PwU7QvgGuUVhOGiIUhL6CIv/9OKK2gF1Zl4H3PZ4cWh0ofZv\nCcNsUI4x3kklk1lY3SV6KYBIM8JIWGjWqof3nuzE/NiXUSTN2oTVwVBn24yi\n7tX+sqbJMGr5EecUqFNnfoEYtrCfjgvJ7ZoWJm9dDqANUM23M+Pco56xnLEk\nTdwx\r\n=75hC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c02642273.0","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/density":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/elevation":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.c02642273.0_1586967457299_0.10985628885003873","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/switch","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7868b0a7bfc3e2139293c7d5d59a6f2447990220","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.8a299b568.0.tgz","fileCount":36,"integrity":"sha512-syhERI7rmUhcLG1zixLJWuVmJPZ6dz1lQRcdfxxcvYWxbPD/AzWTGh/jh+oECAg57KA6b5/Oa6jiD2Al+W7zrA==","signatures":[{"sig":"MEYCIQDqMFoQA/VVdzd8hvD3Mrn4E9kjHdkAsg4fDqRGmFqNlwIhAIAeRPV6Id40ibhACJwnZQxWuyXE7MY3VFTCsA2x5ONX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44SCRA9TVsSAnZWagAAChMP/jnME7UeDGkr9u4bidHb\nhMbqAk4yIv74DSeSAAuVNo661VNl8fFsDNjDUH2W/tWz/yYLTP1nFwXoI8W+\n3I9eTDYdbHMMqm6JS9q4W41klt2k5h5Bnzq1WMNo5hN+W/TlPb1C1JRdCazO\n37F16UvA3eg0oYUknDhQzabO9lsW7oXvBIJ8aHRNB5wUm620TcltnzD5wAPz\n2HNn8kv6Zc6pqi/RPzRKZiNJsBLQKVQK8rugpr4ehgqLf4NYOhvHoZwvQm+1\n/8Dg3T7Iya2vXcQ2OBfwFPsi7i5doLOasKn5JYYeyTzh0yU8Ap2WU0MrKX/I\n+C/qdo0CwgkAh1uGq36jZPtjALHwpG06HzgSF993QO0xASD5hHgRxssGumbO\n7rmUAfbrbEcnxirhIvzaHbwoBOre8UuIyoTVDftoMzXikyvDee6acyzURmRy\npdJpY7woyTLDf7KsP1bDEzsuLKwiu6e3R6ydy+gxujF6YqUIEz760M78zhtd\nuYL6Bs6ZX1g1DmZuC0x8171TYdmOdDmL2pBAAY4CUXfqLkdPeZIcGwWCcKos\nG8oSys2/ltSy/Eo/RasFWX7MKG1w+MgkiYs0Aq9GfsfD5G3uhxa8Q9XY5TT9\nYqYDqG9gC0T1jX3dzaJSKp7IZ+hNbWpJedYUOiYPP3Pfx8D9CkJNNT079k35\n3BVT\r\n=B+Pp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8a299b568.0","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/density":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/elevation":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.8a299b568.0_1586990609604_0.0029066004887241537","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/switch","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5366d3888a46258eabf162a61fc8c3cb3b32f48","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.490fbdc09.0.tgz","fileCount":36,"integrity":"sha512-3ydj6gOaITdVNTkvGoqNLlgRXfKAYzPJunQd/PmX6TqTmiU5GFjFugh1gaduBLEQGzyH84/vVoW4aCds0sxhUw==","signatures":[{"sig":"MEQCIGnlEKPFuONI951DLAIIo8RaOfnwXCFJHd2Ce1ybG7KMAiAeUuriiJuXzug3WyL/EFZGoTySvoBke5V/EgpPnAE4Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RcCRA9TVsSAnZWagAAYmIP/0tI803qW29UQ48TIckD\nU9zeVs9Qa7auE67ZsQEvf3z7REP7AdDLMZzg21sgxOMhKpMjundGI8yEamrx\nAePbvqbS4KD0r9ipCYz7heku/p1NolDiptDPmHS2u0mcecTnWc9fTAG4S/5C\nP+udFzQKPAjUd5u8hmHPXKYXKkld5kW+9SI7P9Wi5Y1MYl+DLH46C814ZMbQ\nB8LOvxs65hwLbhhIht0Ic6v1tYcKIzujQ+WPDDxFx3iFMxsPU/o+u+aOAJUa\npCquzBrd69Hm3M4Tlqnadhjc0wdo0lmDFlna/3zLTLLiVbvxB84bwNCwjAsQ\nygW7tRSypy6RdlAHbyf9EAn3Z33hX6qmwKZk00SGABJlR4S0PlI90qeCWMP3\nGnAYmImttAfrxCv/K/AkQsKLSOsueubl7HET8VyJPY5vGfDOJy/YakKYpcKi\nmIcg5BmXjzeTYNGig7FcoNlvJaYhxznXne6rwzmHmARITTyWwDTQpv548ioB\nkTRTVmvt8W00d6VEvYmXtEJC3X02BPKr8lO8+2dAsVvau1E5IX31UkFpk0Sa\nXHNOVlj4lUxZlqGjxEpPR4W4sH95Iyhj7sD0hbF4cnGNMnmZHpHck4UxF0lD\njzMZFFdzjUMFAaJTQRMvBxuXl8a4eb22UIPVcSyl3yIK+wfw6E3K/ytSk4Cv\nS67w\r\n=1rNC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.490fbdc09.0","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/density":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/elevation":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.490fbdc09.0_1587016795974_0.4651520171187371","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/switch","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"608c16ab262046a5a65a854dc3edf94583a24e3d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.f838c6e55.0.tgz","fileCount":36,"integrity":"sha512-ZLtSw9TSyihqPUwUKmJmW031qJerzFkD7WwBvulnTWyt6KTm8Onc/Hz7Mk3/bOwVE6mWnongu8PGM3kWAQR+yw==","signatures":[{"sig":"MEUCIF2bRa/22/L+F5w8sYh7/thnDeumZphVzQPQd5ReIuIqAiEA0m3qac6jnlg3Zdz2e8EFO6pMu/zQlDFCryfMN2J2qts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGstCRA9TVsSAnZWagAAjMkP/376TkQ4PL8H0Z2/2rZ8\nCOemIgIWETyfRODNClDHF+lNdAeMLfjW2iH6bcPjmiQvE+NbYXfa/C9TOe0r\n5ABkYUHg6N63oc8CjdmkTOXrDP+PHL2B0iQrS3/nTqVsL5E1Uj6WyGKaA6Ei\nPQ/UAcCfKVl9Tq76uVKScFiGXKNRii8l9fmZLnV+2SKedtXzcbEe3qEONyrK\nPIFyD95L8LdTTlVyV8+mG1Rqnh45cYVeB6vHwRP35/8jOFZsNREbBHsx4Ml9\nEGJbUWN8/gWsc12LFYahiJSzBTMzFli784QqwJcudpo7R/DyniNgZLUrFv9h\nzvnJ9rAFr58nRlyUIufbyuNFmcf0d2vcvHqnL0zM1nR+EGpYVdakHtsPO4XM\n8QV8M25LbxS0JOqLuiuSybwphNmma4q+/F/4br0lZnLRnsI6DLHTG725fQm2\nxSwwrDQ7WKcvqF2cjYFoKpkRsUx0al+WW9qtH2FxUdMlg5UZLV/sCyoExMEs\nft0CtzatzNw7c6gp35BK+9ct1NzwE1rdkWou5NU6KRGYoHLwVkTDCyOH3dvl\nWSklI1Da3ffsWAuAqYmLDFWhxYKlm8dVi/1NPQxpRbNGKCsnj+a/nTBnatJX\nM3p2ZrLZ5xcEbG3UujZM2sma5Cvctpz11ZuVWk4otOSilNprzhU2JiewraX8\nqWPA\r\n=doZU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f838c6e55.0","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/density":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/elevation":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.f838c6e55.0_1587047213206_0.9022684640596828","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/switch","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"888dc0504a7dbbd2be86fdada628fb9395c8b616","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.ce6cb7024.0.tgz","fileCount":36,"integrity":"sha512-CGcRpMmqRtbAxsxzwEFzbmVaVPFLkgkV26oB5B/3zLapRr6H+e8VvFuNoYe0qgjg2ZdG1dm4/mothQ9bEPOF/w==","signatures":[{"sig":"MEUCIG23vOOOS4sNpj2fv4zYrEnvRyTLY/XobLVh9VQhUYIzAiEAnOcOYhWdFVNs5QiQzzU8Yq0+d5XNZwLDO5pj4dJS090=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJObCRA9TVsSAnZWagAALoAP/RbThtVdXkcn1HmW3y65\nIV7gQ9g3C9ByWyUUsGzBNyfi36hmxmbEm7Ud8k3rCyC25Uk2hKTMSi3GDGLP\nmq2hTF1Wlie06JeWupasi2Xd0YF3gvQO8aXhjCJuy2mFl3hqLdmQvSF5MCiY\nqeaBf4l4rH2xC2/q1GaSjAtvcbjCFiiO8hbZ5gC75TvyRYjaRy+AjQPVumuY\nvP19ldI0mUMOJi5AaxJisFnBAanB2vP/AD+LE4AeI1r0jz0Nr1brtPsD7VQx\nc8lSoD3NzFyeYuK8ABV5WgEzJ1nDACf5DymnrECDFiraXtL0qIUhe6CX6azA\nyI/MeGKqbawJ4xJwd31UyaQarCXmk0wdA5n5TUmnDALnTi8cYwpYm7Ym4RLC\nytAqjtkH2eMndneuJtyT8z5qrVCiUySwEjm1QDgXDikEz+IN24YeX5Zt3Pdm\nF4TpbFEd82LMIBzSh89XpV+Km6uZaC0Tm0IPwrQaN24+9Q/C4prZtmJErbIE\nv0WG/sMtL0PsFrR9tj4fzWtbYdfTkX8fuzE6AcbujC3W2pqAK2NjQqUdQ/xg\nho2Y9NF/mwTq3veuLw2RqtrbmarKoI5hCcjqBGQiqD2lYqdg7v19fhgxjsxL\n+XpRZ/BZNxckG47r6OXXEpGjMYfWhzui223SsqAE5DEdt0yaSIzrMTQeY7GG\n+bkG\r\n=0w7r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ce6cb7024.0","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/density":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/elevation":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.ce6cb7024.0_1587057562884_0.6939563945012943","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/switch","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac4341f8cc6a7fe5ccaf96267f0dc7becdac339","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.0ab62a65b.0.tgz","fileCount":36,"integrity":"sha512-Zh6LejG2sHJktuG/wT1C5x/suZQKQ2zZBPE8ablf4pXNCDRWP6dpXb2LH/THBlXZux7SUWRweYT2PkO7Hsl4XQ==","signatures":[{"sig":"MEYCIQD1zEMUgt0N7kP9jqH+R9vE4jHD6jz70uRebIvqHy8YYQIhAOqYaBXEJ7L0vnsArJZGnAGgID0P9RjrgTeDbHosjAgo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKntCRA9TVsSAnZWagAAwVYP+wVA0CCEFK/BYVcu5e4T\nMhWmuSn2QflQQ+41retahc0gCsBelQC1XydxLlAJ25tDDbIFqY4YMixWIgK5\noCdN7EWI7c5HqPFBC8lXrdDlOu3xd7AHTSWxQKxsmCQ+ao3SCpa5GQs7H6tx\n47bWf6vWQjIXlNJUT+lVWDKOZtreHYsKkBiF/Ewu4JyRumxIht7VXD8w4+AJ\nWk19zlZdwAiXzuGLlqosRvjVVkNRDVOth7m1Ll8dzwfspG+wHN0ZIxZVI9Gu\nMBstYR5gMWLrO5Aglht6Jp0QE70GKY2Ub9hHWrZVzgLCFk97U1BN9VAi2vdJ\nhkv7wh9v55y0Nkpgq8FLxcoA/U1S8eB4sBDp1amUtX+cGuFcL8/KJAe+80Ud\nL7t8WM2rNife3UEk0owYimmt46ma3ZnslMUzG4kqXHTbwbbNWrvIyaK9YMLT\nqi2UXvd3DUcFy5ZQcPgaKAQCZPUx219FupnboaInPTjvAFLGWJoa0dimkEC5\nwW2DifdcvCxfYIQjw3ZrDC7RafYQh26KwTIyr/jLWL3vIKMkm84GIMmhbUwo\niZBZmWscwK9hu6LEXg/TN0V5+3L/NMsexTLKBW+5WT7OcbZkD1M6ixQ999bt\n62N9IT1SzV6oSxWHs5+duS5amuEm88AfmkVPHqvzK4iPT7fqahi5L1Fq8gtH\nkVc3\r\n=4YJQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.0ab62a65b.0","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/density":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/elevation":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.0ab62a65b.0_1587063276769_0.9755707471770338","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/switch","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6ae5416b0c08e88db955b8314f8c3e9000f5162","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.ca61b656f.0.tgz","fileCount":36,"integrity":"sha512-vSOdXW/6Gj8pnoM0o3y83nxFCn32qfH0zJRygjoXJjlaqtlhljos07t2gPa2szMBu9uEK53qwt/sUPBiRYw4wg==","signatures":[{"sig":"MEYCIQC3P71h81ksnuWboIp+7h9g+Ud46tAYsDPzkIDr0J6kFAIhAIaDPlUtu9V5LuANV8+QyzeD3NqhekQ+GyP+tYcsA1xE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlLCRA9TVsSAnZWagAA4PwP/2ziaxS1GnaNCT7NdfVt\nYOJ7SKWEoc/pDs3nLh8GG+dLsH9C4IHq1gIgezQ6n556R2T/4oU/d9BV2GQN\nszeKc4xGhRW4bytDobUWcoN76pCNH3hQYu9ctE6Dbqjg3Y7RJMgVS7fbya4J\nh74gzbO0pBwmBqo9u2RX+bjitbn1HFzcc24UzhSqMpRY659NA8Gn1sMR3/hc\ng47axmPdHKp8X1IGcZ57M5eAEjPOePV5dp91idFG3bmrdD2zLLmUqzS4PWlR\nQltUjKSqvI3VqFrJ+xUlE9vNks1Dbwq2p+7CUgUQHZT16UK/VBghsd96OzxR\n//eexfZ2LqKcco/wI3Tl3BReX+0oAU7xqrgjJQrO6b4ZqC9M1VJHVduUV2O1\nmQENpeQqZIX7XqvY4K0mBw9afsMq2ozWoipaNE9RVA6EGzb4j4Z+ruJ7/Nrz\nHZ2KKa/zynpHJUbjiZEhk+YRdAehElGkb/yz4sSWxprdkFZFjq49bBI50O2e\nAhaF6DQccjToztm13D2Pc6OgAArSexDn8x0r45QXiC/93kkuraL+MKnkPd/7\ngNbVAX1r7xBEYoL4WyUfmhIHfjcw0yMa1/kAhCqKpaXPKCk0sxtkO/mmvC7t\n1PSYmj55mmBjF76Z8tzlE20Q6J89/nfX9pvWrM/PYiED97vhI5tUktcFqGnh\nfa3j\r\n=NcKU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ca61b656f.0","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/density":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/elevation":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.ca61b656f.0_1587067210597_0.49507295899988324","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/switch","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d3c1d98677c425bc191b16dd99fdfa6e76c16a4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.45a6615e3.0.tgz","fileCount":36,"integrity":"sha512-/utroxWyAg1qa7Rf0WxECIgU3gI84tjMSoMYFZfwv9T7AB43EThOvv4KwkBEJ8k7guk+aY2U0JQkGUD380WwFw==","signatures":[{"sig":"MEQCIC64zI9skch9ywij1uczVt1x7Z/zOpVHLfp+WYm7bVpMAiAh5iwCRWwMvzxr3mVNdgEDERdREQPYyrGQkC42DxIG/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEDCRA9TVsSAnZWagAAv3MP/1vbpz3JP33jAVuanA9P\n5UPrnSIBzolbencvWZJVOAu+dKGj50Kwe1A1Bj71uomgjeVBFrWs+uCmgVB8\npzcO5s3OYvUNLaSmtg4AwfF9MeqdKayT+VK40nSMw7HtG2GqJrX3Vjctl8cQ\n7RHmU6w9xQ6P89dRpSU1YNJbWerA+QZpaq84r2qJ+h0t2n4b3FnrF7iFUfCg\nlrpiUL715p7d5/DRIrTnChsokhty+Dt146mpcPsKCulCLXsi50/IBYuczLUI\najkclthGUOcghjHdCNAmRpmk9HQIhdrP0qA737xIKUhY2FV9dnYXTgp/e61f\nMmypeSF1NlN/uSC/9ReHuNZE9+4WLjNx6EB9s3WzAGM8oD2DOdK9ecLffphq\na0bPtnaQPuJs+wurC0k8kl0U3CGYXD2q0t06K9e8okoHP/jwud5YnU2WvQyC\nSQ/ZxRSUUgLnXxpASkXWwGvfYfKpJqGMkInPYS8bYex0JZAklZTrDbXwj29k\nPhC2wp2kbRdyrUH9dFdvBN+LMuGbvl8vaG0AS5W7VbbekyEBsYNiA3Z5Ko/5\nxHg03HeqVSFmihz0jdfF+gxZy9REupdy0VuFFb1Gj5azzWFp1sjTtHWZ7hFO\nacFC48IG3d6wsln17Xc9J4rCsuFnLw0Ozs5jCTLvtoVK97VIyj5xuvJApIyu\nfdZ1\r\n=IPfx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.45a6615e3.0","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/density":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/elevation":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.45a6615e3.0_1587069187077_0.5389780913936772","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/switch","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d28cbeac7c7c7ee43228d281548b9bc4e7fd2f0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":36,"integrity":"sha512-e2mzfe0f4QTa16UaULOls2pg0R1Zow8IS8ElaPQDY1PHnD3Vv+TazNTVwQmBJuOM1fip+0CbhyrR25cMyGxfdA==","signatures":[{"sig":"MEUCIQCGKoXD+qKgI5bqHm5Bhwn0tEoNukwQqCi/8YDVl1c3TwIgHOHFky+NKz8VA5V3N5splvGJVW5AgpSj7wcZeWgEc48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeo+CRA9TVsSAnZWagAAGs4P/2EP/p1n6fOTkI+ODI16\nC313UM1GDl3waDoCbBR0Y6uGRsSGuxiYISMt0FODySHkdce85hgfrPAN6uwE\nZt/cnaJd94NXEbibpndiPJazLHJ3/WrLlr3uoWYNIbryTgI7Ie6mL2mUYH+Q\nDRfzUXmNZpcsI0RjCSBBN40p8O35zc9ezv29lcvwwJQOUfDgU2e7VxJtioGP\n+vyNXTpgk/ac/xwpNgOyTyuR3VeM0vrnT9ZBoXSELd1tw4kVHKnbqgQOGyKO\n37gB+iAuh9u+t3Dg2ZJjD+dSHptrgkoorLqJ/0CS88HJyiUFs9wcoMM08/p+\nByHAh6Pd2wm4L9bMkGJE310L8fOS/qKV6syyqz0Ek/PosuB60Y0oBJ2hDJBx\nXEnQXxRt4CJo3i5xt5N17wN+7E2UX7cedmIDH23Jd7Pq9iePsVgs8cYM2S0B\n+uNkSRUv4uKVib6hlLHIw+d5P5873K9SiZYLi3cxXR4rnmQvPpDz/Pj3JJBb\nqqlmb0AgPVWboL4Lqk4DGvkxHtmV6GvZDhwMWasWRjOCZQB8eCn23t3jdb6a\nwRrraG2MBnLnlDhLgaaZD7vFwiyNTEM1kazkV84i+3YNySfz3klX45/DJ4C4\nXQxotRN0cdDwsnfth6DOxwMq1gfpIL470QWec3cS4PTyy9qtug94ssA53JBV\nR/Bj\r\n=ShFV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b04cdb0f.0","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/density":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/elevation":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.4b04cdb0f.0_1587145278003_0.07088497759810819","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/switch","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72f666effdb78d42a5c5145146e5cdf0a8b89ca5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.b273afa93.0.tgz","fileCount":36,"integrity":"sha512-vcogyuk2Mcdu2mX3sUEelQd5DftjRKyKPTtzGV9ZA6sip+6PqHBNbQtu7I0u0HNkRZPyja53PR3qX1hdtsDBQg==","signatures":[{"sig":"MEUCIB1UbpRgch/HF/vsAu8SEDEZmpmsPj7mLS0Mlkt+aE0rAiEAnyhvxKa9KdIw7FNYSoD8kOIBL/sqa6JCcFfjEuzH1V8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWsCRA9TVsSAnZWagAAwdIP/2CL8TgGpGGZMuJcQNsC\n9foTZEPxVcgYB1JT/ehsgVqj3rTVniLKrdFIViHQn2nfs1s2VpBVZt4jOMFb\ncVo3gTfWAqD5ISw5XslXd5b5HSX8ENBp7KZDRRxlcwKxXB6MuUhXjXgqO9JL\n3BhqgGOr++5gx3rjACzCMPE+3/GeiXef04ia+OQvGks69Hh8xJgiccxl6BE5\nIEyr4HZAKXKcEFb9MYT1Wu2rYoPh+JDPjupM2br1B0g3dJXFi05lCDpsKQ0T\nomY+vcM7ANooqaplE0BFJh1ekK//HVcUrZZgx/QsQ1K/8SxzbsIT6Jo9o3Ya\nFd209pti+MygeiRkC6V2zOaRR8HonNRg/rZk5RwjTKDVUePrwxuGlxKE64au\nrDhecknVMuaDKwRSrUqVwl2kXg3QlV6F0xReLEYB6s4oGyKdWMN6PP1W13+g\ngfHXK5ZhbkNfnUU58cuL7iYEwWbIcKJQjJNNscKtTwwDZ12F0yEniwicuOD7\nrbr2garSmgC9k+/95rtNpp6zVczfF4ZL48ADITcVsSchkaJanWc+Ppjz2kTI\nzQ63ba5BWxk6h9OJJbhdQOwIaA5AYDFdaW5gufoY6wPUjROJIDcSqoETaW+J\n6sEBVZSx0f08A8We1OK9vloTYGQEOZHtQ34e9JIhTl/P8gj4MYbjXGFX4w8B\nvMth\r\n=T05B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b273afa93.0","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/density":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/elevation":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.b273afa93.0_1587164587048_0.7869749373683563","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/switch","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e52e2163e9a8904d123590e61e5cd8d9b534edc0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.b70bc601e.0.tgz","fileCount":36,"integrity":"sha512-3DkcbDC2u5kPXHavgwwrYDj5gksk51at6p4WEhk1xQ0kYNmbNw6wa6VH3ledoPZRZu1iUJy3ODVE40y1l6ejUQ==","signatures":[{"sig":"MEUCIHcwh6fgO5c5VPXdYJTsE8r3gIxjldfNT3XirwkRODq/AiEAv80+UMHbslgRo7aL8YDe4IQJMsdLZDXoMpcTr0p9L2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjoGCRA9TVsSAnZWagAAkWkP/1GDINsNBynM9nCM9OXN\nlW+qW8ORf2d3tA9dDJtGXp4i5cShjutf4pcTYfvnE050vW9TEFnITqCRIPNX\n9VUZFue0DkyAKhlfnv6HpmzR1AycpRQ4KCNejt7O1G0gy6yE8gcgwdmB90lM\nXFM7D7lh5w+g3JcUBSy/aKfZVGCK/TapjMKt6rcsQvosoMjKL8U/sqhobvkb\nlXJyEoshtaEgdZY5sv/2vD/J6KLdfZLKFFOGlZsXWLKu0Zc47Gpw2p5LvtaU\n5nUh9LLLV27oos6hwkn8pQDViMaTPvULHjZ608pPNtD6SkzkhE6nfZWMLd24\nWcRoERjoWdMRXiqoxBw+yTyfNIsaRaNxDjZ7xmZvlBm5S9StrU58H4Ydm+Q1\ntGhONSYlVvGgHIk2y8qpRetzxwzFYU95rzdyt+o/g7kYyKzsBc4ntBBveAK/\nWqomZQUtpn3aiVl8PRtQvGLGtBGgFcO5uomCS/CR8dFsmyhygPTDV20GuEQp\noc/YHSSSXudp9ruzQjwlhj6KPFckuQ4G5HV/UVYGv8vLH6qXa/aQLMhpClJd\nF/WlbbCS9w9j+UhoK0X5D3xbrhk16aom3nqQqgQaiiFse3bm0sdJNQcqiSEU\nHtO1pjLEQTZVPp4uRA5zRAhRZY7fKmPrDfJsbY+9JjDOIHwSAv/TURqCc1Gq\noyvO\r\n=Y/gY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b70bc601e.0","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/density":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/elevation":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.b70bc601e.0_1587165701565_0.6340898490356681","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/switch","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4eafcf9772ea136fc5f9033465b819e708b137d2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.c4b4bba96.0.tgz","fileCount":36,"integrity":"sha512-MiG4YcUpcE/qNLQHsO6YewzFd9nljJf5tX2VBlHkM3IkfYCNhb4vFXhaZMFff+aMiK2/nbf8gZj4QHASs3Co+A==","signatures":[{"sig":"MEUCIDap96fXWuFRZ5JMzLP52QGLTd1rbqHyMdFBapusayqnAiEAsGky7c2dAX5qUHruLfVPcpndTcZyUv880Rj7w5Plzjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdCCRA9TVsSAnZWagAAowUP+QB3cDCLC8und4Yk0H/i\nXFj6UoeoiaOmBK0B86Myd2PQqgVrpR3HidcjpWMd5J3prIFebY5reANXPlpd\nGN49DdvhRRy+PljZMzpiJDZNcy6XvpLupWv5/Q96bPRyR1ezFNZ8AgsSCVjz\nMShOlI7Ff/yDd9Lz7mS0VclduqVgjFtdYCKWQ/yqpH7bbUjvMOeHuPICIybr\nDLvA5tD9iww296RpVNFi+x27Jvb6XAxKkeSQBYR4yYTycrn6E+lJi66dawT3\nxzRVQIMnIoMIurf4Z2iJA4snkbFMURwq57qbihF22Yif/Dunfj6TC2zP/Z9b\nzA/+iNx/mETA3YH8cIkTg9JvFJr/YfXAUbdOOCy+41SQZqd3Fby1bP6bVWDL\nDlZW0l5Co6uThFngod9SRx7PFiJfCPzJVBff/YbM6xI2RczjFxG9cix5nSn1\nyVjh7RQFPWJXVdn4FJ8mp7Hr90zUY4SgPYj4RRpUldYePuqnDz1zcIJaQu+o\nHjSSSEhIlqAZdjF3fGQfIaZa3GIr4RMn1KR5G4fm4pEX/oC+qIw6BVuw/sny\nJOo3YkWMgpT4I9acHOp2ktuDm9SmtgpEQEpGXcZ+6d4pUFgXn+9m41wVyKTO\ne2RoCsNYqTNzcv79H9yOPINihIfXPrNxuW0EoWhNMgK2GjSuy4Tf3zQXD0+5\n5cUA\r\n=K86U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c4b4bba96.0","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/density":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/elevation":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.c4b4bba96.0_1587169090018_0.09977209908588014","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/switch","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d9bdb66d4ff8ad0afb3b590ead0324d7a14af5b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.6c1ebc721.0.tgz","fileCount":36,"integrity":"sha512-0AF4wJHmk6gjEc9ITRdV3cdae7EqUvLYaZJOZdvM+JBiAm9sDHYo60+WX3BGXoLjqDSVKWvvN65zeU3l/sUdSw==","signatures":[{"sig":"MEUCIH4LgVhyTVKzyjDvzQ2I01Wl3pNwADPuKKws0WsASxgrAiEAzeyf+rgzoYPYnuIE1RHU9ZAjBSAhXWFGBMTkl0JBcQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7pCRA9TVsSAnZWagAAthYP/3yHke+ZZjaYs0UR5sU0\nGhuj9TRUWj9OONs46btALOxoWHvPYoldGcJp2kHyEfV8CdzSPZkuc9faJg3T\naBLTbZmxFfh1T/OuGNYM4zagTJ6/lfU0sfoAsxtDWBN4cqYVrUakzrklI0S9\nPNfG/iurdNYafeEZG3nQllgCl4qmxtKnn++bKN4kIKDSJBcR22ipKsr1uCpu\nWsej/mdl0uqD1qLWG6CrBvwFczgs8nokQSQ7bWuB2kjEbg2xKl6uueo/l80K\nXx9aegCLDKLiO65zoNrZwpcR6wQOl6prQbXhW3/EZhY9dz76LYy9L6a/xYnY\nVX9J8urjbhOm/Q8JGh1bpTN8Bxf7W2kWEgaGrKRYoR5FAgXmhw4l8jxDFDJg\nsI3G8t9uHk4kf3z4WHNWH7aDUpZo4xDUOz3rBKklCsaceYSaTQk+D/xPyTmJ\nxs/b2xLQfmQOT9F4Oynpy5WW8yoS/H7USgpupScxe2P2h6oKU6KYOLCZ8NKA\nw39/1d1WZwCv8Dayy49Mp43CBBNiuIQ+UJAPTqrtB645R3Q0cPIu6c9ZRjvw\nvZ8wXZfanntSTOwuCZ76RixPeX3CJ9KeNi+ENAEIqGFMdXcyFlyQEWSUDmE0\nmd5KQ5WXFiuaoW1li2a4thrsWZ0whGMiOy7agE/d6wIBoBQaXfOVVaKRwx4g\nLtrx\r\n=GnQ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6c1ebc721.0","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/density":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/elevation":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.6c1ebc721.0_1587412713192_0.17339216563881887","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/switch","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25174131d9bee324322c99ded78602f1fb222446","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.9cff4318f.0.tgz","fileCount":36,"integrity":"sha512-BliQg+OIlFQvKPyu38TUcc5BelI2zyFeKZZ+wUcv1PR0MlR8SNZxhM/rFvgbYx0RVKiOYf8y3yK577hy6aUxCg==","signatures":[{"sig":"MEYCIQDqJ+PVgTlpNNOrY8mhmJQvXmAzgsiTaW1S85VduPb5MwIhAI0BBXxhyHR+kqE23VxKY84cP7xfq/1WnMlWMcE9L+mP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxwCRA9TVsSAnZWagAAlpMP/AxZhpV1P7KWBMOTExcz\nfA/PaqxF2KqfAOZb9BDu+WaCWEVyteNRpfY28wEOV+xOsZAwrOh7DEjDwVDd\nXesC+G0VRycV6HQWvD8UgrdmR4M/u1jnR+/GBOdKYnhe4BbMa1gUziP7mOcd\nASKNXoWlCg2jWnVT5732VsnyWgdfVIjrBIuLioBjHyhdKGogYQt30M0Rc5e2\nNs435mDDEVMe2k40MGgVCiYLvfVq4n/PuRkJUzO7+tXpLqc/SPg2+LXO+J03\n1PV9hZiBYzeTX4RzPSY6MJHAGKr1q23s6YNlCtdMOEXzywKhIlcmuccHzUob\nDsGRy68nBB8u5Pz4XFoug7aoouXojlAEiong3G2gzdIZsnldl6W/kEyj7keR\nZy8glnCp+HC2D4Ur+JFYZ0KOnjPpK7wlhL6dA2C9ER8E2GQbGEg/pNpWp7rn\nkmKN6Kn/p43ixwCPtLilov1dl+g6yCC8NTPpvRpr/gQ943eFWLw5MRKskWUP\ni2osexICQVAhW5p9a7f9tRIixxLzp4EoS5AierL3DEnSIkp6WgtTXBnmcbBR\n13TINHGU1W6DMlDboVLVTdH0rlLvd2nGyegQEb8p8bwYK/+2DLQx1scKless\nW7PoyCreFVELE1cX4+LlDxDgtAqz/ZjsQzxQEveSWJikquW6AJN3h0urJPzD\nUe0C\r\n=4StR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cff4318f.0","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/density":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/elevation":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.9cff4318f.0_1587416176015_0.38574340667700335","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/switch","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"999194f687c0c69f7a63cda13a363cab37d336a2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.7b4482402.0.tgz","fileCount":36,"integrity":"sha512-6ClEG3fnRWQ6l57NUPIuRJN3PZa4krHS850/PsqfoU0wloSn1zyKiFH9Dxb74brnMy1QM/5hzgxRqtxeEBXAeQ==","signatures":[{"sig":"MEUCIQDtvfBhsFjOUVAS173DDVmcTUO/QDwbKc/s+Cw5B6HUXQIgUT1YQaC6p7EItssbA8ZZ2rles7/k2EbBGU60fPkHcK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniArCRA9TVsSAnZWagAAXgkP/1zHlUB1s1b5GgcslUq2\n4O2o+kB2SicAdfbf8ISVVU0l6XapoKDpN0JL0bbikHiu3EOtcSQvoRNkAkF/\ng6A5IN740IjkqAWV/IDzjlM4oYRpOFU2HpRTbwqJ/L/Irvest8L7dSsxduW1\ne7GCTnT1VjncJwkPxQIzkyMawXGgNyF98ZJZkT4Sf0FyGn2kiTy2DcO9NExH\n9MEOx+KyUv7FfO85xuT+aVzfMyE3zEhoabmeeEb7JHgyeufEiiXqC5Xqqkih\nOkRHw9GJtZICxtshy0cgN+iYb90kB2YAe7+6fvkBdVL/6+wQKawoTmMVGnSd\njTVg7oIIBcqXy8yLA2p27MbQk/HqmIOGAiwJ4t9TKJR2X3HtLXVBhdRU2meW\nGxKkJkqHYvsIO+TKZHczqGkUzyaW61xZ3s9NWe2iEkyPl2WP3Qt6w9znE0mn\nrRVXXXpnHBwXNQzELt06tee+ZvKgklU5uREIPup+Fb6pnKAoafxdM9KLQgqs\nori99Mc7JYtuAwH1GwqXP4I21N7FN7AJ3RvlXutImx9zsaZ/87sxGwBS9tvC\nwN9o6A6TXPi8dTIQYyQNKEyUMMS9JpcfFrFVUsvSQmufWQoAOrj7E+Af3Onf\nQJCjAG6YFYImRLdOM93Fzb/TG7FbhW9tnUltH1/2nGUHWtTFNTdkJ8XKJgZt\nHaf2\r\n=qle8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7b4482402.0","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/density":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/elevation":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.7b4482402.0_1587421226581_0.7062518305779872","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/switch","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c50c4ae5f0d0ff914e0d9c974691d9666297896","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.deda86d8c.0.tgz","fileCount":36,"integrity":"sha512-MaF8WccRnRX0tIPnYngVzExgjItQ82I4ebBVzzMoFFQEKg6OqUOJns7MAglUbdvlq2bRP4iFonKCGxFq186c+g==","signatures":[{"sig":"MEUCIQClKBmYdPDaKZwoL+P+5kS16+uV+/TwbmDnlHlIvmFQ6QIgHkl8WMVHaUk6XAdmZv1YVED+9xnGmystMiakAPKbaAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkZCRA9TVsSAnZWagAAbn4P/R7A+mjrdkhCRcpxxlHe\nti9xpAvXDtVz6UQ4TuASA+TtpnRYAzULh729uLQmbW7Eo1PuXQWk6gxkw0yN\nWRK8/oqoW52G9EkNTeH6s40cic//Tw54UHhpoX2P3B81cjCeSF0DLl98B9oj\nPYTCOgPdBpccdZWwkA+und+v3NWll2ZFGazx1mXg0GIeW3ZdDD3+vz47lbRs\nSmNWJmNVJrCxrVB2XDrOTMvKYBgRih/4aanOiXwyJtnfyIyfEA7cr3D7/boe\n9WKXQVK9KimI4bZjJV78VsADDL2shjXhh54Ltg21i0OqfpjZlfxidO/FcXUm\nox+dA7Ufd6b9CvHrmI7lg3vc+Hfa7R300Vq99PXKxALeIB1Xw2nXmRf19+fl\nT4YUMogzEaH0YM6t8Bhjn+uKCWwlCVlIUMqYl0H62atTIF5tSzoI/eMIQH4p\n7xXKmuAKM5xHHN85zfRGiCum7INxKs3rg7+dbhazCIw4tBgdFfOH8+clCZyc\nMf+LQFFO0wsjmismVBmtelyD5s6zr8hNxeyBrnZFGdPvAtazHnsIFuGcIo28\n862au55O7aUAZmfScEEEXpuadxCF9pQLdUMG1+/rJGzgXyZpfRCivAtKRNCi\nIwp46IHNbShSA8e1f1Nutnywhys+mY56qGchKEuHUvZbtJ9eq1cYkMgUZEIz\nLOXb\r\n=4MVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.deda86d8c.0","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/density":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/elevation":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.deda86d8c.0_1587431704742_0.040858923970021","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/switch","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b5bcadd5492fb915c1d494119433d44920218f6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.d10412cb2.0.tgz","fileCount":36,"integrity":"sha512-t6zCXH87p4ygP5LhXmd7GAiqmLujA8y/VdYMCigUTZ+MZiGhHnIowhIEiFiBhRNOvN5VlZlBdfSLpXbzsxCvXg==","signatures":[{"sig":"MEQCIFHPSBPyr6WwSzi6LFx3maR7r75naR7aOgw0oDRoaCyUAiBrTmfn2JzwJDcB39bS3RdYa8nQz2q+S2iTOLp3fWKcKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzkACRA9TVsSAnZWagAA6z0QAIf/SfBbNsfluOom5rF0\n29Lw5LCE/eaku7ng/LOA62OVw3UZb/V8kpAqbAPaLeQWyVYp10Ww7EPRSQt6\ndP7tLcTf2cx7cjX0PfwblwCw1n0Pqtt+ch0oNbueWpjsZ9Dxk6d7NBwVibU6\n8hoq7cuyQlZ0Ro3Gyru5Ta9OWDVLEVGR40D6XMbBnKD6Dki4TX4gRMxrEBxx\nicA0DV/OYxUTfam5uxtueO8kvi3i3rOP2TPhlvPbReUtTI4lk9C5QG/IbFMe\nA7OGpHnZI7A8zYhlkd+AiSNp59kjG1nm2ZaUy+Y+QDT2kat8H5BmyaH0rOMa\noEX4c3cTdqwfLPWzu75WiZY6ip6nLpMxVLsxrQaO5MSYBZmBrISP03k2CggF\nr+UYSETxp7Vrf5prLByf1SJ0mFz4dcs5ofEdtXfA5Qowtt8MyGwAMQpUgVR2\n0DClkMwMi4P0CzhoqZULEzfqjsFj22PD4iul3XgJWmGlr/mAP8EC+W25zYJn\nt5K0nD9jvw2r5JKHaSXcj4iPucsWPhEYdvnduw/Fu8j3ELxR2eMrvrKMPbXv\nyNxgYYhpqjW5y7RclgXHEgSr6bwL0pIiwbmKn23UhFUGXAD91pWYdCPMaRh+\nmsK9P6p5jyoRn6yQVATvrx1DB+vmU34qdEyXpFIWmo6QQcMpe3Qds38aUNT9\nIPhg\r\n=8aZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d10412cb2.0","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/density":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/elevation":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.d10412cb2.0_1587493119729_0.3523823748767938","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/switch","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3e24db8fef40ece298aa7892c374b064fd94b86","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.c141801d5.0.tgz","fileCount":36,"integrity":"sha512-kh+r2/VmhCH45QpvGv383FvgjvVQRik8iE4F1agkqdIp3TIX33LuQ3WM2+QtYrdjA6QEfjb4+P9FqJRpH3R07w==","signatures":[{"sig":"MEUCIEL7Ztf67ymHO9ytqXjlh/3eM+0OnOVE7xAFhVXXWQ7zAiEA8PwFmoO86sdSCdtY5oe88v+Kj6NCiXkXhCMTSytoavM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0ySCRA9TVsSAnZWagAAIDQP/3eCbb0pCuPGZ0a+jBX/\nzjA+OUuJELL5h32EldSHDJ1GYUSK49/GXwRbS5OvyNMPB6L8WA93xblbAb15\nKzH+9FGHExqTeEj6ddYUVWX5IWa26a8s449ZSYavFhgnBPAidAhPR8DCY/eX\nI1pKJNldg/s+0ebc3+fjUgSzat5IdJ4qMr+2yP8CmYoYREb2QHtY9+7W2Urg\n395VYKUEeKtJs5nM8np74pYzkW5y69MQ0f6CxVbMfUUi+kGrsN3c42QQPbt+\nn0+vv9gltzvQP5quPxHCRlvd4ioimbr81YbQhh0mZrX4qylg4cdGsb+ktXE5\nTCAf/aXpCoGI+gUcdA1j+MZsgFsjs5khX+rEOsyrMRr6APBOlXWRAPYj71M3\nisi7tMDSk/MHywewuTpsXmFQKBhXuG3/LVa07iSgr8DGYZ5aIuThYFrOB3j8\nUs/5kZ4UFZzVGWr9PW2R1tj5HF2aeOqoD73RkVTGhmkSIhpTevr90tq/QP0+\nRqTGTVaKAISkq7nQbdxePLVVI3h0jrCuYObZVxfA5ToAxCGLEDShIojg1Vr8\nCx00xIPNS60wll/e3TJ4o5jO5csETgYxGmoo7c5Ubz8tfLDvw+XXH6P7L9ns\nIoHlmRsVzPxylSE+s2t003nNLgHgNpkL1pZqOtVR+AJqQDq2+ba9EgLa9+XZ\nl+bO\r\n=EPzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c141801d5.0","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/density":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/elevation":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.c141801d5.0_1587498130241_0.10091572290633688","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/switch","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1d629f0e71b97d886d954507a20bb2166166b60","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0-canary.28d10a96e.0.tgz","fileCount":36,"integrity":"sha512-k1dakKGKe0qxoBjVwlWcakEDQz0gXtFHI5ullzoPec8+QCHbUCJ5LVMnNHcaJfTc+WS5yj6VatbvTbOeMO3zQA==","signatures":[{"sig":"MEUCIQCdH6rubnUoe6XYTJNGeloPuXvlpp+vObqwX4gWLUs+eAIgfrh120PVvvR6YQVfb4yLRaAJhmZU2Fkbb3d/0Li2Leo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAeCRA9TVsSAnZWagAAIh0QAIrA5n0L7GIDM4hX+tdW\nfxq0yyfuITQPC8bPGij/P8hDU2N0MZvMC+Psse4InZGqQGMdRKv52co6Ui5+\nu+guTYsIq01G9EE7bS0kONKTGa5zR2gHQ1vVEGNKtQKiSs9R1kbcMO110j1K\nv4EKgie8tjHWIPLhykW4Hc4LXaQBuS39RZ+vJk4WTx6S5Ma8qSShsglJeybi\nZ9Tz/OEtiXI0faBMXvO3aGm3q4GhOqnawr/M919cs+9Wj65+UyI0wcJDyqYi\nfzK8pUmXdqmMOWUFZZsoQLf/4o+VC4ziwaZOCuJZV9Bblzzwzct5u3MhGPWv\n6Tx4R+wYCKj50Cb544PS1GiQBhBShIBKUCFhDqn08mNKI/xo3xhfBWqXB7AA\n3GNeh4HDFKnTTTvti8IiBnMIfNwSGezZ4aHvfeGOZc/Tm4To8czJcFSyNPRz\njsWdtj7dKuA4zvtaE1b7IiVv6yjwPpPH8gH+AUkFLpvfP+BG8f0fQeqxXvLy\nczbX9ganxVbK1dzy/DIGn6V0NmIby5kTgZTZij+N0Ss5rIzsL8hX9lN+vVvl\nz6axtDdvG8sTaL6X+1wIw43yYi1HdmQB6OHwObORxu1/X/n6WYWNtKXm/7qx\n401AQ8dkQXiSgNNhgBwSPROZeEikr2Lg4b3KFRD2GA6y4B4+WVTYdFO48qBq\n/eJ/\r\n=1uan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.28d10a96e.0","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/density":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/elevation":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0-canary.28d10a96e.0_1587593246520_0.6130445447388355","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/switch","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce05e7ebb0d61fa29b5657d80eaa43280b439f91","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8540808be.0.tgz","fileCount":36,"integrity":"sha512-+/uxipwHawbMsNNn9JMZBKLFQRL5NV/LE8z6SEqSJCh1qv+SjJcZSkDHLYpc1fWR379Jh1ujC2MIU3L7bo0ZQA==","signatures":[{"sig":"MEYCIQDcg/HbvhioB4miO9Yw0IHiGI4hmpnMWs3vHBJzVVjihgIhAMCfQX/wy55L/h/h/EOklpcMHX1+n78rws+rZUrQ76uG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+2CRA9TVsSAnZWagAANi4P/3GMMR0+TKFYzNSQLart\nyDuB71HUhOe0/8cpavmulYCHiQcNia19e1qdwCu4mhQmeaTo8mRG/FXAcdJB\nPeOoVz0GUFM8RPoFgFsrHCYMJVm5L9ciEhatGc/GM1GhEP/ZPgKJfoUwYFn6\n5Y4LR5GsLUBesidH6z9wb/PRBTJVZqU46c46UyPPVDTCwXMf9Z+DnpIt2kQv\n5Se0SgcWntP9yPHdqR2ImDsdX06xcE58khgpra++HjM38bDH+2pVX17z9Qdg\nUGXjnZEybS3sawnRP3hsK8xdERilghwjFIk9yFo+sFbW1oR2zjP0R/P3qmpr\nvp9xhLxwMpeSt3GG+SEfMaA6i3jJIfQLDurQ4Rvr3cuUJ5qDjWHJHxRDmfyI\n7oBJ0mpzllma6Hp7LWRyxk04Tbj7WPjH7Ni7zpHFEN89yGnzZEMgWRWspDbp\n9x0IAgkwv03Wo8NLxJm+JlOfePaPJYKfd089J/0mWmegPhWiIYQA5pZU56ix\n+7MePuBHfyWbZtfblkdpcfBB6N9QQw+lo4dQf8fpcKD96ytmCPuyYImSqsIE\ngeSpL/QrDdnBRVuDOFrWWJbwuOQlmbb1MrknYLxONL4lwzJ28tvryQ+yD7US\nsHGAkKR3bds9Cu9+JYcQ36dh5hWlouEC86jUlF8OM9FRnOvZ35f48VXvIq7Q\nrGId\r\n=jFTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8540808be.0","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/density":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/elevation":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8540808be.0_1587662774059_0.06098403906091665","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/switch","version":"6.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8253e54fff7d1948e22fdd770cfca4b95665b11","tarball":"https://registry.npmjs.org/@material/switch/-/switch-6.0.0.tgz","fileCount":35,"integrity":"sha512-Qpg3ne2MKSLy/vkcUAsWvSZrkuY4QOqo/s1IUKQrjLrDbCS1Al/M7ZUO7ZlKsQyx3sbb9ijEmJwK6lGtn12b3Q==","signatures":[{"sig":"MEYCIQCq+DEO6ymxgM0c9mI0tM/UJtbSTTcfMREGRgEgSj6z7AIhAOJ7xYY/9+EuQjMle3EajtIOp/M27UD1NuMGaT8FuqZJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/XCRA9TVsSAnZWagAAQX0P/1sSYEC79T3dBdvfqlNy\n47ur5DJvLNcLWSZ7ed6ig4bHc3N+TlJ7xNq1X3rBO4pAnl+K7TTESRo+WXRX\nkhCREkK0J1P+Pi55vmJiO4/5ZnYHnOzarkTGT0rud7He02erbYYfrF4+bSPo\nxDipbEkOFvvmz4WZ49FNasOGk6/PjKW+Nraf94cCHSuXKX3e8cLpD7Vq5XQr\nMCC5BfqM/OewjXqNEGfqMagC0DJkIhRTzOe+0ZZfRil5wd8sn7gWcfCeHCpP\n7knbzUsWiSt4ey4q6kKfXsLiC1xpkdPMZAjHkANlSL79cZWZTgYnZCz/4KTJ\nbxO5yHgXjukl38c7z1rvjxrFDBb0cB/kpPCvZbcVt1cUZu4QNP5MBogg/Ofp\ngmYAQ6FfRwD03CHVexkA64z3bD4Ij61XdSVkPQMRwkzoee4nTSyhiTeuodr8\no+Z6IRTkumMOUXejYZuYvlLvLqlQxXFuvGnvPj+mDo0S8z5YB4bj3Cq4j1js\nxeiej+kFTcGfEfA9RUopnN0IG4+XTi35sPkPAjB+YyOEKE8Ys2wT1pWAhwMU\ns5iaYM4x5YhakDokX3A+bwm4l/C5fyCm/HZQf5Gjrx8QlayOWVi5i67UUaWo\nosbtlYujzvtdK5qPittBwBgzi8Au/+NN45ZY/YmPu1RwC0xoi86blghtwqMS\nzeUy\r\n=V6V2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^6.0.0","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/density":"^6.0.0","@material/animation":"^6.0.0","@material/elevation":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_6.0.0_1587662807288_0.6314564637921112","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/switch","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fff905a71ad4c083c20ac1535ef062dff4befdb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.2673adb74.0.tgz","fileCount":36,"integrity":"sha512-gsuOS33WF7zw9QG9L1elYv7WbNoZCcORH+Cz9ZDO5cdk3/QqLRrWpZ9GkbgsOIcpS3khRTdDUvShd7reQnrEMQ==","signatures":[{"sig":"MEUCIQC4n3N/gDFXpkkZ/jfLSCAXR7AqEMHToVv8QJsDlhE/XgIgaOA20hnchMoq46KRm+9pruQJZ9gwe4CiXkR2oPOlXu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqlCRA9TVsSAnZWagAAOtgP/A+tUB5VnZAbYddULa1U\nzoaWcNKJ08FDk9ddBO8EUT5KP+ofBFlYR+S6QIIevqaTUxlUiy8iHYIq4MP7\nsN4WCPsZgALekEVp/h82TMTzQ0oD74Lmwhj537tnYud2u25DuY5l00kelyT3\n60NFN18Va6rYdFKC1YL+UobXUePYQCLGC8M/Nc0gmCdA3shd/WWu1QR87UwR\n34JeNGlmriJM88YbC9jdJoDI+m6eURT1N80BkHM8vqYr+qTwNYNcPuhsZkLk\nOUjhA/tDuGirsp5o1OwwAAAqricEWfO3T4v/f/uNxUhxlx93KqqMMTkacYwm\n7NSn02T82c25nhlCkqPkKDWt1dtyLcbA0XKcjciPKg0Ct7ENFB/sKwWlappN\nNVSpLth6MB89oCUs5IYzdC8zxvm862IiGcvGnNZO/8q3IEnUS1+dfsqGgbbo\nggouIp7upSf3Oa/DQR9sMlNjWzaZYYwFvNCkaPrLdb1//yhtP7pvy2WIx6E8\n2M3gdux+DoK0qAG1y1CXS0KttONA8b4XZcOD9NsydOKIYmmC5ly2ba+TWzOy\nwYZhY2LIkzOTCycA3fkYWsg65DefXonteZORrVJmdtc2T++6MRNRFJsT3mb8\ncH8/egmC01eB52kKqTmr+6XsUBDHgSf1L+UuJZHJPOnO94XwyvPsZDzjitiU\n33/q\r\n=78Ct\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2673adb74.0","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/density":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/elevation":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.2673adb74.0_1587681956625_0.3160431084595072","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/switch","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c0eec055f4a6e65945d7273e2fc682c5d83ed67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":36,"integrity":"sha512-1tgxkeNb/B5i/bxurTRZTwK7mni6Ol9oi77brLgBE8GF23ty8hxIAzXnTRynUOtn9dOa5iHpBuoR05J8R8TaWQ==","signatures":[{"sig":"MEQCIGwTgR6eCscjT/8UQdM9h5XiQVJnrgZWVFzNkmCLS3kdAiAIc47SrgXhd9LyGquo+2rW0nQ+q3KqAbZqNKlXIgis4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojEDCRA9TVsSAnZWagAA94gQAI1V3LeCTE+Yy/en5LVr\niUtH/2NON6MFXBQ0+FHGt6H2V7kViLIlXv2H2GPglmfQmsyyIpHdy2GJXV8x\nRb8nD+jVebNwdFgA+cZMUhW7QMIOT89j5nLauQ/F6LWz0rQPqNYUSYT4qr18\noM22Pzi/ioZlQv0H4QohH0fdP+FFHskGzuRgBxpa4GOGkAcghvWlzuLNlUrW\nLowKP30s3kbhOp7jri2k3BUdcmMycTjBfQZfOFzzzpLwOLrKOrsxC1nJ0enN\nePNFOnl90KkkhXtzcFBM576h6CzDwDUn5+Ovx43MiyQnx8gq84ljbfKfRH5C\nTjRKsNyrznvSb2uV0n5WvwrdvnJflkBGtZXcxUvNa4LbjOWohpMeHq7DT48f\nraoB3uBoy2eBOHUy2/gd/36VVeguXnB7taDzNi+wI6qAIPyCECI5qya2eLSI\nG6+pCdYbsx1l6PZwNVNDWOgMvGUl9a6ah6H3hyCB4tslVIO9xVZUDKJytplD\nMGYV51WsnqUhAjPqsq8cd3KvIbV8Cb0oRaybsCQQOZ2QNGbqPF01hQeB2BWr\nqUhXK+A/FLhe5Oz+6L8pFZwQKYWiVGwxcBAb1zcSKt3myiD8JbwDPWREiyQi\nXbWXda6J+BMcoFOEX0AIvBAjFb1PM27lOEnFBpcQasYkCuoeNnqUgwVPe2tr\n/9S1\r\n=TttG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b10d0d7f1.0","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/density":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/elevation":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.b10d0d7f1.0_1587687682616_0.15367811744692927","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/switch","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7b380f59a42e22cce667df244cdff95ba31fd60","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":36,"integrity":"sha512-LB+IZe9a/8fbsVyf+K3Xq/BCjD9xyQroh6eQcC9SW62BQxOA4ebL8sen/5zOxpPDYl//QunOtQl9OFRl42M1tg==","signatures":[{"sig":"MEUCIQDK5GJEH/V3/NeWuQOWHuSK6/cgc3zHdx1cS2iNvoucfQIgVGfayQn83EOeGnkY/fJmv2u1JJrgbJ+OyobnxLtbJA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1THCRA9TVsSAnZWagAAIk0P/2aLJEYRx2Al3cLUVnDe\nmmUtt1OZDebILfIiHRpCzBp7O5I+oyhk0l69bPU5x3pl46oWilkIfgqarRtp\nORt6vzPxBBUPFuJi1u4ZDrvqk8KNPY53fVqUo7HCiFzPn8m1HLLjfLzoWGvF\nj++u7L1Hj5sBGXyU5Gi9vWhsCUr0VNTjD1Qq18vwlSnoLQiyz9knK5nSxPJL\nYdgWt4VRLmh1EcwWC5x+jzKH74VqHyYA8UkjJCN4wd6GB93kvugTid/H6guu\nntZG1Lwr8523N3lkcIKHVulcpH5PIYZLJPmQt+AoLA3DnCQq2wRfR8NRjXCF\nFCVNxX7wrs+rWShC8JSeEvKs4Zj1AEPyx4r6XUUJgLgTSSG53Byw5j4bBSqG\nDEJl+fvPdQZ2WbeNsWl3qWr81RYYwrwwdpmkxFUQXYufDwJDP52NRnoYO1dI\n7PVOnNvWsnyTYf0x9PHIKlF2j/V9N8pP8sAp/Z4xI6YCPbs2ZnDLy5looo9B\nizE1i2UW5pwQ0oJlfQCD8tW6nGWKd6uiRGcmop/FfH1lqqGza5+J+0Cx9Tno\n/mAIZXbAd35f+fw0wsBuaUHRy5GyfquVS7tsgwBtrV6rHSpg/0I7dqAFNsCx\nGFpi8j6ZQRcTJnpFDqGJ/y39NQ/UUUz/qM3QJOiX8XjCfy800CJcTEloTk6P\n2NMq\r\n=iKpi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3bd8c1bac.0","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/density":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/elevation":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.3bd8c1bac.0_1587762374984_0.49836666993225043","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/switch","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d634478f8af7526fc1fbb5df2f0979178bef3ff","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.b83c8dc22.0.tgz","fileCount":36,"integrity":"sha512-fY8YE0zPVkcrrg4QqRaSH2U39FuVTQ/yEszXa6ZOKZha3fU+hz3M8WPFrQ74r97afeWciDx2mZ0tWwtHjbs6eg==","signatures":[{"sig":"MEUCIQCSAllX+Mbv8uWHTzi/SiTYXST1RuVkPtJ+OBYmMa53+gIgewo/UhH1ZpiSkHEIPb3PKtdQezAC8ef6W+Xi0xco6f4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fGCRA9TVsSAnZWagAAdDQQAJXQycAYLLzWYMQ6k96B\nu3+Td1W3qHxErJQJtUjkV9RKWAeA3cRnhNM/nc8Y2DttcFRDJNkfBJZNJC51\nHbjhpGpq9C61AVVB+Of/AAzevrsmQYryM0SXY7O63WFvIpdbD5agjSVe9Frm\nl1nX8GqcSOk3RbLVq5yf1KlxlGogCNjQ2qkqPAp8gWDs1rpFi1F1GsAzWOhg\n+apZ7TlFXmoUkMFGwz+YDCbunRuyHy0gc89odSJQAcpnw6jAgjHCtS3Rjbzg\nS3/g6F4TqPGYCH/drf0djbDFcOQ+5CMD/cW+U25A5gvILRvWpUpTA5BBIqTw\nqcenuTNOHc9R5yNvZTnxLt2zcJWYdGp/y6xtQaipzcyBSDsCcVBuQr8Lpzpz\nRk3m8/Nr7RTKzXiCYV99CO4WkutE5KZ83PAYNr9/VAcMu9qK+/qr1302xx0U\n0q9d9VDflAjOGFJk0khFXbvrph0BP9YCXaIDqJY2zRos9eZULeQg2k/12A1w\nFIBXSo8SFlst6DLezX006Rmr+sYoJm61CH63MXUJ9p2UltCLdquy2hc1m2Je\nMnnaE+Qee86iMoTKp9efghDWoyRgfqBCjI9XRAkNwj2Htp6SqkEPsoNEX9Fh\n9L7O6Nfnbz602lbiQimQZ40lPC8k/f5R9Levx9O8mnMDIVg9QqGAYxG4JWlq\nLm0S\r\n=e1YH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83c8dc22.0","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/density":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/elevation":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.b83c8dc22.0_1587763142330_0.780735005732637","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/switch","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0373e154e9865c6af6448b3b872c925aafb834a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.1b3dd846d.0.tgz","fileCount":36,"integrity":"sha512-vhzjPz2mBBVnKQJyZWd3LYArTe5A9/pCmiVUSULgeiiGnqRnCPRypkxO4jxIa28p3Ivwp6zKt+GENvhsdzWVKw==","signatures":[{"sig":"MEUCIEakZlGipjtpyU/Ww0r2j1Oss96ZW+KI/MX4mdEja+JYAiEA+JsrzXhMlPzSrGHBMuNmnUvidjlZZkJEsL0rQXNg/1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fXCRA9TVsSAnZWagAA4PsP+QBSNNAZ86MO04uQGzK3\n2eceaZ6PAEzpuHA+2XIcLjg55M0dw41nMQqgyitpZ5jO+xrX5nG+535HgZ2Q\n/2FcwwDPCbGFToN1S78hYh01SoAY2zzEYbomFWJR70kWu0vFJ/EJ/wFK671x\nKlsuAJB9hlV7gvo8Fg/e0vzijcm88yWNseddVy+cbHLR1hu73FnUW7rM3xYa\nOJq6MMIJ7d8XUEk+v+Mz4Ps/vs3aEXOR+axMBvjjyMLfG1cPj96ngSC2jcUA\nxWtt6o5rLV8yh9fUBAppyY2h99aB8Tn7KBuDG2rmv6cbs3yeMVNMErPHs6tz\nFLemBTJ1gsMpU/yHxCSDeGWfI0wTL6wX4WU+eGcmInhyJQSLEz89/USTiRrQ\ndTzi/4So0VtkU8CzWXAe10vkuYVm2xnHF11gbC4pdfB2YfIV+w4tTU5oBfFb\nXFy7EZbAn7o/8gFtnrG7kXzaQjvwiv1tmPlWgFvYkeeDjMVd4h7Sa0pODvvY\n7YMAifSNfa1wynl0pgcNQ737m8HWCAbMiZ69pZn9oll4MUwTiM7tg/cS81YW\nzO/nRnLP0crOD2we7bw8Wc3HKKbkP+ESWxPsMRR5Cq4f2VUZMW41C5idnMu0\nMO3QQ0y8WI3Ygh8KZMko017xhFjstsmyi9Xde9T037PflMMp7FV1qpk3SMDH\nODma\r\n=8llR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1b3dd846d.0","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/density":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/elevation":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.1b3dd846d.0_1587775446834_0.4394125943750149","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/switch","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c7945058b7d7cc97fb0e1bf5e3be8f15cefc50","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.29debfea7.0.tgz","fileCount":36,"integrity":"sha512-OaOGHC35TKpxrPVSXugD9/a50Tj4FHhv1XlyZ6VHSs22tBpZzhDLj1oRhaNI7pVpEsq7K8vDPedyhDzQ2Cpwcw==","signatures":[{"sig":"MEYCIQD1X91nE14eSTfYCW9biqyNJJetxKOU1y9ErLpZnORU7QIhAKWYGubM7B5nucwSm1iYt7K0DrX115lKKJ2Lvyf37xGT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDdCRA9TVsSAnZWagAAP1QP+wdhhKv3gukf4FOTbzTu\nmNWdGF3Cz+JAAxz9lOMRMRk57mUmb5ZB6UWNzZ3Wa8CFRIwOs6n2m3WPu5Bz\nFdRgRdOuTYl6LF1KobfXQmctGrQe9yeWeJarHHyV9jHQBoWLZAQAb73h9X6G\nZ2U1HBVymE74/1C+VNUG1LORqrE+vrNkGjhYNMDVsYOl9DY8a+1oi/hRkX+5\nCXYOkBxWFB3YJ9CqA5uiSCls/jQsvNNG7aPWFoSdoK5WFu9yduUJeuXJ2ws8\nma2X+4qPeLEb2Bc5HK1hz6uZfdkWTLyganCOcw8wVVJa1JyKnr7tDG33GMb8\n5ZMQNICEOnpLzEOyXjZyA6L4dSvqaBykSevB4ejG4BCAppELzvGYXQ5xoI0+\nYWRAE9v4Tk0GQJuWCGrC9X50jEFp9RtX4fEJPT+Frr22lE0ZVbpID3Sxqj5P\nsIJ2VAJtsNPAluAm7yhLvN8E8uyyzfRR0JN6KkOq7aD893HPMU/Sp410mEEU\nURLGA7grQNaQOUdmNgtpfVOZZQJa8xOnqk/cdDtO+hBgmqgZkcxFlUNYEs2g\neErLaGirfriTPkzlQ2zwGupwbcwLX9g6OYmP4IbggnEb7v6+3kj2FLDh6MRR\nitKy9IZuzLNu8M6CzaqfXQ8I0UX4JtupES7wATQUtGyPP9VQ4CCi5Ex6PFEZ\ngXjq\r\n=71XA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.29debfea7.0","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/density":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/elevation":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.29debfea7.0_1587990749138_0.3652374984863733","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/switch","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07814ac57c42854257a04bbceda5405d7239b26c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.28d32f8e0.0.tgz","fileCount":36,"integrity":"sha512-HyKfMazaTnhkphHHnuVnVTPF7BnqkYHaj3Qm0XzDLmgemglsDRCw6BMkvweV+OfzAIz4e0kXRUdm/NjU6oaglQ==","signatures":[{"sig":"MEUCIQCpoeY6yINSnOkzp0LnWivTor8nrBcaL4F8VRZFJrGavQIgYlEOAaiSjeXkPPuQ5dCq1tAXWyjVK0h23RJFZlebyqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepucZCRA9TVsSAnZWagAA/HEP/joYZgdwuD+0JYJGlpNO\nNXZdFNdl0RdIR7SZrHX1XbrDlWYLjVO3TGI2u1e4gC8wNtZp1zGZMu6xFCC7\nBkUGlpmflkyd6rLn/0ZPwZahivP+IFl2jpFj9zOhVu3REn9NznTYiDGAtBhA\n8dkELt1iNLTiP8zrYlHc5hhuRg+jSCFSL0e9LuVuF/X82xU0T8xvAvbO0wZA\nkGWV4RYsicVJ224gToBdzQDZp3isNNDGkPLFHczS4HgIkDcveBdKEbXCx5md\nBatn3yfRxXBhDr3Dt6SE4Suo1IOZCelJ4Lai9Ewj6fes2yeHrHs9uhWUeVvY\nQG3FnjWDPNIgUWtePfohgDov3Ekk+gcmS5KP4DNwCqG1hHnu8iiWmRS65giL\n9s0KXgQ70F9UqXtr0/cwta8Sg+BzQT0PWpJwIzD65FnhApXoajG/XNMrE7da\nNEqLoBcwTTo5R5z1tXoGcXgEeDqpVzV0+P7b/+/2QflvRcNhMVvFU8+7SoD4\ndzsyxZujxTFHxOaQYJDqZyG+nTwpabta4gG6LnlqSAlwPb3GvJkOOaS7JsTs\nabu6LvtHbYfqIBrzt7fy4EFDf6roCK2+RPUYvhWtbMo3cZmDPVRcOlQiFuLr\nqtSkVTS2BpRpQWDxTPXCx85G0JK6bpjlPnj4lXoAfiAffMQDOJ/eXpjCLOGh\nL4tw\r\n=QJGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.28d32f8e0.0","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/density":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/elevation":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.28d32f8e0.0_1587996440775_0.02006430967303685","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/switch","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b449cb130e3c0b91530a944faf088f2fd0759c6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.af71cfdd6.0.tgz","fileCount":36,"integrity":"sha512-YVcbh1OB6VMJtYUyqlPo8mFQpCjd6ovO2/QmhBFltudidDN3vCbBGIFlu1SmWg4HeYN+In2L0ctmq4pdny93LA==","signatures":[{"sig":"MEUCIBlpCvbo6Ic7xEVe2BPitV22/VC5fU4l0yhKlNzGrWJ8AiEA5GolxRRhk24QmOFgMxj65EItMSh5uKRAmlAk+ZCjdfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmTCRA9TVsSAnZWagAAdX0P/j4kZZoWMCw8Veui+5ij\nCHx2rlad3hLmszuo5plS5pZvgm7DxM6zgEgcjmLheZmrr9J+IM5WTnlwLIie\nCeppr1bCE64uAJqS5p8d5t4Jfp3y37LXkjVZ4+3Y0vS4ngDdJEqz0PLr6y5s\noLFvuE0Cjh2B3sgQRiv3wUdZH5gGM2jL+jTbSdpYHgbu5BuPfn0MgSyG1jUa\n7EaooGnU01GJLsAFIFyYX5HeYumvCo3Vxxq9O2SjM2Fc+/ElMOHHmJVxTw5x\nMSdtRIncga6wXpLgf/DHhFBuq4ZEihRnoQMuQ97+aWE7yOmOOL3Bxn8O1Xg3\nvLDzWHJJuVks0vQZOdBArc4aTd0ad5vf4909kXGUc6cQCnWh0EktBpvtyXYJ\nEWDvVgKfXjRy+nypJQrdpwnt/U/ogw+Owif8cCK/Rnqyh7y/EseXm3MxpVeW\nLDKi9oS8YQ0bKwkvumqnyGBQns5FN1xcrWjF8+1pBP8/NKxB/kn3i2ATwrNk\nxBiLEKABKUI97K0CYHxriFr60VMC1iqLY+scnZOgOLfK3q0k2HYn3D6KErao\nmDXOQxPCB61Qa2Y9gf6Xdcdb1M42xDNJRipFJws0bvqxzYvWLi4cmcDsnCZd\n1q+chCbo1qe7MhRHbh5wYF6G2pK3bGrQwy/TZlF9B8NCO9zKjxHSlil3zwQ4\nVYxh\r\n=/SOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.af71cfdd6.0","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/density":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/elevation":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.af71cfdd6.0_1588115859380_0.6200083916602592","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/switch","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca831536213cf1715834428230196a8826d1fd8e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.99d2fc961.0.tgz","fileCount":36,"integrity":"sha512-+zCszOVSNuW3jnsvpmtYDng5MyCHkuTL0OhRyHJSbG8K7bbjXgZGw32UyJjQx1zZvwTEhuiVgFE87RQrFPYzkA==","signatures":[{"sig":"MEUCIQCRgwmi6GR1c9tYyyp/MOn7Vltgg65fmQYynDM6rVeD0gIgQNkcvxlrntvlJC1b0+6x+fpfe45DptnBq7VVGygg1+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVp9CRA9TVsSAnZWagAAI5kP/05vujppJ4u3du4nzV6m\nzA3HmV1/l9HHEV4pX6SWMR0hanryCfHzYY7xIWzJn09AG8pPqLi6NBGXehj0\nWwbQ7nIUmU2/EdQrBk9c+Uq/ezS9F5iEEfg46hKCwXjyCymoYAdcTy7tvtG+\n27jkwxOE/dnIQfuS04DBjm79OmbLJ9xTsUM6oOY+M9YoiF1UGthu/zuTX6aF\nAE6INc59BBbAti7nlDIuuzCE4eDD8mL12N0kMhNo4AQy7lREiqTE39cxiL7r\nMJlOktRePR/4X71POhyFnoCSojJe6RIxh/0q4Rrmyf/+WNipaaKyEtcOlQji\nVG6TIg5DCYJ2cy+sW/W/aH548B64d2MCjgq0VhMQSmO4Auzk06ag7lLt9g7G\nFgHR/2QHZrnDp6UYH52+zityoO92rlGj45Lxsk9A1MW8afvVUnG5fOXx0jNk\nXYIR4R6rPkqZgSSFS3CI95YOFwgmghs8G158GE8915TlHWNCRzCQs75OVzCx\nqFy9r9wn0YuDS96ssLbBsew2NSc8EciLOY/KbMovJGMdpBMMOrwHQjxtO9o2\n3Ys3IboZvKBEXs6XnqEEXPFSxMe/bjNFXyeQ4XyQwssryIu5hwoXCyVD0iF5\n+JsU4z7EBhaqPJidjIBNfmLUyNZb/x7lunWnmEhNQms65Fp74JQwGbNAVrRP\npjZ9\r\n=1f4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.99d2fc961.0","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/density":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/elevation":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.99d2fc961.0_1588157052698_0.8026922153432703","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/switch","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acc25f19d59c9ce67e746b9af42dc079961cb254","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.0e052b24f.0.tgz","fileCount":36,"integrity":"sha512-5IYMcXh8CEaQR82Loq7eA7AHRQEQNIoYhVl+FvW3y4K/TiDQ2pjAQ39NMAGicl3XwjnKbIAUrkNGISfPOgrvDA==","signatures":[{"sig":"MEYCIQDth/QOtnZzYrPlu8tRoeSGwy9m245Um688uZ4HSTm7owIhAPPtGVMXynuvhgOF1V7pX1kwP8G77jiT1xMTSE7TL1UC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqioPCRA9TVsSAnZWagAANiUQAIjlo1MK1WpYlSD8LEjE\nknVPCeUHBm+Mx/WRsNOTe+3FptnTru+QOeY6qYi3QQgjj06eLp7e45G7K0Ab\nl9XIlfWi9At2jdZ4IPG8DYG34rIom6hThHSdVQiFD4xovwCd0f1mryuv2AN0\nOtXhWdRTH2DAOyLWc2KundupR/Z7i7mBY5e1++5G4ZP16g7IftS273v7X/hG\nHY7BKy37zz3JaPKDMEpI4l+XpslkMidm0Y6ihL54B5kex0JF4YUu0K+Kt1S1\nfv+y3dEInkh4AP/CWCVh0YiHvfPfarEyDHawAG0pT+8xaLCamz7kJijxxplZ\ngbg7YyHyVERIxQ9SyPSY03vBjZlhtKIL5bbkwbVJQBb1DiYHwxKz7hTPvsh0\nr2IKBio4TH2/Mn7L8OwKT4jg4E43iqW1UiWvp6SzkK3bj5PVZTsZQKi0o21z\nNV7awg78g4aFDnjLbjO8nt1e7bW2F+B/5RtytzBDm6AKLGT1st7YlOpunMZs\nTa4EzTRVCZtmFT6z09GW0X17dgAJx2/aueT54WSAax23EPCSx6YjPMb5JTb5\nB6KTsQZepTuDRg+n+BhQ96Bd1WoP3uPLiKpKvFWFhnvaXvBjmGI7JUZR5SUh\nlYnrZNSf/ok3XOdhCkrzVctnKoNlpI+n8Pegf3CcUKiODKRqrl86eCFV2wQx\nkQ7R\r\n=7Ep+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0e052b24f.0","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/density":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/elevation":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.0e052b24f.0_1588210190881_0.5486371606562082","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/switch","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"532aa2c691c4650ac6daee528d1f4e3c1d4db692","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.ff4bc632a.0.tgz","fileCount":36,"integrity":"sha512-vC8P3xoj/rUE9871iCThxQJSHIjS29W8XGIX5mYGXOcCQq5CnkmlxMiGurSTmaNeoPP7q9tqUbeY2NRDx7zJTQ==","signatures":[{"sig":"MEUCIQClv3g7B4l7uP5KDVfptPCCumBXnQjQrrB9psn/gHaSpwIgQnsM9Hg9x8rbwjMSFlmkWoEXh5dgqLqmaoJWhNt2zEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowUCRA9TVsSAnZWagAA8FoQAJyoiwsVPp0VE8isq7gY\n3Vv+qYe+uhJlLelObtmozY0/ThSW8JWHzlIPFBOTnx8q0xlYQuGvjBntHtx1\nwcN8hPNXJgRn8QXkm7PLhgFJTr1Ljigmzix6PYFU9jXtE+Pe9z0VGeevDXAy\n/P1jrKFpIu6gGDkO2auQGV82xfmUniBIG7pyZYBBP3GAPGQ9TfczD7JWFIUp\nBTbBrjE0sFwm5v50ACgpfC17+2JxKroPAEdGihe1tw45y37/lgkjX1dzMmAp\nARzkPuxaEjInhj6A12kKwRO8liIVFfRS7AQgrXIruyPiUNImB6JILPv8Vlqr\n+4YsA0Wfyx0BTNpvpHKC09x96VBxo8L5GxSbMkbOalw0P9IomksJfah/BeJp\n9ayjtbtbe5W/fsZZ1jHwHp1Su2BnCccolJVUGG6OXWJFY9QUzLTFa0a0/9Ig\n3fuAe/Z2ZZTZvkNw5+nRKeeFNrojHKpJTzK5AhY3IspYqa4Z61kzRcVQcuY2\nEQm8t1ytUNQFAUE+aQX+ec1iTUiYmNOshbAvsN1tVnsqpgAQ0sZnAdtV/kaj\n5TVnx8IyoXXc7F/meuxxGwOto8fpEdnQXpEH2W98IhtEoP87T20CYe7fUU9X\nClWK6KGOOJPsnOajW7jju9S+pRK/LAEmMTpHQnUvnPkGWR6wBibLIzePFCNy\nnQg7\r\n=Im4v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff4bc632a.0","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/density":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/elevation":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.ff4bc632a.0_1588235284404_0.3973653284732155","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/switch","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60493f3624345730b2c6378f080772bad3b846e6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":36,"integrity":"sha512-iAfC0+CX6x3TYPbHWzF8507JE74CWOP3mIGxt4HS7oLZL5Pzo3jwO+NewZJXFbxqahRZhnVEXSwi3+ffnvHogQ==","signatures":[{"sig":"MEQCIEPhR216CpI5G5WS1jH7wxPihDKG6oNFsRVioyVZqG0MAiBlFFzhp0Zp4cOut5TdFf8+VE6Paq93Aq/pThPOYRUyDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGaCRA9TVsSAnZWagAAjFEP/0KKPbURFC3q3Og+weJ9\nJLHJWTQU4Cs8tYeadfVtvC+bAWA9XCWs3nxx8bAc/LtmAshm7uGe/yxiRT1m\nsclqVV3h7VUQdwwS34ljmns+bv6iGtIdlAQ47+A83jHScF2ssUO2VxtrkiER\nShJi69khf6AhCKzYMBb3cjOB9q2+/EUXHoNmuwWozrwqK2Ps8PPVKcP1MYw+\nInegoQ7ZSiKTP4DDt5V6mt8znIUJH9OskUOvnBQ/BSxzAW30v1/gJui+WGDL\n+GwoHEWM4uCkmE34AM8c0vvG8LF3vsdiOnHDXPTpCnOiWpOzHo3NiG3c+cP5\nrQxK8u1E/Kjkm5IpP/q2ZxCWuYg3FMlogEOnQDsDD1BEnpv06VANHzhUPpMM\ndQYc2KLoJmveUhc6pvWp7dPW2cVEGYeUsOGiCBb3ms1hED2GOK7AXnOeKElO\nndgPf/uqWWlsIlcg6+k75EWVeeftw4wMyaLMyCFiK0DRtw4v/sc0nr4lJxVN\nVFzSS0slYsKsJA8qUt0Cz1v2rFFIdSHLsS8lCg2iM5WBn9tvvYVhSbsyRbzQ\nk/20kgGTcco7pCTfJCm9luZ0quhchGePQAAkA0P4JeRpYez1Oz4mXlrKtiMq\nrxCLDHvsTpXGQcoUC9r/39TQY+oVa+gWVZxEh4jFD2fa3g2iyLgN8r7EnLQE\nA96e\r\n=DygK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0f83d2fd.0","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/density":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/elevation":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.b0f83d2fd.0_1588257178429_0.5496167694495164","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/switch","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"465bc7081f10097e709714e925faea2d0bc5383a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.e59906a57.0.tgz","fileCount":36,"integrity":"sha512-1xDw7hVimS37pSZ1fI8dKMjBJdS/viX6UA5y03J9FxEyq3svZ2ASJHtbaQTykjy/sAkaNk32Wvla4w2qsEWnHw==","signatures":[{"sig":"MEUCICfce+exwyWQdyYOIe3ksqi/fbP4GBIKQ8by6aAdd7E1AiEAoYC5dnAgu52I0TDhf/HJezu8fFJ6yCbSW+aoWUloE0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEN+CRA9TVsSAnZWagAA00oP/Ruxvyb39h23/7RXQQqL\nH5VjZeg4kvwhYfZJC224dPJvDCWJ6XsGPeswxgqQAIs1NLgGP2V0pXqjzr6A\ne1e3RqWl1jMqW19v9RlF3wck6KwZATKM14BwgJ6QpD0YItHsz8AXh9UtD3JT\n+IYGUk4Ohd5f0VMatdKv+tquS1RwOvXn8xOaScZobTCxc3NOu+5yzWkjkNWU\ngfOc50Rb/5LlIaQv4Sb7cU6F0LULkNZZ++lGSx8ruqFeve8N9F2psGhdE/TJ\ny9VdRWuBgs7h4It4cJcexZPZzXMnzqG5lKz2JSO9+zi58XnFxoxuFjKKq1vg\nmfUJCakMgh8Q+U/tRbjZxLEQKCO+La/k3FbfqNM3rhCJux/k7hP31jmCaqut\nZVd6JA9X8VgNDkZrwm5wx1AXHstsnZnzg1q5fhhUC1vRHh9vAr91j6MQ82bJ\nV4GsWHFeCp5ogSQQhCCmdMQuCz3FG/V1uczRdWykZKroFmztFDcDlLvu5DvU\nKCYGdkDQFW/LCMOWsXnyWO/9l9oGf3DZmq65Ngo+Ks4UEyipw+a8ouA+/A0v\nctYyjE8sgy5SoOHr3IMot46Q5Hu5Pmu0wDiFu/YzBNvdCYWWUmUMYNewZZCB\nAE0hATxK479/KKuNg9XW4xD68KnQ4CDngb34xsXpU88MEioqAQx1rgOBU7hB\nQq5w\r\n=gp/a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e59906a57.0","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/density":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/elevation":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.e59906a57.0_1588347773831_0.9172673208099831","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/switch","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"880c2e7876924d43e6260965d6fb0aacbe283a85","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.c02712b59.0.tgz","fileCount":36,"integrity":"sha512-juqtjlUfbYPklX3l7Uw/8d4wwj3sJOmAxD793EbhFhccj+vi01UVGu4tZaXIkFR8YW5zf79tZKU+V/oRuSCBTA==","signatures":[{"sig":"MEUCIQC8dnLmB6kamOC8zAzEExPLZ6UXV1rNiMYOmEE7E+uQmgIgbWTUf9vF4Dsq5msxdrASwP5JLq6Q6CNMlyVbCMcRj+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGm6CRA9TVsSAnZWagAAIkQP/0Ek1z3jLsy6ODC2cklj\nxR4zfJTgTGhHk4tU3vPp2rfnyq7XI2ByT6DpPzCJ0bUMo7jrWYcUtgPFYTlf\njRnN9CkgezXi3VQDaBX7nroxVTWbMbyX7IzRjvukIfvQSoZ2gSmVy/upTuDi\ne4aKYdsKNaHHR9SQEWfa3qsF/fnXVnigH55fPRUtQ6B3sO20iyhWFFHLfwJA\nIwsXrDzjn/ypy323I/bmFHbt2FLLTjDUl1ZWdeqOyP9KcpjLYP53bLwZ6Gi0\n5nAEEHOngzNt42Q5eId+sm11qFwV6LWNskrtE39GApD99XtbuzZOl5vdyse9\njGEqsJy3m7MFRjTIanQIUqjD7ur5BXEQwgWEv6umoiqDC4J7qdq3L2ApnXOJ\nQtO+bm13zIwULs1G0006gZeCGaRApPyewmR1T6TBlWL5ZVgTac7slJTPjPuE\nYy14t+2tRs9aIFck1iXk1pg1KWTeNCNB6rcOtlLI6C1bDMUzjq6uyIntpeE9\n8r5QIT3IRDUm01vrrm4cGFd/ByzoXf7//D+0Mm77GGdxjMKiwKYTqCVhcO6c\nAXu8ckJ+u+5NZxlIC/1mf2D0lT6qf5CUv/9fn74O+/jnynQNY+sQTts9m3N9\n5Yd+KU6/I8QzWCJqy2T0oPMW8IPBpcmDDg8mzSwud9yILsSTADeQ/GBrjPTG\nOxAp\r\n=IZfV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c02712b59.0","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/density":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/elevation":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.c02712b59.0_1588357561714_0.7685461746033053","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/switch","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9148e3a58bd90f62dbd5c291d632ae4535049a33","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.15d65448e.0.tgz","fileCount":36,"integrity":"sha512-MBJxydq+xRJy0jHhC6ez++4VX39bkHMacanFuRktabD2BtwS32dbZYd/uICjkOng++vkY9huOEsjsig7MJt1TA==","signatures":[{"sig":"MEUCIQCahdvnEqff0VaWfcPGpy3EPP0ojNub1YsiI++NsIGOsgIgOld9H+soruevoRZXPlzTsqXTc3MQmaFu2tsmuspC2mw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHcKCRA9TVsSAnZWagAAsbEQAI+WvksZb5JcKUPpbOpu\nk6LnxrJOVFD1Sxxl46ejWXAA3ByqKiXBNPSy9lq4VYxjvXNV2/f3gLDcjti/\nWdd6CvL4zMdUawIwL/HnJ45MG4iq2PGru/I4UgQ7N36oX+0pLBshiy3NsiNq\nFFyvuQVSQQ4eTyXGVih1JcR2ocgK/3SvlScZl/viCjfYeOc8Smha1E7zC35Q\nY2U4IoXHDVwzlQny+zs35mkuZFtb298dbxCIT0PmhcKo9ByqlntWDVzr7kDt\nCqHwx9Pk3Q6YPtm48zK5CWwW5wLCDWUzqwz0XPkrVKhWzdvVm5WB4SpP2Jwx\nf2otQ1cTXIHKY81OKTEdV9qhbaKozdRY0gLQ1Sa7gOA7JgN8tq26TvLa6QFf\nzB7TthXC8olitxlBrAMhTSXruQYdip7PWgFEDOODfy3/pOKAhrxRNXn8QM9s\n7pFaqEwxmXV2v0ziBuDOKSDMSythyIZD0Bfb3P1zToX8tfvcz+iClYy/6VIw\nOOIB+m8oVO8TdkKvi7n9fMy9P6S0k1EEgZk3cWBFMNxXH9dHrfX26DxobXzS\neivvYhsl7MgLeygyKY287nnlrX+9+na4BTfUlWABZ2GcexFFAO78vtksJcov\n9TCn/7UsFxvfIHQH4hEeVGYHVYndmqH625wY/Kt/Na16vx1gDIq5w/9xGtWD\nPYJh\r\n=8Y1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.15d65448e.0","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/density":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/elevation":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.15d65448e.0_1588360970350_0.6591341411195657","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/switch","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72043b406142c2e5977c27cc23bddd646996ae72","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.142b1549e.0.tgz","fileCount":36,"integrity":"sha512-Vi/b0Rg474NEfJzf5jnRKYhfXi8PytbOLLnnPYTxZxZdV9+Uw1uEJ3S6e4XLaA7g+85PNMrrtmogB+G9bkK1WQ==","signatures":[{"sig":"MEUCIQDCmOkhUOroOid7Rk0JTv4DLU4ribBhN/y5Nn2aG98/MgIgDMW207jMHCu+Cbbxu9mk4HcnLAZU8VgAugabVbHWMs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRRCRA9TVsSAnZWagAA24gP/35aRtWLW2SSpkeD2Sd0\n9aM0bghIAdYWXOwUVXaBOEGFSwQ0YaCwK88G6tg2JqMky1lhwsQhUO98avy9\nYWq78PnsUKTW18Kt+RAsb38iItEVkhh5SU/Ra0O5wWpp/zOoAIp4p4FnvLpJ\nbaJS5oR7THlgzXxKr5BPgHRCGOLgZ7I81o90XCdAXJEHqQz2Rmevc7DXewJV\nPDOh2Hlm+Tm2RJcQwPX152dRIb0HspyVmiHEgxGrufWuuMB9Tni73/DbXimF\nvTxw8A5bFINWAd6VQM6xbQnRMh+UvG8AyT8g6XL1oa3zv4NPKzEVHnS3LoqE\nHHmTfqXG4c6sNpzXxrrxAu45CAeloPgrKS9C6x2li4W5kWGZmQPCYvPI2kNs\n6X47fz4nmMgOkpRMI7wiB0Z8BPPrKVYmXx18RNvwQrrb3feEnnKVf3afCYzS\nRQ+YSnLlQGaNe3sg7IQHmnUCqFMRBJ6XFNYr1UzhwSz9REnPhKPyg55puE5A\niWC9R5qqHo0c1xte6ltS5KxYSJ8OEQyRyLx8+kxGLSryODUXXbz+Z0XOQ6pj\n2d5KpIE2TvtZx/Z8AozJDfLJLg72ZtnEEeEktMZg3uZiaZ+Jtqr1ULeWbGlx\nzX6qRyJzGrfwpGdUPZgAyOA7QkYUfZY5wSXHstNL1Yr+F/9XX3L93pKPYQcc\nlkt6\r\n=Nc40\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.142b1549e.0","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/density":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/elevation":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.142b1549e.0_1588372561241_0.8530934391425031","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/switch","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1b55835e6b3ff19898dfa7cb269312a3257cf6b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.524b7b812.0.tgz","fileCount":36,"integrity":"sha512-2kfLCikacV1k5t1mAP2XoSwEiRJRXxT6W233GbI1C1HCFjAc3kaMrMvta2YoCuZrs7AFjcfL0mOp9TiKpDO70w==","signatures":[{"sig":"MEQCIAfGDQsUyrofUVj8JBPOGxlPiac8fOVX/PHKQ6pvBPJ6AiBnvEK1csXd+JAfs3Wt9zByQLUcLDVdToRNoQqXvnBwcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3xCRA9TVsSAnZWagAAbMgP/j/Jgmw1j92h5J2B0UNM\nFHLoHtMgZC55KQACJzSw8AEW8pxvln724olKVD3nOxepjwjvmIoYnt3x0DHq\nGC7a0Kl6MaS9/jkcKmqoia1AF5JKx7Q0LQo6vyq5d2jNi2WZtF1ViQHIK6+f\nTzryAVIRzR7iZOiO4QyGLof+y67IjVdYqXMVKTEbcogZfhE8jMdAWfgd5zCN\nbJRMn/7L8MDBn4dL8UmejqFQZCYYb0r/vlf+RCgn32Ui7lN1dUth2vzx4W46\nwux8P1G4tEqrjvseo5CMj38wdqQCLT4iOK9L5N/zcP07+IMTkW2OpHXccRdJ\n1et+Q5WwY/BDcXOx0aKIw9I3aL1HnFV8lKCk9e0iA00T6W7C/HrTGE+aqMYX\nTUC2J3AfDej+zXCkLnYqbLgD4x8tUr7kfLJfRO6rNH8+t8/22IaE+og1WvhN\nGSAiu/Gy9c7UCPsaynxC3VQQG9qAbhEjcw0mSdbL/AcUZ5KTHTgjuxSMwSbV\n+7uVKMIHh3Gy1V0L9XOCkaGMfasUR44N7t0mmVeahb/vozj/9mG7yd4JjGFs\nIjWQiDXN7bFZuOebItuVMsATBc39m3JJCpBR9lcnErosItg6Hz1YwSntHCU2\ntHU6eGRvtOT0W//dHHCD+TC42fTgRV5Z5NWYLi4DfjGK3fiLkS9t8b6MwrjZ\nvB9w\r\n=Uv7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.524b7b812.0","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/density":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/elevation":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.524b7b812.0_1588538865310_0.8762363482860847","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/switch","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d8852a75a9098daf3f4a616ae4a53095770cbc3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.bd8ca9678.0.tgz","fileCount":36,"integrity":"sha512-cUaWnkJt0ik5bDQx4SM7HKmYcsxtDwajiO78zwApkig4V3YPCD4WXDnRzIYQSbWzDjGok6wH5Qz77RejYMT9og==","signatures":[{"sig":"MEQCIGwWpmuiYNt0iNId6xmmuC4KbVjGz9ySPtmSOCtozfarAiAEw815q7w74SeY8c500uOK8NrLgbA/MD8SK2QVETPrbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6VCRA9TVsSAnZWagAA3UgQAJMybSgHZwU26DXIaSRK\nQIrnEI7jLutRZe3FdsxMmMJjs1XhRojYBICa/VIByMbsOg/aUWjKpOB6qrhJ\nSz/eomVTRx5F+OmQdm0j8S3wSFPTQGg+IV8X8FAbrfT5Y3qFhW2e+hUBWGoR\nyrRJ3FNffmcWZ5UBvQrIoTAz5Gr9izzm3Y2BRR8sHJSrLdQ52a6ogULu+6ge\nM+86EWLXnhzwW23qaASyUSZupoCPS4mgPTewFlj7/+Qjpyk7foyAXoZPyF7T\na8GsrSUAN9R00Y9ZvyervYyAOEWAVdtYRvoirGZgeOo5YOZzjyKYtNp4S5bU\n70Ty9/4m8e7s+gfKuFtrKTK/POsVZCKkRb3VVkkt9a1BDFY/swrnv1rYK4eS\nt/7i2UShh3grPXAiTyaAhmwnCZO1jyoMJmV05Ia9v3vqhVYPX8OdtqSlA/sD\nKnoECBzEvVGA8L1xkl3eYa7QBLY/daw9OYBtcbWwXLeU/WmTPr/l6c8SWaJS\n0GzdOwMAJhhMX5tr/xqgDDYLFnJ+tJ4RI/mZi5wxHEjfHi6YkeqeT+rQ4yJT\nmhIx5Oh5jdmOKmIAxcywTYTr9iTP/5JVC6ODCIyv12Uwm9WDtRYCRjQ7tu7F\n40mSogg3oI3Ry/EPpqY6sI/QgG6swsGmunyClkfSiRY6WGA/GU3WnvCm37PH\nJzbY\r\n=8qGB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8ca9678.0","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/density":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/elevation":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.bd8ca9678.0_1588612756797_0.41451594834111205","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/switch","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3519b60460427e6fdb2e1404ebeab6c0603cf8f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.2553e86fe.0.tgz","fileCount":36,"integrity":"sha512-hUznf6MInl5ADIrFXZneqCSnX18ZC33j3tM2oYzRu4GTglz9h1HrtBtZfEBd2KyU2FpFHXjAaOYTHzzfhZb/wQ==","signatures":[{"sig":"MEQCIHFZlUq1THh3nUSfIcFQoCj+4oQ/TCSaOvXJLDk+2SDmAiAGChTgmOegpilibgXKbpmSL0KUVXL7oBiad/cBGgsJnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFGCCRA9TVsSAnZWagAA23wP/iohcFliad9A+Ta31fZ3\n+u/io5tITrr7aC08uRysGagUZxrcn2kkIAmGcfTKg+TZ8coWKba4euK5sGJP\nVzoB4bh7PR+aneUtzdpoIazziYfLnckfL5FpCGG/OC5C42U4GpoWkbH8XKus\n2saMYoE+qdwG1dp0Q801EKWNS4qTgQDIXNZkTbsqrWwKFNXK0VBRjLqWaNB8\nMe8+dBUGAUY/KXe9xSMH+Av0b8iupNcOtj3PNzkqdvtw/ZGiIB8O54MdMID+\nd+NwdPZdpI/Pmbo3jbIdSAmCIXXSIL75DcScXMPGIGOKQLBYwN2zxN68fk9j\nkasiHQt+PbMbcR0KSv6haEWIQiPwLOYamtkmWy4oEo+ZNs4pBwrlZob2YRYN\niUNH/Y2oV/D5kpDEQgaujcCSV1Sb0WKZJ/gc5QMOdovDqEAhDRIXKoctFjix\nYalKrtnfEkopJF3/+Eg9kVZlJdQZAtvzJtf3ufpJA3XrplQ3+wRXmqx45ezD\nU7vEgBEQacdM/ySS3w6TFPCHJ64apF7WnQBm6T4PWSn7FGVk4MMAHPKkinbs\nvhPPuz5VawJo+wlRULnpKRCLoJ+QmQsUy5JIFuUZUULf7wFyq60r7bBMaeP7\nLkD8bCcI44X7Y/MLuJtVXqk8N/7OPgw+zRXZF5nMJus9Fl6croqrWK1zI9L3\nNseu\r\n=TDIj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2553e86fe.0","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/density":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/elevation":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.2553e86fe.0_1588613505835_0.7587931454213157","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/switch","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae16620d85536e7f516262a719f7064d18ae1de6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.03dec929e.0.tgz","fileCount":36,"integrity":"sha512-Pdz4Qlh+gQKSZ/QzVqGcQKRpMURv/Hrc8OiKy8wqoHjOIddWcrDZNGqEmBdKaTepsgQSi/tsa2o78tDoQOjPMQ==","signatures":[{"sig":"MEUCIFGnNwcATiCUH4MzgOm4GsT9dJC81yXVJUm0LLuGELA7AiEAgwRbAz2rbbq85fo2p0l1gtH9RpZMTjd93u3Y4x8LfKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZ0CRA9TVsSAnZWagAAoQAQAKGjURjJhZ0DHbsLito1\nz+x13lwwOdBsbrXgE+o5c925RfaGs9LmaKSoN0hx1O+rR+XMhrMIcKd1iniu\nmOFnZczRJAkrCpAwXCRafCK0zZnXzwRl7GmCF3WY9a2TJ/98Q/JvlAg46iqs\novMnOVvvSWUAJQNlljZud0GOx95D8xnJbOhhGuMj6G88VWcdFWbNYizTYfBO\n8cVRaS0czLifXtiCWDEkZUd5idVPr9a3t8ll8PWiRCdGEpEI75dbSQkgy99e\nPtEdgY4yuJxZ3ToLLH4ELOotrzB4lvRlZdYF6fxusOygi3xoulA2KUO9jrNM\nVJWiayxCXwIrb0iS4pEKJxPHQaPypW3tVXEXSA27UXP5Zvhxde3qz9NjefuL\n+kXMFoqxF0lwYDJfn2F2iOAWTGkzC5QUE0SD3rSB9Qj+IR4jz9T5KlSK6BOy\nVNRLacNyxCS+AMu6BNnM1LpSpdbc0ZoJOaEFUZl9+i3DbKI5KcmMnz9G5xi5\n+XXLZVEAuQd1zYvIzoJt+yAPNKmBBD1glgvN8C3PxXertGyRy60WsLnTUvGM\n8+R5yXG6CXNMm4o2u7FO9IivkxdaokIPvZ4l1Vt8m26CK2OBI94G6QIdiHBZ\nuLMAJirFMwJON1FjJGO2xBR0f+CJKJERYxR7AsiVk2XCDF/yDAJhdbsFAv5q\nV8kP\r\n=rCm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.03dec929e.0","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/density":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/elevation":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.03dec929e.0_1588635251970_0.7431445721711105","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/switch","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8f293b3a38c39a0f41e2d44163c45d2bd57a7d0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.d92d8c93e.0.tgz","fileCount":36,"integrity":"sha512-wWgObFNBl5oSnUZ+I3jZydQFmuv+H1sgBwSxdDTw0MJG/snZYX5V8KastUbqyG/uzuXnAtUNnhHLlPEmLDW/QQ==","signatures":[{"sig":"MEQCIH6TxelyDalG6frMxUBqu7zJXPt2ZJij9s+op44P/sepAiAUgvm7L7u0yoJxfVTHigfZc28HPbw0YJkLP3ndh3fveQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtlCRA9TVsSAnZWagAAlaQQAJ4TXY/WUdr2zRw8zVOz\n5SSNV+9mjcmzXXxBVLkaNLikPV50Vr54hJlJ0QkjFp2hFZPqjPmohi9xend5\nMfuRuPwcaLXKjS/mdT5yy+cUjiX7UT/bGTtXueeZEXbN9eCq3wdw4Nk8YcPZ\nTVm2dqnHKB62u8PQCEfrPXRUq4LQhiLrFzdrz03CXNHLJZ+fKgO4nxG1Vxj9\nhyIQh/NmEzv5TgDBk1cNCC/jaUAmz+EPz2HU0v7ycxbIaevQJtuK4qGhAVeD\ncN40sSIH99p8jaudLX2Cwraout0+Da3m6TMtdm5LRhX7vaFcCx6nKRRPumZ/\nYodhlUr4D0W3nYS3SEG+V9SblAG4N7VpQMDUukxzzoJWCB+ZeYbTjNbjhz/4\nlnLK64N8+Yh4nBApCAx+/sOkP3ztSj5n8t8PcJNVrqP+390iz8FmMVYd1y2o\nz6BkiUsDBnT8YoLSK1NnDH3CUyoqcjCGzQZq4OvTktFKp6Gc9uGEAZY7zxdr\newIqgwklAlbKMqPJqET3A+qxMde2iDmcinJ0RKngoaEXSDqNsOn9g26V7wsZ\nuYhaX/xMpKBoLH2PYG32WuRcVDN36I1S3pY5bYaQeUG5W1FeoWk0s9lCy99m\nfqbsZmpiSUgjU7qWxsM+hOsYagZ3oSrfy6qLjSgWGpeNGM/xDNPS893nAx73\nQS2m\r\n=uzU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d92d8c93e.0","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/density":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/elevation":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.d92d8c93e.0_1588697957099_0.1091658697955813","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/switch","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79071b272e892be25509349d951bb4173d0d3a83","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.09f591967.0.tgz","fileCount":36,"integrity":"sha512-Rnw+TcmrHtfaix64ptk3u1Capq+Id4C1unvghKLHUBlTeq/V/cTaRHE3WSnmzK0Mb1m5t4+YDl20K1IpoC8DlQ==","signatures":[{"sig":"MEYCIQDIFxjUTX9Nq6faqsiQrITkmhxabce3Igl9siD2H+xPDwIhAIXEeTytHzhiE6TufZrBrKspos3xa9MR91Un8kIWWVAi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTlCRA9TVsSAnZWagAARk0P/1yZhr/wlg6dC/w/WTKY\nI6Gjn5rikpqGYXg3fY6ibe2ydU1xzRlpdgic4YAXOikjNj6gUXrTQE7CFoU7\nhGN+YTLCCsn1wko7pKoHEtLubw9vJJuvRK+Hd+vUFWKLGld5kO4wOgnmE+pF\n7ppl5/pSApQ7u5QDUwU/TUPk5NwJT2HDbeepIicOSwqp+/VH+gn+5o4NxnGp\nH7ZgmALm73pdZY6CKRigivTaYM7dgX5nMJhXSKEWER86yzjMXF0lVSsc4UwX\nnmNf4n0ecWUKXA3UzHwQ1yi0Mmf1LcuxvqGmlv7cznlg/bz+VVGjE1vDbu7w\np8rtUPSGT7K8Lbiu3NRk7KSs9CBxlltpLmqc5qP3nPawnnbDh35xjaHwQGyk\nd/YAUHmETGf/gCHhFf6cD5M30t3U3onGIhGkttW6P/Ud9YvxcWUClH5ntqDJ\nsIlLFZL6EDnagvJrIe5UNbgDFNom/L2qMj1bYUJVwh9TRlp2MLasKAmCiLTi\nor4xmf2W5qI173EjoU++L4KZOkPyjRkRhqjAZ8gNIo9HR5EFDzy+HsVQoVIb\nmpcbzXGW12QHqjSmZCScM7K0a5eRboP4Tu0vxSaRSUe+BBnpWp9EFQu9ddk4\ngKarWj7A9newIgdrzAKsoMol94ubHE+w2aYCqCzQxJ7rmflVYQIPhS57cLuD\nKEks\r\n=ortU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.09f591967.0","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/density":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/elevation":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.09f591967.0_1588712676604_0.32790871201846983","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/switch","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d82ce56897a111f0b0747e9abf6ba4f6d272cdb8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.3846ce311.0.tgz","fileCount":36,"integrity":"sha512-DEpHCXiPvfvu53LKAsbmB5+8HytuOoZQuM5HA7hU2BCWKJ//x43rm0M7igGHD3ess4fzVv2EgSEtJkwfII1Z7g==","signatures":[{"sig":"MEQCIF6GHMLnrqm333CaCWF3SYF0Dl3V9toyW+ETdO8m7gGSAiBgV+gpBVXoXgrxYy22ZJ+bNm4jw3F5iynyUW0JovYwgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUkCRA9TVsSAnZWagAA5ZgP/A8jA3dBMZBZE6b71PcF\nZNvFZoAWZaXlE+b+wgiY2l353XZBaneSTb9pFIU9LZx+dtsFHtIS8je4oqN4\nmYrUawLYjM9IW5t+BtdDsZVbeMC4dg6cWf2SiMWSxAGM6OePgNKNFhe66Tgc\nXTbRWg24iNKKc09bKZB5OGK/qpcWDKCDkgtP12BEmN6eFPRMpij0qWuFzkNB\nyJ8X0bYxAyVBkCXfEt6p6NTNHIrL1LTp08Tjt31VeStp3j+6CrObtvNo0m2u\nJERc/C/8qmpJrTUbPSXWZFk3EVlhPlBTKmkp1cZRCKdPauAwreZVYwPCuoe4\nWsTn1kGTuY+r4yj+wy5YoHfeZ5nDnluTORWTxePPbJmglG+Xfmcvn4m2ysH5\ni/HB/+K03arJPopq861EXXUB+obdyT+es1onndmgfmi7GqYbXiMou9k8tuvc\nyMQM/wL1LEIfIC9e6xjNR6rCsDTRizK09dQObe2+y9NHHrF4+yJIwqrJOJmB\n+RH4CSsoyBuPqW7tADuvD+uQmwRcNQf9s+gmPmJESo8/9FZliGX2Twvd4Uc3\nu0JO6+k6SRFmc/uRQceYcoeFEBwgtcE/Ot1QxY3W54cIR9ERxa7XCLvkY3JM\nln2hObpp/8UVT/oCjRxjhz28ak1zW+lS5b7WGp7Vp+tgcS0rAQlkdJIhBv58\ni5/q\r\n=a8kT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3846ce311.0","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/density":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/elevation":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.3846ce311.0_1588774180111_0.8753207142032733","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/switch","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0483a90c688f3f684a1fe4fa84c07b8074b3f3d3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.ed7f32463.0.tgz","fileCount":36,"integrity":"sha512-BOMGqP4H4ZUlr53e6d6vCJx3THGZAVqxPzJa9dBtBjifsrS6KoVPd0v4ahzBuhQpeiSunhuUNiJDi3rYocyu/g==","signatures":[{"sig":"MEUCIEonjXYMOggdRKfR/o8vUU4JhsDF/X60smuVzyC6SQudAiEA5dGqIUhMIj9edsO3NJFbU3QMm7EQY6EEAeQ8f8Hlwy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDjCRA9TVsSAnZWagAA3w8P+gIuCsEg2WnfJoy572/Z\nZ0gh/yJNuEzmziT882WFFRyYIEYu8I+qsfJtYruG2St7vaLPCIgknlLjhVzb\nxJ7AM7YjSZApYqLayZ0bRUP3U6MAfSeTgJvF9CAVQD4pbEzUCjoGbvCPvdcR\nTLYLQ3wpUEjumPBShGAF5ajWqGSiln3EMuOWTkpdQJ6CFKrGkcl9dRyzXzEL\nBn8Un6CNadR4LxIL8WzrWRLw4pALeEnzCWc5N1wRndJSVie8ZA1BSqJEM0NV\netewvoGE18kvGyNSIbo6OUzLsWxQghZRWG0BsmvkHWXvOZOhoxyvhNSDwlDb\nlbJolEaoZTYr4wRxWbBhLA43xN4B2LiaXk4csRTRRnBJ2GsY+LSo69avKOLS\n4ni5gUoeycD8vcNSbPs2EJJ9DaLbR++XWdVUOgDsENN+f3Wg1XD9tuS+lZQz\nbmKvO2g0wYS4Lt6BDkU/5R9jhIsRJSFn3ToXGOrC1UB2EFdon/CFraEPGhKk\nKvU0vD5ZxSOCXKBvaXGkZO5sNEympHiDD3ldS55o7COvRobozVo9TUtBwibZ\n02RWTc5mftXI1/Aq25T3iC0nez5l9uUgkSUsDKOyJ1b0sk3W6HRiXUk6MG6b\nfqHD9v5e3LtbH29VRDLeG2Yv7K6VS+SuHOhNfheKaAe5bPjVvaciqEoUyOoi\nHIK4\r\n=x64a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed7f32463.0","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/density":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/elevation":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.ed7f32463.0_1588781282451_0.9403782150496696","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/switch","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4696e2126e3f4c4938717ee03f7cd107be109555","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8135cc085.0.tgz","fileCount":36,"integrity":"sha512-3vD8CTgK+XjW6Tmy57xN3c7Heajgu8Ixpzh8Aiel1+9zO9dZawL6QxYV9+ebrM/b3znwG+X/b4QjuhxizPJ/gA==","signatures":[{"sig":"MEQCIH9Zvc3LV6skpXP9Tx33+1LTDW8W3S7Hi/siEzkmMUsUAiBnjyTYHn9QQ4zhsdt85cVxJetvTNyefcg55eNKq2Jy9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYnCRA9TVsSAnZWagAAagYP/ivB/FNqyMyyvWlCNjKR\njEXvF4d7rgqwkC2stFMi4jVodP1IVsUssvk83FXPui1Z+j6Roxdq2vL3PVss\nSHncNXpn6rUJGB/yUWYdndmI0EzcLTdwK1EJyXj9QhZf8MJmbl1N92WNmUG3\n489szawfBCbsMj7JcCfbFx82ZBWOX0wl4wNkootN3zqOME6J+Oeh0q0GAkLF\n8n7MgPsJ4g8BVULenFdglyWht+5HIYIxwFM0wIL21Ya33pyaBXoMK9bYleYK\nWJ/JDC/onKfM5DH62izuahYo00cStd4rkmWHzK/ENbL9hURd7AUojpFrWkpY\nnrN3piJiOi5jc0ANzKBktmhcLS0P/I6Vxrcz9yDSW68J8hJqj+x4Bc+58JUT\nS8pLKkZkb1Zba0ADV3T84SYEUHWg8rDW1uwx+5FrTNDE/e9fMvaZl9b9Bcd6\nhsQj3jdWHeAXdxTljfadSahKmkQIU5Kzslh1/KogrtFNEaa40isnR9PY7pe+\np6jnSDhh4y3kkCjf2GGQxMG6IJr4xmZDg6OI3rgksPmRP0PFTGUQh9jIKV6f\nsTwSgMgbPU8J40MtGrtRYeYXkdTuTNArRFexw/h/xc7009UknoIYHyFr8Kg1\nly8GY2Y3dyQe+G3x/na6PXnUIcueqKlVd+f2Btt/fJLtJ/EPHC0OSMJw0BvI\niTVM\r\n=PTue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8135cc085.0","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/density":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/elevation":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8135cc085.0_1588794918468_0.8403349325299669","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/switch","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1139c0c0bfe9e78eca983f85e07c96749b7ce0e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.deb212de4.0.tgz","fileCount":36,"integrity":"sha512-c1YJHVhFhJrROzHNvi4H8W3ja8RKQb1gs2UkcJh8JL261LGx2xj76H7tEC2x9FLXE3EJ1P7pSwXevPnZJlConA==","signatures":[{"sig":"MEYCIQDFhGBQ6E1/ffFTogyVqivukH8Of/XWNmv7IWjcg3soKwIhAK/i+jFS3FjNNWZRwFHrlp7x1nGFekvNFnaTAZ76pIXP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfNCRA9TVsSAnZWagAAuCwP/3Itl/UpG39vktQ0mH2K\n0dxTTrXmNxxIciUye3TRie5yVbJeFJM0l2qvpTZoQdZlS4qqq90Nl4+eCmFd\nPRk80pvefgSpzdyhOaCryxwW++iNJUXqjNoUWwd592pHzs0LkzR45ewDciB9\nb1tpM5R61/kLwkKsUBQxrVYlqsP67biEe5EC/SR35h0BCpLeoVb/MqK3EQ/m\njW5bKGk5ledGBWUrhDUfDnGEPmStjW+HphBGXu5u4REQxKyAPan+5b8bTglH\nQxRoIWsZdeCzB73ngW9GJ/bmkJ31UIniCzNMH5HyV5StJDXYcIBHKPI0nMaW\nVQH5+G7ZhoV7zgHQD79dMnmjJRIhVzURera+EEtiQ2oqytDC88qnrv88hGNA\n5E6WAdYCSWn9Aiejd0uBY2FK+8Kq4T3f6F/KIbXGERojXf+QAZlrDUhinPK8\n+qG0wnXz36mBCLiqv9njf3iStfkSIRimcCn8JHGgBzh3zZYRF6Xxb+n+Zc2f\nffvMknNvVUxg68eh7IXhPeHyknBTgvwcPQGCTWNbQeQsILWDAKTmvbbeMAx5\nVg7jL/eq3X7174HG7stIcx/xozOq5DsAUU5PjnbnTb9lnsNtMnXmdiD0Q9VE\nXMspHi8UwGAyRJvcvIVPMb5dSfQMXrjO7NiSpiCtuPuONnpZTCwYQIna9gkX\nfmMD\r\n=Dfyp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.deb212de4.0","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/density":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/elevation":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.deb212de4.0_1588803533419_0.46353211226106716","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/switch","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a049e49ed67da046d0274b3d1865edfff04819d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.f83e00898.0.tgz","fileCount":36,"integrity":"sha512-H7/Q1QNrvUNQiyTztLtG1TSoT1ezvT80VdudizS07Vy6EhwblXHSROmFEi7AycUAx3Gsn03jPTIEg995yKQO6Q==","signatures":[{"sig":"MEUCIQC/RK5VvcJOnlCvDeM6/xtwuT5GgMXFK9ijs6NHuuZoDQIgMgXFLSyVxQWzzV1Oi+ybpwoYIltdXmaTzwC9575LBuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwkCRA9TVsSAnZWagAANSMP/3kUipAQflPTOusfUfjp\nSLRtE6bpyv2917BdiMc9jtJbEU3M4rhXH4/DmjC0lG3xp4icU6otWdLG9Eoa\nMstLnaEatwFCJVwn2P8cB3u23E9Jqko+h8963Y1tcW6J7lbbWlcL2KSDicRh\nmmoL3gVm6sdDell9OwnRPr9SWFpA1PHifQ/JongCI6fLQ8BooIcTdPl+WHaZ\nFG7RYmjLFdlSTuV106mb5Q8HVlbzdSnA9aXMEfQWO81JTDvuD1gJTL6J60DS\nK8oDvp9rVF5U2Kiit1i5ZTq01Y9Ve8lVo7dqHzCa08TJxoxeltZh5+S1/VWt\nXzRR0BR0U4uZTx/A8Iqfs0Hyw/zDburlO3LLhl2DFuw71DaI7Vh/7A8InsTP\n/cxI9Fs5b9HMblpKCuh0+lljkekhm5E2pbODCyJBQNU6uMshHtIPzOy2omR7\niv4tmqLJu7ILy75abSHX8ZwJ8SGHFW4WIYTy0p3Z52pQeFvLWmBIp0as8X1k\ntHIq+iT/GwODjbaAz5K+eQdQDr0m6yUUPfoHX2hYyJufD8kUhRbXtPkUS5C1\n/BkI/BAe6DQaWqh0AJKkEyHpAR+2Pihi8T9Vt56WOMDfBQor4WcbXRciWQsJ\nu0e8oS90RVbKqiwnsVTFhawGgeULaQntDKilCw9ka/wwWks4gFIXfgssmtbb\nG1vd\r\n=YRU+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f83e00898.0","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/density":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/elevation":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.f83e00898.0_1588870180221_0.3691308934209716","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/switch","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acba4a4af75a9fe528e6e62ae0fab974cab40c7d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.047e6b337.0.tgz","fileCount":36,"integrity":"sha512-nJ8Y8vu0MmdzocSk3xYYxE08+1GtDpwi8sFjSVaa5x50Pm5qBPNBeXO0BIVYzLoyPFM2HrpO7NIbLqtMz4nsMw==","signatures":[{"sig":"MEUCIBBVeaIoIRl8K8JAbxhYQyURmfeydAwphLzdxPyYev3yAiEAn/Vm5vMHIjWWqHse6Lk2Btepae0QWpr8JEA12VVta58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacvCRA9TVsSAnZWagAAXwUP/jisSQkeMFWInfwD1wYL\nxjRMwKtW/BFLsV3Mwed9xPnDkAZjXnFWNDS0cTj+QmngreA68sDXNRSgN+SI\nU2wpTz1NCPjU1rwhw9xmLpd5WVm62myqF+vmW1Ww92Kg9spKAz+VMGlxwblO\nIiLZcx4A7vvdeaGJK+heSd6diTRpVSFMCH5n8JRKGCl1zZQiBEG8h7TdxOty\nouDSL8MhhjC9sKTxDW9kLXX8Ka+pB/lopI9VQSy4BpAiXcc0fpswRD/VWQ1f\n2QD2DLKXhtrh+Xv7Mn88CJXBuK5O188jDSvVADD3kwKL3xr/7zd8xZ8fRL2u\nkm5qXFT//4M0N+H2Tb5630RujyLnr4kHWxQoj9iaVYojmPmmOYzHEs2Qh2Lr\nhLVzrWmSElOnO89oGq0HlDSTxqHJ03w601WI/Gtl+E5np00noz87wcejmicS\nCBLufhn0pmzXLL/UFPtY31bnJvJzlzaKcjQ7cdhV1X92iZcLB8VOrPS4+Qrt\nr3ApYnfVnwTgf7K3VcOJmo2cL4xzbYWuROiyKnVSL7rOK8wiwEKeh98raRpy\nxY1QrNQatFNAu6zQ7xqftIFvNNA4aB//2smoCIM30QPKQ4Yi6Y2s3CPMyUhE\nBG8peuKdg8tTov+IPQQjYUbCg3YDCizRVZaqHqpSjWbI6X0VZ7QEePg687qe\n8V4D\r\n=S/qL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.047e6b337.0","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/density":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/elevation":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.047e6b337.0_1588963118969_0.11638376941025341","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/switch","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7744b29581275803111223ea14ca4faf2b9ce47e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.119e21426.0.tgz","fileCount":36,"integrity":"sha512-JhD+k15edNf1bTv5NtzdFvMHdYPdjdhzDPo2+2L/isW3HSYAinbnRVfyQNrQM2Wsnt9uauxZG+jPubnfhGtAPA==","signatures":[{"sig":"MEQCIAQE3zSsNTiDqSP2OkEEdI+s1R487eVYvYW3TPC6DQUzAiBo6zomtqEMlSpdxWJp/ApKZDCwTvpLNFla96LifigvhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+oCRA9TVsSAnZWagAAjNsP/ii2zYF6cwZW3Tpc2PpK\nRVzbTWHNJDBo9SyKIYaQqz7maLMvj7dErgstuGmeiEtty+/duVO/xhvfdbgL\nHj42/4V9NL0AxssACgZjiFZD0rEaQz0xxHG9yjXjT4v46xm1DbSTnzGyRhNp\nZRiYYIZSXMC5AprMSE5TaXsYL0TLF+L68Rs5Ul7p52ZnTpiT4YUukIEcMSgh\nGotluFwsm8vov2d2U3VRHocVmSXUzKeHwJv1p4yVG2/D+eAEbSSN8s1HsRB9\nKZvUCY5r5zqGDLlSS6iLoLIWSPorDgtxal1QA7/BvPwlri0YWXVlYX9OYR7s\nrfU6ZDhfj9AnbJZ4JmAdllYUgNsnVg9DOVDmnJ/NyCMWNEswYV38LWGTszZK\nxy14EITY8gbv/0ZlEDr7ED43eYaqoOCKLNhqvsh6OMCJgcm3HQj/2dUjquC3\nVuhXubFR8bdstCMoAEOpj+CxEHCPAAruXZP3eivLSF40CprxYLnXSFBBXDOl\nCubiNKwCtKDWtzkKmHljUbRdK4qFNpJ2iTSPcDw5ALAkNJOkIGVcsDXtwMep\nbDu1LgXieZSx5ecMyPJyIZq2ieSHKxb1EAscbDwOM2p01PjUrxI9GnzivoPw\nENcCQ5p1/oKoDqpev4EGio4cFqMQUXT2FnQFE0veHfgbL9FivWP739VBwvDE\n2FI1\r\n=GgfM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.119e21426.0","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/density":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/elevation":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.119e21426.0_1588969383661_0.8274489545346289","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/switch","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22867b68bb50dac31ec29f306b92a16f4111e466","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.2f052d824.0.tgz","fileCount":36,"integrity":"sha512-YNiIr+4I/HSaMNcKR3Li6V28H27VRM0DOEUBYdcZ7yRJph5eDBWbwm1Q6tWuQowsb8q0i9Xv/3Qj6NhYJRNKvQ==","signatures":[{"sig":"MEUCIQD2fTNzi77nGU8ZRudeMwQS8WmJGVydTpFhpvm3mCjjgwIgNrQAleuLvgLncqDK1OhXtklUEIAU0au5QmsDxVCRe88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoZCRA9TVsSAnZWagAAqosP/3wWxermcZbDJddzD0s4\np5ZsoFykyYL9MAUmrl7Wua0gHbuMygq0AZE+cK1XhWqR8o+dyjYePhQ15obL\nVerrSwwrFQVkHNxfAo067xKEmjRS3FijT8of6Xk/C+rd2ZmvDEqCH6L2k2XS\n48jJw1xSgNzX4af2QW1fPTeMHpb8qwG8oVg5Z8s7QNTZ8UCDlo5de3vc2JhZ\nufVDkgHdaKGgeC0YSJ/EaCDd9EDqJe2Hoq9ABfF1jtXSFpz4VJRltHLPRfpA\nRnRn+Uu10PL0V4ORuCdoPI6SWf2WLMdfaOFnvZCNnbiEgIxyhtTwIrz0Hliz\nfJhW6z6RPw2efo1stIq9uNYxe+C0EnqbJg39s9eL4/P8kN10wZ0bksGiM0OZ\n0RyABkhFRr7xBsx5L7iomdV9380wHk9lt2UaZ/TxnX9w2VVHulZi9LmkgvQj\nnmusjx+b95I0V8EjvQBxR4M4vScyx28G2asyIEkvBVEW5qg95MynYCJqd2us\nY5MODodzFwthBDXQwuCauscvxfMwzaACkfRAhLqd+1LFdEUjx2l6M7IUQ4NJ\nEQPkNrn1eQLdZzqGX1IM1c1oSslNtB4L7gEUWKYlODh07gzFI3tx9fMYn0js\ng9bGqI9ioZ4HDFIBIGJ+lSiGtZMzlz1MlPOAW+7KmZTAGvR5prexQFmyRD9X\nIpU4\r\n=ZBJ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2f052d824.0","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/density":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.2f052d824.0_1588972056489_0.5499579906780538","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/switch","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e32e2cc68e61dbe7503a3cce1cf0a1c60d91d31","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.e84444387.0.tgz","fileCount":36,"integrity":"sha512-Hc5wbSzuy4rQpnJxDEXHnTIi7fc9y1V50y6jqtUU9+ZdSvsU/oGXnaq3jpdP+YFb93vogtWFru/b7bFxflWsZQ==","signatures":[{"sig":"MEYCIQDSZz5aY8AiiF/PSQq5twAcjIkjO+Pne5ZoB5HcrxNV6wIhANBZcCmcKRfIpd18UplIF9174cMjZ/0L8JtfM5nfEYQA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/ACRA9TVsSAnZWagAAT6sP/RX+sA6I3e/VHIwflBuo\n4cq0cDsCXfcleM00xxMxJYJRrq6nngOGSN72L5GrAXlTy1IScnTUEZuGGVg3\nr6ixk+zsvA1HNPapc8/c2kCvXCBXD4pBhU4wIKbk0Q8ZglT/2sbsPWpvFvBf\nYgi6zdJMcNyAdVuhYgf237Z4Lvkcb1vK24Vs9fiIwYq78ieUMcw6gjONliqa\nFJDr02NbbUeu82SD90hXDHexdStI1EGvsT7K5OOmbD5f9Fwfays0asRilZV4\nBZQ19+VBPkEhdOyl28K0qCc1MnnkAdzBYaQ0zUgcNYZUpQX4/PbXJSh5p0cT\nUursmWkwf+gJLEBnqFIoCPdFFm8ss723ffEaJA9fjC6XKRNTvI8g/YjPyHer\nKoNL0L724zOic8zxLe0vrJJyHUyKDLEuK+iSTcpjxZouLfzYEPoqh3leeL87\n0A1BNbBF9yDH1HrBk+Sv3kH1HMsXd4F7x/RL/cSSHqaG3WkgmsgiimWElLkU\nvsiAYubKTU5kyt/t4Qeq89vAO672RzX82pX6TeSs4nsknnIpmj1S3PBINZPK\ngagxqJPaaU29Bs2dFxue8lxwTR/8biqOZMRE1iOzWsrJvjf7W3T9jUb0lIsb\noxmwOpF3cnOrQQKIxvOT8hDp7vcAggH3SJr0uEPTAd0cLZbhPDgVetF/+DYn\nuBSh\r\n=LFDQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e84444387.0","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/density":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/elevation":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.e84444387.0_1588973504180_0.7767004352697666","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/switch","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e5c74f84edcb249ae78b3b01a14d74c434c5beb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.893eb1876.0.tgz","fileCount":36,"integrity":"sha512-8yVraD2hmK7M2CI+adEUqzC871B55pS96GKBavQ+2yREP+7tk5XQqBq4EoOqWD7fLK/WqesDhhE+FLSGbzii7A==","signatures":[{"sig":"MEUCIBi1QcI261gvvloeY3Q7t2l350jj74fs5vcYNz/IX2zvAiEAxlZbkmk4EyjlBWyWmZFHzXFM+xTixEALNAopcsKOwF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV1+CRA9TVsSAnZWagAAUgoP/R14487oI6q73A5wmwDk\n94alSqBUApOShgHZfZfuZ1KMSuKUvss3Jwc/5P58Icm7xeE1Jj0RX2HZ3Ou1\n/TZtW4b6IMOZg8R0VDnkFpw+I2U+sq2v6yrRQedKZc7gKj2q3ezb0zZpq4iT\n990YSXGxu66fCI/08hYZdsS8PLZ2Dn8z+aWJfFxH5z8szJc/Zk3ZWxrdj6Z8\n2mdntUVnevhfS12k1o2gWHT1uNMigCcWIhaqu8Yf2eEeO33+1h4A4XlTTbK6\nHIum8urrZrXjOXRq4PG8a/CTuV91PRQt7sLJd6EPcVHn2kfB1GJgU4JZSP7H\n3sa2FLccMl/ItN3nGCrl+1vlXgoLeLMnnYDZEsEhdfdT4fBFaIc0+VcVTSTR\nQfrqQKO7+2lLUFPtb+Py2Ot0MvFHPwipgGf5T1YVqyz20vBcuQCZD1DXBH0y\n6aDRfy2eVPsLbgnxsCethghI+naZSZejiDoQQZ7+yhCWK11kP7qESgDZIoL+\nT9KRr5/yQ6MhCJxuDyTtgITC8b1TDsob9++M1fTxMXMihqatwf6qPnn3SuND\ngEcldAids3Xs4l5DQZ02Gkg2xSxonv4TFHVd01axmE3Y50iK0FOqff6nKcu7\nguuzS1tTsVmudVx2ehKU5YAMJQqz8C/+9WJzXfI8UO2VDPQlNUPjBRq1ZbXm\n+OFJ\r\n=fEuV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.893eb1876.0","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/density":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/elevation":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.893eb1876.0_1589206398255_0.8879711790284306","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/switch","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f554d4c198a2610395400c8c2587a8f57f4d824a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.a5aeb3001.0.tgz","fileCount":36,"integrity":"sha512-LhFm2e8cdRqY0rbomlgluSJ93pZPq/O6iec2sPGj8UJqkRI3fzKNcYFr2R+3jbfq0yRq152fP/OLL1f/c3ARHw==","signatures":[{"sig":"MEYCIQD3ZcuYmLhi5bLs3391i3QXceTLSq8InX1TP1QgswkQ6gIhALUWSsA9G1zHekHuiRiv0jPuktm74XM+4DFPzc0OiwNX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWE7CRA9TVsSAnZWagAAT2EQAJARvAhmzPN4SjkzeRCe\nmBnjTzxjXhGsLA4qhX/ZlQ8hvrUrV9Xc7Rpx1hj2PJkW5Q+u9VViFL6fsU0i\nH09oyviIi7c3n6laK1s/rN9krf3fIx6ooi+tKBmSXyVreKis0fxTw88bCTsA\nuKurUlWXEZarpPGn7wBB/pLeTSa5bAVdAPYZmTVxexJPYyvdAmI1LJOuFNE9\nk4piJHqQLC74oEOsu57AABLQvll4xxdTRWTbWek00QQTsW7ZvFYSTEShgnVf\nevMSLGHpqsLUfHn0HAft1H0TKySVM8SXnvyJt55FxkPvmcdr4269MVe9eoaO\nOYtc+TtiDdvnUZJHRHdT+ePQdBQS9sUPrBYsnG3cusHb0SEUnkKQt5sAWpEp\n3+aAPSHV+K61oXpW/7H6B96dCQdUJFfcNKiOfFYDBIUPCaY9NjSjNveOf0VU\nm2unPjjVGL62Cg2V/7ijEyAAz0jdEh8YWTYbyLehbIzrYNdJSdxUv0Wkm4jt\nSwmObm39JSoqB5w0OcCVGFvmsxRCKNBqJILbcRLRNHKObbtkxOBBU5rqy9i5\nZTdgR4ZO1VEA4SrfDjJ9jQ22G2mOZ2RGd19Gfd2YUE4Y/EJidHaupxVXnrqV\n7r2zWQeXjGJ3RpeJcRQMIFW/MYhsXKwsjKFXzBJ23W96Sw9lpypULWYgzJUZ\naLSR\r\n=IOsG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a5aeb3001.0","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/density":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/elevation":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.a5aeb3001.0_1589207355453_0.9754908812575582","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/switch","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5b3f625d10882b5f59cace0162511098ec86f22","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.610c68d97.0.tgz","fileCount":36,"integrity":"sha512-OTEc740cMQRJkDVNL0Ri2hap0FzVLw/vFu2sESQ1ED00gse31enFUx9QYGWUMqEWg845NWikFWP17SwhLnkXKQ==","signatures":[{"sig":"MEYCIQDtDlxdmrDxrLESClIi9QbMQLfwMH3zG/Lnuq3jEY7q5gIhAJgGWMtiC1v0OsLC81GgHK2409bZZssZhX36bHFs4K/Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahcCRA9TVsSAnZWagAAszkP/jc5JJ3NnSayiRdDbJ11\nqrCavFtOkhavymt0KmVoWiRSLWcKyT3LcqbWFx1qWRiWbGHeAvc4Rx49xPS2\naC+zt3cYLTCoKgODrz5aL0TSm4NwQTn6tqh/3Y7o6APpYI/blaRhrMjSPAeT\n5hm+MFYbbIHFMPDgK4XBWR9JJfOHlIFenC6/tdBOilBjAOxwtqbww8r9SfVI\nJWC3GC6IKTjKbMxG/MjOo6yA8k5ES4XmbgXuiDErj1xYwv5npJl71RGAIt7w\np7HoFFWxNL8L/mY75OaYB0PLce/uV+KlACRx7iF/Yo5wyjJyr1OJxOw6nOxe\nm+8s7H8epiMwXHJFLhkpwFgOlplSjiVUdELH0QfsO6QpgeAhPH0WKErnzKjb\n4/sayCa9JhWRqcJMNmGosIqcRBzIOMFhMTZNWEJxT+SlyDqPd6NSxwPZIsdA\n01qFvi2Mr6t1TS0ot7LpVsr6or3ovxohEUrs0b2JQudjb8LbeZhkHdu+NcB6\nU7ArrH8h0Hm3JwyuWQ5/xkSbO23Q8oZt43biVKZtsNozZi7THcOuEQTl3xYr\n8BzyIYTW3Nnj2Ij5JHUDZ1HPaVUHwpwkIPerGfWtut9ry5gyM5hMciA/Q8eY\nXJxSoa4/8ynam8HJW5gawTJkKb34e15GTX6P8s5vGpYSao/fuwrIAgPmJTzp\nHvEd\r\n=QO+V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.610c68d97.0","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/density":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/elevation":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.610c68d97.0_1589225563896_0.8478386612745319","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/switch","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9e3bb77071e22d58355636cb25907c732af1a92","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.ed52af767.0.tgz","fileCount":36,"integrity":"sha512-Vq8MJH2CBk8h2dqnbnBVyBlrMq543GMX5tyx0tq+jDmttZ/iTadloMULDV/cE76r4rY2qwIE69TJ9ICCICiUmg==","signatures":[{"sig":"MEUCIQDaTLP5ZOc4T9lQmn83sWagIcp8runQ91orKLHfWTxeAgIgXuz+R/avj7POc3WK19UyT/rqlfSeoOJJ6IbfGpXAo7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUyCRA9TVsSAnZWagAA5ecP/iEukwUuC2wtTYkKeMua\nTa7AndfRqAF+WjPxh7ar5ojrUSEdk304t4zseKEyg5CFQDKzDu6OcnTrR9/z\nd/uHGNbgdf0AhW1y8Q1GouyXmWmHgKqv1W9F/tK7/rdCHqtrjZPdSWnOauR2\nlhjZjiT5A9rIcKNyM3sExUec4CSmH6Bxc9HZWGqptLP17MmoJDShtaixygPN\nmaeyxPxFwkS+tRe+yVkm5o9ISlNn9ePzBq5vYE/bluf3Dw32JK6gxQyZ0IY5\nAygDpKv/U9omEyvWDua+3Q4VlP6amXyy8bHt4/CnczXueTPC3zUAnjZGlY2p\n8SFd9AX4HZphZFMNwpUlfOMhDBK3SLyhGH+VkMX3nOuUeUN6aFGwnUgaZwaB\nGJ2TttVRQ81FmQ5u2aLshVXDFWMAKkHCZFOjBuIJRMqGdyDgp72YIEkswtnb\nX7mlciHLrY5mqOsjI2axBgusdV6TruiBfjT0msnUAZL7u/K9+PgxeWxnajpF\ncOCqe0lCckvNeQ4wjjK08wf1I4+RCOQGoxWxoAVx9viXVlvgSfNyN+I7stCu\n5O9Euaty+4sIWaX7zPrXzem9+s/fvWDcpLoln29iLOLYUdmH124e6BCjm7xw\nYofz9yIqn4pREvHWXdO6umZ9Rh/Saz4Aro4E4dGDg+q3X15yPMuShfywsG54\nUYb4\r\n=ru+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed52af767.0","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/density":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/elevation":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.ed52af767.0_1589228850367_0.08479486541626202","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/switch","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b23e503b3e108fe1fa13538e0917d179e3bd9aa7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.058cfd23c.0.tgz","fileCount":36,"integrity":"sha512-WlYK9WseEDQWys3lfk0vioXzYeXJEW4Vd68BYWgAFdU2sU9HSOVh9kdIJS9C5/GOAaDpj1lPprYHjg1aM6NotA==","signatures":[{"sig":"MEUCIHHJRV6NLGtRpjKmbbxLBy2M5wPlfGiq5nf3Y2igN+PAAiEA2X5BK5Nn1x3vxjs5giu1tMN9g1MgmnOzAzRVf+6dmms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucK7CRA9TVsSAnZWagAAUtoP/itp4gNQxiy9GfYC4zpx\n4OaRRGMcIU02g1qioBg5XAnbTmO1agf4ak60iH3ytBXBd7JS1kjiDxAmwPai\ns+OrKCM01y2z36G974YzUKa6jp2Xylak3jqNzNSjVHlcR4DCtYZr8TCvUO7k\nJz6F0tFeETgtN8xH7ZpHZ6DK4zRxuEggiytU+86yrbzEnfqAyTZ/yDsV3Nzt\nvbuX983zHajM2cWt3yXHyJvgDU7HauiTL6J7bBQy0tnWfRIMXc7DiPp0metL\nABXl+S4/6cDTj5ROcUpdckPzRyBYP9a0486dLgTVCHqRtvpmfBp4GJN0Y58z\nalgQmRwSB6i36F9fcDS+0fd8P1u8eg8hPM8/JNIywYog1cbAPhpkci+t/vBN\nKBzGO1lLj4GvG+IIp6K43ZmNB7fzaYT684NfVJ1LOGktC9D2wKahuQK5pwLN\nm6XcOsfVik1BKlN3fBb9N8WfSiF0P/U9XsjiHNe8kfSbOBOtfDxgs8UmLEnB\nCI00pHyaRys0SjpAiMFmD8yWsbQ0DyXZZOdMOYxYFbx4qdb+4/5FlgTFUs9k\nHWIS7b3gURWIwtOm1izPhXI0Eri5BNstpLdvuL1cirdsW+/6jV3mVyMrKxIF\nB+hsTdNeGIaKM5dnthP1IK0rDgnDJDt7+VI8osKdAQ1pM8bpPHIqwbn2imD7\nCzv6\r\n=aQC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.058cfd23c.0","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/density":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/elevation":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.058cfd23c.0_1589232314891_0.6358516367891149","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/switch","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f676de693988ffa2b2e2f9c8cf4cd5ebad077739","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.0a371b4fe.0.tgz","fileCount":36,"integrity":"sha512-UvRgnhpEq4ca9lHWzj7E7LLG2eQvg9qVqMlpZNJlHYwsiqmFT+IROw4GH/XuwFhycBbIb+YFEwBGGHyTaULlrw==","signatures":[{"sig":"MEQCIAhqV7aVSwmpckxQIjkgOqR2hPylU+qbDg6SKF3d3LTmAiAZiDK45z7lMUXyscZeFqGvO1EA1osTO4Qr3hLb6JQ6bQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy69CRA9TVsSAnZWagAACEYQAIxIc5n4vGYEStThIDui\nbM14OnXqt7pN4hhQEn4gNs9WvNooLe8iuITYKi+ciPIVxH36ZjERWIpZi+Xi\neX5At/BxawCpb2mWgXI7CeC1zLQYi1fFkMvQ/IFAXdW8zjo6vEEvTLXj/6+z\nQ9/bff3JcdLujQBh2uXwwpaYbqfgSMC7tpg6T+RmrhtSS5BDckkc+1WaIEvc\ndeP213Xmqe1vHyOzMHD3d2Wq/+9H9P1bP9v51vy9sX3LLPeB/DSNPQ4l8KJY\nVk2CiMXo99H2TyTQ8C5ULwQp9YzB2RRDUK22LD15iEikogDR3uKYhj5275Bc\nmXhg8CpUrGbiNNWvIchUzi9QpUz9h2rFGkjYgy9JyVofEq4KcM8wDyyXywEN\nYcdGvY4a8m7/5KFV8mf4hnGlrB5rNc5ec8IxmqXODcHyK7lIErEuw5IK8I0f\nM3QU7bKPDVEKFCxn1OlAMi9tjk2wIbU/B7YdiP5N0wd6WH8NVSMWamFWvh6/\nKaPqJ8hIanY3fOQLQBzk3SucUJuSG3SZ69kP/q5U1i/hUIJnqa3ieXB5L+Nn\nKTsiagPpyviY/XwfP+GlUM7VFOl++xy/ARhkQk6gZPOBxr0YgSRSu58C/Ma3\n7qMDDAe7ArJiwJACeui4FdchVsc854UAR14MEjsZRjIP4WrAU9+bET7XxRI5\nVKlW\r\n=lZGT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a371b4fe.0","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/density":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/elevation":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.0a371b4fe.0_1589325500711_0.9856211319577666","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/switch","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab4204829d22c78c6304fef9c23816e29065a1b2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.2139200b3.0.tgz","fileCount":36,"integrity":"sha512-F0319ZKnxINjnI6qpdJ8Eye8hBIjKDSwX6L2vTt1w43FPv1mn0zXd7ectuuiXKOaW9bMVnlfc4bXqsfUMgM3Dw==","signatures":[{"sig":"MEYCIQDlCTl7sUm/qGjuHKQCQfetsg5h7DWLWTnt/KUIu7m4UwIhAIYOoHM3MC1flwA1qsf+zSynxLdhgdgkWRKXAe+FvIqf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAiDCRA9TVsSAnZWagAAU/wP/j7x0Ospa0Y5x7C5EPdP\nz1fsrASJs1Nyc5ID6SfHJC5M0FaPc1CvKFfGUfdvGgzAREvKryPqCHlPqVlE\nYZXx7NYROTCzlz+omWePet3JyWx891t+8D2EfyuOxq2FkHK1/GswY4W8GnH0\nBmf100AHYaaXGjtdRdDETlLRPiHiZkaj0P5rnsgod1N6BNVjJi+27wO/qHxn\naGXD3GpONEBvL1uLMq+0jeVhojBaf7/xe0+JG23ved1t6mRxDwV71PDSWPiw\nxx6IiuwA1g+R3BnmfZ+iSRFii9TwIN2LIAxrbUAMJ9eqYXU3DpOwSDc8oeSP\nPAW130nAqlUOiBAI9GcyK/nPEMDW/EZ4N0PNFE0x6SkwS2xtgPuInj+RhzaS\nvr2+o622gC8vRAcJq4AjhP2EOuxRataevqZkgfdHt22HI0Xq8AB6uqQ8PHZq\nHs7K+dFuvWgGNxKQe06xSKz7s6VWmphhITPUFJwS0SLtvur2EmKZ1VS+cXkP\n0HxFNO67cnkd28uH9ft6xDWgnLYvQMvfXdrSc9EZlxwBjS6Oh4Lt4BFcPzFQ\nDA2g1Q3WVfnVZ3djwUPWBZBmxKD98zPsNx4CqcbESjlE+x34haI/9yOPu4ml\nYBksrWGu0p/2v0Hkn8BqhjLuwclkSZ+YDRcYHkmjcMBqC3XV/AioVsRu3diK\nCcqI\r\n=AIGP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2139200b3.0","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/density":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/elevation":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.2139200b3.0_1589381250661_0.6020373426934924","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/switch","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a89c34ecc69cd18b4b5beea400dbbe6c52a4fb32","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.744d751a0.0.tgz","fileCount":36,"integrity":"sha512-gKKWcSQwmJWmvhuCv2JFgyAugFltydfaeMjYczEmNjB/UEVF4QvPq/BFSP9XHchrd5f9LD1Zz5gVVAJGUxdV2w==","signatures":[{"sig":"MEQCIFJvDoqTI204gedtvOONt2XlkLOVl3kZHoq/FTp4WKNCAiBm7UOLXmLXA+ukgwEwripSQ+fMKfl5IfAqVIlNk4uqqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxQCRA9TVsSAnZWagAAiwcP/AnTCzJN4O/cpurLCYka\nymCHWPuTyTtF/kQ4NDLuknmk+C97c5W6xgPihMHfaiSmUCzEhZfmO2SkiEnY\nlQJkZ0+GbTcwdkoWYsWQ2alsPGWRfzqnSrS+nvSVFvQ0evOrdn4fMx8cIIdh\nC7jIBB/BWdFe6dZFl3fsZdBZ84PT+/VHSGUYCnStSdC6sxYqKdsdItx5xu0D\nu6h9ZASEe0Arq4CC/ahd/AcTndMklHqv9ELrh7S8q/5EZ2HOVAuoQdQ9LHZg\nM7xAMCi3HLBMNX2nznYNM4CyNzTuAXYbuvdpYZ+i6tfFxDmLgo4X3ViMjHrd\nIQ9sM+OPd0PCkeZNQZRwH7w9U2WZu6OvWnRFxRniYD2lM15RYte+E0YMPWM9\nh5e1XzmA9AOs2nmVkk8LuYiZvfhMqzNUjzMptf/Z11qXopGxxkIdO5kEjNUh\norLyPJshPVW/EYcoMt4d5o/aA5uj7odhieC0BJ+iKuvRme1C+6k9xNQRP+VI\nNLQXfDUWo9FqmZNw4LeX/t8WT9l8atQMONXifCJSX3wG9qtDkTf1xJj+hK9J\nX7mEKCI5l/no+XB8EtalcrIFFumiKcs+h4RrD64cnjXOdKHTw5sok0WfO11B\n8hNyt0l51mAGtYTnB+Xo5gHyU6mTJGAk/nAeFFmgxe13DXtEEXcovoipDBNY\nOalE\r\n=OTJZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.744d751a0.0","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/density":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/elevation":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.744d751a0.0_1589431376549_0.2984427570842423","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/switch","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06b47305636d58038dfe6403bc6d3699b1da5616","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.ad0c0c103.0.tgz","fileCount":36,"integrity":"sha512-aruzDpOHortOYWVhoo/fAwnix+ZrI/1w/wJF+qQI9AG2s5SKyBfQobHhkvkk8zEL3SDNFgioEr5lDZfmyHILJA==","signatures":[{"sig":"MEQCIAPdArF6b3U7t5PF4MlIXf3OEFwQMIko2+Mrqcos916EAiAtfjru6KP3GZ7HjnqX18ehUBsd9SVNzQ2gJP+IjrU3qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVr7CRA9TVsSAnZWagAAy08P/ihrrjNFD0+TB7wFV74+\nSLQT7pNt7pesfEn+YHO1+gcJ7z0wpslYWjC8bbmbwEGi8sS53240YEZrISwi\n6QyejeN4fE/49CM9uDsEg3KsQEMJVXvgksTsMYCdb4qKgMZRhAz9Pm2Ii7ES\nFC5bP8dnWaRcpZzcRDscsElixe/mEGzJP5VF7N+iUPtj6ziDyWhOMegEOEAH\nupnyEJ7DsxbsMs8Bbe/nW1YpqiVmKxeYqg92QzwpBbq4uJYDzOjNm0FbkD+c\nwCmbftvFTm+tQqb6SGpoVK54IPFfjzITnbFbsiOHgOCCJnN8Z2u4otOeu3bF\n41nj+RcarczdfOMVjCQW9NyME0j6POE2MpF+ShKdshExfP8t2rgJcpfgzKsc\nMKCty7gZKZc1Lffq+4TdLa0+K4dgajMDeQWaJuU/HR9T927AugVzTVOB4EFe\nneS3K3jeU1Y040AVNJlIjgRZOwNGfQtcRFZLhYK0DdXHMdoXyjsu12OeaSHT\naoNFqSsdSpIQw0MEwqtVGn8Ga16fMcSJWTBiUxWnBXpYn1wn0HLkhEf7b8JN\n3iFPrL1gI059rHS8KGfhrykXhUArcVW0vGZoDsbrtw2kPlmeY+bgto2ZDlBm\n4IB4cr1PD3buKMCGl/okPrcYvoxhlzRBKkmj1/3E/x5bsNOqmFREgDf6uKyK\nTTPH\r\n=F1JU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ad0c0c103.0","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/density":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/elevation":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.ad0c0c103.0_1589467899028_0.16207143052216177","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/switch","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9e82cf56381ebaf93d9a8323fe65253e1192bcb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":36,"integrity":"sha512-Xex+uq1PMqZtGwwhPZhgzbTYpwJYnuuxboYAkzrlsjrOsrImCol3HaC4INDkzZl60Z+D+FsVkDwNAgkfRKfYnw==","signatures":[{"sig":"MEYCIQDEhjA3egz8tuuRm35+VJkeV9DV0v0uwlg8gfaYi5+FBQIhAJ0ZNm/LwkdLFP5rqVsFvGi2L3rQFzDBEQVbaFM1YxNr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsutCRA9TVsSAnZWagAA+PcQAIOtz6ci/u0iCm9HMLkN\n6pfb4448QJ5oNsxgeGmRkkoUJ7xz98bRADIdhBZV6YzpVmTpYiwrUhmIMZAL\nCpDolgG/vBty78dowDIRqenUWp0JMUrYaK0hwvHJh+o7FlVG3oMxVDj1BW16\n440G+Ig3en740MXQcIsJ40pfcfzcoBDcsN2cJ75X/O254i56sHr6ryXODRPu\nst2g6fgn16561XNiUryr8jQVGd2zofjjgCbKax/9nRHsAdBrITFBQXqeavUo\n0IX/d1hzc/EYNs18tDYlwsxmIFSRlLeGd5zhLoBQeiaYz1jYykvvq9evYj7N\nLNAJ3OHeCuBFrCA0UN7Hh+73vSTDSLV9xcjchGm9Qqio8GugwKC2c0ng2xZF\n3lLyZ9PrM9HN7thArwdQz+CWV/sBoLSwCxPEJiVtCCxma08WICeeiyMviQq7\nq/0juNM7g5GXOUyQGlcLs02bjXrbfRU+kiQCw0mEROmrtSHOT/FIRlLw0he6\n3WZt0wUYjHalTdxsClaK+68ziqCfX8qjgglNfKm3Cl7QME7oja38nCfLgzEO\nJ5s1ZDAtcsZXo4maz4lMfGOgofkW4uo1twH0m5rgCeW5kPW4ZdqofkRIAZAC\n47j57NaBvp62KkzvtY4F6JlU2DmkpeptgmBeMVFGjtsa/Lrp4Pqrvy5vxV8P\nYG+Q\r\n=lOtP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.fd8f8f2b7.0","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/density":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/elevation":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.fd8f8f2b7.0_1589824429016_0.7910595250108723","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/switch","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"977b0547b8425e80a40cadb57bb33a9d3e4b130a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.730920fbb.0.tgz","fileCount":36,"integrity":"sha512-2J0BVewO9+OQo2t/csT1txdUGdekSDx8BcbVU+Jk7clbFuox5E9uBvJ5BO5dMszY/BAmx3YPVoHTXZHA9tedwg==","signatures":[{"sig":"MEUCIGGYevfZWxMwJRigLtXI2lMbPDMIZ6B1+qVFb14RRzqXAiEArP1qW2ApiNQOw/p7LjFvR6Vd1gS+cv1MMpH3kK+eSdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWPCRA9TVsSAnZWagAANpIP/iGcCdTJgnEoMwY2ZI84\nh52i8H4dsFRWv1InMjwwusr+AWqCJVJxCRAKmaQIr1Xe5+mHAYGaeowf3OnY\nFntIzFhfvKyNWisrZz7N433lYSxoARxOyGiWH1hUTkMBaLljqolCxv/Sy0iI\n8KKPzaKpXlqk+NNGCaq636LevECMpQ8/ovFywCam3KcV/i8GFBfdyF4Gb9je\nUKydrg1XrhcbUSSiApTkVdFCXEu1qsbpffjDROiTGFIkzWjVJnylT5RtXffB\nAjZbq9eK06yC37aY14GpeoTHdEZx1+AkEYc7nFL74S86R2Ywpppb6Wwt6rss\nyQMWoqOKHw9dEk8Q3ZkPcSEOppohpJDIyiIDYPURwxJZ4u6Rcm0pBhjKTmMl\nGTDRP4voRiqbKGLYHLp1AD1oLfYWZpXJ0cWH8XwarGS8mym6zwy1emaJIphV\nP+gPSK7c/TbclipYmpC2UQSxXIn10QW1e3oxI71SBl09c0ijDnapTlgbsTHI\nYzFdEQGn16sydedNg0Pg4c2diEPJHyeZfT0OR6RY23vO8aEWIuY4oIuOiifB\niftlrbyijZCMWPcIiWfMSJw7Vn0OhvzRhBnL/OUafpfOEwGkoZZfhBK5Wtpu\nd7/E5tRkFHaATLXBhoemaTRRYJ6blsygT4XSGFJ9n3QVv67osWb1Z0NYFTV0\na3HL\r\n=oNuH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.730920fbb.0","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/density":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/elevation":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.730920fbb.0_1589831055323_0.10782656559046333","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/switch","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc09da61ea1aa68d26b1aebba78ecf82a0000516","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.bcdad99bb.0.tgz","fileCount":36,"integrity":"sha512-Ik3LtnxUkApss8qBU22BNTpu76z0/K7ohdyhs+L+gIdeJBzpqW/JjNOOx+tdWwOlgO72CAoXxXrKJDzRaVL+jA==","signatures":[{"sig":"MEYCIQDLaMvpUZdRPn04xDj6cLbi/4BqvasgA+7omYkxiHgblgIhAJ3GXipoCa3gwrRN7HdgFr5G3VsRDi796dzYOfclA4Y/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/zCRA9TVsSAnZWagAAbjgP/3FMyuX6KumUCXR8m7LJ\npNE+8bjiAW1KeSs5V6BwqNGgcW5Z6Ju2v8YeG0yvfonY6wtcg1rEeyBXIoI4\nGu8re95PkX1rMhQGsy72f6ELSrSODpdn1ZInxomYm/oXfe1qYsZNM23Iat5L\nD08wCcDB4BRJ4a+G1OWNBrLfdQWNoJlhLh43jLMecfhfhJt5k34TlMuLRqYa\nzDHMZIWBHyFCbGrg6m6MPihUJWikasNk4G+TxhyUugju+qxECQcvLZ6MNVEP\n6hkRG2BmhUTkidNBobe/VM52TQPaczVyKXBEO3he85JY8zuzYcNBPGq1zQq6\nTe3wYbR8I3TGDxOVM5Pv3ZcHCzkd2k3GTRTVnAbPt5K17ZM2fGDHSk/5MwaW\n/XZS5hwD3gElwD7EGhKZkaVpWUj7pUvXtUWz25Do3cNc7H2Tx04YA7PDOh/0\nrED8wuxJ2/i8EdM4xQjJwuQ7QEpoCgrjINAO6OTs2JTR/tLRqp9pxiDfh45f\necGznEgGPN6cC9xUUJAkIeyrWo6DFTnStLdru13rOQasEWX3+iPjSrLfugJc\nvp8+np9aYLMFLsVvqElPYYuxINlSkhUO800YQPoo/iyVsx//qTed8s8h6D79\nXElgidJdQMW9dyefIVuIsBKwFCLKftFLrk78qkuU+5g2VrOCmoAAZOwO79yg\nlLHL\r\n=3Rpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bcdad99bb.0","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/density":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/elevation":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.bcdad99bb.0_1589858291359_0.17663226653860464","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/switch","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d870f50cf5c08869edf4ae85272755e0feae0ce2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.4497b86ed.0.tgz","fileCount":36,"integrity":"sha512-97pIZxglthpExAhxkY2+Ex5wS42ZwF/GmwG/ssrswQ4SAnbVSvwHbiKHd4CWGnH8huuLf3wSdx4LtwpkSiltfQ==","signatures":[{"sig":"MEUCIQDixUNwpBICvt55KXnm2xj7/fMhJWBzoyzapL3oyKYL6wIgVVMk9kZ5dlR0IypSwFVKwKStN64KxX6U/EpOUl/YJPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1egCRA9TVsSAnZWagAAgZYQAIZQyxm571zgBkq/hyVe\nk6nrvjv9eeEko1uvjHaCdwxC4TJySv/qtrr2fIjFFQlI7NUYzAOIkvpVKGLf\nmD5Cx44QIB93YhOSS9FPyav4mBowF/2U7A9DL+E+mHtdFbBHQl3zm6IYiyfQ\n9wN39a4MnV8XzFYbLShKxRsjlX5NTlrAyoeBj43S2bcE9eofvz8jnu0RMl8Y\nBi40dHTbTVFN1/vw8QCcqtdglo3NOJL8T/iexUr1n7iucCbyKl72gHaDn23K\n/a15ZjKcWrxhlex2K5Tr5lwjjxtUYYsFlUJLYo3URyatka0naSsTPtwQYPgc\njfd/CWoyZddLqmXbSATDcsodR/GVxUIVxkbGbMTcDdgjcF+OZIKnee6rCrN+\n2MwcujiqsJzGoutIKddaA42x5HNMoy5LuQmiEfFhHi20eZtkwg82PoiOn7+i\nEIvs6zwtsA3cgK4Td1kd5evE7g02hCiG/lXDgEaV9DrdMDmEwukttssiYWu0\nPDSiH6zSlLSjAKmfnRz3Pwg4ajL2fH2aJU1nn2xPjqJvx4Mn+fcUTcKs5Lgd\nXGqviGdMm3goYRdE1UEuxIm/lczq6E6Ecu7t54ejH5gwbVkiu5epqFS7Et5L\nUp94qcwaFeUF7txDFdev3ndi2d9+p88Ci0eCAkMr6YCIcGh/Z5OzMSlsNVy9\nlr4R\r\n=hQIB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4497b86ed.0","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/density":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/elevation":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.4497b86ed.0_1589860256159_0.9522276413640132","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/switch","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68d529c25ac02699a38776edd6e7e6a320da9a16","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.2e60575da.0.tgz","fileCount":36,"integrity":"sha512-Nz2cnCavmE7lxfM0i3DXxnrlYJCnm0BCTxLU5UgemVzLOIkmaiLrODJ+8M8oeY20BhhW3l26quNpPySssQmtLg==","signatures":[{"sig":"MEUCICA7CIENkDNUgEXw/rX3tU3RK3+TMiNell/ywquuWKm/AiEAo26bRNrm2TOEvsoiZ7Hqzwgw+mEPKJzr8ifmszYTCno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexAS6CRA9TVsSAnZWagAAZaYQAJfbPkYQeIC0U+vufuPb\nhqwV/PO/sKQZ2h4Vk065uNq3Pw9UPjgXUOlh0T0aC3SABkdXZ6WkbFUY7IEi\ns8WoG8qS/lFntcadg+fq+w4k6TPOAStmB8WoSY0zRq4UYgEqcx7D137tBJnA\nO42TFdxqzfQfLhXkgnYYBgbm0FyyRXf74KlCO7dzAs7mbaUnyMPB3rgx8QiN\ndhSIKFLbOOoIUm5ORqZ/jSAlModB/lj3BAIIRJvOC0AdeZ8r0+guElL0n0dx\nsX+Z5fya30pvhmBv1QU3oq5vwP5jboyr4hT9w5JOsNL1DL465apz2WOU7yD1\novEXBLemaH5mkMm3sr8Hc6d3q8Lkeed6u3AYkac14nafc/or25XnJeISiX0I\n7JEilet3S/MlYHzEQ1INFKkIXyWT8uBcsZIwto+t/aGnanmGV3cTu/xzfXs/\naS/lBMaPdSEnfwAULywXTVJe5V0KWIiqj1aA7OrrqOgsTrKrn1KN8eEtCxMd\nIWguK54bAyWJhwx9ejJh2fBk1Q1zMeHKpKOrjYLf++dW6RB+b87POFs98/P1\nzzt5558RquS1m7CrL1fT+OlPhcmIeJRZn9E/0bD6BvMymLqfYpGoeYyWh6JN\nK4BtCkFOBqt8J2acPGSauiYga7l6M0askRhpenP8SzvIc33phJbPxdpOsmoN\nNNHe\r\n=4vab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e60575da.0","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/density":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/elevation":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.2e60575da.0_1589904570069_0.7583996342469972","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/switch","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d89d7f8e915a49b6f314de65d0237564b433c0f5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.e3eacefcc.0.tgz","fileCount":36,"integrity":"sha512-V7F8dBEKQvjd8N1BttdFupFFKPqwN6SsyrKK5ZRwf97+IbnoHxs34AfSeg/5VUEePA1ADzVGqgOtYM45/TSFAw==","signatures":[{"sig":"MEUCIHY4nGNdCw3kvq009G6ZsuN62EGIDX6R5BKmrGDr8edoAiEAnR+XQLUmzzn8i/lAYwn6/4t+bYhubdCrYzgbobfPW6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmNCRA9TVsSAnZWagAAetsP/1CKagY+oN+MqmfAHe0L\njTZono3H/4MSXJqMLs8NHIbzm2k7/1sNx4q5P2P2vH4St9nhnfFOeuTSke12\nPcJRaN2EBVUvw8AIhIuigd52lmwmX1cAAvWGbNYQru8z/Gj4krBg9FIXn5fb\n8PAJMbHFLgEYEsCsN0CXzxozM1lFUsSe22SU15WnL7fFHRWtmydKGPDNM/Hy\nH6jBGcbHRNKfz+bhYEEhonI45NkjqkKoHH/fgi1Xllno4qfpuQ/ACoo8WInJ\nnSBX+pcKCWOoJzf4eNPzT5GjwoGunYQEDD/IVAVMDXLfx/aCTLWyz0Z20K+X\nVnaeiEo3ZorDqA8zypLgRfsa8cOa//p0p3lyWqFdhsOq0S1eFRKA2+BZOlKA\nFv7vRTPyliVw0FGME4a2h2XzUgaRANpd83rn3Em65mkTMIAdjMK+4peaLVSB\nJRJt9cBZ2uTK2Zy4mtptR0COjNOBf5Bib7pb02OXKfs0OkKEfEmwx3YVJBcg\nV53YM93Om/JqcEeUIy7mV0l/OgVtQRN42+BYw6sS6rNHypdvKiaA2hp7Rn9J\n9DBAWh7P7lzTHRyGuw5EUERJ3Ytu0a0o2p4kJDPjUTIYLcn2KQKWX6tw+mC7\neIv+amJmqxrBC0A8q8lTinwyrCL5G36LqblgR2OqeVCYLUWWv2Fy/O5yyOXE\nZnXn\r\n=G3oA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e3eacefcc.0","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/density":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/elevation":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.e3eacefcc.0_1589909901089_0.3300527167003908","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/switch","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6830a25217f728a9624df76bd08826f3510754a2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.b065a4d2b.0.tgz","fileCount":36,"integrity":"sha512-BvQeE9s5KQNWv3LXB1ZUjgd10mBifCG7raCDV0TNYxvQTA1DPFKZeofkNheGz7ng+CcRrxYotmtqbMmQyO0rXg==","signatures":[{"sig":"MEQCIHNBeO7qWgPnxHZUWsd6J308wlaZviXSbfG+mndwOkoGAiBnP9wRbkCC422JpsVKzvuCsq/V4C4oYhOBXMCFYI2aYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUCCCRA9TVsSAnZWagAAepwP/06MpxkJ7HfK9NXxZCYC\nQ9DY8rxk/u3dvHVPynJeqGzcA8hrPsZSZetCN1Fl443d1UaNuTkZ4eykkiJb\nfrAL3BPyavjXmtU9dCzbW2wnIgb8hv1Lcv0CKinSDC37tRi30zM1sKRe6X2O\nRf2eVunThebiq9dTFtqWDbbHBjNwyuk8MOUwWMZ617+00efurROvolIAElQk\nnW6euivOYHG5EpGx1PY7glfAaNAdNt/BFWD1Y7fPuj1aDI9SxfavTTzX8iR2\nG1CVThhglbDWDzZxha6eQ1pjUznD6VaDe4FgykT7E159GTJj9wb8s5Cb6e6N\neeEoV9Hws3xvj/WSb05YmsX589HUZO1P1hV7KHIdJih51Pp7mUAlWs5lz3uM\nLK/YyxykMMF5EFVPQtKBLsi+ngGI7XNvkJCAh7azrQW5MP90iGMiL4aQ9c2G\nRWpFmWwyRsCMpvUvHx/DubMMMSanylvPnF7U/84IaO0hPe28Gxam+A09TpM/\n7vlR/CXz7hEbNcevJlssUojmv+dmAzBUTeDHbW7zG7eksVBTq0tllLdULLFz\nLwIV/lRNSQ4h7jQnMpC5fpZRf0taPb2EWcfVIhJJ1YN3Co8Vqr/wu8Tk8X+6\n8WU5fI3Z7T3/EeaBYmDNdW9CKgRJZ2k+a4WeIv9TA4Q2wIe5GJp+Uw/GPMv2\nYoKn\r\n=Xcsd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b065a4d2b.0","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/density":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/elevation":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.b065a4d2b.0_1589985409888_0.28604570963142484","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/switch","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce31b54b671fa85cadf67176218bae740e4a57c7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.4ebce8d78.0.tgz","fileCount":36,"integrity":"sha512-C74CqNRZnVpkdH2zztfGikaT8uY0HrEfhZxIaKgrC3GuGxZDgZVOEseL25BlHI4uk6zvTfwS1f4gGYRzthMzpg==","signatures":[{"sig":"MEQCIAYYM2Ls8f4lIPsyJ/B9fYtOWpOijcMvEKjMPGdS2Gv0AiAOrDcp3OpcXylwtDGJ7dGfUSKBBW4qIe329hmpl4kyzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgiCRA9TVsSAnZWagAAF3kP/3iozOyk6rmCLuiPt6z4\nAKQlt5636UlzZHbXcEX8AYV6+HsBTGOII2nKv2sfiPMYHIIgRMUYdWJd5K0h\nSA8qh+uqP10Un+Yt1DyyzlnUXFIp1xqw65i1v7afR7DoTe6OrzzNjhP9J3c5\nk/Xp1dq6lrmYH7PtmHvMS8S9i6vGtYe8gHBYHQcjaZ8ZzKHLsBvLVqfY7NS1\nUrGCDwgacg6HVC/0JLQFrRVwIqZ8oxG/XY8BUvRjJYdX/J2qnju+J+UhQVlO\nSguukamxLUV6dGMWW6H/1qKsuRefsOThxFMJObgKiXNdmrgdfSdLjCaGWGbk\nNdJNoCArT8qtpUI0CAXmsABgfSE7qj3L7WK5enFCRO2I26gmoVAO98oN0TWc\nDJdBSp6yE3Y1e9H8S7WGRLzn2kXHjSWEdZuqqFAmaoF3MFJFLyu7vp2xnJJu\n3akq44oj2CXP+si0Q+dQo2A87wmCmueC6LcrTgeDfLBmhUxb+v3dXtJLqJFJ\nrwunQp2w2DbM+MecQwl9wGeBBT33v/k6ZL5a9L27jOki4J33iHQAOcCZrsBl\ni7S05J4D50pskZp6eiL2184/ZH1fqlR/dkUi417Pj/UqyBQykkSHiH1c84P+\nJjH0iW+9FdQm3b6Ah1VI+wi7X4Mn0mOpzOqG4RvmnwM79VlQnSvalYq9bUf5\nW1q2\r\n=FGLK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ebce8d78.0","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/density":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/elevation":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.4ebce8d78.0_1590007841702_0.1208895246433852","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/switch","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d07ca577fdb5d34076bb2d1421404403c5cffc0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.b0fdca492.0.tgz","fileCount":36,"integrity":"sha512-UOvlkUNS6zbjWljQwnw9YEc8mjx/Nm7KAYDNfNa/Cg8q36ICMXENLh0/rOZqw2K6EotQ3dByNXiFMeAT4qR/Ug==","signatures":[{"sig":"MEYCIQCerQhpmYS2UFUXjOdSuwcRYNsL4TZfn7vpWppu0PxrfQIhAP6EWvNAV8E0vklwySrFYCTZ9AmS5J/SaOvvaKLrwl1H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcjCRA9TVsSAnZWagAAv+wP/jAT5zSqBPJ77w7yygar\ntNwv86Fwr29KAfhFyDDjibZkvuoAr42+hvgGZGeH38A/MsdFGEQBDrEol8uk\np1KWOeGqeH0DhJ1MkqbUG9VoooiBkbcEYcZexSgF6G2AdwzaYKOdwQVvDYKJ\nCjR14jpndJUupn6oMmeMQqEfmvNr0FrD8c1bZdTowWklyhZGyrVjGOfC46tk\nNrhkeGSjTXvGgde9Zzvsa6k57P+OknRCE44Kh6WOSerAJn8DCNej7HgsL3u/\n6fVzdAfnIeoZpfYhATHQjUyDuksnTb238xhb0BrTMdydtuAX320Sunhcn3yj\n7MknlxobizjvpgZRntHAr3eeWbcB0LZTn70UYtRjH6FsknNNvvEash22rTqB\nPTLpCHiQH4nPNRAbaXB6iUbN2IHncEwWRMyONft45ruv77Umnn5K3gezjnQZ\nMkuDIU/DyWe55U0EAigtUQvgL6v/npAzIk4qFZ3iSVmIifVlVS8HDHp94zqI\nFLswxUw91/aUepS/rdkGXEQ4lQEeyhBWah+1eHOr9Tc7LU2BtYGB+KxvXgcx\nUIPEBu91fq0FGRRYDEZ1RAnKm8ob8VxIKcsf0GXj50JXrCCOlz4r2rXJq2jW\nUPfBeU7TiRZsuXTyrIwGwwK+c6JOvOR/eeNhmqc/w4ayfCpxGOK0YHx38M/q\n0KoP\r\n=4ym7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0fdca492.0","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/density":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/elevation":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.b0fdca492.0_1590015778853_0.8929699005852603","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/switch","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"561b500e3c0d565e93f3dc35a16a0d1873449a80","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.c67667e8e.0.tgz","fileCount":36,"integrity":"sha512-xcGTEeOU9ZL0e8dxgQqHMqkY8jRA/+cjeBCZx1Dj5I2AVGXlsCitKRSnCvwHUHd359enwh1jagqfVs+J/ltVYA==","signatures":[{"sig":"MEUCIFRzoWbPIoGrekS50rzrIi8VaTGK1dh/fwZWmogBCvzUAiEA0sW32uFAgnSpYSlQgixh2IXchkMLb9IKfrHAN72gHEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxrCRA9TVsSAnZWagAA0XQP/jz1/MeSjhteY1IunMmO\nUIrIZ4Ebccz6axEu1BenprfJg02QNB9iaJb+nJNkyzJLKXDdxLTkFClJc6Kf\nFMt+E1QKG0PSPLln3aRIqJtA5MPr7JiiGI/uj0OKq7bnbuaBQIaVX6wQeZMq\nMmneYiDO2/gDS6SELS8/IsIUKAhCc2yn58x/qP5H9RaklxX486H7GpJC1B6J\nmNEFSUBzs2ICmGZ0tzMo6aOl2clvU+PQgTdiqPQkpgMCzapLl1xzTMKKTKKz\nlBRJXQTQOr505dNu9YhNU8Pl3qo2bTjvOKNEJ9g5Z5Aka2FBq3WwiZdztLcT\nZpflM2adolnyrTI5pwbFR9pWLRQnl2Bu+ToLCcaWueBerLfTcn1ikRvo3W3Z\nrcjWxav2tAIfA6jym10wFG8V+gUv7XmEV63BbKWp9tzWr49C+lQWFVU9kV0j\ntYZpgDGhrBfUvxjSpVG4nIAowMlyU/qCeJgh3o+ALHbZVZY2VnkjUi7b9rsR\nWnuy4gvJ+JLv0Q4QG0QCyJXPRqMoBu+Hh3WnDq7sGa+KPIvXyqXUH2YPTZww\n2Xh4p4G9lRk70xnR4zLOuAnP3+QMa+HSXw5rnzrmwXg4mlmZMDDJzhcxcoU7\n9pYEhxe4WL7LNsR5OHA9DbI0taEyZkqdw10SB26/sX9Rsun3Y3O/ipWLAXST\nelmY\r\n=gXT3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c67667e8e.0","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/density":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/elevation":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.c67667e8e.0_1590070378973_0.8721979939214848","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/switch","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c17830b26c9a2651395e117799963c8c7ba4f484","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.62b5f37db.0.tgz","fileCount":36,"integrity":"sha512-8bg6vnZU6AhTEYdHLJEJIvzxou9mZaYWS7F37jX4e+s+0xPHnbV4zBDzFbO8PoqXIYfdPtUDZyOl45okX9SdzQ==","signatures":[{"sig":"MEUCIAYk+bg1dPGOyN8WIE0doqHF1juxjKdkOnz/oLl+CRMxAiEAowsoa2jy5n0Nq5bPEz0nqWdGe3hct5nCwAdEFlvOLuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8xCRA9TVsSAnZWagAAODUP/13f3Umk+npX7BC1YL7K\nDi0M+VFBTFcGL3zYr1GZ5wePGv5gzrkLCidaMxL6CQKsn06IaDotYKuHp7Sw\nu/rCwdR+HlDuwFA+zryGOSs0R+o7VNHAolE2xyKDOyaS7AFbHtRNx+I+EJg8\niwiPpP8El0l4p9Ft8oXJtoJTb7BIKSBBfR+zqO3+Pdvu5a2VJbG1YoiUdvfF\nA275Yu+9n+SnVxPCokgc0yQm4DC5FKI8D6lxrxTNb0UMwonoWm88j2vkBuV2\nL0IJtu10UeNyOxEBQIjvlwX+XDO1Z99A8q1EaKahAInawhgRYx+IP9shqVyN\nKdVHX7YY5Ek3hpDDlXzOfCxbcISsVjkv6PrwWv+qJpxR8cztjClsdpDpaT9W\nGTsVLmDMQOfGD4WsdZTwmtDp7ycmtsMEKNOomqrl5g3Q7VH+UMBRevPJRXpV\npQ5Wv5hAAnf75zyEDk0Vzy6JwYb0EQnIAJafh32WSeNzYFOktDMql5UlaZVY\na42w6ZNSqfQUarLG+yMIX16gwss5k383s1RRhGpp8IvGlp4vJ10W/72qbjdA\nAI8TJSYYleE5oQQWX2QwTzmy9nfccG5q7hApKR4uMkqBXiTHgei1vfKiiBod\nipfLR/qsWy+DdbHxk6kH9l6U4KjjT/dkr7yN4WNlLZvNPSf9YDlIML5Jl7yF\nFlI5\r\n=nv+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62b5f37db.0","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/density":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/elevation":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.62b5f37db.0_1590079280775_0.6562448152776834","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/switch","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"509f81664b1191404e102d8f8e07499ada3f84ed","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.2e218dbf8.0.tgz","fileCount":36,"integrity":"sha512-yqWEnlNfusu3lsGNjAtk2B3v+ZqJANf9yDKlDzxd9ZmRYCBJSwySTp1CiIvD1HaAgDAZRZXuXs2vdIW3uF7AGQ==","signatures":[{"sig":"MEQCICCB4s4NttzzDc+Cw3qT4ObKJpo5qQ5vSsHfrbM4WXMHAiA66rT+9GOopD9JOEF3phESIrptic81ffAroeKTiDCoSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQYCRA9TVsSAnZWagAAguQP/iivNbuzZnFLuYoAaerp\njmrp+rnBBFIncpFx5aSSymNh1zzsxlYHZRgQxhbjKu+hnXf+oQJBoGdx/qjH\not4CjforE2x1WgM+v/IdwghdNJ5EpBoHUPY9sJQUFadDD7Ovh4znPG7InruR\nkaMwqAX1J92aF4Qx3a/ropTESEsj54spgH/mcwVUeMGsXChaHPW7R6MhzTaG\nyR/2W2o28g/OYMErUsbI+QMGWchgGFOiBTq4QcjjY6yzw0ER+kYDam0sYO3Z\nga/vnVNzDdyWNY+yEsd3rTaC17jDjf7VOCRVzXXS6ATQ54zdRJFc7fItrpcC\n0D4YtghFCt8luoV4/XDywfGOAnfcygX/KAJec0VDvfvngbetL0VOAOVL3y8R\nXVCmi1tCDhdCyGeaYUuacBtCW7yt5/tNw1FcR7FpAiJY2hAPoNaCCDXXpbe1\nEjqaZdX6E2asQwFH3nfABuRcs964SMcbLwm1kGuX7ztlttW/Tkx3GUv6PSwM\n41gbsblXV0LDeIGe8GsHgOmbVFHixtSNL3RDV343rr5VUXCxh84RASQJ8+v5\nGIk0ZMaoyOWzR1K6AAOcUWCb3BJQppotJqfTsmypdnhxfW8hJwRhFl6pJiYT\nF7aHMqRL27YQwrPeUHeOSJecWBCRAKatSzYhx+8GeOy73Xrphf3NYCRvW1ez\nLZX/\r\n=5iLh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e218dbf8.0","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/density":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/elevation":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.2e218dbf8.0_1590080536069_0.0014452176166461772","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/switch","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36764a4a6d832df706815e31e4aa91ce3af39156","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.7fd792bb9.0.tgz","fileCount":36,"integrity":"sha512-GefQMBLWodlF0DYp7Mn5y5fMzJ+YB0kQboiNSNqzrPB5J8D37o8y921IA6l4lneD7E3X08qLEX5o1gmsEXL4/w==","signatures":[{"sig":"MEUCIH92nxRBYgX+srqFiRAp0RyO9gARfMiFT8tlVpwDUg0UAiEAqGknzVSVavmDiPTI/0ylwLGPdw42/TPwBbIpz+aPm54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcfCRA9TVsSAnZWagAAXKkP/i83ebC+aB929p2MNZfz\nVO5ecfiKNNWmYiaK7XeWqP2kLafzAg5kl8w+l0tC0f7jfbSxbrFZWKphxEiB\n+Wkqw9sWQo/zr471yMnxJw5Uei4wwNS0+rUlv3FhPt3KSLhbPqvCWFT0RuN5\nWZwHEmPKx74CgqS88vUmxnh537LhPb1hC+DWZs3DbS9Uw8X49Hqu6ylEczSX\n5Za9DA9ZspOySIYhZD76Ar/0QkXszJcYSen9PH9R6qWDm7yt/BzsoP/vPsqT\nHKnp+gG/xfVgMsS/chiXGuZqKZ0QSpL0yE7ddb+mtRDmzuuo+VLeyEFg71zU\niajlt7Ssv/wxmXPjpjYE7/9WD4HFQs1hxKlRKMsw1aFQKB/vmoYtslqBKDOU\nWkuEbs4Ju/ek5kP13p7vc0S4Yb+sBRI/f2oqJdEGanwoH8UJfcLz/ccVnE5C\niu90ixuXm5zm5fgvsjx7m0UvRd7BBiNo7Ltv3AaYQgKYJvYR/rQg6HRx9PIT\nied4B4D4u5OuWtWgQPvCaJJ5CcLqZFsVZ+r5MKEuF1Nvz08sM4Z9MTcgpYb0\naCNGCwVeE6+EJaMSPFZ7qUMNTAaQnarjLDl7Wjc5r+ZwK5we2ESsq9ePHdwP\n2ztN9t3JLFXdOcBNwOgperf8LKah6Lm73m6oK5EnMd04vIYPCjj+uxHpJ6jg\nrDlR\r\n=IRN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7fd792bb9.0","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/density":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/elevation":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.7fd792bb9.0_1590081310334_0.6930078663735717","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/switch","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e6b5f598637bfa8136ca837643b56fa96e32b39","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.a66493cd8.0.tgz","fileCount":36,"integrity":"sha512-hYTyvqhkQhMKGaNaqz0Xp5JVKjTwmEwteXdBYLHCjaVdFwMrOy3TSWVOYDHEvBPshnXuHHoPAeQRsviv1W+psA==","signatures":[{"sig":"MEUCIQDmQtfOwjUE9R1tGqF0zeAdUZw/RBFCIrFfdWp7ySTKgwIgAZxLtxYJJP01uKfXbf+7Jx89lUdCZc06eVWzijAfBMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfdCRA9TVsSAnZWagAAFecQAKE5iED76nUdR1z0+LqN\nIq3nEdc/CCUuugZEQ0V0pX4ZNYe7T6eskoCR0sGP1lbR0hyCjzm1TzjaKBt0\nW5VbTvvMlwF53oOinAqvWJdCv/wS2BrW6rNnz52tWvs/8n2/calHcIVKzfmn\nskAri8ztCi0apEqrKiVBLqWPf0PjkVYn/bS8OnboJ7qfzREfvJ7I7/7J6sKV\naeq8OuZb/5X5wvstWsXxLSsoEP6UUJABYp8vPilO0aT2Ei44aWgkM4/uSgO/\n8I2NP1S9zUG9IA5PF/lrHfD+OMtpKwFsjEdSjvCq5BNSSnmQ1OHb229nQaPl\nUFOYt04Ip+kgNglZD7Z5t7t+KBmfTYSDLv/Qytnetiq2DxacZnbqsIHWfavE\nB5tsnBb4h7u1CH0x4AT91rC5/KMSlylNHVkIL2v2BWm7ii3FRbAgyf1anhs+\ntqF4jIg50PJ7e+9GCn0nsjgmHOurHoWiiL1y7Jr7FeZh6noDtRcdiSqRQtC3\nUkl6cI/ckciVYHMZRqV2aXt3k8x7ptZNuAIrGEN9SFzcvoMvvx3KAs03pTJY\nV/0ciQkRNieXlgG107+TNwdEU1JNe3NFRc1HlmOXDW1UUChvjSnCRL1cGLUN\nLz8JV5t6xzRZmTU+QDComdI1m6z8Epv+tQQ2FA4ZTgCRpigUDGRxzb2h+Q9U\n0gev\r\n=0fQx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a66493cd8.0","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/density":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/elevation":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.a66493cd8.0_1590081500999_0.6501191382214961","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/switch","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76a2c988bb1f7b7785b121d83519fc5ab9809b37","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.da05f66e1.0.tgz","fileCount":36,"integrity":"sha512-dMxivgrIfCHxZwbnS/4gVOKINGMSZm4cpCI9Pbqj7YL6quKo6fij4gaLB0SbbOjwKMz8fhZJt3cvtMqxT+j0FQ==","signatures":[{"sig":"MEUCIFQURxRjnKRffD5Y3SoRE+kvpjTay3SpXDJWjz7ELC1VAiEA1dsw1a8yrNBWlOxlmRDixnvpzfKCJ6pT3Iu1h1QZYwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhkCRA9TVsSAnZWagAAZSwP+gPRluLW5fKrjP2scdL8\nP80pIczEJS2NbL7WOEs0becX5ts7F13RiKYbqrW679/VV4LE7qmIVmdwb17x\ni7u0cFyPR0mQt65hbb76RN0Hk8QELDaOHTf0v1szRU3raE54ssS/b22SJggU\nL/qRDJTIv/OFYY4t98htmYmYrRh4D38UWrX1LhHcsDvW4FT1VIB2n8/J0q2p\nBCCXkYm0is6vR5HaUPkJtIngrkJfIY+rJaQ3/r4KL0ZncboTabgnwTYTCASc\ny0TCTOy359t3VOq0WpKztWMhEVQ2MrqDl9j8xv47m+JpbI0uE07hnddd6tYe\nKyRoewphl/7aby20CWImHR4N7rdFRh1wGX0uJrdT5pI7Gg/978AMKwgE7aea\nG351Q3CDdb6n0uC84UxMrI5SFL6IrWp7m7kRgdOwgUj6m3L8JM6IrU/mtWur\nocCwtBJv2WdLUsKPgFefpS7hG+MIK+sFJyz2wBVPchR5uH/oliPInnYYt3dM\n/AqoootzMalfUQz907ipQhQrhTDX2pEjNKzLlW0De7qNwJdm3YGX1/+6oyml\nZov0YuWWgNetRfzpvsf1GA1TiYRiO6yrsmLUUT6U1YksUmwaSShFQTHzyiQT\nCy+/RIore01GYhlH2P8qhHpWf0c7BdRzorSTglMB792BzB1fKlYlymstQc6g\notLC\r\n=hYMN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.da05f66e1.0","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/density":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/elevation":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.da05f66e1.0_1590081635816_0.48720057753189083","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/switch","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16afe16be85522c80f5ab21f3f76f71b90a6d97c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.740860e78.0.tgz","fileCount":36,"integrity":"sha512-yn0J+OO6vNXvhjntaCS8m73tOuW8WH5KBsPcUBIhRXzI/wRwr5QFxG+A8Qf6i71RtMc5ZK+QneI4GapKXr5pyA==","signatures":[{"sig":"MEYCIQDy/mmUZGB4WF5j+WAjclpOVM9LHuIJ3174dt2cuNSBGgIhAIQESZ4FXsEuwfbpUkiwM56+HOzEV/Ixt3bdrG+mp8a2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnbCRA9TVsSAnZWagAA+l0P/2Qi6bWwzXO6x/UWVx57\nNNbvw29UVEvGdx1TdTdQnvFNSyED46nKwpu3kO9pyvSYIp3RzmKn01klw0CB\nlnI0JC5sO+P8CH7ULn8KexO8WzRE25oUsR3078PT1EKSIh7w24JF2bLY7yJV\nbn63yFN0J8ZBS42tYVSnne8Yeib6hjaDpG9gtHKMOiU9tcw3z0Vy6CM5TsXQ\nBHZHBYDMkKqH3H9XDstlhrY3+VxXBJlEA7Z71xolshajng6f0wRfHYH5lSBv\nIymKnFHEwpZ61oyHDVm0nmjQN00rFsd07vWiF9Bc36NGthVVoarb/41CcAKn\n2Ye1j+hqVntgn6uOPQyfBbpUz0G2Eya0wk28eQLdly6IfiFnOzm14yR/x3FZ\ncmY2537mtJowkAjTD7jbMFskm/WvEtSKuWP1C7L5daVQXqp51MlQWk7V2dOj\nyXsNCoEtYsJCprWr28MakO0UPFk9xdCFimhNiDPAlF4jcbobknQUiSc/Mesn\ni3QxLL/yKKghaLf21ATkvEzAdIZ7Cubv9Qk3PPP+aqY/TZTsoHR4quKropuj\n6tc9nsv8HwtrvBeNGryXTLlIrWCTJVPh8p4sCDecMq69zrg+WfXu2JJt801F\nXZNeRHuAVAt/6UJWU04Uku8Rqg47GU8V5QfGRcmPtQu1hLH78Mdu52V1GtwM\nnP7X\r\n=hmE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.740860e78.0","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/density":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/elevation":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.740860e78.0_1590082010917_0.7889842666347455","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/switch","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e16f7e4fa5a8b0e82109ac198c55a50c77cfec1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.5cea2610f.0.tgz","fileCount":36,"integrity":"sha512-SFQ8tDVhMf2jdvVf2SLP4vaNt0DxKfBVoJ0yWe3yiL70XPiVIsuPvs12RJuUT0DJU5xg+2Qr1V+ODypHetn+eg==","signatures":[{"sig":"MEUCIHO+adwWYZnKpo5zXoK051rBoUK24rcUh6lDshj+inu6AiEArx1nU55hkVEIcjrkknmV0AxQYHT+kU+2Lgf/nxCOorE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpUCRA9TVsSAnZWagAAwMUP/1cALUkR1bQdnIc9ZdJ+\n8VL+S9LldOz9e4n8obYnw+wv+YKdkxAkBm8VM3JqM2SiMmUJ1OU8EBgkOI/M\nXXZ/PTxXu7yFsyW/pFIKooE8It/Kd1ZQ0YptJgnkc8Xb14jkrdycdP6sAbAq\n+KQmsi2zVKdwkxVqggrJp/E1KJ8Ox5afqokl9Lh556VYawTajylefWGDbKL7\nKRuKJYafwFrnfk6/Yd0o871xOHjB3Qik9tV6BIzaPOysE/cn/ROkJo7A5wMs\nUJ8x7kgkSaIgCVPswlbE8HzXEtqIQRpttWpiJRedVyPMDU9B7ikYQXT9nwUS\nQ6qHkfgaaJojcFebWYw2VUkrnAu0MkSo1szFHEFwK5gWj5UHGy4fS3Ame1Nr\nM9bxBkZYCDNzHcRFDNaYuU9rQVvdY1IubhAEqojJj3lUSxt5/G9oF9W0yadI\nOlvS27fi135JJYGSa4SN4vnkIwS/y7KGbq2PjAHQbvds/EImEvLo11wT1EKC\nkIIezPNWCEr8NQtOerDezLIMqhtqw/HB7Cyt6Bb3hJ/X4YxwGuD255qj8ccL\nt4qCGgC64A5LuZdBK1XyeennX1SvaCLoq5lLZXhcwZWuFEQFjuFFDjMuDEc4\n30cjU7DaO5w16zV/5sMbOMbMZJvRJOsrBnazrZkMafXaEM4n1xPN12aVA9oR\ndp4x\r\n=FQLe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5cea2610f.0","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/density":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/elevation":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.5cea2610f.0_1590082131845_0.4402701392894117","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/switch","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0f4b5f5b44f58ffaea34d27ff82f744ad1f2bbc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.cf7747ef7.0.tgz","fileCount":36,"integrity":"sha512-QcT88LAelpmA5jsR5y/VrwdK9nFxk5K5xo0tizIPFqERYs0a9gwhH7+ml+UdrB+hE6BMtHQBHM3+VdiUuLyatQ==","signatures":[{"sig":"MEUCICf8uzupFqARgwzZghgR4EhJ86h6YkGg6wdYSS14lUEQAiEA1dhOYU0fLeZVriOH3iyUv3C25+XmQVDG7JU3r6ItRk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpsCRA9TVsSAnZWagAAhH4P/jOEAXhkZBJDpzTTRga3\no2LjznS7SM2b/8hyMi1zpI3UGFEcFScb1/tN40Ic0ORdK2GWg4J8iWaVlRIu\npOyPDk7NdwAKpI92A9NfhuYrK14bz850aurcW41I2+AWrEn/684ap+EwYbFm\n0dBEZcbDL8zdRNPxGwacGXeA3v1ryoHW+Yb+GIhQXsTKwcjFJrDoPS914x9p\n1M3jrG85XOtIfmwddpqdvYxDBNi0wlvjDkWIGcgff3NSpfUIC9wg1pwGBAKP\nc+q3P+YPQ0kbsvmQ7Q+MHAYMwcevcA0s9XpmdjMU5J8MLx44GT0vcNIkGtaD\nG3keDo5nxC2fCmiCQ4+oB/t7I+L5psuj2Ms17InAGMxTR4xsVUipuHQGv6vL\nL62wn871NjPL8eGbxcU5aTpKx48UwjyaeOVXn7DlE4qJLKsB0Ts5arb0z6Dn\nNtcbBCrk8J1ZFiagFFEUGoRV+VR7GnxfgODiOZTx9dQuHjTqUp7dwSQTR9V8\noT5teS+IbC7BykaBxogBFGnADaSWb6MvDGQIkrlfTbhKIeou0pu7qrfCt6hs\nw2R/EIBjCdHdFgY3pros7+T7WHjmbJ3Uw3UnINg05TxwQJN1yMWQxQDSDZvy\nXPQip7Yk5TKgEYnF//dG2Het2tdF8VvFp04LqHWTdnqdKlGLWwVExPR0u5n8\nKGh9\r\n=3v+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf7747ef7.0","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/density":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/elevation":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.cf7747ef7.0_1590082155485_0.019508272254672887","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/switch","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"459ee3a9a53bfa13248c8ed5517a012ae9e531e1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.862d0d7bc.0.tgz","fileCount":36,"integrity":"sha512-Hw9j4OsznufZ//Bae39RPTDh/omZs34ayFpoK09dkt3SQJew95W6oAldwl7KQft2/2oytVahv8kxrP8Rf4TPzg==","signatures":[{"sig":"MEQCIB525UXyRzMLwelIy8vz8Ebafs3PfwoMVMtT97NexyUGAiA5yYhp5ms5Zv+FRK2tQ6lRh2baB1x8ingVuuzuuGhqqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrsNCRA9TVsSAnZWagAAVF0P/jydOy9w+QRs6L+8J2Zo\nU2CffnAy39peyhNj4hf3Cv+GCHn1bDSQCdEXqPx9WZo3AgRg8D8kPTAv9TMC\niZbo6KtjMOxvH6zzXdDA+qKIBawnxFZWY9XTJqjXDalk0Jlt4NkasjO99KNW\n9Vd5vW2/YqQqJj8Q35YyLc00v9MTwh+X3rQJVU1Iffuiq2300sk+IHC0kIg0\nfX1hI0zQ1xEZEHsV1N57UtnFuO1TkeSGGTiT02flKMpEC/1s7GBF9nMdMPH8\n7TBEUl1eDKwZBcKfmUKUPM5nzJfJe5NI4N6AhpGmlUBFxweNamC9j3+KjL2D\n2SEC7z3mJLoyFsvaJ3x6ij+GXUdwac9VCLc42RH+dv9UI1WbIzbl7aPiQWB8\ngN2p+GqWXIN6/bGoVQgeathl8/S02APC1e5yDixwvdlLBhzGGg6cGntX5Q80\nOIoTHRZbxMkEsLN42Zw2rxDlZEtDb/kcRhmxvPZnY5qq9f9bhy3v8h2adA8V\nAFwLdbh3LDxY9ug9xPnE3CmrKemm6PMiJzGJOh9I44DJYdf7ihbeqMHLmUM/\n6MYfCDiyQIM1w9sSHqvVOW7ll/qtGtvvHStlKSl1pcqk1/1d50Cow0sESsul\nUnDUJuDdIXD42kpqkV2dKWUh1CgyYwkVwK+u58k7k0tz6LuIVtOEz6CTVyXR\npCIz\r\n=8PAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.862d0d7bc.0","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/density":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/elevation":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.862d0d7bc.0_1590082316831_0.3582767613109523","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/switch","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"287fff5e8c8ac27a115bf7e67259a9ed67fc153d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.0008c8a91.0.tgz","fileCount":36,"integrity":"sha512-szK6foQXd1bGCTXWOH5N3NT1i0Wuaf7C53ba4/EE4ZaFhQnF3DIs15gMAjXZTzriGsaAYoboj4UBuVksZXJ9pA==","signatures":[{"sig":"MEQCIDVmmJ2cCUavyRLBhB6nAO4pkpP060I6o5Z59GaaNoO5AiBx3+QRp0mryBR61jYwIV4BC748Ce+8C8/5TK0G1z2qeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextd8CRA9TVsSAnZWagAA4/MP/1BlpnEHtVBrmYpn9mPw\n7DVFO1pAMuPOPWbJVdW8VCbkP1FMqbB+RSeiMGIjBH7z0NZrY4h09OcbKk47\nHafiCq9Xm1TyTRnrmnxJNLhCR8BFkP0Yc0KPAFekOzJqzlOn0fX/OA8rmY1y\nGZmnKgrOHdiaTC4FSbdf5OaSzck9S9eOADTuavx7oNUutFuZA1pAYN6RklC6\neRkwUHgiHFuJkkxn1lmjN4Ty7F/v56kJaqSRZGD0f8278HGmm3ToNV6FRwED\nZcQXFCpEixkw7pbQ6OjiDK+iTM9PoEuPyrzppg19xgh5kOyHol9kOj+iaDC0\nbfl7BlDDNTslUYc1RUQr/JBMiCmYIl6mpRm2UvuRr3wXxkVggtgJoA/fwOeD\nh5KpDfjmyIFbBR2kz8D3NogwEL8BTvL+E0N08cU18q/oTDrw5J4EMwrGGO4m\nmKDAFci8YjIWKBiEHL5osiZU/7EBhscS8FMJFbftsgf4U8eZMo6ncG69tM4A\n0VBCBMzPnip+MGg+yBt5iIykJ8carxk3vz2BPVa4g9S13Gmt7KcpYaYa15pw\ntWA0182NQXw5JQCkMMHpWLXCQjf3jzncunqt/xIDvjqJgQRjTEZPdmX8DsmE\nj6yEamgx7Pz75BohZBjtOrR9YkyDI7UyBAdeCfFVRA+JWk/gGAjCcEE+pqkj\njSBs\r\n=OtdL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0008c8a91.0","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/density":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/elevation":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.0008c8a91.0_1590089595425_0.6372706354102193","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/switch","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f9d7c28a6a444eec1f9b942ecc918c180b0dc0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.541638fa2.0.tgz","fileCount":36,"integrity":"sha512-y4OlxkaMMdnMRYX+tK30WbcFeA5UsTvNV4KiuMp2Vo7qjowkOyv28aEy5N9frfk6d5j/WZxIy9s56eBPfB4atg==","signatures":[{"sig":"MEQCICWLc5g/W7C8QRgElKlsEIaOveRbFDhbUkuNtkqPknE5AiAb4f3mSZRWYOfP7K4B/iIav+65JK22gIiG0y7SHMqQ5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextr9CRA9TVsSAnZWagAANNMP/jqPad+wBasvRdtAkA5v\nt3e6J8cXf73E4xVCgJJHRCZmzm29ZUT6p1yVS5CLEteVXIsbBZf8A2BPlEk6\nODPiP/ouAoMdeA+Sl6W1hSR7Oq+/U7x3MkbKgBrwgNPJE2LtmyJWh9IhUPz3\nB78UXPjz0V8gFMbvj3yEL4Pg1qugldF5nQu2qjexRVoX+c4YiFFBaSOqeXsz\nc7h4zfeTmz95meNzrXhAlQGqU6rUw4rcB7EQ1t2d5S81sCzQpVsEptqZivsK\ndOCqC+xlp7PsBYpjGeL1pdK11WnZb2RQ8ZZLwzBHgDQWIatB3fr87oAGmMgt\nF7O7NVDr/cVASz0AtFgdiM3cKgsmUOPShYVbez8RFwNdkI6i0EHXVv0OXQw2\nfH5HN9peMTLwixepKhq+rL5Tyo2Gfgxx2CkL3TEbXr4PV/WLbigkjma18ii5\ntbrAKvdzklJNHHUKP+KYnuZCw5o6lnTlRHaFFzp+xdfUuBVrILNhPPZ5ir52\n6z4yADp86uUL7IGaM38uhag7CulZ9JJMcnqrWWLBuWHymyt3HE+T89EDHA2T\nnakY2gfYxBqnRHKOzPFtPZoXn94jO++2C7FUHFOIST/QvRZuhrNR0enhfREj\nKTtm0uxHMQ2UNbWB/HmBY5UsosZCq4BG63aqYtAFI3jJXTQ25TAtLwkBx5D7\ng3mS\r\n=iSWQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.541638fa2.0","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/density":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/elevation":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.541638fa2.0_1590090493302_0.6317520630124283","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/switch","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"573916f4f1dbccc3c500e5983a451940c4275ee0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.6167cd075.0.tgz","fileCount":36,"integrity":"sha512-cMB4dDQgCMfY61bSetUjRHN/7LByll0OHxXeMwVV4Ko4WFdOOfsejc45rsNQBd+RPwhPFFqINQ1XBiL6IzyqKA==","signatures":[{"sig":"MEQCIDyoWeMdZOxstI/x64pWL/6UmGBfTtak0ghM40n+IDVfAiAcbpxwMWoli+0RRMDgRbyxkxAkny+kBUKWoW70dbU2Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuK6CRA9TVsSAnZWagAAQaUP/RaMmxVTntfn1iKLYSVl\ns1ucgybkmnJGV5j5BGrg3toFqlmLT5vxHZYRCg3qf36V+dIEdIATp2MRR4Fk\nJJHv59AbpfkaJco/oRw3kdQO7tfQPejxnOPvIaa4vaX5eAGcu2whvbSRjmO3\npttaFmwULAzVPWkl03rUUPYRp3iZtqLGYA1AWgJas05V33Ucx0+eGHr/Wi+U\nXX40f9wYZfIjQIYDWUuDCx+FFQMjz923Dw1lsKIiV4vQ1YbIqyD6yF7TV74P\nK5m6GMZIn9DFecpKN6kCZi011UMd0xBbhdC6pRJO2JCfbwEpG5ImxzBLy5Ci\n1bpgrnpq/ocjPQaOO9AEoLy/0/LXL9PHTyYxMMWdg6iReE25BnJdmYK5fu3i\nntVXCA8oi3/4HIgMTtYyfCP85C1WrJQNg+iM+ox1aKm317MWcTdZEbcArZy/\njy763lOxPgljp7QYdUHS3DE1TOuHi0Me/oIzzV6ScaDh2R65kM4fbTXzBaOP\n3eEG0T8XniQa9074d3BbEifxhbwCCGLTgPFApwVEVzl8tOgZ4zGCGqwtNB4G\nJXUrAh+tBmQ8+8T4Sgr5FZ/QgNMt3WhAlXLsY/cFF3IumAmj3Ja8fFOLKqkD\nZ2rijOfqhiYRbcrseQuJe+Bbfo/ZVlWxbMIQAprgVslbaSF1okwUN7IAotMM\nENrC\r\n=FP2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6167cd075.0","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/density":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/elevation":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.6167cd075.0_1590092473819_0.3496879550497216","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/switch","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"644109bce2941f68029b3de3b3cde870d3086177","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.863ac1b0f.0.tgz","fileCount":36,"integrity":"sha512-m2sXPQ67ekVlR5KmohpZpDuDNg4N/9cY1V7r5lF/lZg+mRkHapC+L3rUeAt1JF7rz90zWjLrTfG7heUyusa4Vg==","signatures":[{"sig":"MEQCIQDCASjFVLw87jZMDLWk9OmY/4lqO2TDoWX72HfK9325YAIfXIrzkmgqRb0l4GfJM7BFbYsYp7x50TSkINxx9hbaqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvnCRA9TVsSAnZWagAAalsP/0jtanvLm+E3cjHQfzGA\nACbpEReEyfTkgUOdXII5zkZpcukDI6GIXZUwGwHLuDAFV8gkT5gmy+AZJZVp\nwIv0zm9yI2cqdguIp6vA5JERkDPs751nIRrmTP9nGFmDUNvOilbRhlxJ2bfu\n6MP6mXXFcZW/sv3A3GEEaJNpT828xmg1cnXRouozVyQGkLsr2GenbSM1eSCI\n/NrbDpXraBBsI8XoEvmlsWMEh8wQlTzpjaP0WYPb7fAZPe7v74/8Fg/9xfgX\na9IJn6wpHGghoXwmaallfRixuvkKvTjMwrA0NF/xxy0vPXUD5CIgPbR9noCj\naWvSbeA4Na/n5DC709SWjhJKZkS0pwBOR+10WeabnaUyngygIKE5QCOJwxUN\nW5MAOWiWNa0X+9JH7Uq5ueK12idq7dLcmhhCbccBpa/id1G4jB1TPgTewNcD\nDRJHQs+3ba0kH4pTFFBA9lUdC5hKi6k7GUDYWyyEuMnlvyD4+yIET6P/SqcE\nnHLutVW6hEdODnvhLKGqO8ujOqgbh+GUypMgwIATpu3kNLWuP/HP0SQt+m9P\nJcDE/UTuGP+S8x48aMX1o6PZxK7fiS3C9+4Ffp1IV5BV/kOvaSc3ga/3OI8n\nQi94f5PFrkR8rAyD6vzim//4SVs7FrEQrq2J1jGHdrqH5VARhM4uRCs50XAR\nG0Is\r\n=/3K1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.863ac1b0f.0","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/density":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/elevation":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.863ac1b0f.0_1590094823258_0.5403051517412458","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/switch","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"369522e8ef20ee1216f868e6ae0c67f4759a2089","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.d30a214ac.0.tgz","fileCount":36,"integrity":"sha512-toSdk/hgRQSqPbeilNK9kQB9BsDRZzyvcdCsaugmrKKadJTwwgOEDC2Lj8sWOWqd1ZpTC8aYuyMJfGqvJwcC7A==","signatures":[{"sig":"MEUCIDgLZ3Chrd/O5R+Od4hvYpgYRRgbSQds1R9Ur1mt8YDdAiEA+lQTAasqvwZsqJvcrlWwkYt5nJLOOH2efPM7qXFSJrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzICRA9TVsSAnZWagAAA7sP/1POJuwceVs6iS9JqEj6\n92svYZspwrN3UW5bS0a3KRbZxuoLmJUdnCibuMQgDASDTBwjvJx3cPXZf/Jc\nhycZxUX8w2SyfaMb8+7ksCxaNcbxBN/c5XxKwXtkGedwDRh1h9JjUVam5oCJ\nB8ODd/dZmW+HIYs/yyWPO5i4u54x/qIja+AX54lGfZFSBlIBPrsHiZ27iyWu\ngbkWvJfOxYc/NtwOP4z1MbDDmIiFKU8eag/aeB2t6RXLtfDYJC8CldxfVj6s\nGge+58nwc3ENFqVPsIXBM168537q+a2Tp8f7nD4IB9GMZfx10iYeFm7wdkf1\nhh7QwZbwYlK2qqVCV4zz7zvMiTak2E0xL3VOThB01j9jH6SwjBcjmhn1phnl\nxqY479gGltFeQtNAnbQRf0jSPhJhHm5MisvmBmT6ukkNswHuMSOc5IVfL+cX\n4mY44gw8NY55ov2HTluin/TnE1QXQj0HCuB/yC0igRIdC611UVzUAL+Y0jK7\n6zotY4JYbNIYH1OYi6x8ha3xMnmRq4k06hLkh5tUBBh0o+6YncpdKEpccGQD\n51P6LpklOrwnAV7C0l50EbAgIK9pGZX1IjYQNBdND46U6FHUJY76jQ48s+61\nFEbiddkSk+FbuWZa1YliPgQoCutHfaPx2SqgmqQioBbVVnXd8vVNLpnTTMEn\nJAPU\r\n=Ur0J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d30a214ac.0","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/density":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/elevation":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.d30a214ac.0_1590095048092_0.5795376742172726","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/switch","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95c545f7da926dbbc77ae4f1e4e7a60ff679860b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.62abbc8d7.0.tgz","fileCount":36,"integrity":"sha512-lPog/O6E7k9CN/ogf+0HEucefohH5f1nVvElY9WEE+M/Ig75GRW3n8lLF1/t1XTmomae7S03Ylfw9OPAhaIymA==","signatures":[{"sig":"MEUCIQDy/M6g6gvrrLHls0EiPWTiyB3BMJmA9qjHsATfySqH8wIgKz85A1Pyn/N4RCjIruvgEV4/qf2EIyx8NscM0L7cI9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKOCRA9TVsSAnZWagAA62sQAKC4V3sQtg80lX5fxrda\nhuSaIQSBDYEgY8JEJoBFWf1P+U/24cji5nEHtqXkfTJYRMQ/bZZPCIIhVhK5\nSOC8IiGTKbHzCWyK4y3XimUGQg74B++e2y9qRut/1XFhEsrkg50ocKHxbeDf\ncyoy0BgG2Rm9FhX64SwsTwxnuHLvmjzTCnqSA4YMAUK0yjhyAjSQsTlGKHIK\nUFk0RoyLLWEU1IZelc3EQB2/9gt33yoUhoAijZJ32t3TP1xTlitGMqSA8iGe\n+Twj0dJod8ggRqruMggsmAPLq17TkBDuyJWgzmoXm4GmzKOJJGUnsjysS0RR\nXBTAhBOFSXQgixWuXQhqOCUGdykc22DKebrFJUNzAG7AwA81rgwl9QFTNubv\nDo54QlRNGZWwcFJoL1vaEefmces1PokX5RpM3pgi5OwiNSHqHR6ERC/YXdOj\nCIonHZdhwugDoFlLTzj5SVU5PaD7kiXqgETOe1bhojW5Le6Cd59mP1MZqHZQ\nnYWCg9KbPV6HJQgioF7RHFU61EhIgmZGrnd3Upn+Sb5DmA9eB4WzbBh4HfWm\nkWr7aGffMggPLZYcWQ5oTK9ZBOQVrmwwcvC+/Iji+Ue1q6R44shdAlktMM5f\nQSd8KAPNg3RjNF2X3GSX86M2pgM3bB0/HAQ2+SvS4Clg1WE64BfLBtqtBDF3\nkzEr\r\n=xj58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62abbc8d7.0","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/density":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/elevation":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.62abbc8d7.0_1590096525805_0.31044767542284335","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/switch","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36bf9798344ad6a7332282c0a720118e23e7b5f9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.49bf31d5c.0.tgz","fileCount":36,"integrity":"sha512-0nbeBg8sQc222ziVC13+WV5dEqH+ixA4GrqBKcxBRxkNih9heXrcqGXIrWsfHArj/01yq9a5uhtoYt+aVSG6wQ==","signatures":[{"sig":"MEQCIAeXM2qH/y3SDnzoN1v+b+eixTVF4dFH5zGhwNAUa11XAiASE5gmXlXgPm52nPQVuGFXBu9r2qPCwZL3GAkgUipvDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNcCRA9TVsSAnZWagAAnagP/3NxgB1RIsKbIs9XWaLO\npHzN3BlLaTGeCBnVMIU4WurjMIYS6po9t15mbpsLh0pPAGClw4c0UQ8qIHsN\nLmAQF64EPyY+WLvo25ET5xvTMiqhkIPpcPTqL69kH5R1MEGxztjbyn2kNm/l\nZCzVduRxfWevwEJDdLLpQlIkxYNloWvhClRhcpNBmoM9X0j1C/bZ/fos5YoT\ngAmmneLk73XpngElVsg36P9B8FB1TVenVipnh7GKqkPI103VVxi8uX8wcmz2\nSw+UxicU3WEy8BwO9hWA/vPNbqr5gn0ZRy/b5XrPRk17OsFIqWTPey8VA8I2\nu5s3Emh1NQdbnArpdBb3mJNc068LybSahPnt5V0Gr3Y0Q35ieJxwVyhLn+Xl\n8iGi3sRt72yUKSqUrV5nuAETl/cI6SP9FJrN4gNQwojCdTE9AFI+mYKHfUm5\n1KViLyOjH3j88ErURzgQ9H5zpvSmB9SQkG1kcxI9/rp4VSQ/yhZFbIQA0J53\nt41+YD5G2rhgNqIHdmgOCwPnVEoqykf0uqJKfaaRhqUHQQ6qAflzgiJXWq1E\n1dTyetXl57zuPlITeR2cVol5NhN3RXsKI/9d1oeUeeZui9v7W5bTjrXJYr0E\n1LCtopW2CXZVzxLcBDGSCf8j1g3OlrxeLyXWxP6LN8Hc7caoRI2onJR/bdeR\nx7SD\r\n=j/pN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.49bf31d5c.0","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/density":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/elevation":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.49bf31d5c.0_1590096732074_0.9228113954558084","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/switch","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57fdb521fdfd14999f33adc8c2f33650a4cafd56","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8e17857d0.0.tgz","fileCount":36,"integrity":"sha512-B7vzCK4HQRGpWZBAkymve8ZE+JlK5jyTsHOfYzhP2CfQddHERREtoxrNNd51h0te2YImOEoNo+Nk2X84TY03zA==","signatures":[{"sig":"MEYCIQDxHlaPlBLDi3Zybh86sup5xHfImMiOAmjoOg2y5gy6ugIhAIVBzyvY6A43SbGIZTBrdUhFAhg3z5JJFqsjF07EX75s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOUCRA9TVsSAnZWagAA11cP/R9ipeR8wtgXresW5+cb\nDEoHq5Uu4qKc7e7jVO7ArGzD/3wSJZEtGYQ4lrgj5o/R+SMfXGO1TlngsP+l\nhYIHoDYm1Fe4PlOjXwipBE8fBHxrPWN9JygkXbIOm6uP6fFN+3Kwtrchl+r6\nfOgc8AdYdkDrd84TtfT9z/9KRjVrKlkZnBgm8d56vXfBjRhD89KrqDxXeQrk\nfEKK/+1TTpjk+VuVHxhRiV6hG/wwOyCm8+tIhExRBag114KYsJQ+OowU9yzn\nE/ah1VZst5zuj9uv3R9urKc2aK9b9WOUicLC2VBz8KBVzzYe4p3MHbHwPxiY\np4Setp0gr+FL2FegXpW4fXXxHQsvHte0NDj+vEB7GLjWrKLyF9J1ABiKGacN\nucW9qtcsydWdvO0IpVIjvPl6+K2jzwaW78QJsnrDHTsd89yjE5JMuC/qD/Yw\n8TnAVGuiKHUwgXjPVOZfySUgMO5TpUEuGBQIO2OFVL+UCD+gtTId16gA6SMk\nx8E1mulEcvRRahzTRNqHpDd3bsWt0PClG3sf4v4sONLkIjh280oWsvT/Mu1y\nX8qCbWPWJzQ/XTt0/kEfVG57xHKII4YYC7oCJ/vtwCa2EOMMZgqs0TKFWv0V\nFrSQeLpW/s6GGsGJUC5uevC4lOcRnbVKfBR/E7s+htWTdLZ37C81irKGU1x7\ndMyo\r\n=xkaS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8e17857d0.0","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/density":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/elevation":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8e17857d0.0_1590096787655_0.9992889088584109","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/switch","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4eda32fce877a818c61a0b7756d8a138b3bf1f82","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.c113fc942.0.tgz","fileCount":36,"integrity":"sha512-mrmBE+gQ455zv/UOnP5zFWbmREVQ2KScpJcXJrgW3CONTAK+PHBC+qJecK0hQwy5+JTtvggAmJAK2GdthcMbvg==","signatures":[{"sig":"MEUCIQCNF1SBJ/RUYYmZsRH7RS2TL7NrDMUZcbw7F4eXqNAc3gIgLV1FNSV6kq+bNtRpiO1OPo5XDHiaK9Jpzhxn9hIrhc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwTICRA9TVsSAnZWagAA8GwP/i6DgMphlyQrKKaYaY3V\n7Uri7jPfWUhJZ/DEzTQGNMVmSosYcI3R74sj4gVCarvsmkSai0CsHHHjK9xz\nWXVEXe5XXJjPkdokKZ5WZzAXTwfwdnxFrg/myzAMiPIpTJlqd5k4QboMz70O\n3r3I4hOaN31Wel59637AnNemhAzyq5+LM9cw1QBU0WS/fEDE/yrPWITYpdso\nouLCdZX2W1nNaADIHLrHKQcDaW1HsnSjlEddRKIhbXbc4Mt5mR27x2UPXTrA\nk7g0o3U+rUNMbNciXpbFnEFNQqvA9uwSCsPENJazwEszw0qaLiKr+tPevn+r\nUjmFwuPdm3R359LBLxuHjoXO1e97HsK01FOVoziGhA6ncgbg9d2BdmDYAu5p\nQL1menTS0Hgt+CNISOA1qFl5q5xuMHXucKS7qUnuHR2jqWj950A/AQ6Vlk/+\n4bKXLbqEVqmbJ7fvp1QAeml2l49AGTuLxSpMZM9eXVTbul5IGwxqyzJryMcr\nKySQG3l6oEEjwnT9U6ndrA1A6s6rgbC3dDhYSkvMcI7rFcaPuIZA1ZI41qcD\nEVLSdKiRAkEuvTJnkd/2MhJRBbE3BG6je9DN4x2FClq+y502P4blkyoMGkVD\nMn+8sSWLVm97vmfg8tayo5c4bw9RUkI+qZv95d7z1E+W6aBWPwQuvIQsWO7k\nXw5D\r\n=HQHM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c113fc942.0","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/density":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/elevation":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.c113fc942.0_1590101191931_0.4569987453928974","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/switch","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9edb6280aa0ab6f83ed76d021058f40f2384ecef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.912d9021d.0.tgz","fileCount":36,"integrity":"sha512-nN8I89A799rZKqVUubWz2Cs08vvi6HRFESAqAMWqZf7ReE5wSVKxC+NQtcrC8gwdlq0BNV0Y9X5qhBd5Abvlvg==","signatures":[{"sig":"MEYCIQDzQR9Ydlb/jK/JeyYCELklL/dFcANwlglWqRJQuwQuKQIhAPTxWQkKiE3XCUH3Bvljyovf96F7Rfe387XdPXQ7rx/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWPMCRA9TVsSAnZWagAAHZYQAJ4XGDonMENK0pzDOXl0\nSjRK4hpWe0dKKbPMAa3XG4RR1ST6KEu8aXFeRyOBEHaDxnqXh9OtPEMDjJam\nuyrDE7aSNPu1liAe/GRL9+3ggVcjAQFZvOGRi3rFA21XSjY0SXC3pYlPH03e\nmf59f/EgDM9RqNoWIC1bcurwW8prntyBpPqG77oyNWYpiz8ddrxVlVqeCohf\nEoY98rlxpETfGFVCTlOqcklzZFNyzmyVAQInAMPjkXsCyGSQFwc5LDpHWC4g\nT4qlz8IUzw2KDrLYiI3qNjCEUfcnERj7mEAKOTWU6gyN5kt5A17EaU8VVBV0\nRZPx/nJSZWuxxHS7ed0RnZj4XPWQyOljIzeItIUrWJ/pnfEqrH6S8KBZ3CsG\nLROYQnd1aNK3wCmhkl8DfxSFtCsWqe9MQeGy/yHO6w4u+3dvVsX/1fQMvvR5\neskMMQCVCrX5Wa/NRXWQcf1SeUWqXaIM6RKfBKAV/ViVbr93yNznUYvMY6sW\n6RviRft4vb0G1Ze2mhmiw4gPnDZtFoddFI9xI6y5sPAw9Y2O+jnRGvPknkxF\natXdqnXk5JrMgdZ/C5NWur2XqOcwcfDry1jy0DbgBtfqpeG6OCnjJgDnYYHs\nmBra7cNryQsVuI7m6yGReAD5zNqObgfzpHJQBNhXXMN6OvjCiy/by6SvOZim\nN7FZ\r\n=Kso3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.912d9021d.0","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/density":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/elevation":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.912d9021d.0_1590518732021_0.2524597870641314","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/switch","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"312c850a66cca95c93b88daf9509f6f706656b95","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.68a2af131.0.tgz","fileCount":36,"integrity":"sha512-WD0U8nIfee9IG+pLoyL5kcAxWOYuBdOAi7SLBx3K6gUqux9OWbBLpUX7OFWxR5l4vx3XvfHlekysJ/Y64MY+kQ==","signatures":[{"sig":"MEQCIAsLgM8RKQ7l9RMCvTgy8ARILKtbCxB+wNsUmGrULK5hAiB0PUadcUM5cscHBfuemomiSZcf8osjlEUpma6KqE2/cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWkCCRA9TVsSAnZWagAAre0P/2Ut/uh+SF4Ae7zK5w5J\nlWiKGtKonMqmAJWD89z6t/ElbSxBQmJ4WS9GS+r27jGIl1ZZL232yCsiARYa\niGgT5Hmnq6bohrRh3iEipUML4OMkZVR7GoaHifurXGkxlfX/4HH5PauvPCpu\nIow+3poTP6Ov/UtyypEJo8KPk446/YHR5oHd1bLlGVFYr0S7I9eMrd7LqAqd\nWCngrp1HXYZ+/k+wac6MHqwL6ZButmHU98ocZlxYOLQft9luQ1MvmmR94KWs\n9Kwz8I/Wc/m1TCgnlryAI2wH/tD2i6vdMu4rb12YM/SloYGJYvsW7yjvoPfx\n98r9gTDLNz1sGAvngYEce/JO+JRTgQRmhVucOvPWuVZLCT++BwH/vNfqipAY\nH5c4r04fbP5fdAyEDHn2BY/xogxL1bQskXAbg3lS4hnM5IVv6+As4bSUPilD\n3TFQDvl9x2t88JY0FiklX3vyZTbGBR1QEz8TT3rLz4xnW4Mmch8oTIITNypT\nStR07pycE4wewYVhVo7j0RxPHuiPzAsgE0MKxNUrQrZ1rz/YU9cnPX04q9pK\nUMwMQdkra3CytMT/KOF/OJij738Uf/PpaURQuKJ627/gaInjj/pOXY3j+blD\nciZ4SvX/aHp/GFRU79ySewMFcK6izKcsmEISdi6rbqncLiqOLVa8UWRJiK1V\nWF5x\r\n=Xs0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.68a2af131.0","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/density":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/elevation":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.68a2af131.0_1590520066266_0.9511191728861548","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/switch","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eea64a852be90df82e693a97103517fe350a675","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.01de07011.0.tgz","fileCount":36,"integrity":"sha512-dTcO2t9geUUTUyMkYgQa48iNHOQlAOTqrzsrS4WaYZjCOQj1IGlAvbHKOVVVoskTeYc1z2xdIJGr3jL7lWp3TA==","signatures":[{"sig":"MEUCIAlxg9pvvCC5f9+p3bs275QyiIhQmhhu1dpvzTBXeTxYAiEAuddpGfcP+ajoF/ZfNn4Tx32xtnVRUTKYJty6X9tzwUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXONCRA9TVsSAnZWagAA7LUP/1xLZ4q/qAjVV/5gCGw4\nIJahgReLezfNP9flM/Vfoy6A6puQgeX5hzGGi8nudIDRkUcFHTt1/7R0Fk1k\nJGoujcPUENX1mO9liHOyrW6EI4PpGtza3qokFpzvqunvuuZgGNFOEnO4hcya\nzlmbT2wbvGNfgGGhwoaYxmALfkXkH7GiYFCEx19kGS1H6C8waHKAy0fXSJOo\nD/HSeSIK2GSKZxJALTXNiOoMnT7g2gelNFr0zDebFkIZldwP/UN+PebIw5O8\nJ3ydMmBlwnxXYlonpXgYUnuUxJ2UXUChQautVpvQWogOr6QBeoG5eu9mBPEb\nB2sSEAwaStQm9nwBxjTClLmJ4bo1TjcQZZjrMltr8+bRMQhOsa945hcW6Lpt\nqSGaVbKxDuVQU2b3LlhTWs1RDf7Xa6VNa/llSRl2PXcM/3urJH+mjRkE0QIz\nQqZ219sm1PgteABWiUUIlCskxotd21a1qLqwlK8EETFEOsdSvzEIP3q31ti7\nO9SsNWY2GXkdcSnXpE7FFPd3eHwhEW2KRKTJEqwVLR3Kbji5dRkIVdBHCyaH\nGKzR+VSMOPed8oRbl8be6ztgc5FsQ58Z7TmH7dbeF0vWnrkB1GmCzYmN2/+k\nyChAh7rXbRYs3ObkaRvrUPqb2Ub+uDhZL/H+xq7b+X611xrGtK3DCAfVrmKS\nNBbL\r\n=3JOY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.01de07011.0","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/density":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/elevation":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.01de07011.0_1590522765166_0.31728937089450127","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/switch","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f6bd40fd23b95304af0376b64dbbf1358bf1571","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.51d4535fe.0.tgz","fileCount":36,"integrity":"sha512-2Kxn5bbBdlBSIRYgXRhAfRurJsTRBPUTUiKd058lVt469jI0M0LJeoTkAHD0XcGVNw0Lh5prF/o3rZF5E+vNAw==","signatures":[{"sig":"MEUCIQDrSndl22ED9VI4wFAett+kMkNMxM0Ok8g/D+LjXDylWwIgKf97dTUaGtiQwK4oeENrsyXdWes5d3oo2YA4iEpXTno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYuTCRA9TVsSAnZWagAANoYP/1vQpHzGzDbYZKcyXptQ\nHWE726CHmP1NCyaV6u2d/WERFe26FdaPu1XfkogzFFd5+ikPKZ1WHQFkMjBr\ndvUpgSW7bjUf3vhP6TL+qNY4ZhikwWMhFXzzzeCHg7CM8aXL6HXf7WQVnSC4\nVc+XwpNTdcV76nikxeO9PxZnIDbMlwWaqaXzJMmSugJZz6z5gNHXylJgUNQT\nYA0SgB79IEfwbsFnMXrbtAMrF5zLAe9RPkiHgOBwcpaQNB8myHz9w+HSiExA\nix1EbAlnSN9aE1ZX9Z7L/SgL8JPyjUwYnGoSF6giPWbqOaRmxl7cGEljsu9I\nlGN2meZo+S9/C3ttzW4DpZmgH4cLzChTXkXuYIxnGATpOLzAZjg5XrA3ONYE\nXq411IlqLU4ug/YJKyM1qZ0cg46U6kAj3dUYZ117TAjApzG5c8yNqj7P+Eja\njJ3H0fU6NQkMbFpCWcuQLatwqIMRP9T6RBMTmaMHU96GvfatUBdvbpzXNLid\n/LccNevV29QOS3XFVYDND2lx8/BpTqGbQ9Mi0m/KDTWnLSlcvOPPTMZuOKkP\n8cI6p3orn6XlTBXkpT1pWz72o0AGP3Tr6CLGgupqawg7MoiDztsYmYOYfYzD\nsjaBCpIM+hszIgZxeQlGifdyW7buLNoFQDzT5EY28nXIvr0XXjIlMMI+G5QF\nNzas\r\n=6Ubo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51d4535fe.0","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/density":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/elevation":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.51d4535fe.0_1590528915341_0.12999858041981938","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/switch","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f90e750b428bbf9a076782bc1c9dff01e539da4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.b86d826b7.0.tgz","fileCount":36,"integrity":"sha512-9sGjkBrVmunTfkpqBckDzcH29m7cQG0Crar95SE6TJw6WRTDwfgU6/il8kTCzodF49OxEUxfBTaUuRCtT/HaFA==","signatures":[{"sig":"MEYCIQDTLWtDQUMB9EqdAeMbD8CSwtCqv7wjj6N45nEN4htY+gIhAIDELuXMTLcCLnl9/IZP8aA2aEERbhIdHJFBMzCHMP7c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSfCRA9TVsSAnZWagAAuZMP/Ai6k1jS58PgaAxRlsxe\nNMf/eR9/HoukRz1U+da0CREAaxUVcXRkIeZIE5DwFgfGZKKQxQNTITtFLkwR\nSiUgJOjPXPZZI8QW1a5gAqNQ1kqZ5XRhs9mn1U2/ykuc55DLvwfgsvXyeeQm\nrpPO36Kcn2Fy/snVojs/E3m1elbW1UelZQh0rrEydyDoc/ihXITrzGuPKg9G\nv1ISmc9FyFZY5qrxxj0yrCvnu6u2bOu3jHlsGjKlPd/fvzIdUVnJJoU7i5SQ\nMmRvz6p3/0Z61zCsw0i697mY35fUSQQ9MFdh9MUGbwvUZwPIkUvKfkNMbEfQ\nfqZ39fYVqn11aY7ZZTCJE93CIlQ9PW8javTTChNX2ugLMYqWfKhlPdgCP3hp\n0X1zYULrLT/Gfn3J7MdVAIGl1vpa/QDfGOdMB/rxemL7PWDknkCizIRLGEcl\nenITH8eDomsFtAOUuQpYY9ySBMmFk9XF/cKPW7HwWAs8OJB2F1d4BEa+GGU+\njOlLxEU7EIkcgKQPhiigq12tTtep9wlmppLnHI5e8rv2twHG+wUWRhZbyCTB\n2E4ZIp48HFRKyQMpICMeZiRSkUPN/yLpHAQmMoSak37qDZv1wdefDLAnsk30\nwqKwjFkzzNSIrG3DCGGLzwSQGdTF4DRn6+wOHb51FD30ddiqLsm40Idcxxq4\nTcv+\r\n=yolN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b86d826b7.0","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/density":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/elevation":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.b86d826b7.0_1590531231412_0.12817935243258982","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/switch","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d286980f2b335706dee8c5a75bec4c6835eac9b2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.d91794c7e.0.tgz","fileCount":36,"integrity":"sha512-Vienmnkm4LaYAJxLFhmzcRD+IMdzKvhMSLt5MRl5kO8YfyxKLUaBWPnKtQyZ54d1HIYyiAVuBy4WPtQhC/Q/Gw==","signatures":[{"sig":"MEYCIQDhcJimsTDO5zHSM/Gm7KAA1zw82Iixp1YAWhSyUWwq6wIhAJUfLbxBTiuYkMpA8Unuxv1ImnpPmVwz7himtydVmmc8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":400868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxXCRA9TVsSAnZWagAA1agP+gMCLFGupboGQN942/XW\nM8zFuQFjRa3Rw6p/+0Gt58BWeKK3gWcO2PlseNUXiAgrwnvIB4xjpAlX2cTs\nbQxziOGZTfUkE+aj7vX67WJ4hlT68a9YqSvt443w3QUJU3L/CmXive96EG1S\nEM05eX6lJekvVpd85Q3XTMBMkmUgZ86sTu3PEMvQKW/CMH92IUJQGa6vOnIr\n4HC2ez5+hhZp/0gIs6/kD0XpzFvdjwYL8U6hlY+Ckqq5C41GpjA29IDLifVU\nrcKvuctt6FTwcpiqYxEEqNkxkep5YN7N/DzCP+sQAFkhx9S53uc+HLuoixwv\nj+lz2gC8sQh+GQz6hSZenmAPSKelQVP0q+ni9fONhY+op5IeLj4taO4x3r3y\n8oLHgZMALUnxnh5cOFpComTYVRdkvHC0kvWBTD29YS7VRX9QTvUNzfyzLEi9\nCwX2Bt/PbPYoBGXCnzZo2uG8RdRvjb6QEuFC8IAxd+dIctsWxisyZZmtgBYG\nzSUVF0ceEwRCtXsipwAfQEvLh4AbxjkbcQY3R/mkYMTLs7wTuTd6qujUQ3Yd\nEHwXGvQA7WQIbA9MJHf8Y9LP9dWHcQtAGXvL4s0O7FY36Ux+XkX26+lkP+wE\nTvAV0wYrqpyNdy8FYUFm3sXtKVgiLCcKaPflkiQdI1vh+8BAiMOyAesLyMf6\nMYXG\r\n=/tn0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d91794c7e.0","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/density":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/elevation":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.d91794c7e.0_1590537303398_0.08288560896424624","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/switch","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a178eb567a550ef8d860005673f944dec562260c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8c6d7e076.0.tgz","fileCount":36,"integrity":"sha512-eEWqdi940VPRHKL3PjsiA3h4npSUW2g/YhRN4PG50oS/Tkp0J/iJ9ikv4Is8dsWoa1O+uYAzm0OkKQr0PCc/eg==","signatures":[{"sig":"MEUCIHcuDEY8EdZPIBKNXxLgkyOLyxrRJ39MTe45heoXlmEiAiEA4jWoRdFVtAv4yqAiElWbfWBfTvOMvl2HEEpsl7ItUqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriRCRA9TVsSAnZWagAAxFMQAJQHJh6rqB9uD6MISsUT\nEnyCWEBh/rmzP1baStRE7Zq8BXnUCXeAVSrPnAjYz/KA9kEgCndIiXc5B/y9\nbUxQcqMAG4/IAYHXYWEcUzCxaUlfEqbRpf6OzL9F3F2/NDRljF2soUYXbvyd\nbxiPKjOgkqZyiOejYl3RpeODP60lUZ/v+2qKsV7VIJc2KmII766NKK0pA2xX\n8B9k93UpFHRlZP/JLn4JVxWvg0tc/d+U/HoRbj/C8M8kzj9QqM1FTPMeXgvn\nqF4mpcRvjXoOKgs2ZeR2+1SN4K35fjcMzQd0m9gj/oIWoZF6NBeC2AcP7Y9M\nJiLjUHpeuyla6K74mSap7h4AoygeEhgRU3szOocnCXRY71Fw2vrC3BY3GJVP\nfOuLb/AxUj2TjIlMGYkqBxWLZ5+2ZMl22NE5D95+mV34XMt32jeWXvwF3RVt\nSPUGQK6MOOg981l3EQzxLzNPNWqFCJBfuy5iib14oQhxd0aP9n61rQkXuWAY\nw/OEcD3zf1sEWKX+C6WJ4hW7a2a0XKs6oIJZlcVxrKsm6k+98yaAxTSZ6a1S\nEWPBqJnD2jNIVLuxAEczh/9zrNx4hJbFl37I48lyml7l259dyMxd76fFGZGm\nxCaVFbI4eHWjPZ8LGdWhSJRkIHCzDEj2HilXHVC6y+8GVXFwoxMGkL/VKWqi\n2Shn\r\n=kc6P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8c6d7e076.0","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/density":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/elevation":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8c6d7e076.0_1590605968819_0.49491634958442887","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/switch","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be3de0ad712272c6cf4a96ab14ab8770e61e9883","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.5b5f62f93.0.tgz","fileCount":36,"integrity":"sha512-RlBdMYaJN8ldt2ypeVYjyuDnCYH5GPbFBzT+BKrCA+FTozAWL0yvP8z1V0cytf2Cfh2LJWulauIaFKoZe3i47Q==","signatures":[{"sig":"MEYCIQCelNivSxItE7UX8v+CLltcNxSaHjKekx+belWMxDcSXAIhAO5OD42s9afSV26fqxfv+K/HZwswKIcyl/gAwNIVjpuK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezry1CRA9TVsSAnZWagAAgxgQAJHfq/VyEzYKtyu2OqkL\nv/HQaQXbKvqpyL1hQ4ZoHQyyfVyQaZX5C88xBzt+QHHtjfE56zQQEYoc6umZ\nLEAVVq8CXuy3Q5A5CUAgbmtqDUVScQCW7JdInm1sH84tx6f9FbW6Aozl6lVL\nP7n7qLIRUVo2RXVDTDWJgvHrGtkotlVlDN9h10Y6WBfEfURxlmQx/jOdbuK3\nRrHs51frBTQ7PxVAhRlt+ZaapVMZIGb+mrnlh1OSG6oq8lk7zIIORrH4yMM9\ndpsrn+e25w7Pwgpvn/wBt4Y9PNKYWfB3vlXATJTlSeyY7uH+96MWOjRSC2VR\np3cMqR6KryJnu9qG4n7tqunTwEPCaZFj1TZB9PUf+Z5fXEJIHzTtK2gj3qtL\nTJqC/7LTv/VeEiDME0OE2sbbDkew40acMvPEHRcBoW+hopXoRtKa01H3FOoP\nkSvPEJiCQnXTIvEfknqXDJIArpNMhQkWy9BOMeyD3W0oeFjZ4uSpwqNJGMUA\nVZ1L+p6f2eQ+UYJuo5WBAr7zdxWqyQxEqM6/8iHONy5SYJ8KbL+Lwdd76sv5\n6rfb7NpHIYpSdpQ3Roj9/fxyZzsTUAZGhapI2l4eIkV7fqVAeQdI4vuwUmcO\nISHpBIMRSdwduEW00Gs3YPvTAYqZwAJJpp+r3Wao320fx3AkMhULefLLkyUN\n3gY8\r\n=Rucx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5b5f62f93.0","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/density":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/elevation":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.5b5f62f93.0_1590607029009_0.45258758869001214","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/switch","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f321c91d66c4db069905ea2d147c7972ae5f9ba0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.d9972abb1.0.tgz","fileCount":36,"integrity":"sha512-Ud0plCGAWIXGdgTKz4UDRy+4y5JmYiFI6ylnkJlKSB/vMWwkU0Q+Qnj9wgjAC+bc6QJ07lc3PmprYR8LF+UE2A==","signatures":[{"sig":"MEUCIQDr4+7ojpe3S/kjoeOzAS/YWkGSQAzGLEMXWiUlA2pdtgIgKb8T+ePnXzkPDi+jdOM1lOd/5s/ivukIb9FCikboF+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsurCRA9TVsSAnZWagAAIAoP/3jWw9sEABc3+NdRYfDo\nYZ7lgBDsAKvIqy9omQL1Oo9yj1PwrAMBAXH33c4U+UVMSZ+1nL5PxfiBsu/F\nZoae9Z8+Cye279zfYoxu5x16/aIlV7ylZqel+dPsoVv1fxDy+gShfKqKvzCi\nBZAw3jJBNcvO/ZFAAaTiarQ/nlRq+e+ygLc/mbJnPK+HkqUV8jbVlGk8Mb2w\nwlU59edqHCrzRkoqy/w0gay0s+AlFRNw/Gkfd8uRPD2sgg7MpPT5FVwLvag4\ngYUfBts8OQHpJcC0t8oXrARm//8oLtul8zAO1qh5MzLNw4npbF/rw1AKEdFs\nDng++0l0q1n9oOmk8O/bOqwzqAN43/ufu9pNpe6RdqAvXWA8jBjGmox6kxRc\n3X/mGChs/dvyiZMtLtemyPYnAgCpIgS7cPAX5b4EoJd/UHw3Izzc4DZnsGYi\nDsHD66Sy3Vu/O7b67jVpcX8UeJwvcLA5QjaZ84UEKXmG3cB2jU9mCMx8B9q4\nVqGmFcf4rLhv39pqUbDP1rrbV71N4wboFjkqCx65BSZdVB8F/l9Uxl/7mni+\n8ga44t7U64+hkQnBXvROpBRZrisKXeBhMNkHgc8xxuxQ5xn1M455HtnuZjmz\nXSENUfTKtlOX25+MiKnDMN6e7k+dEzLFaVYeucjfZyVfP0DDAvCFKLxkU23H\n6uMU\r\n=YdvH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d9972abb1.0","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/density":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/elevation":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.d9972abb1.0_1590610859425_0.7520145345330589","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/switch","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e1d2fdd440472bb5616ea0103b3a3fa8b924e97","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.6556eda2b.0.tgz","fileCount":36,"integrity":"sha512-zDRQC+6ckybtMlXKMwCEWxcnE+IxC/1Do4Vl5MQTFuG1YmYmDHPx/5NIG4ku3Fopj+FBvOD9YlCofzZcpFLnoA==","signatures":[{"sig":"MEUCIAd6csb2aZAfmiqGo5Nlg1YzTQgrLSQ0pIg95wRyfGckAiEA1GK5Bfcemv6dYo65cQYz5wws6J1g+VcfWFcRVbnTHew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3QCRA9TVsSAnZWagAAwS4P/jynzw8SG59GF/pvVMa/\n3zb8XYCjizU1A6iE0Hbz7nqXpk1znr5QfBGgF5ILgTDeEM01urCuBPVFMMhr\niw4z7YFRT31lOCVH3+jMEGovGK5XLdBKweK60isatic/XMv3jyxsu6XivBeq\nNRFKcrS2MpwqfnaUCt2Z+/LHatn0OFHs6pvIb4w1vSg6j53ETeye3ZTvnkoR\nmb37bjDFOX8Px0H1BF9hkcCWw4psYlUNNkunv1XfW72phpSmEj66h++Voi5A\n7RHYLQPlplvGd4sFc8TPHcsNEylwP6/7cz92BTYgRMS+UTR3hq0mHHXcLwvx\nIr5YsAGgBMz37lkkJdQJGit8MQHmjx5nC0oOTA7eSOOeaeafmVhOLpk1osi7\nUZsBgHipSJJRNzz9gVICOznbGt2I8AJNoAqFm2HlG5X7xdDo9WKfClVA3yMQ\nbpO9/JFNS316zN5LiUt8zVNsbfYZsURXrqVpdv5i8r5CqF2merFrn3PfccoI\nLp47weEDTmlGd+5P2Y3EgTVvp4/BTkKCz/Vog1HKJaVP3CiG6YSCzg8oeGHV\n3OfMr8ClsNDr6nRcOepu35kywM5ynHLubWr2ahkEZdguFPn0ecoUO/N+U3FA\nZfGJPyhRe/6Hqyg8TiEsghpcHy1h7MnVLbLm14iQHYFFVEHdJSgWggNFHaKz\nIOIb\r\n=Yd1+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6556eda2b.0","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/density":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/elevation":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.6556eda2b.0_1590611407630_0.5567450365993876","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/switch","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65e4720a85c44b94828db3eda7a0d732da977624","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.32aa23641.0.tgz","fileCount":36,"integrity":"sha512-Nv/Pc3s4FZ1a3rrSDx0gFEe5vIvydKQS0meKSKISI2MNMI+MweH59r3NJSov5AhCrtD1ie4nkFq7VO6JtZBs5g==","signatures":[{"sig":"MEYCIQCqHZdedGS7dDjyR2JTGF2LpF+k5WkbC1wOmTS9IL6gxAIhAM0aBukPF8KRc2D+NQxLuel0de1ho26Qb5/qqUkdmwFl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3QCRA9TVsSAnZWagAApNMP/j4fOeng/+W4lpP+KXmF\nF8iyddiDoDfTIdiZdUDWTw3bkR0VM3r8p2Oyoywa7Q8yBaAzdhjkuIk1TYzw\n09x8olsWGG6OOAdJ7lKX46rCNLJyRJRXG9zf/BZEfxiT0tcBnNEMhdYxW62R\npuLvmdwCCc0H2laUO2x7qHV2s3IpQgfDaNT4pk+OTPwmJJ1r94kJmm5nxRL2\nxpU3fz4PKJz0hqFJVSrGVw6IaKjS6j8GeVz9+kgNlCDCQniYTotJ/M99RdqP\nFfBeyWN+MuD3+coNXTWUeAIPkJNWnVgRqrowJaB6G+K/i1WTVoyFdQobqIPa\nRKOl9nn6dvlwY0pqI4kz3VjKiayFJLSBGOhB6U1UCKUNWotd5iVUm2iZRYk8\nYwCh0jfey3tsIqRQsUlWqowuxXii1pnW7UxPJ5JgXuOaVREAOtuiaeslvbW5\nyhxKmS1i8wJcNVbMoSxsThg+vVa1DhJMV9QCyuG9n4RJJeId5aEYzWMGzZ8k\nsPhvhNVbZqYa2Yrd+E2ph9DxSVDOAIzgk0iowjk7bGHF4NqruBJXT9+jni/T\n0Kv1fyljM5t/wXucu30RQoZt/aiKU4VeP/4c3Q5kGbQSdmAh3N6MHzJ8lPir\nBMGLj88C901e8TxqPEOhTbOgmSAilxF0PlfjOAiXy3p7HuINajtQgdJ2iBVX\ndbiy\r\n=/3n9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.32aa23641.0","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/density":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/elevation":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.32aa23641.0_1590615503504_0.8723102245017347","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/switch","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dc97e93de99d595e23520debb6c2ead80b4f2c2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.654934dfa.0.tgz","fileCount":36,"integrity":"sha512-d2886U/0Smz2G4eacL83+c0Pt3x/I/MuDaLAV+CxlMWratSiMnKqt4ZERGZkguWBMRSuNJKTuigyHok+O6qHwQ==","signatures":[{"sig":"MEUCIHDTBrKwEXbr2661ticDFBA6CaoisNOxmIb/ENiBL8c0AiEAwp30IIZXcEj5AmPZrI4GQ2yfTutzkpQlSwXUGel4S+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezweuCRA9TVsSAnZWagAAqdEP/2zLBROHJ0S0pMuAMaOp\nOZ9mplu3q2qMY8InOO2Due/oEOjJXWVwBdiqDULYnvF4mWx/ZtbD2Q/5l6Vc\nEvysLUOU7rlEpYafskVRajgk1YuIUIDdZ/L7L5R+W078up0UcCjA9VvH6eXP\nocoJpHyIlvsRU6JlbW4diPsEPe0+kSQQEaZ4D/g6USIwqu91BIIFeHRBthhs\nEdqGyadkcV8ydfJbKWRc0trPX99t2UNmG1KCDKJUuNTZkWjL/ZJDwV4cixxI\n3j3rc487ntZtuxf2zFu35ZUHtDo06mc3PRnnUjtcqIG5PFls6dnRaW+3qt4x\nXnQq7OzrJ4wHt5O926T85SQ4AKrMrcMFtGKKSHGh/3P3kgfMyqlatEAi/BrW\np70RQpE7XF41do1TDQ8sOC1pSTS8gf+cjhxu4xzaQJEzTzZDYKoCHRe+YlTS\niXGhjyWmIZr+OpHOiF8aA99nMypHDjWE9ylV32C69MV7FC538eDmcTbIqou1\npDsmsa59h2AMw1CBpa4sjjRRbLoqdhYLU6hFPdpZpCx/S1OF242aA9zz/OdM\nRBK261IUL5sZ6q99ldy9duLlZvim1RjSiXKf1OV6Gbd9D1C+qm0C+2TAVlaO\nyNNxw+v3SQjgYVmld8FY9oAzOhx8OiVSd1VYhey0FFh1wggr4OR4n7rbLEPc\n2h9H\r\n=Zk/s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.654934dfa.0","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/density":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/elevation":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.654934dfa.0_1590626221930_0.13508279029986237","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/switch","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5300d7c8f364c7f15d074940eea6966a8c4d6fac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.41910b8b8.0.tgz","fileCount":36,"integrity":"sha512-PU3TJHdhNWz/ojmfwNXgbCE/gUsoSz/xVu/1WFFPg6l/21cFiGnfazmc9GwHEt9+l4D+K+zXLBWLPF1tQAl1PQ==","signatures":[{"sig":"MEUCIFaFwHC8Nro7SsKOKzSJA3PG3RMnHpyAacjbLzkeFWHGAiEAgDXAL5uP35LG/CHw1Jv6Fs6n0HuF/NcR1rHcSss6FNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsPCRA9TVsSAnZWagAAtYUP/14aNIOsugqHmAZQ6e48\ntd8CwoaeKqhaSaDUXaAuEr7bbjnd9OsQ+GbjBJNkV/1J/LxhBPSlHZZ355Ke\nYzTPSBckbvXikQ3xaJkNk3y3araHvw6IncdNCTF6R7VfpNyMdqC644Vg35r0\njg3vaC4cGEUFuExWqb2tKbaN00Vt27Kl0crKCcownlEDdnX+2/qEXcSdWi2z\nocHJAa9/FFHDMc+WupAMpbZFOEajKtdseMfLP3zYz1K8JpnNvdl+9UmZNvsV\nrHjuT1oAozBAdLFLXqAbzM57jYobzP/bB7tquM7n7M/9HgZB37CsGnuQsXtV\noOeXMDGQTEdnOQmgpImPRnvEAvYN8VgRxHcYuoSeVaAhiAScBPCVZeywE4pj\n0VaKjNTCedSXD3BD7DkgzynCG1KIp0jYz4ppMoX+Wqq4IuNvo9HB+4PsL6RJ\n7o7kFWXwgoR6+6OPCgwagmTYJGNCDLQTAgPT3zcYtf/ZHf9dQz3C34+VZy+b\nwyYdB6ZTUh42alP2yiUCLyivG2RsuNBxgyHIx8qo3x6C1BQoMM3VKmE1spij\niFFwyduHg/jUx2G6mnh9asTWmYSad3eypSPil44UYT+mkVDUa4D9wKUJgAOw\nnwWEsdVtfPYIV/epl6NTirT6R2XHUfbkq2Zireo23iFr+3KgcOQmVZcIA3f2\nfXee\r\n=S3YS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.41910b8b8.0","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/density":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/elevation":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.41910b8b8.0_1590627086927_0.5728579035723649","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/switch","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c684c967ddd13b1923edd94b9031c31fc77d732","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.d66d22bf9.0.tgz","fileCount":36,"integrity":"sha512-S2XNJiHKaVI1mqewoaLi9J0dIjp+rO4B3tPJsLiiGHbgyq/g32+YoVe2EKxLNap4g31h3dwmtBROwebhuW1//g==","signatures":[{"sig":"MEQCIECscR9/z4afXG5qaV947YWgitA7cHaslJ4/rThOzB6fAiA8eK3oo5XTVqlhPQhSCrPsyXbBfJBD8KqhaxBbNeRNEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Bc1CRA9TVsSAnZWagAAHcAP/3dEvRQ2ICwpNr6/Cmpl\nkVFL6k8h+UpyttDFdSKIFW24NGkXQhY6I+W4DsE6MidyFiYfJU1jQzMZHWOQ\n13L13l4QOwa3H/bmffPc1xcsj2p78CVK28aTzZn2L7CsjNl23lvgIld2ZIsr\nrPEdkZ/cyMonpvdr6N1UxTa5p8z4UvMdZu8UBpiaMsdDlPrKtEKixygKLKk+\npPpWl5ueL138ePwnfEmCZemd6WuXEvF2KINU4c7oBNxzElqOpo50Ww8Clh3u\nux/k9Y0Tjz/RoxAStkA5NYJEp2+OMpqiBMqIvVBzVKSewC0xvh1dmbw7u2Ha\n8E78KkhFkkXfD+WDMEzfWMxeC46s0/exkXrTBKT33vQVVphrG7dZr9Orhmvd\nFlvpUljsjVI03cT0u1Fe5V5JTX7MvQGPbY/k18dAVAN9sYt5hkT/reqyMwFv\nazVPuP1J4oFLekUeaMHlAUyHFfucMUlm1goONiD1duyx/sq2OTzlKny1IEx8\nJyZpYYa6nA46bdayPflmXYAQ+K6UlqKb/LBeC8KQxaJuYo+/mRgZpyrhQKrV\nuhfV0J5Gj5ELAUQ/iMJuIswG2916GXpcOEz1PK/SFlbAsrswJpwVVlE98L8r\n2zRCsHiwhX8Oj1jjiO0BtRb0/004rmoyDJ9V9eBRaOiLFY3d07AhYLr5DItp\n1Z68\r\n=Vhr2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d66d22bf9.0","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/density":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/elevation":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.d66d22bf9.0_1590695732892_0.12268741992040444","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/switch","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d99a95fe188ca7a04b26b58f7ca6a20165b9f0d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8904f3cbe.0.tgz","fileCount":36,"integrity":"sha512-KTk1ZfyJ6M0+GJ6MM2NhTGpoIE7ngkoZk/ZKUNBHwSNup+hdQj2oNrqI/Vc+/V6+fKS/r5B8dPFtL267W7dEsA==","signatures":[{"sig":"MEYCIQDiRKDx5apEH2JlLB3U/isvMlrOJ4ApFvSWLneBx8UrEQIhAOyjPWxBv+IqxhG5cyy57puNY54D611aJu86DMJd/nPa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":399340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1VCRA9TVsSAnZWagAACMwQAIbmgesEPG4JucONXZAk\n1qdkJCN8NbTXkLhIqKMSVFp/hfVHQh9T3Aql3qVMoXte/bzvmwxVR8xZ+oLq\ncGlA852n3QBy2wbGhO0SFKDJ4/YkCEAp+C7aDIg9HziqMaKLChPOxb6WCokq\nzlmRaZzvPrSI9hbQvGCsKNq3sT164DD0GmWRn4ltSk9BZPpKPHdVOde2UaWQ\nnQRCtX/eIK7BPYBAwQBmWIeBA5XdKDFEdRtS8dfS/K/XcdPLe7tU745Zl31c\ncWrGlTlFCwHG7zEqGQGlg9YTB6S3oU8lxpJ1YY4Ms9yUQI81xEFgABRDfpcz\nCkVAibNAZC7tRgxwwAXcdrwGzUwz/F4gCaCaOVxhzyzGSCPxfEBobuJD6iJb\nxDkhmSeTkcv3/CBVHrJQ/NLT9BI+2rxntb0j+oAkCM1nrQUxKSiuS54mfsdF\nTZhY8kWq3Othas3BtEpysUHnPdyHXBB2v2LH347amKIqNFIykRZZxbHOaNC/\n1u4vGnYFWtQ0NYH18AAoQ+PR1JXjUOTZva/4cfUhR51xTbYm6fRPrLGYRQrv\n9bFhZTX4DdtL2SNk7YA8zErKF1hmvSHbpJvaEskcgX1cBHmKVok0okSIoa5k\nO8Ao2J/6RHeVeFbkXSarjhy6bsZfgedQutEVJNIqQAa+B9scOJXJifOrfA8T\nwiXc\r\n=wGcQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8904f3cbe.0","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/density":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/elevation":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8904f3cbe.0_1590771028776_0.7485994077180984","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/switch","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38e075c4061ccd8e3dce3a08ee0f760691467649","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.51512a4ac.0.tgz","fileCount":36,"integrity":"sha512-PU2Q2z9fIDNi35OkNDBCfaZ0OqeuIosbwWNjUAWI3BLjz8rOk3FpfNGWUTCzd8LKjTiOVmM5M2R5BAjwga1M/w==","signatures":[{"sig":"MEUCICuY2i/xAQBixcfmfcyJ0BepDc2MqWTJkThUdUoOg9/8AiEA1p8l0VatpaGZN3gi3ODlsUHPor5pGhPTPejbxgXo+dM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V9ICRA9TVsSAnZWagAAdCoP/jjBCtmiXKVlQLdpjLqQ\nFlB0CWjWG2fXnPUWf+zpBOADJIALnszGKvirQRRRxUACRr2cLC82xRj3MR7e\nbihadjMmJca9TfgDQV2CzM3clyBJkMkrFt+kFSopY/m78KUAWeK/uEbacDm1\n8QSEZ9ldUJrnMFtOqSk2/1prXZUX3o8sfEE7H3CEy9es3jLvxrP7ud9S6ffT\nf0aTvsIHEG5mUqDUB1Z1d/NfY3fW0rWg8U9aoXgMj9imTV812D48nb+4sV/k\nYATvt0My5XYt7liWtgdCSfFLGKuXPwi7DnT9I1cTMipMuVwDm649tBcWvlwL\nXX8c9DCrO68TjjI/lfWBHw5FeiexmQDx0kpW9U4qiRJf9nOU7hjqGCC6NGnV\nseedeVxuDhCkoYyMEHEKRX2BZWWt5ebfjH1vNKn+B5Nf4D7O2eSYpUAMCdBA\n2ZiPgYdbp/Hh+/LoYmkKCOLS+4oOf1zo6kTGiBt0yg5OCEtnQQDrB1883qAl\n2kWdLkS/JT9OhxTR2ND4lsdsEzdKEjRx1gFBkQ+g0g5QN8Tmak4vQi8GmwfZ\n5C0ESgIHaJXEf+pljtaTvowPVmwya6lR05p7d6zZHCWscs+6iecWoTyHQY5Z\nGouJpazylPJrKlVxEtEKy775x5UjKvc8DFuFNaKqFYPLV0LZPr6HpwvtF/pC\noXO4\r\n=6qaN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51512a4ac.0","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/density":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/elevation":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.51512a4ac.0_1590779719904_0.2193984122661825","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/switch","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e09a877a5f240b8e9585cbc27873c5aa6ccf7fef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.0743288fb.0.tgz","fileCount":36,"integrity":"sha512-sxKZ3ujj/mrLTyvSikyaSI3MbGht0nRwrVFgprWMWs2AAGYQsyJqDGI5JLP7jWJAhuVQUzkt//PryFmBqreelw==","signatures":[{"sig":"MEUCIFhkk1lgLtren8sFeUcJg583Qu2Ca+F2fr6CjPb4MWPIAiEA/9DkrCBA5K6S72yrIFTVqq6bSkn2bAd2/y6i/VtZN8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrzCRA9TVsSAnZWagAAhBcP/2lTwHFl+u6HoMqom/L3\n/DY6Rs2WVvvmEqtQIXpadg75q3VPD9+ouw4HNEX7ELVMZdEuELG+IzJrmbk0\n9huYzQajd3l7MKMmaWcBLRbTzPXEuBOTYEk0WgrnRgL4/T4gYa5lvg3XSUYs\n00elDcYMyZzviL5NhJQpxnWrSQFH3hdBSW93Ss6X5m0o1xbpbbGdhyjfJEC8\nXsYgQY721hnfAnDJIT/Xy4uqhbRVbLBi+vl6trpTUvmEkbxdRU+/3kMC8lB3\nSLlFpgZDgTrLcIGoA4JWGsiR7qOwcct8s/uWuwFWIl1lcSQV0YRcp+rg7xe/\nL4QiA1Qgy4tustN6G0EptFaiyEKxRIB+3UnI1XWgusiuCRtV51lSsV3lqvmy\n0+E/HpMKBWCtrrjqvE2Cihp3EwBUZz3FK82i3LzqNgwIeEihenQvNZnq85QX\nue2qHKEY64yHfR3mIXDc/fKp8JgMmcS6spgFuPl9dStGHZs3EvIKVNQw1nf+\nPCl2o17FivkUKHzK1LuBTbCufLW7YNLD1twyIkZlLzsy4sZD4Shm5O43P80Q\n/BKdmHuxT8eWxXmDUATJqQk72lC5aRtVhO1Dc6QAJF+/UhfONZbh/96sT3uX\nDn6Z3HiQD9RN8W0hV0HZe/5e4tr5h3mfvqJbnaN5XZ3f1u0RymM/KeRp+byT\n4BAX\r\n=KOrX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0743288fb.0","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/density":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/elevation":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.0743288fb.0_1590782707146_0.7958453504518985","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/switch","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a670c4e6a5ba0755225f2ba8ff4936dd46597da0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.06ef147b5.0.tgz","fileCount":36,"integrity":"sha512-pn5p65lHoGAj6HPGORXiEvPJNohxEbKCh8QiL9/776gd5Y18m+zf+GHYAbSi81+S8HV+x0+WAB/sxwfbB/ZnhA==","signatures":[{"sig":"MEYCIQD78slva53QNWiSppcVVMQ6atmTWv1nuAMM3bsjlrQCxgIhAIrsf/Th4bFBM1G5GoPvfDRk9sRDP6unrom6Kb5MqmTo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNMCRA9TVsSAnZWagAAwf8P/jNF/GCUlVKhQ2+56JVw\nmzTQXa0ExXPxpS1fWpy69Os87fpr2TsxAQHnvGmTkZO9g5748iBXFdg+w60B\nUchcpuKQMyFt8d4Vx9B1B4dnj1MaBsVpfoH0w73Q1DevPuE6fjTuzBJ32Sl/\nosvcbsUph8t0uwTE8YD2L2wx/8vKpla+rQGmeVFJ8aCI4XxKibYH+GmQ3jF7\nOzqx8w1WvGQXrlMg1KlCtsnP8tgcSmqclf1ZJAKTe6qo2Dp8svhPEoIz7u8N\n8mrOf2Xv54dxpUZVuDsJYzyccL9LnA+b7xKBOwlC2vL9VlztU8ptP8EoP+eF\nCzEzrwsXORtmrjidFqMlWBR61Y4U+VYUG1FNv6Z3yFeFx422pV4fiw74sRcu\nu16EkCDfrpJzXxvEqE12WY3VsweGNt/2sVtrTdDZHdMMN3sDMjIvSiQDNUSs\nlFHxywFoqTsN4eDNIzZ+I8M4SIbpr611za0Qb/8Vw/SIMOr+8ZqgqsJsbzif\nwY7FFsOPwc8/7spUDQlKUyuzGFjzIgwzr8eV3tIYvcDadpAWXdE57wexqlq+\neygy/FUhz3N70gzyuQwUq3noHWEFsGFsU/AmG0Vlcuh72sfCsYvdmCmLLvjC\n8LUFmXMQLaQzXBXIXWclB4iOfUWQLb4QdR+YZauVOgdaCU2er6D3Lwk12x8J\nhFM8\r\n=7ugD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.06ef147b5.0","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/density":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/elevation":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.06ef147b5.0_1590784844249_0.8920589069103728","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/switch","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72711cb4fd9674b09ac1ad88c1ff0907bcf805fd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8073a20a9.0.tgz","fileCount":36,"integrity":"sha512-kmREdl9pFovTvdPfgU8mUAPH+SiIMB4I5308W7q6rgjb54/tw69iFKFKD+cvyrK6vMsO9j1YU8rs20z2es2j+A==","signatures":[{"sig":"MEQCIBAF3mhxNufhqQ1d321cCUnlWjYuwvL7kQ/r/4OkmdLgAiAPq8tnPyYmvmcYHnRwLyvTK9riMSBoJ1LLmTyfZXs4Wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnwCRA9TVsSAnZWagAAURgP/3rK/8AF2wtDtMVZbI9t\nJaDT2c/psf9rOwYJiHoscZ24miJRnKt5SLZqQp+L17ueaGyLjlI1JpyNfBUH\nfKIeY2Y5rB/h8/7gR3J/PGAXShLpYd1CZcwBH9ghokMtPwgae6p5cR02rz4I\nCi4IRHkhK7QeRDJjyXvLpaB72nzEPpbXLQxlA4lLrwbPKmxVAmLJGpGQwbO3\n+PH8hRYjrDHxF/pMZFthM/G9J74Clv+TgahsAd3fM0z3kYpBbn7Ktix5O73U\nrPRPe0BSlVo4dAvy62RNi2aI3/zeUiFSsLJFl85zI7UN/qNfBzOsGHFzBIRt\nKIfshlL3YZWOoGy2jISeFy21X9cHnPZne8GkotCbl4k/rPltS0EIQkT+qzXz\nnl3WrHRKENMTrUBBqVtBzpRR6/wifQvc7Wj7EKQtj/8GOf/wiUdQ1VC+monq\nr42evQkTqi3pvSE8VvZ7tpdBiSlkrZQs8Df3WwY5SSHOMwOu8pggLl0Xd0/J\nvgX4sK8/eqGn144g8LBw0Rok7VO/22YEMIToXCmH76/32kGnefZLKGOQ9uic\n3zpwJMBMVo4dFAOIUH31PZRBin50vor2Ta90cILIEGl8F5+GV19Eo+1FOfoC\nET1RQvTHz520kYCJ+j/5yROypb4RgF/EYDx/LgWzf02ixTUkXa0fV40fTltB\nCqgz\r\n=/bH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8073a20a9.0","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/density":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/elevation":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8073a20a9.0_1590794735975_0.23806771048090436","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/switch","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e9aa8b0830977c52a3a3fedae92df36f4df01d7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.72ff42330.0.tgz","fileCount":36,"integrity":"sha512-BVADFG+Iy1Kiej8zXgNiMU/hlMFrPYWK5FO32Z4+gOR6IiVmh0pD7FEZgXJBq+AQlBAxk7J3YP6JrvThHYVO5A==","signatures":[{"sig":"MEYCIQCCOryRw++Di3TvIro1wE1xpbDBtcTGAVFbU+X9yiP4egIhAKjM6T0nIkxjKq2lYWM9PwLeXV36SzO7qxP5gojDJ0Xb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBlCRA9TVsSAnZWagAAACsP/2mDo3PIDKvCDWMq6Onf\nyEc/fPCpIs+a7NW35u6dXOFC5fIUVrMBceMoY2/O0oX3rd2QjmSK/+o1L3yH\nsiU+BuYXThm0vb9mpY/sGOV9BjOl5Rpc5f2Ru22LM/6K+W+yxrEVmKqRDWi2\n/0QvJ9+MLxybNueuJ46tT4wHFy3cDcCttLs3+MwfgJPuxISCp+xRo/uhEAWJ\neI5wpxYWZQeYYlar1YykesCrFDQyvE0ajTo3OaxRJZawXyXOLpdTyrp4tDhX\nKHQ0R/eBgcNtxyNuOzASZFRZrPBl70Ybdnuyh9J01ue/fiRw3x9J4M8tybBm\nS9KuMpGWb58ZPt+O0rUtqcbc7t1ONHw65dZlpnocXx24MEdtTOCew5sPkERV\n0wRYtTpxnQ/wc5iUbsPCZnPmhTAnVnmDF4y8D0ZDQsPn+yyxP2em+7/UDGX1\nv1fUNfG07poN82F/vOQ7EIGrbeXExWpHbe0tt3pfaT54Eeix4spswwq+vXgM\nK/J/AdY4NV72AWyQ4IaDYFMJlVG9sr9Z8whZKWkStdjudzJTRF5b5jcCuZAz\nZvLv4Y2tg+IWYLGAX0u8VKgEq2Y9MTbSABKqcS/YS1WnwMZmyBlMm6tWydom\nRKPphlJRNNYvIhgEDYCMZaTcEsJ/+RHdgI7o7+uTQqOZBoODKt82FaypbSwi\ngeDo\r\n=sU7j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.72ff42330.0","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/density":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/elevation":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.72ff42330.0_1591029860572_0.9443190865402318","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/switch","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaa2f0f439aa1b9b58ab9b1256286efb8d108506","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.9ea52070f.0.tgz","fileCount":36,"integrity":"sha512-sQ7kPiZpZDbyILSyP1Pmtr9jt9W/oKh2UN7Pt8yeR0ZXXwSiB75XWI8nSDeHzVgj+BtC6f+aGbwOcpqiMoypkw==","signatures":[{"sig":"MEUCIQDwInqZ2YZ7EW8xNyl/OeY+s8EYOPZwqcEEcosmA00DrAIgJess1n3+QylhRY1nkXCjiKQnyk6tava/mk0noI0Uvbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGCCRA9TVsSAnZWagAARcIP/24Uc3cv6O5ShBk0bH0Z\nxKNlPVuN+2GoIcTvNGTrV1AEpW1nxJ264JwUPpXWftLAECHyn1s+Y8wwOG6Y\nEUSXWmJ3ZcNN2rzw4m7u02rZArIAqz5lcd3T/BqkoGfxD5czY5GU1QmQZ2zS\n5fhteT9gIBFyc//HB1Xi2AQ6p0+kaFdFgeE7IDSHbKKdyO4/OL7JW1m3kVsR\nYO+uuLG7cJ0Dpniy41WNmiFXVnBY84aJ2tFVEmZbP+cfANXPwh4lLCv9v4NQ\nzFj4WmuvoeTlEGNkz/RsDoqaRLgESfV69x8CmaAXCtRKmrf5QHQ2IlJz1yzw\n8rFGQrWcEBOrM/GyLWuJ0npVQ3/C+fwdzZsYqBKMddln5tlaTlDRUaQUpnC8\np8JetIl/om3PauHMDcEeN+RixcQ2j7S+7+DnlMPdZamUbLIZJgw5VbtE7u+4\nVHsIpXwWu8AOlk9XzNPG1KXXYTKa1cIwQDAbJHH7MFdJrrgL2s/t4VboiawD\nYK0dFr1UaMjUsLplOUZW9iQr+zBhu/MjvEGbvo2nTpQLQfLl7N2lsjKjcTqn\n5fzy0+l8hTT6ckJXt4ZfQAEUX8iR+rS8mgNNEjFmpwUmRdwHmQz7jBi0MKIr\ngLE05d/jhTnk+ijZQo282nn8Uh6/SEcrP/jsSlcvQP9hGWPYzn2TRX9ji0Ao\neRdG\r\n=u6Qv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9ea52070f.0","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/density":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/elevation":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.9ea52070f.0_1591030145611_0.3644806397369673","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/switch","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc4f108163fc76b2b25f3ab58de29b85b09a4708","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.d86ad3b60.0.tgz","fileCount":36,"integrity":"sha512-abVwfWHDAnImtSsJEBnHbaAge5CF06zLJirsexbgRSWKgTVH3UKiYQA/zluJHUh8MVhML08J2MveMqYezcII5g==","signatures":[{"sig":"MEYCIQDqS0bTZHY3ITfB6ajykwzyRL7CV7PNbJZcG6GdrOAIgQIhAIlxb/e2WxAk3ZEIBls+XqhRvbHCRf8Ka52FQjUI7pbw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+FCRA9TVsSAnZWagAAIYIP/1bf2DxbH9G42gtET9ec\nnjuedJLSwfqSveosYAfVUPzHbIbN76RDP36tDnFD4Y+ROpGQQEcbxH1fzi39\n3ptfyY6jGGFEl37HD2703jc8PUUF3ydBMaF/1xt8vuZY836QRNBNNAZzqEZ4\nUhJTcST4te1hJbGJwmeSHLeLL3nLzkj6wR6GLydG+7uKmST/Bg/lbH0+TD6y\nZSDO2L6ZKH6o8Vjyx8a9Z75i+I7GYasHfPozJtdoIpUvc1GI6jCYlJZu0YSS\n0nJOXoN/LxL/V2+kPCUlwf5X+l/qRAacJw/eMPbaNFktN3SRzV5OuD5MMoOA\nxBgLJsoKf8E98hD3F0/EGVSJq/OIjrHJPgRd2qFWkRsh9PBhimyoD4Knc8w4\nWTjHJWyrQNGYbyqbPuaarFbXycN7fEYrS5NVl7WpT9a6YDeT5/LcyocYuNoN\n4/+pBxDPf4LqtNZkrRlXBADboDnQQ2m4ithkx1MI0uEJfxuE/tNzOZGonsiV\nmaYhqi8kiiNFAI9W2yQwYLegEGFcd+ARr53FHZJmiXVaRAzlKZ1X8N5H8/my\nro0naXfv1bau+MujkVpjvfFJQNeStTaqRpoNxcXOtL8xx6MDMJnVk5tKvtEd\neqE+6dulCk7nh6g54mIqYnPCMFxE7OaDG8DIxslVk2j1Y2h/IB0dHfY9kHvB\nA+pv\r\n=SYoP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d86ad3b60.0","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/density":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/elevation":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.d86ad3b60.0_1591033733218_0.8365366568549304","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/switch","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c23d9495649592161acc6593ba6ae6e22cc6eb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.b9776b1d0.0.tgz","fileCount":36,"integrity":"sha512-um0yZVEWdbkK12UmpGGuuIeenAeSVncn2vliA0oQDwbvbOKqq7uNF0k2WZRbpd/+QqJD31jeB3GxecXRntAVGA==","signatures":[{"sig":"MEYCIQDKwk2jWRS1eTM3LutTC9QVawANtTJP3iw1BMKMsMgCAQIhAN2RjMTYoN+SHPCna+1be0FzQL/zHebNRWwRTpm8OHfO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UhICRA9TVsSAnZWagAAG4wP/izHpG2ujZYNubGQUy/S\nDj9vZ16jsJPR9SmM/i4YC/ccyX15J6SLh0TmqCr9Z4WyeHfRUTnqfKWxdeZx\ncc0YLDWT60zX1IBpN8ZO9bVcz4PHxLJLzBwSVvssDcqlCUS/Wy9ekPLfBDWt\njLOIn5UyATCb0TAUrA13iTsbxlQiUOPXRSMACx/L+SlcdCXLELsM2+jsTi3+\njKvmhMXqGmBPGyNnCG04iQzUFcgI4WU+UVp28/rbxNh5Si2IxmWkqzMiHzDp\nwBLpTiWvgB8HSVJcunNLN819FZN2gPb+p7N2VuwuCQGs9eetLbKxlkVm3UlI\n8pV/zBeVIjEYE1cma/r7Nu61M4cEnp+F1SD0RERS2PwYMDSPWGgtaOmzd695\n2+N5+IeBmJwjViYUCIbnooI/BMtn+ozvcSLYRPtHiUqVZH/pxBdAtC6zKNRM\nJuQr9ffh6xU35ewv9uXdFVJn8zysIWSH6cek2N4NJZQNdZt2ID4YMfZnO6Em\nZwm5Fi9KZw4bWN3k8RO43h6P+8jPRBhLasoeE0xssz362s6yJD0OPdJPlKm8\nJx9gXT0yxCAIget/F9HZ5tdC9fEep9qNvRHQ/4Zb4OFQAlSfpXUtQiK6u1rC\nLsnJLhEK+FA1UYlqwGXTxfIcRbKvNzooCY4S9x+oNsWPOKlWz006cmOpjAH3\nUpZJ\r\n=mj3s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b9776b1d0.0","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/density":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/elevation":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.b9776b1d0.0_1591035975779_0.7499155410337695","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/switch","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55bed026b1971cb6461a73feb2d6b54d66d8ee72","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.ba6f7c294.0.tgz","fileCount":36,"integrity":"sha512-eVcR3Esrj8ssLh/ZMTURKdBaNTEgE3hZONIFiM64KTK/i+6gvL4ynkNDP3oEefsJ8VU8ob1qX4x7vvYF11YdwQ==","signatures":[{"sig":"MEQCIBGe2eyVvUTsFryq4IPukkpX0Y72nwnEc45YvNSN0U3+AiBEPD7LiPJVmU6JJ53d8vd+HiJ81BYc3aXEVLc9P/3u8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oY2CRA9TVsSAnZWagAArPoP/3CC7h1p0Y5Ss3dojUbg\n4dJSrV7MAkN72T9c9JR/LbN/YKFGEtH+5WREJYSkFZtUKehlYT2H0rCPEHgm\ntpEblpubVyAZ7UfTj18utDrlAJsP6kMvJHTuLl8WvTHg8Q1brG8A0z88C0U/\nP5em56gulBdS9B4g/IO0scB5x6FYLe0PGIpkbvA20uula5SiggDcol8oMqA+\nji69jyi1Tkcd4XeBeP96u0ZGezKW/EW3D7U4uVQVROyTAsDrnsV2JQYtoB8d\nZYvRwsi5tOm7g7rK2DHgUFSGhp0WqyYJ7JKc0gy/GICqo7zEQcBoy/Y1Wo6x\nrP/mtD4Twf9raWoJezEkHPaSpe8lGebzGX0iwRXRHPu1vwDLQJFtM0WzlLXC\nZ2pH39CUqF9GOyJv5doNvH7XZWWkBinBvqOLRrBJ3lFMrEjvTHVSO855hbyJ\nRkGYOghQeshypE6GWEGI3woTocFNJuVPO0R6hWDY67auA/RhqxURsfTF58Zu\ntEHA2z+nBXKs53fv3ZkL7tO8hkws3O5tcbsZAD4EaZDkjaIQQeuRxMT1mC8+\nJRoFmMp/eA/0QHiNGqN+i7VRFa2JxDEUYNTAL03yU5nQNwnWE6A2XmvjWt6P\nLC0gMi2YKGp88/UMdG7BCPcjKOxCutLwLN+77GSxBmh4Qez9P/1Ls66pQovO\nJIn3\r\n=zLKm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ba6f7c294.0","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/density":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/elevation":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.ba6f7c294.0_1591117366000_0.3391486643077908","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/switch","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dff6e1d337ee6522f53924dc8810bc2746715931","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.cf3b664ab.0.tgz","fileCount":36,"integrity":"sha512-dysRWPj7o4IUIT8+Zvul2tvNgaEnAHOvnBR9CFGbo6/D2kn7CIMUbQf97xVnxuMhWECrkaczTzSgoKsc8348ww==","signatures":[{"sig":"MEUCIQDYYmogG2vc2X2biCSurzTwGWRz08FMzELfYXFgiPGEqQIgaI1wbZipphNkOl0h0FGLA2mPj8UT+xq9DvamT4NxyCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pksCRA9TVsSAnZWagAAsgEP/3/YFM5cAXAHhbqqyeA7\nHJP+fqd/D5EnsqFBFNha14+pmxs3gzqbE/keiW5sKfbID7Pvg0leBs81e5mY\nkll0PWxJneLl56JorJ7nJuRA31mt/NvYgdX5riNNTGXhtrwnmoa1QEH4VT70\ncP/de7fTz7RlXKvNIo83Ts9+WQspeE5xpw14aH+uzV7YXM6WWhabu/8JtZIC\nb37qr3R81dhvyT+cuklVuhYsdZIiRVWaluR7fEs5l9L/xUEfP0+U72tri5zF\n2I9idI2L8e5CIBq3A4DroX8clGbfuVuos2aQ1a6Tczl9qs1+hEX/mCU5unJZ\nizReF/tFVS9knNELMqbT+W42J+qb2YoQAKgaO5PuMX32Tv8ZxufGWY9bvsYh\njF8OYOOiWr/HpjtahkNdUG7LRSD/FA+ZQB4BxQQiALgoXl0WVKupwDsZI39b\nD12uyS11kk83PmFcLjqI+Kx9einmmoJz5GK1isu8QKjGIrF6LJ/4YFnHdhxt\nxZ9LmtABRSaEO74gIUS1Xu/iHrG2dS45WORhzYZDxQCFlaCdnmhPu+ZteyOt\n+SCKznRUZ6DxI7dFsCCqsNiVuaNFyv5I2Tcd7eMzqEJxDugpvYqIibC3OR8N\nqsNf3HgjgBDggp7lq053KocyexwxL6xlzKizeVpcWTDAw4dWbfqGDzu58yqY\nWVS6\r\n=yzHv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf3b664ab.0","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/density":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/elevation":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.cf3b664ab.0_1591122219834_0.933406764564535","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/switch","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a2de6f557654866b0317598e97ca5cf2560c839","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":36,"integrity":"sha512-VEH3yZ1w0MPAaW7EMwzrbzx39GndPxlzPgUIo8ZeNDpc7K636C+KUfXHRf4xcP5KfkIaczXPjmH8TdmJsBs4bg==","signatures":[{"sig":"MEUCIQC4XjdDKdJ0zdsCUzoCipkCfn77W24YQqF+e4ewFXEeHgIgNcilwLDYjOb+qeCYlU7rKFrdc6vP0Udo8ahcC6pNUYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uY6CRA9TVsSAnZWagAAm9wP/38NH2SmnbJYg69s3oah\nqE1COftcZrjCA7FtEjPOhl7c0xLDih6CDYBv8wMgkSZsyt61lxXodwcRsGDo\nnnSvZz7K+KxeZO9bplBN7t6N2NPoBAl1LWxh0RtzMwMet+9Os9jBDSQUf5ko\nE4AiEg7at9r6biJgIEF91k9iNFBYexwpdhLpB2rAtuUyzSZTbWssJX3jSd1g\nHSrdirHdgYmSnrwM51ocoXNXG92arFCG/1/rFdQm0vhVbReF5Vbd/d+xXPlw\nTLXWpP1PNIEillTvPUfh6tb5qpCTJJNZYL3BZ8Wy1rSr428zivbaZEg+fmJ8\nhj3AHqZ+lEcRoWCdQAcXIDN3QP17EjInqkdEZa4N8iXPEobqJPyanUo30G5K\ng+LotIixMCfxKbCwJgYvR5c3moKPFMrHlRM+kvNZrwbWq83Gq08p74CZeRGi\nFwzRl7avNK4punkazAjpg6XO0xTuHgm9zNJpMkSE8C8DVwZMaUIF0YFQW7f7\nPLkVzBdyQqw012YNMbDIMFUYFzJwvACw8L2cd+uyhaTS+bzWez2aoKA5/kaW\nl1jM3f+TtUZQO7R4wgIpVKSsfGAbvtofKRo7OWzg/MJotS+uaABhSk71guby\nWQVmEcPUx/crcnjCia3JFzYTT2hfC/TEWgXIh6zdhk7ekTc/oM+SDayds05+\ndQQb\r\n=jQDd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ba3c9a31.0","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/density":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/elevation":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.4ba3c9a31.0_1591141945980_0.2908297727443383","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/switch","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e36a01886898ad0a8258129b9d63c787a06a195b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.388b042c7.0.tgz","fileCount":36,"integrity":"sha512-uOR+Gx1NP8tkbIyb+CA6/vgmE3lK8obSXNDVz1v2uN1QVCng8WkLidc5yVnim3N40zkKImvpbnV4qVkYUCcgmg==","signatures":[{"sig":"MEUCIQCnMUJfEOrQVXUn2Y7wqStdhTiCGL/yimUP/Idx0raSCgIgUvMUqPb67+PJZfl79blgfomIT/Hu225gMSWbFbQP82A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16nICRA9TVsSAnZWagAAUz4P/iRcajpwkm2Shg7osCZt\nJ1f821n6LELdX9C3tV2CGw18PqEieoFMAHdcqHB3RS5vrv5urlY/Wey4phCg\nm7L52eaGi1DIQDX0Bp06RgzosojAeEu4mPGEt3EmJIYxaBBtmIU3jIuBgqU8\nWIj2iAhWvHAc2cbaXnNKqlDXFQvn4G62aBHr0XBgKVYgzjpyc/YdAt1m0kHL\nTJjgG6xy8cFY2BOA7qXuNKSn/3XZ2JaZIeGfb/lp7XqHdmPG0ymIQFNj3ncO\nVILpVqL/omiHFh3pGtusMRWrkD1FhHn6RUWWBRRtqy66QATEG3HtCPA98ten\nqehF6Al/16icNlVR8oIKAXD5b7pX3yQ98MG9/fWkFiQdIaif11hAzQ38XdxU\nX5XZNeC4WZ7kJgBBiBSbelimpUzdRiC3hleGkopX2hoLrBacfQoeUhbNf1Kv\nEUz4T6HHjYvsT/ByCPCQOCFiXzFUYSTa0zGePaxmks3owiJuvjGzBHhxMZKe\ns283hudBzPtZc3y1SoOgnjyrlJ1nWXbWerKUy5S0bTKuj0pMkisd0DVU4Wu7\n+tnU9RYjNxAmtUqoMW+YLtnTdQ8bQLNw5ncCXxxe2J9EZhlziW/IX8dT0eT3\ngjNlH/TGnrieuoSciQojr9D1xMswh3lvi0LTnPu7PUpqOuY/+w9d2Ufeyn0r\nBDKH\r\n=gYeG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.388b042c7.0","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/density":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/elevation":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.388b042c7.0_1591192008180_0.8642229131845958","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/switch","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b84792c9d0cebb67234d38d9759a231afecf68be","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.cca1ca84d.0.tgz","fileCount":36,"integrity":"sha512-9DTPmE/uVGf7GO0ydgVjMf8JHoblJcuNs2yhCbubrLU2GtT9QjJFGA7fikdMy7sAGwyDpWH1jF47uCVBJK/fYg==","signatures":[{"sig":"MEYCIQDJK9eh5CknFHrp6gLqtYfwBjpadOc4inbl9O6Vf++4QAIhAN6RtUnb8u1dbQUBFwpmKis9v82zoKd3vv636LG1mooG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18nECRA9TVsSAnZWagAAi50P/0em0f+/PMqpHMDpMQWj\nv54WGUzb+cyCbwleVKsAO/tgLH6ekJ1DY7oP3BHEUMP190kfZqvokiX1jbAy\nzPbpGyqscG+KzXPZn1f5Rn8HBl4IVWrBxK773ZPlTzFQZaq5UELErtOYB0vK\n0nkRVQmFUR5mhHSOPPrnQLrqWvdmdSULCUj5DIU+krBvP1aAh8suN/U1RK4j\nB73KtOGtNlhByZInuALMaK2nsg4kHeDePFiu1oj61PxppBshNYegY8qgah3s\n+Yz6JGMKRIzFf9aLQB1uKX5SISFXgJ0JEHphJ5xjfZ8aMjs3eKE9K/6rS47n\nYWCCKkR0OUJTetL2NHjs7XyMp9b4rkYktgl4Rz9inpidmZnIFCQmX1rtCk/+\nbbpohsvF/kFJk3HMCbjoFm/sXEsMmtp+h0EYs6AdEyqfnUDeexEv+86PLKur\nXus8UeJX6aFAftz0tCiVCgg/L528OFggJka80nL1ecRj7gLNlf21ZX6wHfnb\nxOX9mmkF3gCyFXArrofAe9tZ7W3fvi0RuHMXySSIeWYLmc7mdOT/eQUBQBK0\nEyvar2cUyvn4C6nKkJLtlQNHr8j/FK8lIF3/R4d6xBKWEZH0vKODDy+uK6Qn\n7BBtavvXGEaSeHqRJSVIep0tPJpP7n52lDBlPNjvNDYXFLJTqckSFjBP2bf7\nmFmN\r\n=+Vcp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cca1ca84d.0","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/density":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/elevation":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.cca1ca84d.0_1591200196073_0.20809358316805704","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/switch","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"574fd1c0d18309467f97d85a5f012973f671b026","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":36,"integrity":"sha512-kQSC+xVbd7rMPZtrVgOSVLEuDWKj8dEd37oT/P3Z6VYYVu/8s+j3/MnVx6Mu0t8ah2LXJHRLqaRgH/uj4rushg==","signatures":[{"sig":"MEUCIEHsOQlvZJc85l9lP12FTBHN0fAzZFLrf//oT0dE2o5lAiEA1Q5VkT+17iybMdyUACs7KIbNdaxMRqzp8wNzOMGHbyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KtCRA9TVsSAnZWagAASF0P/36j0rwEGSGrrI86tpWY\nWrfeu1rmH8lerocqez3dYRDjNVafgi05VwQ8cjVa+TfIhc5NJi1FVsFY3WJf\nSzxJZtENOFE5dYFctOcoJBXlnBUhuYTNasS4+xSuhgvyKWV13liBKAP+NDOd\nYbaSvSxoNuF5tzJqm+tOqvMh6RyNNNcV16oCD+O1n4UGJoe0daiaTqzQkwbu\nfxPapQGZY5pqBhV3xNP3dOMymvzwi5ye1FRiVLJ1P56/ppfshBV0M2FH+2El\n21p+fozdlUmVHlu7xiI8n94WnuMs0ut0TWvrx0GlGw9/QHhLl6yu2IAe1luP\nW0DV5y6spKWP1BzW7Fcp3/gnwbVAbNobgMNYeIr613EoJW2Pmvh7PthStkDj\nOhXEXXJXE0MsdJNnnb3Ys9Xzjsr/P27tdqkIdlLgYw92g7nYqXK1SCYxvtiX\n2n5hJWCyVlpMFqkSw4V6A3MFBZak38hEIFSqFmNkpJXTCzZnXTqweCIIxQ2+\ncdXE4FRsAMmeagjRpNT++dHFSn47ScFnwvt+WS5SsR9phbiDbhqF0ROL8s61\nE495RkzDwqMsAIOBCGQO7e13AkMFdBKftFCTYcg0KzyeCus3rxMmU16HksNO\nef2VKLEygfoO5jYlIJ7SZO21fIKuimj5hx+Nityiyn1VZp5zInXRVyRsEPOr\nEz+Q\r\n=6IUz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9b0b5f2e0.0","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/density":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/elevation":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.9b0b5f2e0.0_1591210668562_0.31280346903452716","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/switch","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34b24ee5cb189eaadc50f54e4f45d3e2b9ea17da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.0a7895f4d.0.tgz","fileCount":36,"integrity":"sha512-DuA0QuUkTwrX0LrlOmIVon7j0+2r/Ql8tJ35Wm7hnMVkKAXqsrClNofcviG3YP2rgEyfk8j1QSfgwM6j/CHUWg==","signatures":[{"sig":"MEQCIEflRzUkXOF+qwo66z/9dvsg3XIU6wH/kbCiqFz/qqCRAiABxMnaYeluldbLpX8RZcdQBP6oABPczBWpik5wj6frrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BF3CRA9TVsSAnZWagAAzosP/i8p88UNIf7CLto22Ftx\nFpaH/9mFgcjAG1lMDEhDObLw39kOa8L2EpmYEeIFdaVXTiu6i0vPwmUmHSFY\nAj4DShAZuK+ZXZ44fgR6qunv/e+lCvKkLRrdxRcQTKQtUBkVWwMiecuZMQvb\ny3WivVO+l3968Xp4EORj3elSg1I61OfQO/EcMXvZRUQ4BrsnBpWhQeXwGHzs\nPK/0yRnMsjeoFJ0cOjWpNFFTFxRri9KBlsocZiAmQlWhiK35ei6BDOQ/DvBG\n61IMqiE1mq9fUTmUmOsm9L0fiRBFRU1kjBS/ADrtMJIwbMdaOjOpAPAzpeCQ\n0cmY1iMS9SpZb7/8VGFieydPmrZOUouJ/izohkgn//4QNUdCJ4n4YZwFRirQ\nxxML4DWeJah7oZ6JBRoFeD9CkZVEgUvk8xgSBZcEj9ygUVd/rj/+tax4N6Hh\nznxPwgqsW5snO0Q/8icbvINXvEgk4FGMQ7zNl3Bwg/L/IgfgKPD9hSMlv9u3\nx0LR8jTWd5RIMKe11kZhHZrzmikShk6uU+u2fMLJSGJfXAtLwWPTHhEoWHrs\nFVekfu8isDSQQIdXucnZ89WPY+VtbrUWH2IIKcPq8Hm/wy/a0u4kUwD7psA7\nc8xq+AjMl8v0q5XJvyMQ4w6cYsxJRAtw+62UTwHTpB3I4rVw3QhT4C5cx4/H\nZna4\r\n=rosi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a7895f4d.0","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/density":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/elevation":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.0a7895f4d.0_1591218550933_0.20518011959953797","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/switch","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39e907fb4f0b992fcca0b8d4dea3a96e89971164","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.7461aad68.0.tgz","fileCount":36,"integrity":"sha512-xnurcsEOLHJAtB2JjWS28iV1AKZKvkmdaKcjVoJouh1emq5H0WWakVb9ACZ9oKuGaP3lMQJASo/EGQ+PYSwmfw==","signatures":[{"sig":"MEUCIQDOOFfRK5lpETvsCzyCjulwW6TEQvITwbxZ10oOoEialwIgNZDTjzJfnwc/VFnYj9hC0tiZY3VrMid1gqusVqsLGnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBLCRA9TVsSAnZWagAA9GEQAJz0a87tmfOoUQ15Okd6\nx+WIN6ocwMwD3r6yC5eU5lhwhES69KIID+zgPQ/px8V7GpeX7uRfCGMjq9ok\ncFajfSYXaK8ztfnFVZB+y4+5f1LUHALbREZaUepmP6CkdIperUkR+wKZVaRe\nbiFF1nkXG4sEQAqoe5wgsZg7MXHMOIfuk4nP+BoQn5heLqO4zAFUV9EVfXun\nBTSYChp2iMNY4+ZUcdeELZg+vx9Z95A0aZxI5b0wHvXOqkb5/B15ryMu4uWe\ngry+DNNnN/EYkoBbCr4l4icPyVyNAkEeE4943WwcBnqvJRVDW8G4KobCtUha\nzT6f4aEVsenEKZJ926z9kDNZxcbrYIpXl2GZ/+gdYi0SdwVjzS0mLiLQK6x5\nmS9LPzIMzKyOvWAEsj3MJFluFa+2Nkl0XhqLoNvgfFbBaP+GLAh/1ZCPPR5F\nKJ2qpa4HihqHkvROKNMREI6Bo907IbInYfJqCjmEBcfgdBGn1h4iBgysmxmR\n3Mqrq7vL4urau2YhUQB+fZo0tYdVETkRse3B415WXZbyegR/JpS/HIxDIOMp\na6WM3JwEBWIZs7XpfI3c3o2NJNUTEyWEmi60B+V3o7s6aNynH+4oQA7Ehjka\nfWed6zn4nKsLCBiWLU6O1OpJy2qpDSitfIKWcTayHt9uUzz64cVQD07K56MC\nHVa+\r\n=rDgI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7461aad68.0","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/density":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/elevation":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.7461aad68.0_1591222347433_0.7883884324257575","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/switch","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8204bacf89eb2d510fdae03fa892f2553912a5e9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":36,"integrity":"sha512-4ja1arZc5u4bFC7crOMW/2NqPC27CViV663mpjB7M90XZcBK8e+83TcQ51t9BbSS6KynTQUPUxxnc7/vJ4d5VQ==","signatures":[{"sig":"MEYCIQDvRDMN2oKxuNQBw81A4mTQX13jS4d0EyxihOLdLtUe9wIhAPlbqUmeaGQU/yP7kV9gnnKBtncp8fRhOE0onVM2s/96","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQnCRA9TVsSAnZWagAAWgEP/Az310mpdfIbfYUgIW6o\n49NGXHBModITd4K3Jcu7fRObvQonz9EG4vAVU288GxgPvWHrwJ0vNz+gpzSw\nH7k3S8Tb6WM42p2jQJFXsWAVNxkZrCIw2soNaO/03iW+CdS5Q1LwqTKx1lsu\nBAgydFxJz5a9iygIw3RQzm3VqtsDoz6Tjzvb7JX2aQth28kh8Gwh/gCNvq9p\nIvyzrJt8K7PLmmTpykRHbFoiHkXSWmqw3HK0hITx793K/l/RFNnIbw4oKBcU\nBb3uDGg5hn/7l+Ut316jn60GpzSyLDb2VnID6TRl+28yC1IdcTlgpxJddkRi\nEOIDyqilYdHNzp4SGTFCphR/vIHxPUqOsudWqcJZILNHmCxGgA+Oq0hD6MHL\nVLXLE6Afz+mpo639X/YeCnxywgCC7tLnFdGZgF+HhLxNGvKDarIcVSslgqLK\nVdfOjIxlIiVwocZGfR9U4lx/G3JUouG44GBitX2NXyX75vhDWx9xdObuhzVn\n10OhFf8PizAiMssby/4U7SAw+oNCEWMZrvnA/ov/37Dw/cU+5mXdDziUTjQy\nyeNnIrWlrtvc5SIn2PQq9FUuscao79zOV+YlfGeMOybD58joCE92wjBAMenN\n8IbYyA79HZpmuTpBDzPLq+DMPKLdf9KgsMsznzIMsPE1HIlNALjLgyyGpDtO\nJ4uJ\r\n=pZ2X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0dc2b5c4.0","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/density":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/elevation":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.a0dc2b5c4.0_1591305252754_0.6733163145575352","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/switch","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86c347c5005934128275b5a3ab3ca168d6dd762a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.2b420c5b3.0.tgz","fileCount":36,"integrity":"sha512-NjORrMhxCIzSc3gZtq+xl1nf+Bpwy5+knZmk/wJLKw7d54MTi37w3DYMSkoCbjdhFrNYpQHAr1dqifjeTCQBnA==","signatures":[{"sig":"MEYCIQCukfHO3i9aekbgEkiizE5Odmpmb32aHlR9KuB08xnLkwIhAOsDsLa3TO2Pw1ODLRcRKUbSdBEZrqkE7o/rFteVAHvY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPyCRA9TVsSAnZWagAAe/AP/iuMP7iQxQ6a9mQAYVwW\nHewTL2d7v+c1ABpx9UrhSyU0ev3r7Y0nxwNSpJlJfRT8nuVSbBaavxfJkE/7\nq8PRVgowFcUmeZ4cOKLpk60Dsuu/nlKBTG2mnBStGNrYPZJIanLdvdzd9UT8\nPskkbyRCVPTkg6PAUL8NIuLc8Uk6sFbFz+44csAz22pf7Q53lnQAZ+kizQs7\nxoYY5U5V3AUWHWDvm0MhbpfkYzzE0gyndS6JLkmQeiEpuhNcd+4POPuKvT2T\npQQQr8W94c7iYtQGcTK3WrCqyyxSDje7WUsxSuD40ZSYpr+kyHn1k57AmizP\nuT69hijiQCJeW1bPdIrN9kZQ+ohdERKAX+mIbobGhDq29q+YBAV0ffpuH01u\noG1m/TYtUEwoTm966tgjFDLxuGkaom4fPhhdkeSo0RHfoH9/0MEnkjChfHoM\nnPD5pipdVYHmdJ2kt6cPGTNQ/F/7OoP4snIrGdSU1xNMXwN2rsEPy/L43LQx\ncMbc4mujjvo0JA/fVrzo4/72C6WGTZcIJHtuqQbELdNnYeVLL1Xg5vAYM0JY\nNjDNtPXQJHkYrrFrJxTSCPg9T5pL/ltctHCK0UyGoB2V1SYD3yLN+64t22dc\n0WJImuoUlcxJZfz4LjJHe6lGLtoNbVKQBukJJTG3hLJk3+XT288ZrYA9TMpZ\ndMZR\r\n=d61B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2b420c5b3.0","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/density":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/elevation":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.2b420c5b3.0_1591632882181_0.7550081713507966","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/switch","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cb99a9ceaf0ff00f43b3fdfeb97c5b942563ef7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8fa22aacc.0.tgz","fileCount":36,"integrity":"sha512-ncykLZm48i5PgUeiuDiS5CDOWszEn/TeTEikPb61yrCBaq8fJ1fUB1yaYms7HtNDm6HfAHttyHcCdj/kymhjTQ==","signatures":[{"sig":"MEQCIHvE/VU1apErZLruNFGQZAJJK61AFCCHgVdz1u9qIcS1AiAqZ9gxRT6g4r2aITkYnvpPCKPKt68fDgbPSJ71qN82Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n24CRA9TVsSAnZWagAAp+EP/2I983DHVdQUbkh7swMx\nfCKvbJ2fQgmNQCTfGd18ix/h2ZMtt5vxMIrDvW+u9ij1/knG6rXfBr1ka+Ry\n3dAzPlHMYPHDKsgQfuiOIOg896kQnJBzRjiw6OEg1Gbrov4ybJYmf/LocOpk\nSOmMm4VzDI1ZfpXU8+vo+F1wGiBAS4QvacxnzWHIBqwJph+0xEd25ikpHAXS\nuFR0I8gDwYdiGy4LA0NBS++xBuY+md06vkq7POKdn6407Uie/U6aTy4exsFq\nzT4chwyL8GYZvSYbdOINtEB7bCSymvwoPRDGI7V3jBIXGtAYUljWH8PKAoI/\nVLBM9RVUllHWqdoSIftuMaFloU4muj9xVR8eYrMxaXV/j8rYnjO+G3kXQBHs\n+Y/6tmL4ZnEX33CsuNKMPsAYNr06+uMfHfjQ8zL7cq/nY2FBih9hVzvOF3dk\nKEy7KqHoWanKkgU7D1Q7yAvngpu99XDAC/S/ZgwrfNUC2h7Ju0BeqSuNJ3LQ\nONStFlJpe8/n2d5xPp/djgxrIfy0UBtnLZITY9W9DpYLZTzgPkUizcV5C1s3\ne5cHHpSw/lTfS6YLMhmN3DYs1q++0H9UKemM9s0UXJvxaF+2Gh2vd4aaxKCx\nWlF3lKx72S3eQCvV+1KdzjBiQoGV2uFU8T/Z6YPTIROqhJ1zf/enPn5cIWoZ\nbYo5\r\n=Dwu4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8fa22aacc.0","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/density":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/elevation":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8fa22aacc.0_1591639479700_0.1789509105510061","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/switch","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de24e22167bdfdb03f26c6a7aa40bf8578b65fcf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":36,"integrity":"sha512-KgtYv0ADEl0otA6KVGkm2dpsJvpjcwClu9AdC76N8z9410OVEjdaaUAXVSBelyUitE/vFlN5oh5e81Rb0NX6bw==","signatures":[{"sig":"MEQCIA3FlUFHeHkZ5g5u+HoPU1hugBlcBzNoKmEqtWhGXLYOAiAPlrINmMVBC+GkxXYWmBKFw9DZFj1oiNDbw/UNhzv91A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocNCRA9TVsSAnZWagAATOMP+gOrDbvNqfi5+VkOlZYO\ngSRCGIOzBvJ7GENZbEIeN0Y7IaiNqHLtvVQH7CYyTA7umWZ2czkBvWRLxq9t\nZeXSlgnlpc77I3zmSHQMH/uw3O9PsrdFANHTn8uxpjxqiRgegbG2QQ+A53xC\nnuon9YG0CGaX1reEpxy0z/LcDgO4SqG+idivXO/uaq12UmupizO62mrTsTip\n3zxDl0MPfqwdGcJZ9hIv+kbNcYBNSCzMi4kF2+HiPg4MKbSCOKBslCKBqQlf\nt7MXI/nGqFhr8B178HwsWtzXdyWAyKxQRfe4oC/Z4pxJQv8TKzxxFo4COP7P\nMDWu1oF5dvi5LW+XqVusiM+ZU7oTLwXuGZ2z3Ovl3LrVsYMQKD4wrmnRI92m\nLlrn75rQtL/l0FzUxvhfTGx/lQj4Swc/BN5G1sYDJa0Sz8anU3ArawdEkrmS\nPh+ePztqvtQXBOGFI/EmyUBaUWUdXaq5gWr4kUYwcWM73rcmBv76kp/Cifh5\nK5//KbH7MLd6yABjTuLDFQK0vni4SvzrFms45dGQ8Lp7HUK1Orcc67ImqA5v\nU3d5SO1wFGCkl9eUI3Fbd/pp9Y5bRDOUHjmIIHbgCSnOJCpGddatyBF03uN2\n15Z+dGbihmPabWEKJU2Tr2ShEjSQBGBU9ToAX1MOrlqqKlhzZli4W0zngrp2\nUZvg\r\n=FQsS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.21c4e4ed8.0","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/density":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/elevation":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.21c4e4ed8.0_1591641869208_0.4258237871918422","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/switch","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fb3a283b244a046e25c23396bda1b2a75fed3b5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.dfde46516.0.tgz","fileCount":36,"integrity":"sha512-mm41lQstVMgta3ZX8ADWwhrxOxqA7zQglNKrzBYIhHlSJrn66Yy5f8qlioECKXRQrqMkraqfnQLiStt2gZ+lvw==","signatures":[{"sig":"MEQCIFvKbSsDoiQSuT+ZsRnSnUdV6oMiUILm6sEPdurqPXL3AiAGqbbaQ5uVv4XTyF9hzWqv9j1Wpv+fcwD5wTSu6iZsWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSRCRA9TVsSAnZWagAAqtYP+QD+shfqp4lDnGRn9NM/\nddmw+YzycohPNm067zxNppCTbuTzwTHEdh7uRkxvKr3Owp8UA8B5tbJamjJ8\nFTSCvLM6je67/64ypjp9bb1taMF0363NiiULvYAMI3cXo/svmJC+xq/PqRB3\n5bdqNI6Y9omZYNO+FhiTD+hZJOFg/UNwMOgvD+ONkkhhgpEBrzXUFHYlBdhZ\nWJYlw5Sa98yNlbzVwsASQKmZuKQB0lFDhdNG+n3QLmxz0x5So6xNyBGZcY+w\nG/j3DvzjB9qu9E1izllL9V2CV7PhVxFnMozIwqhfJehfwo4S2TS95CP3LczJ\nwnhQB2O1+o6Rt5jVKumjFnOzeKQElbQH+hMZfpEvpgJf02xMQ2CoaOWNPVY9\nD6ysLLCcgV5rEpsjy3ONjm+jHa6wfj3F84alr9Hqm8TlYueSfGFJg19JNhyT\nLNkbdVFwVf+8TKS4sarBjy0PvAo8iOJ5SkF/UEvR4z/KXEOXBaR1wGLzWYv3\nASWaZK7Ng3rlf+bSYQU8wVU5OsyHF6B+F/l5YK0WQQdnRU0GJV0tIlADbFSR\n+dgvjy77gSVzUVkgFzONfRO56GXblAKuxcgr+50FQnmB3GpYrlzlX2g6imfd\nwqMWszt7unQFNnt4nzFFoe8K0BeO9rLKlCxv6dvVb4hz+l+YFETjrVxROmBo\neCu3\r\n=7kO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.dfde46516.0","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/density":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/elevation":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.dfde46516.0_1591645329028_0.3757306061095007","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/switch","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ca5d40bb64590f26ccda5e54c181e78f48c484","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.05cc5c206.0.tgz","fileCount":36,"integrity":"sha512-YEEZfyHERyXa+KzuU1Ks3/MM9Y+ZNjeoCsAb5ZiY/IRSCBSxKBE7S7QZW9eGSHWcK7Ku7vbiX53QBZj8166vWQ==","signatures":[{"sig":"MEUCIQDbawnEbw4xTFIN+zoHzTAKOuWL3ilotkdX8m968AxDKgIgI1a9GGywaoxDR9jKbmwNGGNN+7NY5YxvHaqTgIh9CT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYcCRA9TVsSAnZWagAA2fEP/RGxOCroqJkltKl4TLXZ\nHujZeq9OiE75H7nxHzaNJJO9Gu74E7KZhIYVwWKfbQFYEmE9kKFQHHeC4V7l\nlZbj1oYlnda33znrVl+P5QPLcP25OzxrmAskBNGphK+RcwaRMbny3x90SEla\nwx94OTx0+TNVMS1HEnb3dyUerSEy2JTb+ZXWGQUQV4UCB8U4N+2tu656TW5L\nm9VKv1A8GQTWfia3mPHbFrGenT6Wn/pwgMnLgmPEBZGhKUzf55zNshyBpsa2\nnDrDid1QOvMBz5yU5w+sGSU8wGwTpRu2lGmsmg5de9O8VOrSZEDZb93MZ2/1\nEfPAaZvkLPL+RH1gsDhZS//aViqrL7JEAmQH+LIJm+aaSWFa8gc9icc38oEf\n6a0t1+scFvmb1kEe9o3hbO4FsQkEYAi4IAGi0iQXndjapQOGYI0C3OHBrWVn\ndNi1pA9p3g0ZSZ+g4hKXP8pJ9xYmpDU5GHZehl+I4pxqiqF5hqbhZbeXG0An\n79tDlDCAaJfKaL0TaJvTvLHljm6cvm0kjaxmya72QwQRvhiSQNPgCvzshnkY\nSEn2HtOlWrrnI3CDjjD+fhf2YalRvMSi0oubo9QctfIqs/OaBunIyDXl+lAB\n2PThlQ88KbB1xKhY57lGBfSDeQ8+n6M3WuqKWKMu2vbUo2OVpMW9N1dmeCzM\nWbMi\r\n=luAo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.05cc5c206.0","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/density":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/elevation":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.05cc5c206.0_1591649820145_0.47376012907586884","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/switch","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cd1ab95e7e70bbee4e7ece413dc0916199032a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.3ee488f1c.0.tgz","fileCount":36,"integrity":"sha512-R9Vny4t5hV/ejFBBPACNcX5MveFy3oSExGLN1Xle9pWnHEqKmUufyBkIy2pj80WId/8tFu3oMr9Ct0omgU54sw==","signatures":[{"sig":"MEUCIGUOpJ+UxTi34500gEHl4qZZY5DKTcaPy/elOlyLbBsOAiEAkCPZKSkqmMPuCA4dymacZ69b8kp+R/vvDlRcgPvTTiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KVCRA9TVsSAnZWagAAAZoP/20aV/aBMUox0StkBdra\nUsHfoHRytc3fxbaIH2xO0VoCkEQu2LNgUh0WVD0HABg3PhENmY01bZyzu/SP\nSxbd3PZHgaYNW0gGFtinhhJa+tLvf7CM7b2id333S0Df7TenshLnJfgpjwY8\nDlUMvrNuqdd8CQA5+FX3ZNk2aiJaEVFIP7/Y0/V4FgK+cpbPpinu2mOkB9qW\ne+aCldB/+G7fF6YhsSq5RPAiFf088DWBQ0OSEI5jkePtbH8VZY4Cuc0+pgbd\nat9Bwgb3jBcbcI4baJF+Hin/ZGNeMd8salnliixWClPQIhEZgD1rn1GZWLmh\nND3DQ4ZOzJ8FajO5seQqMBAvTeE1BTarCsrs+uJhBlqAc/KSDcvz/Rl6Wl3u\n8/iW6CzjtSe8Om7gng/Av0iHhia49L6C5ydeioq6AtGGEbeQNB3PSjYRCMH2\ndsVpQabRdazSRVq+O1fhQ/7MsqKuXBHGbY1j9hD9OohL/9xGj82WstNQQr4l\n21DD9nByFnfwiXBd/sIq5DFfquOfervll4FJhU7BE+UIUHN1jZlm3PtiKaMA\nFHxOKDjJ5X9n8k5Z4S+IO7m6zQcU3fTllaK3NTmCnC3X8Hx5COqLo66KpFzg\naChGpXccIFrL46y35k3J4dZEDfB3AvsSLkCr8rvlrQdC2dKcWyBFxbrR1IDv\n1/n0\r\n=k5TI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3ee488f1c.0","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/density":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/elevation":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.3ee488f1c.0_1591714452880_0.4902645526997056","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/switch","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b000d7c764cb7a47d01e556fcb3e3449d2e84c0c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.b83d720ee.0.tgz","fileCount":36,"integrity":"sha512-UIheL2qF75s/8bCaczmli92X0IclLHmrlOIlfJZsfOVjyKQO4uKvoAHYE602FOEeUD+G0jUO94nk+nKqjCtiFg==","signatures":[{"sig":"MEQCICRDyIXGEDSCyL+i67frxCkpHa8B17OkCIdL/pH7aVHlAiBpYAxUM9k5io5N+jn++YD/mGI/gkvEyEAB8s+Jq+9/ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":402414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38Y8CRA9TVsSAnZWagAAvssP+wcjpKpQHLkaq7KqqCfz\nvtyreQ7Ue7OtvkVHDKiCDlPJw09osZx74ZatW4U2eZ59fUCUWfvqiUCNzZC8\njgRKUrVvcGpTdslCxu9iDU/h5aTzxr/n1y53Ta5fC5FBVUQ9vIP4Edi98ryr\nXfGf+dLf81wE8ht3K6CvwTG/NljY+Q6RwAt22N//L8jCb614YKf++li9E4P/\nsVctofCLbJwMu9fXb4Ddte6d55v4Y1FrF3krfdD+N+TI/0wJLKbC4dC99rwc\n91YNTlMOptMXsRFzZYAWlhWfDUo+aziA9u7F0LsUzuNIEK2nX+HS67AppsD+\nNO1VyqM4V1W7k4m8FvmBnaKed2zNiotq1De6EzP+lwoSJ2XJUTuSHNSPpMJc\nBWapCLTjx6I2/lrSt+wsHO7k5efMDeDpDAyFEk0EJrDCxhbx5xxMj66VfI6N\noyXpgb2Hu36LGvgnPdULhLUP1QLSSzwPdSadN79qG5raFPvFC1ybxwqwK0zK\nWAB4B1Pfv5hcaZHplSOncwNTTzUq7RQysXEgJSzBTmT5S1q3WrSBIu/DnSCr\nDj/r3Aw1y1Lte1ZQuzPwwKUXO79t7LJL3N+pNGgiilOJxfelEX5sM0lidEW1\nCJz4gY1WlLvpPRL9CEqPiknyAsnFyB7ujAFBUV+I3iR1m0zi6TbOLLW6V0LR\n0FrW\r\n=wdmv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83d720ee.0","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/density":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/elevation":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.b83d720ee.0_1591723579727_0.8362956552541876","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/switch","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e594519382af462c50a217b54dc54d9e7fc4388e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.afb1c11a9.0.tgz","fileCount":36,"integrity":"sha512-vScZ2yCi9Jzbapt8hQpUkL/9Q/tIsGN8llsUO1PWo+/FKbkLOu0RCDdspMfDsSJIdHW4JkFzEVlJCsdZCm2tdQ==","signatures":[{"sig":"MEUCIQDQg6ACAZcptzY/CPoUqhTDFxxBYe9dSY3AKHcZRu7nOwIgS45PNQnpoE4mYWleIQC56wh0LYqFh1yiggfQfKiagVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4kCRA9TVsSAnZWagAAk60P/RpHRERkFQEt5b5E3sU1\nJm78twiQzGKId85hQ6iydMHQ4bDedTSiSSn+hRFMXYueXfUd5w931pL9JSIU\nAzUOAWXy5OJOPCBhAQ7GDbd3XPLvZ1nsUoEXgcL9yZ9eJJ8xggX6lvh+mRYT\ntndzSHkny6NJh+gDUxWkq+fFd99uN/6+pdUI4C6hGwAJirQVuj0/9Mui/4+T\nw3kyx/06YZqlTPs7QJQIl3A+s+i4cPvq/666MsNsw19nbIEK/ZN7wgt+o3Vf\ncAMWcN8kLJrITp62Ez+iOdxeRMytYiW2PrFb45aVqUkez1RaP4ySxHHGX6uj\nyHIMO2LVV3l1SKAG4zLTTEdHxTV+T70RwifsNf/HahAzZj2oIP8ThDF4r5Zq\n+ul7jsHakXUTos6gWONBaHkMr4zD7HUHzKpouBSjLPWN+Pmd1yuOxnI7FObv\nmhZ80C5jRtfq2IFDKVkPp2Gc/4cMXad7JJAAnkYqFBsFB6AeYOCX49Dbsg66\noSEavtjZAuc7tjQ3dqDBZHfmTiufTJcZgq3B+gK+inmbR9R6Pe4Ec3zxUoX9\nqxQwAmy/k3T4RM+0N8eu+lOnlst+67IwbwM5H9MpM0O6JWpDQnQ1dLJ4qNIF\n/R7jiNW9r9ICBkIlVIxwPcVE2aq110g3njNxeRD0pa4DqBZ8xkk0PN6ocglA\nzC3j\r\n=kIny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.afb1c11a9.0","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/density":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/elevation":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.afb1c11a9.0_1591733795874_0.7898698070818657","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/switch","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfb1829dfa125a66fc47201bc0d8c97daf113e04","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.39e6f71e2.0.tgz","fileCount":36,"integrity":"sha512-r43roq6jeGFet3o9hEN0XOvIKvomglTyu8FWMfuJrsqyCcGK4GgyubW1YSxjzPKOOv71hMlUIfLC7QMf+Uf/KA==","signatures":[{"sig":"MEQCIFdhUoeiRpNM+DyUXwTZvObOB269/IiAB8LHTi2W+yLvAiBVacRXNtGdWN2klsammmRyobpS+186PG9ZfpaNqQE0Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3CCRA9TVsSAnZWagAAyM0QAIe4dCFh5Kkz+g5EFU9k\nuRUWq2HJ7j+E8BDNuvQrGB2C6hI/TOMiYuumicA6pv6ARFnGUdCzUxhFtB5Y\nA0HXkKB1sq7WGSTQJ9HV8jKenLncHv89HbYE6Ad5fiS8dlRr4us+2rsL4Tvo\ndPE4m+01FEhY3SMqoHAVOkg0AmUkANxBRFOXrpb4BZF5S/QbRr+bZTdk+PDq\nCMKRNL/T7WEpNQIdQL181Zq6XAVb3pLeQKyTub6/9PKutd/kQpDeuIQuDZSN\nHJ0h0AanW65El2pTIwOSOQuJtcB1mH+GuBHDHdP4WVy3SnX7KhrFRPDAoXPe\nyVZMyFy73saycdxCb/lFts/x+J6E2111lxp61DyXSjUxEPiRG3ZxoOhjShPC\nfaGTq5LoadrVGzZNkXIWu85gWEb722C+vucNUyYxqRIjLHEBTzBxF5U2+BNh\nvznSwWO5tsj2NJHhRqL1Tb5MVUKC/ZcWUelVVBUz1L3kgsbji6eVz3mfFE3g\nYAX3A4awcakZoSuXCGoJGgk8whrE1HDlrbdQx8y3bBrcU/jc0sQDvGQloZ4i\ngKB6Z1OkPs+CzYMeGocnJJZElX3exRP/9t9qHpjtA+G/9Qn37QDwIzMZsJaM\nlc3/anuTfgZpb/HRYTzBI86yCSvpso8xeCcdfp25Hom0f4XEkKHsL126130v\nzIv5\r\n=NUIT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39e6f71e2.0","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/density":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/elevation":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.39e6f71e2.0_1591745986067_0.23386915704273847","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/switch","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3f1378bf446aa910e77196da3cb518d8a5fea82","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":36,"integrity":"sha512-Mj3FJbgZR6ji0Wbgq5WPgd9hz3WjEzT/jkPNfoKntSsYZwCAaBQAaRmPG2QYNrfTTKKFHYF9QBhnAVt5k5vLxQ==","signatures":[{"sig":"MEQCICnFTaa3NS18MrsTZ+VRFivIzwD6e5HEQbLdt3U2RwHWAiBxShNl6Ctygl5cATXduDOjC2YBXUqiijyGWM4WlC0/Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m3/CRA9TVsSAnZWagAAE4IP/ivthkOv8+ItkaozAJ9s\nmKUUMOyWXgHr06nWsEoXVYmtToKLghsGJu29NWtyglFKwQpKwz30q4oEXadm\n/vahBI2NHzjh3yrbtTSSJbedN7H47C78+ZvHDgkMEG7zd0wspEsSAhsrfei/\neHTS11QH7hAPMKzhFH+ERQqwi4rUt53q13QfG5wO9aGOge9NVGrLkZ2IP9K4\nBad9jmrahII5HybyhqA5eOSpZrwt2gRPMKYPIhHwJmq/hk4HJpZAnrvqEJht\nl9ogmIeP0XHnudTbrjQPBYws9/+F5qSLLAu8MNWxPkNCjsGSlKbZr90JN4eE\nGeLJQPM2lEjVqSJhedLUyzLlPYIgO2vNFrnqSuxzR2fDxmsHe3XjOSwzt2Fj\nIabOIrD212tgqVILhBFPt9Izkjn/BWxT109f9ikuVCBNdWG8rrzI1Yi0JiEJ\nyOLPfSKqLrVjarW5q+1gd0WQ6Gl890OCP9BKUNGduTbSEy3oExEPp2um07FE\nOQiQnb/TDG4Nx9X2pTuDudN/F0diz1O9phOUi48TP/67Yf+213/icNT68n9p\nkOc/jQxyuHVOAoF0ugPhCOLQRZbxs/tfTyezuaYoL8T+tv3V/Qim+mSu18EL\nXRih50Ei+dXzaz1yKOq8Dj78PIDZ5gfjJl9NRBHGjfb+zplgIHmgvIB+UQJ2\nbVcA\r\n=aK45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d4c66dc7d.0","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/density":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/elevation":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.d4c66dc7d.0_1591897598449_0.09065423011011275","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/switch","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47ff73c2d13a1960b141c593dcd2a0ba06a775ef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.be4a19f9f.0.tgz","fileCount":36,"integrity":"sha512-LOozQrZUFfGXrRUEEi/E/eJfhB+qWkekPCs9Wg3zqZOglA2A+dClPNmFUfFwa0mTmKSbi6q+6YJXKLD2Ds0CHg==","signatures":[{"sig":"MEUCIQDBOBSHbTZ4CEj+cDwqn2pAaC79HLw5T3iI5B70pVgpeQIgaxNGo6eYGZpysbCJTDgq6QwO2dD66kqWmPf/seJzmDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvgCRA9TVsSAnZWagAAQAQP/RLeiEMFMUJn/yTNp2CO\nuTVR7NBBQjBNVH0y5FaZL3Ux8Gn5JBxUTWGPbhHq0YiMiXC4JaEZ/cQ0JnUD\nTH4lmssjPnPCjN+3xLAQgoa2JzkWot1epVgt3e07kknx+Aba+4+HEhRgh5al\nwpX9/yiZlutc7rCkWmgvl1Ts5scpys3/2/mRU+tmiaoKs4BnKET98wfCFjzx\nKOQwORpraQKiAVhUJduM4TVLKBTflO8rXCxiDvjdP25TQ5owEDoorwP+jGki\ntx4VxNGj/fwzt7UfFZvnHTexYgA+mZpCab/ionJpSGZ6I8bIefGFk3pKV+q7\nOZnF+WsuzdwTjhERltG2Cg3ZqR0LYePD3xseR64Zg1aCwAdwfYbaR13IhrL2\nGKs7ZsX41iO3feXATpiAHgZG2/i8I8LlovTkSOwqGpeMHBAyS+NzjXawvBjT\nSR1UX6UMECg3xhHuh+ilmjXdO6fU6YTfuL4Y1Bii/2TiNcc6IlatRy1fmmEY\nbbj8Q5AXBB8RnwJjB2ys5d4nY9/KhUw0ciQEcAfYen9hHmSBG77pMfWkcQHZ\nDzcLVl+g7DOdENH7M9okImDMKZ0bxsPTAYNrEK6LklOyvLXAFIqKHlkDoFTg\nq5FPBXv4TmNGgulqahiRWXyIdCayeWWfiy5NidtGiS3ji0d0VIoW/TNKRbK6\nZPd0\r\n=iRqy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.be4a19f9f.0","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/density":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/elevation":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.be4a19f9f.0_1591942111868_0.2900663679460518","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/switch","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ee524c7fa4876587f51acfbadd7d41529c68d20","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.a6ac8f629.0.tgz","fileCount":36,"integrity":"sha512-qHCoS/x1BJEiVUMn8aBgwDXRa56H8Rcp8elEx6v153zKCrISNvyB3fOCmLGYDCqF+ueu7dDTCjSAyF3vQjRTvg==","signatures":[{"sig":"MEQCIFP/Hu5+rcrzfHA3R/47TsxAoQw+fT3cyd5BmoQ4WSOzAiBdXH4J+n2HMpl+b4rvL54eh2Dv/Mp6qKKD+7B9Q0fGfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+iJCRA9TVsSAnZWagAAkZwQAKBsASScGmf75GxtU4bf\nHbYT+q1tKTUpaCfKgdWWeOSCnJc7jJxJkTPCNYO87k6HqBjUiAjpWRua/3eG\n7h2CiN02QMPzTCqq/symg5S3YImgVAWvCPWrlPqN0yvQxyub4tEy9XlM8AQR\nHzOY5xYU6GXwg+I+AMffiIlrbb9+zznNjKZ4YvZyBJESFYqLua1nSzI6KQE0\nRMYh/PvxQcBwmEO2XoVm0qz8hYGEMB+b4fJa8jweTNaCJtGeTVhRU7ONecj9\na19W+rB7Ek9OqGTdziysFnpe1VEKEa357uKlTR+RDEc9kJBQizx1SvNClnon\nImy/38LLkzLj4ufIOcoYgj8zpKtQPSZmnj6xJdEv1ejKQWWTgdab1ZPZCWsh\nJofv/piP1CCBG5tUgxk5ofeu6oC6UNKuP+sY9eIxdLj3ia2H0s0N3hoeXu45\nztHq1LwZQwY0n2f0WL13Ay5F5xZIT4KOp0dVOplDbbDrcLEHaejE1cZiZHj/\nouxAimuZTE9/Qk6yU0uOsnteiqKAg50KIdQYO5aPpgSpQI8Q3e+RJBvnlGp4\nw/5S0eMvULZF/XvVKOP6EzNvS21WUgMaJTeJnEjIgeeT+A8d6ddwEVifGsYV\naoeiEK9IZtthfNMcQhGUaqxf9I9TwORYv110DZmkVQm5Vg9Hyy98PwgoZ5sv\novnQ\r\n=UlFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a6ac8f629.0","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/density":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/elevation":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.a6ac8f629.0_1592256649326_0.5398585891891692","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/switch","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"678aa470716d5ea14f4b59d54c677dd2792b5f91","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.9833dc287.0.tgz","fileCount":36,"integrity":"sha512-tgxcTQL5f6sovnucncynoGWyMDdPWbGuel1yh00+W7m1z/GW09p6w540snANm6n2KLGWYWcBHPKTwmwJsSdvSw==","signatures":[{"sig":"MEYCIQCPfYrmrGFYT8d+XYBVOE7pcI7lmlmxg57r7qJRt+cB3QIhAMDFOXJXwhg7wucixh4z0BhDb1IlexWsgKJeXc6H5WPE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJLCRA9TVsSAnZWagAAkPkP/17GJ8uIq68HPTTPp17w\n6XWfmca6/uFvJN6uFgFK32QslRP8H5QTv2xhOUdYE+uHIfXNO5g+hjWtnLbU\nyJDdzcQlVX+YC4X0K6wbNKGArr1ngUF0plR43WEWEzSVTD+K4Z8Z29+5uF8X\nBlHhx57TY44t1P31I/7WiFC/atJDcVeYcKNY6jTo1htJnNQxihXkrKfKw0Ej\n+iXn5KbbhTkNXmDUR29y4Qc2cadkabY7Iz4CgHhGp4NcypFjM7zQjSXwoaWc\nzOcSdNmI5h5xPX0daJoNo6+SObFsxwRn3K5V6X21bJMAFGxDjsvJL/sZXF/c\nbbGe5VNQHfV5xbUErXJa2FRnSfAZkYuwc0kd8Ex5ddSCgdKcMo6oE8LLwFvW\nIjbm3QKTJoQi4Rg9YRRprlGtii2sOfigzZOsbeKjwI1f6ssuVInNUkdmoWm7\nwLeZXYu4Rt4B5iL19iV0yKQkqa+slTliSIWU1lAtpM2F0R5sm0BSd4a0iVQ1\nQU6lcMekIQUd6L+NX2Zv0YmsC7Wmb8jxbAvRuOJqPZmiEpUn/u+6euLkL7NQ\niAGDZAtLP1BP51AHna71xaBiERqtanjAeuiXGMYVH/eIqUfXV4PrtQwuax+Y\nYxDdAgFMfkDf8M2BNM9ByEbXrjThgAhd/F+fs+mMGLV1d5w+sb30mE+fVbfZ\nKK2N\r\n=NJr+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9833dc287.0","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/density":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/elevation":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.9833dc287.0_1592336971001_0.5295812934930915","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/switch","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4d8e2d46b8595ed9bd7a0ab055ef282b8c6a057","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.3aa33998e.0.tgz","fileCount":36,"integrity":"sha512-mQPwTZDn5oFqJi8BnP+1O7Do43fLDlsI2hNgNIECOZi271fkwb0R1PkG0M42CNXHMw+wkiaiv/wmZFCw6qf0WQ==","signatures":[{"sig":"MEQCIHlHO0gey2PBgv808bEXhO+OhG/mLfdNZvajDN1rwodNAiAV+f1WdIlSaG1u4K41gcD36GbMdMEPZV2etjGffGo5Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SnACRA9TVsSAnZWagAAloMP/3AqbHRVwrjDa28JeTwY\nF2dfQ7GXmL9K1TPhAUkn0gHr8GijLPEAg1hepFabVaKpla69HhNb0oKA9pEx\nyW/jEdnJZ0I5Xq8vKgHGlkJIJ03SgRTCjGNc1X2xDNz3iZxaPNhwOlKuUSCX\nacfK6KIOpuKbFbePCYYfeMEJA/gNNnoP7TnQLLBkUEOFqPRUn+cGy7F6WSs6\nbtwbTVt2p09SgEgdfXf572tWg/G1SAx8igGD0tkaSbOv+RDFUHm/MgNzCdG3\nyPDDa9wwewaudUzM4x9j7CopvgPNg+yByMjqn7+HPYRmG6RESmvHdX7XwAMs\nPBLBNPfzZLRh7jk3VFjeCuvGX8OX0fjfLhkpPKkGiWeoIlRX4/svmjVfNMqj\nCyV4Wp5NV6PlkN3G+T2eo3DdXwxYq1LRTWS3pocgnQr3Zye40UPbSW3DpoQw\n3xL3oTpTtT9ofdE2v6o1i7rs56c5OJuYDlaFoWnSl+flZXrf7JGE2DtbABNJ\nueg5vaGFIDWSH9SghJ6CcW6mrsvCvVpwTyI7eG21UN3hfjl/UP+8uKtBLxjp\nEyMbcHTYhW9sEseDFevDefGZNConTvJL5ckKBm62IV1Osaso6StIJcIhIzf9\n3ScwsfECoUqAn8q1r8d5t0/Ao9lf6vNnQX0MNe/e8uZWVuPXV7QYSECcv93Z\niRuK\r\n=My6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3aa33998e.0","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/density":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/elevation":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.3aa33998e.0_1592338879997_0.6337533547942227","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/switch","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60b9b64f8aae48d2f46f15d6deb455d908d26bac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.d2b54d183.0.tgz","fileCount":36,"integrity":"sha512-XN23ScpxPye7cKkfhqCh1TeNS2He4ooRY2hgiBR8Y41mnBTBf+wW0cxJgVIRGLAPetZR0kTbaDCxEXuwOCEVMA==","signatures":[{"sig":"MEYCIQC1/Kid3LY+Fg3GeiCq04UITv+2D6yko6hs73abh8N3bwIhAPDykANk5fiGgERrKevhM55fepPxSJyBUMa6HiaExp5e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":404526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBHCRA9TVsSAnZWagAAVnUP/i0XS3wbb66bVXS19qYw\nUo0OfXn/rdIxgD8RT8179oS3ypYaBfl6UFvOn8szhLkfEeYxJytCbeyU9gyU\n3FA2jQ6UKuViYhNHbSp8c7umgQF/eGM8Jw6yzAAuAY80kmMfLEzUsxeYkXtM\n9Mu2e1jgSD67ymxWDoq3D5jd95h0NZ9b+ZArRUePkLlzreDRBM3vwx/suaVy\ndu6r6Vr0EsbVz0NkxlF3P2DXjKB5X6fbEsJ2HmCWiCj/SW+pScYDZLCYWbUV\nq4f4zwn8g23oDkCtlE0Myw3gl4Ez1sCV3dpui9UnlVzAo4hrIW7DJFkZO+ON\n0WGpA9WKbKw2yJ6a8//UtoD+1C7bIVoEI8/QPHLkyxvgDrLqPo75uEuO3ekZ\nvAgL9dwiRJYS1VGuI617QUNf3Lt1PlYYok+RIRBDP6fTEt2aSlKusoH90053\nzIlnxKVyf5Wwn8iH/iCNSipsYpGbOVa0TXgkNwuKXb5gvuUw60SzhO45iJCw\nRT59iXmBKus+bDFArVXaaqvwm0ZomQu3p5JSIYcuWYwaEXuURZ9uYfIn5lEi\n/p8ZoqobcbVDRb6E1dY4KB/T9lmH+Pnve0O2t9hrajq7cHkSjO1rzLlc0PQx\nIPWc4xqOE8/8GUjFuK913SGKugW1VB6dkOKr8UxIFAdHvlMqBOUe3I4yt+7t\nP1BD\r\n=4g5K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Switches\n\n\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/switch\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/mdc-switch\";\n```\n\n### JavaScript Instantiation\n\nThe Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variant\n\n### Initially Disabled Switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"On\" Switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass Mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n## `MDCSwitch` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` Event Handlers\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d2b54d183.0","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/density":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/elevation":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.d2b54d183.0_1592442951262_0.4485734910269408","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/switch","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c1c6862d97ea15dadbf7a5175eb80a746b53fa","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.f2a488e95.0.tgz","fileCount":38,"integrity":"sha512-7luRYoflNUMSByg7iXE8MbuGoIfwhSlPwKabciE73VxOlbtq7fiuvsTTA1vjHZZvKEsrJZuzodWKYP0clmmDhg==","signatures":[{"sig":"MEUCIQD56JgCoa8s4wiO5+DJ331/U+DJ/bZXrUvMwWQPYFAiHAIgIOYl2gtSxwzCSrCT9amOGnrybtsbjNTCvWARy5BwEfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64J7CRA9TVsSAnZWagAAXucP/1NIs9nEO3BF6lFkqUuM\nzgkIr0Ug7Be48fJjUNARAsZNawjfBs3m2GF3tBZR35FUntGSFUoa5ONsicXe\n6nXdluSxPtZN6ogTp+xvIPm2qK3YHzd/MHFQTAXFInJqbcBZTQCUyYSh7N/j\nhvPtTaRsSbDcD0Q1qMSG9PMrF+fn1R+UdtSCQ+aK4Zn66PqY2cSEOtdkLfTO\nbGKI4LTLctKN11lB3BnaQX8oNsgSy80fYsZooU8IYf5ut/fW92yE08JDeZqw\nNnCNuv7O+Fh6veWK0CgecBPl4x8EudjruGyUbwitOgjHpOuVl6Gqeii39Ny6\n0afUJPhs3mGf3nXoP+hTiZTDwvqgadg1+5/H3E1qW2gN2vc/e4zrlwpvufg/\nv+2yAScu37XWIBerOgwRc4M1UQIRVGotSGcDwPZw4phObRG1B5jkTj4dGwEu\n4QlaPmMXrFjGwfycl/hdsAWmm9R3Yq8p++Pi3Ozl+ADkfswt2odupU6OuCK/\nAq7HoAiBTEn4OQXrNf+9slprOSbrW5QdJ48qCKgRl1POkxaOiLp45vCMyCRe\nyC2Oaq6WKhghlNLm3830c7V7e3fFqLdj+VqCyLzRrGxtC30DqnsU5AdwjROo\nMHaOYJ+daq4lHI8pau0j2PoULjZ8vfByMMEzIRDNvAKWX8J3jsGa2NDD5kHw\nCMOd\r\n=4kiz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f2a488e95.0","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/density":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/elevation":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.f2a488e95.0_1592492666697_0.04205215791787875","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/switch","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9922a2de2ac919805a684bfba0a68716760c4e03","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":38,"integrity":"sha512-6jJFyElj6PXYn8MhSURwToD8sZ+VYiY68oAytyDzEigZHLr7odt0emtzskyjGIWEH10+48nWnOeKSqFda+SUWA==","signatures":[{"sig":"MEQCIEeoEZ4q4YB40WOC72Gq3YyP7KYtFtMP7gY/amr+2CJnAiA/dchnKBjSlW22aMqhZ6sEZzagMNTV8sMA0CE/OHk9OQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VQCRA9TVsSAnZWagAAhiAP/RC+0JOz0NfWC5ly4naz\nKFdJDGpj92XSnD0xF6SvriSp8SKx1m6uDstV75HcVV1LvicPpytbxUKSJ31M\nIko5JAinwmul9ZINyXrkta7ohXp95CLhCbb1Mb4LtSG+LhATcQtiTQKtSR5t\n9WkAdOSUlgYocQws4FmpWCj3XuIwc1fbq35nfr+DDz1Av0/dQdIkKVZHD/EO\nnLKjdzIGSg4sXS9L60qzFSBHGkjUWSs3v5juOZP2RWizlnUckuG3rvpkpo3h\nYWkp4uDpFSFE9RKk7a8kQX71A8mgZ8ZBAomzxpb2SKbhez+jl9kaZVIqvTwA\n7VZ83gUioz4BMbaNQzz9TklwjFIdggjTKuyoQfjw8cmv4MlKBEc5fyvvHYgJ\nFmJIuzyTpM/rDzlXM0lU1D8Ek+k1tvfV5h/zrWvfZK/J0j2jzcB6tUNyotYA\n1II7MtjC7wgWGgHKxipXcniGfShk/xkHsCHJN2zvHphHkMUZW6dXN4Itdc8e\npVqoMxaqPwPaLMPkhjeiMY1Ucca7ladAF3ZkAAR8Usdn9gw7n41//qcAr5ef\n8LDsW25zGJ8LQ6xMjI7WpeHXYThrHZhzha+GCuTIILo6raW3NFbOQYzpKntv\nVb2peq7sUVOUffu9gSwGGL1ypRKe3h757xOnzjlu7X8413djocnRkewZELNR\nw4mi\r\n=PNlI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8d1aafa.0","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/density":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/elevation":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.bd8d1aafa.0_1592493392491_0.9323762836301039","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/switch","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11b70e9426dd82fc4a9b4bcdb19a50bbed506f08","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.1321eb968.0.tgz","fileCount":38,"integrity":"sha512-LvBLBfuk+vFYJxI98chxpwAWmSPNfkU44ydDW/+x6xPojQ0F5Ul08SFo68DzMkT87EKg98M1FGwAdYtYb+fXSA==","signatures":[{"sig":"MEYCIQCHD8LmF2ALIUFO1BQzQwUr5/ebaRH6J4olLSl+HrC2swIhAN3KjhPV+CCQ8SCHHvTQ34SkNYp8MRPE/dxgtpUGtnKe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RA7CRA9TVsSAnZWagAAw1QP/jMHCZenHwM+EXWhK0+7\nrr8uQ+CkShv0W/14DZlI8VvBB3vysKPLSCeH4QGFdjJHq+so6g1k50pO21+k\nJq73Uz+BLFonopHiR6FL4mB5Egpyb1vWhyAyNOuvWxRGineTBZOkkNJufIuY\naZG1trCZoAM5kRmNoTUI2dyaUGV3uA2RyAfeew6TzPU+AWfhGRyj/sP8CjuH\nYUqTkij3QJ/alxAKUeok37di5DQkkI4+4lwrrga6shnQqECmwR1Po3eYD2BJ\nUhbw0Igx2ZGbzk7ZwjomBZiUyxBdi5yJ8vB4fdRKoAjeWL6X2U5+ouevehFl\nrHOJVKFWVnMgwgninj4mVcv1FSpjkH2CSanNMg+Wm95OMjorCgV+R/qrPb3T\n86TCtJQPFQmM+0s046EK8oM+p1xPlRZ0elibgWT4Jk8NO2yhUzEvd805ixrT\niLxfmZL2LFH6I7W7UBILrvAAUvYrq6oL3sMPWmDK1AF5dB6SgrOhCsmuYuNS\nz8Ex6BjMgPp7eJdxleDv4gz+ZuFx+CTYpX14XidEzU5Om/82BpmmyT0wchdZ\nxE9bmAs/iy7DT8SIaWPN1q8xnCWAh2Y6npgHx4+hisfJxLcpoRpqLu14Jpct\nUTImJ5J5u70itx6Yn9Lk+5D+Phzs56yzHIB6ydR8Lw9dtjTnvJ/Oce0OzkmQ\n45g+\r\n=QEaX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1321eb968.0","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/density":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/elevation":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.1321eb968.0_1592594490559_0.9265473368716148","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/switch","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e75248bc935b8cb969935e2eabcb611de162ed6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.db5cc0382.0.tgz","fileCount":38,"integrity":"sha512-JBOtbPV/ZWfR2seTinWK5F9C5bDWI7aHq25Ab/gR2vj0P4+rKGrtaMeQtNoPOwkXyAiJaHgsthTvw0ae5yue6A==","signatures":[{"sig":"MEUCIGc7ayc0zKDo+C9zvoWHpikpp2BhRmTizyEJawdVkklmAiEAv1lW+bnK61s38yGNqnLSVQFmHPheBv6P3o9HxdkDvcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RG8CRA9TVsSAnZWagAA//YP/jdxIykUIYKh3xgfgOjW\nfaXHsil7ozhoUPlfx4Z0eh+T4MUi+PnX0aYejPd+QvfOAenfMdlABanf8dre\nX5SO0xlh6bsjxZfwn/Li6HVgjcZWMrmsSezh+gAwa3x4rd5P8QdMppi3uZ5X\nsq2kHz/0nAfGzKTNUSllrsX4Av2AzoYFnkQ7oo/7/Tj1dNUaGeSL8JlFRP+F\nhFKbaza3knx2kYor7mUFEASyJUYr64mwxFxtROif4/N8drPzKSnC5E7GCFNA\nfOZRtPGsdDso+kVOdFoHAyjO/63WD/5gk8piIYjRQKiko0H0+kc46weLxo81\nlVw57zChm+fPLC+IOYhhgEMHIuQBADnu/ZIZ4+ZXSyONsKRE2L2P7kJdUuZe\njSWIIL4W3iSaDaHQnSfh4V6M7th6BY4jCS8ySaCCYYvzMuzwHrXTJhrF3GZi\nxVrzvuO7uTe/ZmnNSZLY0/6NOqusxw5GX01nMY5W/Zo15e8iamkVY/8wLkKc\n1TNTjyIpdZ1Zu/TEFMsWCEECwiStbzeWXQPHZx6+X2R4JHQGZHszZrDMKA9r\nXcy2kncW6Bj0rTZAVle748D+R9wSXgY+zkLNWUhXzsJTTgHGBSXb0C2yZNwo\ntsuwpBa+aapIj75d48g9TBMcjygJ9GMydRgOCFVkfTl9AOYIozUYM9t7bi/A\n4vxF\r\n=QnBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.db5cc0382.0","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/density":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/elevation":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.db5cc0382.0_1592594875995_0.14768212240293588","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/switch","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3249ea9e4c7128f005c53c97a0bfdb9a40441236","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.6ac9bf031.0.tgz","fileCount":38,"integrity":"sha512-YLtkU2piHmPKG4mru9gVHPJbhW8Z24s5HVgmoMCieUhqh7TNmFVUbpNT7FQEiWkkH6lHoyNCVabH+Wsifyq+SA==","signatures":[{"sig":"MEQCIEE0HoblFaBUaNKIvkl453+Q7+1wPikzcQ6FVnYmSJHHAiBcrmz1m3i4jqkOKxkpO3Xmlzn3bMWiEmMbzYzYyfcwVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RaECRA9TVsSAnZWagAA+CsQAJE55iuJLp1EU9fcgzC8\nD0XyFmC38EfydDk1Sg++UpX9b9/7HzWma9DaoWsjLLaAdXQ7ZoOOAxQZvelv\nZbYhis4g9Owj1yfI7Pliygc2jVAjIoNG1NQokZ26841pIoz2yLQQIEvto2WV\n5OEKLRbv4gCRKBpY/30TTC2GqwS7MEw2WstuVBz4LKHSTCRXNm1Oa35dmdBt\nT1G2rT1aza/17VW9o9m1XaMhyA1rrMueTeTxqAwtUTVu0WOb6dMrx+dToTsk\nel7h47adbxZ68XmTngcezRs2ATWJ3D5lyRvbcz1J4fA7z63laLyBMywiDllF\ntdDjbTj/crexEtuNQAWZiQJ0p12/AsaqBhGTUSQFM5lKHjxvu/gHmZj4hN5J\n0pkVpSn4BpC0tOCG8H2Sad7URScJkE1xzJDJ7Jctq2GY3KsoJcWIguuYE+OO\nXtOa0qAOyXEIiHMt2gvnLsJuK7EUBbliCJZQZJ0Vt7J4YAOE1byt9cA+HYfb\nUnDfMK4rbHEtyvrGjEFqToJByXMAWHncmSn/SFesaRaFeaTcwfFtuXoEi4tC\nR/AGoDk4ek+QKIZy9jvys19gN9GBC2MQhGTTopSKcodEc3JUIJs8wGagXIU4\nqfR8jzdxP38DcZmN7DGpbiwmeNEVaI1TDBC4KLCO810MJHmFDblQcLmCgqFC\n5auP\r\n=5WGw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6ac9bf031.0","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/density":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/elevation":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.6ac9bf031.0_1592596099975_0.684274488138698","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/switch","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dcd101ed6a5c74f3224c5a18e2f36b538978446","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.c21b5c367.0.tgz","fileCount":38,"integrity":"sha512-WKz3pbp1miOxpua3AXwCKOoUyB5KRaCj1C3thIVQvjP/0S5a0PVpkE5kPmRf6BgQi+ShkZoXj6QJqnQH0gdMdw==","signatures":[{"sig":"MEUCIQCsio6CowUI1wngRJr7LHdbk4vCl78vOhpdGFu27fOLfgIgIcml6M9GV5VaYT9MRzCFsRVKJd6lHio/WupslAepbXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RvCCRA9TVsSAnZWagAA6ZMP/0oRCJAIesIOG97LUgn6\nZjj6pYKU1951qspM9bnfAElsRN8taVE0ouem0fWUUC2ecZzGYCdOKaA9ce0i\nZtudjHXJZ73dcTWXdvDMnqyguj2R+ajNSJZhAX4wM2wd83ZriWer6yjfJ6/o\nMd7iQUZtULxGjuJK3S9LkEuASghVG+A8yEFZJoM/TIAOo3hBrc+OCTe23Igi\nkWyn7wJ1gtGSR692AwWUgqShIO+MNwX7L6gza49X2TlzK7WiyQZqpAQUSP7V\nHJJUGvn9+Hy6WIaLOJwIrDKrvnj0H0YurHezgJm+eB6fJDdSHbrvKBdBZBzf\nY9eLe9gV8gY4BZLREm6PtoN0lxVRIAq10nNPybziu15fPTjWjidc27fHSutr\nYiC3uKAB5hYaUNRZ7No2zdmdiTrcumg6mIXdxbxeCBtj/FsXgw5xXktWXN2T\n7MFs+ricj8BP7ct2qr8JOT+1Zaf8vnQw72FES50zM6/JdoUrP5xdoNjJ5H0i\nV+oVpoxvyydHYpBp6kZ40Bg28i1ZkKKtJKSXozMm3xRYtdNGKN/JoFWokrSN\n8v5ZCSB8sq5r+9nNGGb9fz4TuyVitJI/nfS6RQyJluEJcER/6lMrJ4rrtinH\nIiDl/84h5BF9ed5a0k7FnzoMpFb4ntYbQAupp9IzmLSyC2s8IYtXcqOtRsKg\n2Pi0\r\n=Nvwb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c21b5c367.0","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/density":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/elevation":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.c21b5c367.0_1592597441724_0.28857536847797505","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/switch","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d96bd04bd8487197bc62e8116a60c8aa351867f1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":38,"integrity":"sha512-0A5kJ97zVetHYtkq+dF5qlOeiAtulnFKVBZqX606/8qNwAsyvx40Ebc2pPEhZHb6ZUfMeoK99es2sYg2Rjz1Dw==","signatures":[{"sig":"MEUCIQDuln4PwbpmTS3w2ZgLhJIJzxQHmKtslG/nSL7NLPPVhwIgMTTu/wagpclbTlYfBpZUJ6bqIOPbaSNlGuvZSj9ZGQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3zCRA9TVsSAnZWagAAxP0P/jSz+ip1hEV4hC1CIFZy\nE1hxlfft+cwzRyewvGVzRtSqJSh2ncCAEYqXs58Sx3c64+BkX+ETYErOdtJT\nksze6bDENyEQgFKjypAfqbZF7r9QdkbIikE+90Pp6hwwXO2fsGlS8mwFDF3/\n2r3WMCzwZ65+UvbkkcYU/bZmIOEcqQSGk23y98Eh18Es9MLI0CaBgtD0m9BP\nC9VZq1E0SY2lNohkOCJFa/HgKw+RvLRbSmSWlKjLGiq0Jlef3bQaZDUrURuP\noQYVHVYYTaa3+tqufn6hwNXZdiN/D6AXH0QoLG7/xQWBeACVJ40J3Mp/hnX2\nnTCk8yuHWC5XPCj4aBoZRGXGop6KhXDWAbiY6UUl3PA8STZs+At7yCM2SWwe\npGKVuQWiK+LdzWW3iXq4hcQ/+PwujYpTO/zAbR4sj9wHSNOA05kalbOa7B7m\nAUPZHndjsz3R/s688puGAentkKr1QoiAfq6JNcsOn8Ggcb4+4PQoHJcxC5Qr\ndcp3Gkbc9ShD0TXvN3n0FJNVFLxVesSyD10UoOWtIDAsYJ35kNUSHpUEroQ2\nQYh/idrv/3Jg9JkirLqyLuB9w2kNtg4yGrwHSn/7gcl0Sv8WM09gHl9XzLmT\nnjc/7ty7+pFacTDR065Sg7JmPdS4+zy9W8+9endB3blTHw/BWtMZh6hkTBTv\nlNOX\r\n=z10d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bfdd7fd39.0","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/density":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/elevation":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.bfdd7fd39.0_1592598002820_0.3360527000240152","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/switch","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5303dfdb02dba2b2a83910b66346c5c806431ea3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.10b505785.0.tgz","fileCount":38,"integrity":"sha512-y+1I4MkNBLDsk7TnLMCKFNX9bFBoC4tS/ce1G9X1NSmhxNBFzVoc0gcvs4mR/DomjyMcrQhnmTM8ED2lOdzN8g==","signatures":[{"sig":"MEYCIQCMqVpyVlEMcDqjAjbCYoMadvmqpkaDzVLF3OrC8J/qXgIhAJkhtEzJkWN7b8/7n/lKY0hOH477zsbj/rSl7oRIGP+B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5MCRA9TVsSAnZWagAA6BUP/3WHo/SAjc9jasophkyJ\nxpTVaoMFyMd4ItgTUVAkMF03lJWPKdEjv7foSTKTkOPET5EfBaiJquL7kZqs\npnv/aHEGVdBfMGrQQaDcHFfgr4FnAe32R/Vk9Dan/4aNy3AovxatcwQq5Sjb\npKXhEgEX8M3SKHmvvHnzFq2CStzJ3n+PkQelDXttlFDN2e0nINCX3MaNzliP\nBcnD1WCDlVoavgUW50mwyPTdAEPV4ve+C+OxxsrnTuHSxYEs/t4GVKTSJ8F5\nP4wtXAe8WDtPulf7TmSusbg1j/FUxIHiHmGb9XTY+KqQMdRXzrgQWD1TF1ak\nd2jBqenFw3yv2H22H+QQlZCcyNhmyU1Y/+rtdrRKdWXcO50bkJhpXq8Xbc7P\nrln6STVQGzw2JVwXhlUlOpScAEv2WUAI7HeUv5fH8WOXJlSlH8ty7+PmzOGV\nOwmelwDG76AfXGjXLxpOMmsq/sEcHxrgu5UZCoPA6JEos+8ZZUwy1FYdOA8K\njoiS6ljUmtnYSB1A5sj9QblgXqdpa/MnAD46AjhTxLEx4beQXbeU8v2QUHso\ntZC/Er5EFdqO35O+1re8y764KEbbB+VYRGsLa+U4JCYlWAlJ2Hjw6//AHWag\ngrv0zyuXawS/QiZm5a3rKI0VLNq5dQgyOzjaR6ZTd3j0y6oAG9HCmEI/DuyC\ncCpc\r\n=9V0p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.10b505785.0","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/density":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/elevation":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.10b505785.0_1592598091190_0.7464293806883517","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/switch","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2d8b98959e69e99851981886664db2ccae60f92","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.6483d3f44.0.tgz","fileCount":38,"integrity":"sha512-Go9dpgQlHyEONwXHXhhn4O/BpSZaRk4gYWe6HtOzrtjtwscVo+6hMguSJEfdlFbaqMJ/zEjWDTj9xP8CojNy+A==","signatures":[{"sig":"MEUCIQC1GfXwaJ7CD+fa5tNAeLIDzTxNLU3X+leMGUY1OcyuNgIgFEjSTobAhodD9qy7N45/lQulASywIf9MpP3X6fTJrXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SIZCRA9TVsSAnZWagAAPKwP+wQgc9Hr8If9Pb5QPvlj\npoAQvHxzMOiO+t34d2UbYFwTUGWrJsqpk7WCi1za1WHUHoauIPb0LBhu/icL\n3xcWZhjU/QM1YVCaMVQ6SbW5eda8LgiNPEclBztPUdX8zaQdrkcjRUaTGrum\nY5i3OyZOFidQnj0KaHvnmUuW7WpSCqFRQFk1d4GiashveVPstEh4266HQNU0\niksQFpJmj9Cd+KAwzqOYpFlvF7li3mnY9QYEN7jsdMEveC3Dx5ySaYZTj+tn\n7Aq96BOHpranJEo7dIhnz8qqCjqffGm3AFt95zAJx6lSVU8fKA/ZtH4eonOG\n6DW9SkFVfQy5XlqxiCE6rmpsDP+hNN9NThIW7/0aEkzWhye6mOzJnYSOdKKo\nxHjZSvx4rkIWSdbPAPoAhh8ccwB9aeYc2h/x3zXLS5ZEOrQ8Jk6c2SRreqex\n7D/MIFerJ4G3eOOE1FjJ8nM2p/j6h1np+r6vX90y+XYo+4THpaOi3BSW0Vug\n+4NOYnbbKxN8H96GlWX6XT6Ao6oydIGob6mhghCEqp3BI6yBxW3fF0oojbFc\nMzwTv76ipDuxJ8oYbAT5SVuLbaW6j4VDoUdoE9UtQwxcnb4v+gZPM7YLFf3u\n8ddtaqj9Scsl5LMSSipsa8l+ACGWSXMsTN9E7y4/uIBpP+DqD2YYaKxF2n3o\nuVvo\r\n=efWH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6483d3f44.0","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/density":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/elevation":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.6483d3f44.0_1592599065522_0.9024392071254197","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/switch","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ab1196c038835bae6791730bb76df8be25938d1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.30a74e921.0.tgz","fileCount":38,"integrity":"sha512-Gs2Q5p2CTxhiX5mmugdjDpGkN3EKFApC9Mc4gKliBvIr8lZdRUtGogL9PHBtpjuzjO/d2v9dSu+XcJIysKRqJg==","signatures":[{"sig":"MEUCIA1MVAAukZyTk1O0vNBXnk07TmiQIiHJjQTnrcgZyK5dAiEAilIADNB05yAQAvnTP0v22ZA31VeLXcRyIFZBMKmPRhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKhCRA9TVsSAnZWagAAWBMP/RPy5OMR24PcUokJdQGu\nXFqaMmqKyQKK0AsYkjhtOkB69WP2c10Q9YI+grf9T0jh7V1mDe7/iMVUXfMg\nwzGidXOJ7qIwkm4ztk6CFGvjdTrPTd5xcy3waKPAxSI7cX5GiiGE39iqluDy\npJ7RGWn9y1uRx+17P/Sj1HaXu1aEcRVJp94qE9BMksO9FJLdihjk8xKdpsOK\n6XG2Q+EOtr9bEbnn1LauNYB3E46ECJIX1F2rqfmGxHtCabdWsykENJzWp4NA\nVaWi0DkLMZ3JtHX5PNG9Znd/1U/g5wCcTO3WxM2SXa9ggQxkhdTHcSRZH6fQ\n8M2iMo6ZAQDO0FWhaDWCT3GscEFP69XvIGAFRFjoWEI/g27veB41LWeeKCBv\nov261kfh42DMKqu9W1H0aMKJtfob5KDg3YtID50+7EVJ2sUIo6TpvWAZ5rmC\nPQWdxmnFijZ300q0G1g6aHnVGEQMxNMq03OnFouwh8qimC3H40QZM13a+NuK\nOEaDC4DmB1c8purw7t68uYyMrUErc7YiAnjPnk0ibOdWQ7iq7j28hgBrwNmv\nf/mt6rXlT71OT36y5qDYWV7V1t2q+BKUMlE/6QGQi4TcVYbmQpXxMX4DR/hh\n+sWPHw0cwyZAVzdGbnl5/S3YmT+airTqwuCKFKxy3G9sk6Jpmrx6C7BCG/9a\nVZfg\r\n=ADgO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.30a74e921.0","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/density":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/elevation":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.30a74e921.0_1592599200933_0.2766021440825297","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/switch","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4301e0d46398c9c81897d28819d7113e8fef55f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.c20727498.0.tgz","fileCount":38,"integrity":"sha512-im8xXD1E8n1H7my6Ru4Ou2Wk1sFQdRRtzI0euBh6u8mMRaMTieKH8AUB1uAjW+wWuNiIXosZEKty4W0+gr8NSQ==","signatures":[{"sig":"MEUCIQCTQeXkTAiKb9eTlO4yim59ZIEYDiL2udcnM3NoyIL3qgIgTO1B1ulvlYIi4WLQeN2/1k/WlgVgMN/AqsrAcRQjY5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNLCRA9TVsSAnZWagAAkNAP/13OO0jFWJ9D51OZp1//\nF9lHIeJ/ycOHJH/2bpGq0RXUpxPBksLxgms4R/1NCv8w5xXSCy87+GFUNoSk\n/hn/VnNA5RZOQ9XqCICnE0X9HDJXDyzNsI80JGvbMLTDcsfm6yDA3lCdgEft\nMGYVvhQ8Diw3r1z0xTbwxepvxI6zJMzYhv+4mN1iBf9vsjKaEVcA8/lrCx3h\nSKbFXa4JovPg7qC4HB4KFrW2qvcS+bmSZ7fxe/9p4FENIxZbt4qn4xpuHlva\n4UWT8ReJlnz9wrNrvSCLK0FlsTPHukJiEulppV/8FZaG0Wg3CK2lHIGQW5VI\nUsJW3bT1WtfSY6W9n28BdDPB30M+fUxZALCBk4DOcOUwmmkH9TWZNAC+ngt6\ndGKTNwXxGhsBlFQEVvEyb+0c3ShAjE732/BrH31D3BdMyKwm7P1i9vUdCxYP\nFEZUbT9ZzRiehnSNVZ0KDtUcL3k86YPOtH5SaR36sfTilT9Hkua/XoCxWk15\n+ZZuAq2oIYHCv3+y7/QvZf7mzPLs6qa2IrisHiBQT4kE8eKN/Gjx2FwGY+ar\npr5hwuu4m4RPuo/5cw+YZ1uxMfNn3KPs/UWIonoDh0ZXiC8tUnCD68p3P9PX\n0z4ch3CCG1LHVPsWdMDK0AELFhhSN5WSxsjMgBPn18f2KBPHyq1PLHfiNLo8\nxWsW\r\n=Wji/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c20727498.0","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/density":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/elevation":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.c20727498.0_1592599370952_0.38784263601901525","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/switch","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5663303fa47cdb5e28345e574f6254faf63d7c99","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.4e360ae94.0.tgz","fileCount":38,"integrity":"sha512-h8VjWQyh9ClTF/hlalQBg/FJwvXJkveGiIQ8/2tYUjndh4MNOv/cdxOupVZ4mRASH5F/3Kj2roEZH14PdnmGQQ==","signatures":[{"sig":"MEUCIQD537WVRvr5hizIDOK3yI7OwfB3/dpaptsaSdipZZoRmwIgXlkz0h/2IAEsX4sz5SBQn97pxxI+m3nOQODVJDOPneo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sc4CRA9TVsSAnZWagAAUhcP/2H2K7TtohTwpgvDxPrJ\n4QIm3XKATawR+PJ1NjM5cPrdjIlaPOaU7wsP+s9Lxu0OwzixzzO0e1uxkheD\n94l9uOk/uvpgpLPk8AXL6YX/PiZ1LXjvdM9g4B/Whb0oyNX42fECb+Gl2XYc\nEbdpv58J+ROPNA1FgQ3Lquxg4NMjKzmISX/RUEr9Ls0wf0x8jWIa0Yk79GQE\nkzZySTjFGLIWA+/WuY/vOqiR0d0/HYOmTKJ6FILjQf56KRH0SQibiWyyHSoO\nf1ZK9p3tud96x8cJSraF5fvYgf4vvZbCakEFF6lzVrfC3j7NoP0BKB21Q8Yt\nEQYKA5tBsgHqJ9f13OPxvkY5yCr1sHBfO3S4BUaLC7ZPRubuV2rTSwJdIm/v\nRGncwrPWee3f97d/nnRtSBpGI5J96HQtqDPbDC7zlYTJxOsZDhBj6FOaICgq\n2KYjbV2I25syX66W13jaqgnb1ubrPsCqz/MMt9S3D/D7rCjZlR+6DfpWHD/G\nCSzUk3aOoIOC+fwSRsZ7GVklH489yRUxWEou0wQbHwe7sUlsyMBUS0XkUY2Q\nTAF4HgV1xga4ak+SdbJYwFPldGfwC8OnDAxXnksxEmh4QmT9XRuzH/Zs4gwC\noyfQ1jzT61WJJ0knHRcAdtj6qBmmVIX2Bdd+Xyncul6tUop7iLzNG5uIlEVd\n850S\r\n=AqBp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4e360ae94.0","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/density":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/elevation":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.4e360ae94.0_1592600375894_0.3511259001702405","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/switch","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff3d6d48099a1e9ba58dd062f9a47539082206cb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8550fa53b.0.tgz","fileCount":38,"integrity":"sha512-kpO0n6VBrS6xTcNdZnRVjiRV6UPCMUNoblpxZ90/8WsZYk41hzCaehpQ7U00++5O+xNz/jq4E/yATyXSnF6qiw==","signatures":[{"sig":"MEQCID5+XNxBCyM0ClNXDO/CbRC2YzT8970JG+bqFCnxe9ISAiA/9QgqUqxAEDug1lrJWCezM21tpuj1IlZOlIWxcwAFJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfBCRA9TVsSAnZWagAAw+8P/2+B/kzbLT0f/k5vwkaM\n1EEP8gPfHJdlH7zh+KEqQyHxf4ki8uR/Yvbjmu0HBKkFkOLTX9fcM0hwn8Eq\nXvpK82+0XHNimBII2q98PWnaHfjRhmPfHDNXxNUxhmvi4bCNfUbXEkpEPIbI\nfUkwnkncJ8le2zaLytjsuABMcx1HLtpQ0KMZqbYdBqy7DB6fmdfPMQj/t4Mn\n0URfL3LAPZjxEACIAt+zRhMbYzJBVbPUQBeVXXcGqU6du9xwYr2RJU0OA1Hx\ndON+SANMk2Odh7kQwKMueOTJPfBvatE5zU4Vd0aEODkgnGpPI3uiU88D8Nhc\nqMP8f4G7N6iqQFJTBlLexi8qsdBry2b6M9KZ9DXUjU/Kw4o0wbXEPwMfJQLI\nNWeJMsjTLYO+U0enF2aF/ArHKW8itJnxGt6ccwt2NvAXbJPBK6wGJ7hQZltt\n+V6s6c80OIquo8wTnk2LKn1uizo4B16ogFU3tMkKaedYtyUQCaajO9eg4S8S\nl6hwNEmyrwtE26AHEVBLadxgvYxo5ShDHXXvrPA++tUhRIL8zKeOrIp++ZAe\no1Er5pBmBQnCQQEcxOv/DXPS0Vq0LyGkXGCg5bKkWpMDuCJSjES6kcj1M6Ax\na/oValgobaDt2UvX3Yt8KDZmLHPqw6SA+qUwGkgXPgGzGyf5ZLPUoGoaHLm5\nLMhc\r\n=Toxz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8550fa53b.0","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/density":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/elevation":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8550fa53b.0_1592600512868_0.9192884426873797","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/switch","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"316bb3c062716cada5f38c6b6579d8c27573992d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.93ade142e.0.tgz","fileCount":38,"integrity":"sha512-zIRoKyenY7EsYQ8yTh02YvNoqW5A/gUUWQRGxwTIoLS/sDElrCnijsbBJbXtgnjRFT3UvYHqlMoXKb8FAcammQ==","signatures":[{"sig":"MEUCIQCEq29Dm1jQdqxtOCsIoo+ClqQl4HTPKRJPFxbG0dhz6wIgYH+SOaTWItNA4/Rdiyblr/FGFRgO6cB+e14OksVYVrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgGCRA9TVsSAnZWagAAtKAP/RI5wl+cZyuroiwRr5ZL\ncdVnSEYwvG420uA6xf3t8bFtFjGBkYzkPG3/NdL1Peah1w0HgBw/aez05pv7\npU9vVcORZwRAaYAZN4TFNv2KsnfW2izsvw3ZABuNzj9I0I3HYAL10JiLiTlk\ndeuQNn++0Llew6DFDtj1M9TOVhiEY3OQgM+26aEd+TwoTk10ujLeojx0mWqr\no/owsQYoQyvdjHjZ0ovytP3XV1BvsdYLnzU9K79cZEluiOC40m40+xt9BN4a\nZtTLlceZfM2BR21Be+kFAxavFaeUTocoXehctLQZUXUWCxwOjhme4bceE1bg\niryWe+oFysNMGs5TqzYiEMNPSxGOfbTBioQky4xb67Z1GZNDOoRsqTv97Rvv\nHj8f54pofjodmRkcUTeKo9CzoWOANFaVbRUX7OwuN04ajC3iQUh8Mcl5uxFe\n69TAgJNX6lM/gQW9PwhARTQYs4uKS2KzC4bLVymhEGg74w4Q8kFpj858cmXT\nZg2Dr5MP6kjQ3c2vydQgWsNqWa1wEsuCCh3U5VU8tdOF+GosPCKYniygYOyu\n8/qKd4OauNl+o8tOVneJBiLRJNAHeZEhM90Q70vWlPQXf+KAlC0FFlVguQy8\nz2Q4EWG0RNtQ/m97i+w9zdsgP4d0MUla3KZnRnKVHQ3WxY+YysK+NWxnE/ta\nVxq3\r\n=ZVBH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.93ade142e.0","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/density":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/elevation":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.93ade142e.0_1592600582458_0.37698031788861797","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/switch","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a411044a7c23621fac7257ebce68ee6276a9e7bc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.a0032f5bb.0.tgz","fileCount":38,"integrity":"sha512-Y0kifv1m/FQ/TXe98EBnImoFlKLw0FMfks4nJYvwQE7y3BizKSRz1WD51dZ7dwgpxLJIuf06OR7Fvs/YSDilNQ==","signatures":[{"sig":"MEUCIHs+NvW94HIStR4wOLwxoJK8YiaWYUNkf1wZEPMIMsK3AiEAw+sKNE70EdAx2IAjOF6FJAeIuuar3rU5BY0q4aOieuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3rCRA9TVsSAnZWagAAZC0P/2MCNQEOQ7VaCu15lbPQ\nWd9FlyFgL2MtdFDqDpkHqQloT1ViK2LfxVQtiMCoYE/iwXj88g1U1iVeB8FP\nmULsQXN6Hss9G0Rai+qKjX4BuoVR0o60hhLI7duiSHPAZPFWeosTODUnTjHs\n7XpDFC34Chouq0EqRzgvG04EmYFz0CiXNfd90OvBaqUaVi96UohFhWQvJMDo\nNhX6XmFtYuRpMBPpzdIXVVVdsjL0Z9xUgEbmGvEfrWYPQ+bRet25s5hM5Ojk\naUXXjPZohK/JER1UaXhJV6L+VJw4G0K/5qfS5EsQxuCvUMJAUTb5Q5EBAPKi\nAFmykcPRdU4ZHuLXkNQFMRtJeSkOfGfdVqxKOJgLuEUABKEXe/WeueljaI/5\nfIxyXfmn4JjYdDm/rtXpZXt+nD4434iQglSnzZOoX8zWqWrqKlInafWns1P1\nGNFN31eGcUC+u6Yb3PUnDlQSsCq9IBGpgZDXT2ynD5HP1++BX2HjPQtzRsD8\n/4HuoaJTKRWcmtxJEy8NcUBMnRL8b6eeVHVxz+6w4KkWkIP2qMu/ppTPeSmU\nrpL2NCtJrurHs6K3esHjifGfQb7+SjuvEyIe0l5ppXLLmVxBK+C2ud9H/xzP\na4G+yxPFBAIC3nKIoBR0xXFfdbhT9l1tuOgJwMo8KnRunCh4uA7y3JYtbw+K\n1jZj\r\n=U4GR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0032f5bb.0","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/density":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/elevation":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.a0032f5bb.0_1592602090651_0.7199058243328438","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/switch","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e26fe5007b52ac4dbd04a7edc3c9eb34c4f1da50","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.3f342e721.0.tgz","fileCount":38,"integrity":"sha512-e4Rdg4glNvydABgNE9Ao8/+JEoXzEYrARxQ+T3fEmt7ePTSqSukiDIW3albwYWc2eynKSlLi4z9BJsDjNHVWCw==","signatures":[{"sig":"MEUCIQCJIxrF5xgYkjJSXguCeQwbd/DiQ6r4yK5cnwGKPvI6qwIgMiB7PagvlIabKG37iYJURXMbPdoCEfeJV4bgG5asYfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S58CRA9TVsSAnZWagAALbEP/2eIIAocjRvhnblICE6v\ny71gqK+iA+XTzeNAddPEW3f1K0EDYGRSTCGTziqElaYuFfOwvzY9hQ2E1ddz\nZt/JuF0LyuuWLuXReOejnrzHzWqdXawIsSYdVQRgWjc+UXDnaP+RJwqRdyZO\nOppWGdvaDdpNiDCOObXTVtk606AbYfKVWlxBJJj2wxZutyp+U0NvhHP20dNo\nw2aIg3BM+5rTVnguqVfW+Zz118h5evjjgJk96/4Ixx1rHUKeAD40bfsSO0a5\nBKb4Tgk0PqgzmYX7axBMAgwKw0peTn6KfC4NW+at+9s5VkUPWr3jIuUdX0H8\ndwOFZq/LQT5Rc/FHJ324NMRDfY4Etw/nFTfoiW3sUq1/k28hyZjczMXZSrns\nzqI2/1tgXR34maD1gMPqwVirQKqf0Uu+UqXg3RyrAli9mNB8XB/Y4cR+Q73g\n/yf6tBFpC+/MEdT7b63GT2xzlBVaivXHMI+ufbaS3WrorETHVcaryo1U2lDs\ngon5yRx9wiqRqxkTn/QjW9aEE6ju5uimrzz7duw4fuxAvX7VuvC7Wj6LMHgp\nx6NU24+OQV9Rb9GKkqWivXzZybpJ6PgHaQcFnDJda86F+prqqW1WdsSXREOQ\nwRVPdTl/pRj6TNUz4y+HYbAdvcU2Ih0ToczLrnDb09+c1HnWzUoaEmSzLx66\n3nzP\r\n=1yga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3f342e721.0","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/density":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/elevation":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.3f342e721.0_1592602235670_0.8214450982077393","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/switch","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d9852757691c8325a050821499a953ca4eeef05","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.ff89457cc.0.tgz","fileCount":38,"integrity":"sha512-WzKMrb9HZKX44zQgmb2Tdh4ETiArX5DVRwMjQpme1w46b6eGYHGQpSzplV0+PikXWUXuKjEWGTmb8whHiCISFw==","signatures":[{"sig":"MEUCIDG/hd2UQxYvG66X7dYbnxUP//5WK1DW7r5OFrzVwqChAiEA+Ze4y6+WYVQYUboo5fsGC5vKMbwzicC8c8N1DsEzS/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6wCRA9TVsSAnZWagAAiy0P/3FGcTjJJ/dLC3C0u25S\n0mYHAd9ox7LpmzRgAAd2J3N//Kq7qF/4uLiSVCi6KM+fsYWOrOlefILRvUVw\nGVtqFKTR4uLYDGCEEaEBr5o3jE1P9pxu1LYwZBPzqUQejFPgCuB6blNDPM3k\nXevaxA1pDLMzszOV0E0fowbz7yoXp38RU9ZZsZ7LuEyCVHlMCCVV+K1uRuwe\n0c1mDF5kgdSPFJctmRnddbxRUn4G0gDO1ZmwLfEuQGPrYRLjoh3tlXlD+iJM\nLN1FpRhFYhHFBnNbSabRzB74d/etI54mvolHqZcK0rIrFBCau3ylw8bIi60t\ngGdzlfb+ymTyQGLcVkPH4EBxJEx/VHWJTIXtZvpeyxlBP+88v324MrhOoLGJ\n2knYzytnu92/v1fNqw9tcyaZGWerjjKnpWwuGbu/qqzpJRjwWOBTpww6IGpy\n3A/uRQ6o/XD3rd6h1cI7GYGtT+WDCCQRlzGmP/00RWrrgBZ/QBU0i4Jkz+2z\n6ywvoVbdMc0GQjkfG7dG1FeIW1hw1BVPpR76gmCN6jo4v+2mf3Ib1zF2MPxQ\nhS2GGacpJj9AIiJgUxbDwfQ7/cM6iJ+omLPvce8NJqUdK+TzIbRdwM2jCYh0\n4mPXKpLYuM7bcS5lOW03OFQImuT2r0WvcAwQzD3GEoJRiwyPOf5IrpX3DduM\nCKSU\r\n=WQ8D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff89457cc.0","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/density":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/elevation":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.ff89457cc.0_1592602288040_0.5788781115320969","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/switch","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c10799798dcefff00b30e559e7e956a1ab509f2b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.4a1855cf8.0.tgz","fileCount":38,"integrity":"sha512-D2BDjxxuLJxFVR5Re+IdwCbgercB0omFLmabpY48lHiZL8CHls3QlFCW22mRPPNXyYjjPA4YnNly4xRIQgXJ4Q==","signatures":[{"sig":"MEYCIQDRUX95bdlk1TBwjTDm7ouc+oR2kLpzZ9wum+Up94J0jwIhAPwz6ZJ0WMjWBM/CrQTNBLkwwUkzGiHrAUnh9KvAODIS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9TCRA9TVsSAnZWagAAC5gP/iA/1wdKEvFRjNNIzJ/6\nlmqv6LJ5eKifCfCoCuDQTi8SLZXzKMfSQPwj6UccVok1+GWK5tQveVjvpygZ\niv0PVBylwS/QZWsL6+2dYtAPzgMK6lBDCBLiyQkUpexIWs+bYvdR9PhThuoG\neAZXJRvTMRRqS8c5KJAYQajZIrs1WA+Zc73HeZVrEjyWN3IdHRNA2dZV0XqP\nM+3+183JNEIPYf2wCINch7b4EhQUWhQDYn7X8WFNsp7w3H3vd0InJ00Eiuxn\nxB3rmopNMndWmVVz/PppMaRc2GgRqSTT7Lu4fUarD0JDHZATeWmjgUCINZnx\ndnKvSb336vvk7FsPk6gl+pJRhc+SLKb4BsMl2S5D13oKNGP8PniyaWs1cZJs\n8LaUbSdnpLwrCtd0kPUQUfO032c73NJ9oI1VNu2DwvehwYVvL1PgJZO6mqDG\nQ4iRm+b7s+KAdK5iJHs+qo4qAAvNMgL2oqI8VlaXz0LW/r6xnS7ky1sJOaKb\n3ZRObd/oGtnaDbKlgbCsPVuKk9eEcE5M9V+F5TMdmPUECmunmird364nCSDU\niiHPkZQWduGZaZbshARbviTpcL/4VMJyjR9W++zeFo70YDarkUYUWCU3SZ7y\nS3bud4h7x0vUnpjHtTEV5BZScI08cOBU3YAmUqN9XYGz02h44Srt07R+aENl\nAWkw\r\n=187R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4a1855cf8.0","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/density":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/elevation":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.4a1855cf8.0_1592602451118_0.46452587157026715","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/switch","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0263e6085ed9b3b33da06d6e2a0c2dfe70dcf9bc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.8602f1b4d.0.tgz","fileCount":38,"integrity":"sha512-7NrcY2UclDpxPc2Q8/Pu0iG8mCn0KrAOnXz8mYvhRJK8tMF63SAwKN/jVF6Pzck1INLfZolXgjM/3ux5ekkUMg==","signatures":[{"sig":"MEUCIQCeioLInR3XDSso+i42lth7ImahPMuUaN8oMlvMyBCMxQIgYJUoPeb2G43y8+FoE8Zjn1Q62gciRxYYIa56YxOEIgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OkmCRA9TVsSAnZWagAAToUP/2mxXCjrXx3JIo96j7zh\n+d6Lq6Rav7qT50lvu25mK95kFTb1dSbyn5yltwna9QdXrBT41L/qs1M7EG5N\nX3YRP4tSZxqFSFPQPBoLGEee9Xc3VMEWyumgGGAXT3K+W0xX91yJnw87H9Z6\nQ4rz+CwZVtopu0rXUojIXP7MhHMDm6n23a0e9JNU1UKMljlaf9B3RBN5XzlD\nN3z6sb7UQaRS18rPuizhaTsEwicBvE98JuDJBaNNDCjPS1rQlzOox7de63xx\ni+/G7vY+8g3mKaVStvJsU/iglljqdzQbJuUJrqV2ex1SvdgWwOa5eGEatmYH\nE9X561L9S2lbMRxSD30NgTe8zHYJOnsHtYVtv7sorgSVQkCkAc2IqxcxzwAi\n77jPtK0RzfaErbMZtXkFLM0pho6aEMMK67660G243XrKP64c8izpCLrXlOMh\nugoiPE3agXET1Y4TyKvWBi0rM3aY/wNujyuptLIF/e0bgyX/MJc8YHCT5WVj\nRj4B2LCTv29SwJffBZsy0tBxPN8QwQOe2Yh9S7l3f9yqhWsY6Olf62pXnaow\nLlFOC8Oyua/7VOjLjH6jU6BIXfylfrJsF4UBiDUy3O7mdV1ENEYAzhvgZ7Ey\nN33R2GZzn2ZJmXHU1eIL1XD1Yf+UFJ4ycUzLbycDH7GhJB9Z3UIO0BQKxzTn\n5Wde\r\n=OCSn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8602f1b4d.0","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/density":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/elevation":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.8602f1b4d.0_1592846629587_0.9610031035156934","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/switch","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"015732d9aeb35a93f33f9e4c0085a9d71dbb5134","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.69f9f0982.0.tgz","fileCount":38,"integrity":"sha512-Bhoghv3ymL1fo4Hf/SYvNo4QqKRdP9aK36DDZ9F7paNaDkRlDKBCNemgcYabH3oIdP0nK6ezvhl2NbcprUTFVg==","signatures":[{"sig":"MEUCIQCJykKmY32n79lgG8mNXihAuMBonWJTGIRYGpGv0isOLgIgfSI8hzl+aYULbi9zxhkvBvEKQHEzXcbgfk9yeKEyWpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R89CRA9TVsSAnZWagAAtBIP/0srYUao0LZ/xkYtO4Vn\nlum+B7OSLipu74WkHvDV3zefR2CfeGIANegcS9xHfb/+BBFtu6TNOuL2tR8o\nstVoqZ72FQk8AYsuEfCsQEAkSinqPggfrgSyTY9tecWrmACgUgRba1dxl8Bs\nmKkOkfQ8T6yjzr5g0APMHK6wrIZXH5t1pNtNonXwXR+MRNEpunKlqaGNm6d0\nZNZxoRFlgjRT6mZpVTI29toJ+ZXmVD33N6tSvK09Et6IuVYDBKJZXHTIgfhd\nM9jM7hfK/1h4uJdICCFMiHSedGd6ocryk5BxHXQO/uso8UbgQ6X5o1oj74So\n9akp2Znncs+3WlfHmZ9jO3xSAxohOfWYI5TsApQ4fAkLQZAR7HaD4wXKJjU/\n5Z3/Wu809AENz/QW5vfwQQLX2isGs8+RJuj5kQCys8/AnSIefV54I0yO2JIc\nGw8jMK3mhLjHHBYSaI0FeXA6q0JQZNaJREmJJSB1hEUr+XjpbN5DagUwRl66\neEYC17o+WsK5ovlpO/VoqcKqbyeAHZpx3lLaYEeWhKcQIC/245rtzgOLTb5L\nyoWO9mqRhLgy6aVa07Kh+D6G5/qRpNzcujjDJTioSuSqy+EaPqkgbQ8DB4cw\nN5Zq4LYcgz9RUsSBQjEdWFR+sCaAacWUHzuGd00YUNWIFswVZRRXai6mrFJo\nxnfD\r\n=uRhC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.69f9f0982.0","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/density":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/elevation":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.69f9f0982.0_1592860477039_0.3237959797271326","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/switch","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d308eaaf45fbeaa8eaee70d0d8ac5279a969854a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.369a293f0.0.tgz","fileCount":38,"integrity":"sha512-RTrkdxeNVKWgPa20+H0rQ/yrH3dRxzN5QyN+ki/k11gieGvJGZ5NtwnggGp+4SGQFtGt9uJmwAyZrYdXimfZ+A==","signatures":[{"sig":"MEYCIQD20rDVkSmMkPVUa6kXjDgsbOkfpfscKWlhTAuBNNTZdAIhAO+1LWrvELSQ8Lrgur7W9w3gFk85Soe5wn//sRrPQ+NS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R/NCRA9TVsSAnZWagAAZVUP/3X9nfQf9qpudzMAHOo+\n+By9qCSjG1ksBqXW3OTC+LEtdiPCLqZHIdMdYZzcCEatHFkylBEOpo+Uls4H\n0+VmVidcJtzH20H9DR58kKNYIQs0bEar4KuG/4hcluRwt+rKKM30XWFhhYi4\n62bCdRFP3CSJ5A8jzsJaJ+8eSsn2akgULOAmLuNw7f0rymERCtiAoIIE9KjL\nglgOV1qhrLoYVAh6y5Wrgp1QpEISctqiUn2C/iO54Xb4dN1cvW0dXzMQjh0W\nRQIZ7CePb5pO0LLm9IjD+Bw6gU5DJmr+W4zwMnFJ9zTJC1+wuRj04EnlEUrw\ncGRmLvDLougZeReJweJ2DbcjI7/vdHhvyR3pZr+ZY30YRRCo0SEI0++gH2PG\nj0fFbM8N+uoZVnpZoFYrcXegm4OOj0ztl4JQ+arX2UL54h+/AP/81pbuROV/\nnvs+O0YaXCbjYZHfJ0yGEDcJ5U0PFvmXbasxxiySsjSpvOb5aNIQumrnq28w\nXne6iUWmNqsVzfrhyxYz7bn7aOsE4Neyslk01q4R8Pn2ZsvS/SEEBp0HVzUm\n9VVy2RtYJ21qve2WA21dOIOJsW2+EZ6a256M28imE733vW18xeUPXJoi4dkB\nMWxX6k4aCtwnDSl3znOXTFShDloDg3JWhIJHUOkgsVb5NNiPVAK29rmMqUQ3\nWROQ\r\n=9Rs5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.369a293f0.0","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/density":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/elevation":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.369a293f0.0_1592860620969_0.5448618346750467","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/switch","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5239188e4f93c0f1c0d226fca968a53d858bc79","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.f1432b5c6.0.tgz","fileCount":38,"integrity":"sha512-owynn2Z1dWBx6zS7ezep05iLiCsCSir07aDaA48tVifRgYxa3DtGwDafzxh58RdHvZY1+VPz5P4UX+Bd5OPXUQ==","signatures":[{"sig":"MEQCIFgCWAq7w6ZSMm32hImpRNfcHe1hp71gtMIu6dTNJ5Q0AiAFzjLTYOhDflDs7kMX7dGjoovS6Airy+j+ylIRXWXKqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHACRA9TVsSAnZWagAASs8QAIf/5633whm1vFwwHMYG\n7nne8MZpQTXf42xR1hw/u5Y31xXkhpvNVsjPGyZ0r0gFrlHfQGnBCSW/Nopw\n7XgUGCbr0snCeepFb2jRCsWLT2ihswWsNrVzZ6RpxJ9tfLtNfc2WmiqAPhuN\nEfgY91FxtMFGMwSdygpnzC7LJdlFXq4hhqeXsL6iO/VZoYuiBTa36Zqp/o9t\nBXubiMBtoaZJ0aIdnr65l7zTHBogB62YbtX/MayHOaayp2zht5LcN5JpZu+T\nquB0dwjgi/TcU5a3SYdf9C4V/MofPvkhKblB+G8lNmDsbacr1WM9+hUO7Oyl\njp7cx0tVg7md5fFS0+Y/a/IH9ukkTr1j7LYLBRUle9kFayi2zjIHuyg98lkv\nRTEUytSXX9tRCdZbrBE/RKOmusr/3SCHFPSgF/t/qt0keCRwV2hhS0zNrbPK\nH3PsggyKFWZmKKtiEluhWPXroAfsHTdRQ842Zgm+p5HsbVbJnovaqxBq8EUr\nu8CbhGNCuq7kpWnJLbaGnsKFsMI/eyrZuYYGykP2hfklY/zl3A0H0G8vpAyx\n+WRmreKkTM3sB4iBT7a0KxLSLiLHlBU9xedz8Sao4DwVg/foNhRJ2LJAKugU\nRGJUhTGZJ8F/GvzbK6GcEPjIuuA1QUWUbMe2FLk7/6lhVgAw0w8tRafzKeDc\nbHNR\r\n=IY5B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f1432b5c6.0","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/density":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/elevation":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.f1432b5c6.0_1592861119712_0.7123930163253762","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/switch","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eed1de0d7309e73b3a8b061dc39ef76b5a78f9c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.4757a16b4.0.tgz","fileCount":38,"integrity":"sha512-N05D4WcVXhcDXuUnjKEItjr3tzjsRccwmIa3RiizZeJv4vr8XekvaxRKA0iOMXA3m+UykOxGF7Ba5wmxnbNTUA==","signatures":[{"sig":"MEUCIFM2Q53fszFQ27KXqBz0wQdoEKfwrO1O25sumWRZgt1jAiEAyxJfIwqN6A2r0FYLnNaqSkSfrBpPqhuc49ybObtdN3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShaCRA9TVsSAnZWagAAoPEP/05Dq3wX9MJ+WVlmjUZj\nvkdToLFtPwH1hyTbn7E9/kt5267qbGtX7cIeVegY8BShbsr3qD7wMbBhcmHF\nXCE4OeL0DaVyF6fWRC2glcISsNeG2ZQPr8SJExyiYFsJL/NtwP2BDzwhEhR0\nCwbuo/LwTcpqpnN+xPBeZFayBJp7L3qpn1bNpJG257LJN8tc+zU36AlwIRjv\n3+6VnASL6CFdmGFb6zLl+bd6ZhRPA520bFy6AX3QVXifUnhG64/SENsDO2ID\nXzwsSwaJnKFJKjU7kSsHYaB0hYeV/HmsVZZn020miVDqMC2xU+UmOPHFnvmD\nK2sHLkRBxJfg5tEDE/3tG14KDYlw3lpFGtAPVB+dsRyz1JwRBCy7KlA5KDwP\neKM2Tw4S/Fii0K7b+GYWx5SOY8Bkuq75PIQyeyu6As+0sXw+nucANAsl6VMv\noswm6r2dLZke6Ow+OvOY4MJa1FbFpJa3+EhiCK6xZ0jyGZjJTF92ISwtR6ox\nmbMBOMWyQBZxdkdXoy0WamaYlTHShFZ7c/0OKODZs1gSzM6jf5MHw2Ik1PBI\nZjlrH2u1i6GSF409TnugvA7Q0Vkg2XEM1iV6G/L5KGNIAaUZWmArbxuP9uWl\nRjsiCh18eCpPJwO7ZwtxH3DjOGETJl5rpJwe8LYnoRzCEs0MED3LHJax7Y5B\nfIvM\r\n=v+ng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4757a16b4.0","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/density":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/elevation":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.4757a16b4.0_1592862810082_0.4357331653741765","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/switch","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a07891bd5a852cfc1115447bc22a69b087454aa8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.f8f472762.0.tgz","fileCount":38,"integrity":"sha512-Fuiv32T6ZEd14chlVKC74ltaWA6E7RUB+1fOEluIj0ilWznoMXdKiWQtJBdyi8kSY83D5uE+4yHLR6PYZK09Ug==","signatures":[{"sig":"MEQCIEMbVJmfVwdMklvXstJfMKkXID6e8PUheg0m8okRayCbAiA7S75eO9ukAJiutiMpSAx5JooJSZggWZrceUEvZSGeOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlKCRA9TVsSAnZWagAAHMcP/3gzyI8F3uGO9PjFB/UJ\nAru/zXx6X6qEqgTGKDjIhb0Wu7auIbRTk9AWDSxIR6gYFgex6I/BGcDntLqX\nmqGX+n3iqklxHxnGmRtUDetI3VcCq8SKVL+0bGMb6cVTjONi2o5BqMxmhS4C\nWIVK2EgkH04YDz+56ppDLcs6dCS/Vh9vpghN2il1gGihw4u1wxGs735ujqja\nZymuylEoN69FJECAaXifXblabxeffKA28blIY9/9FhWzJuxUoy5AMnFiZI6I\nc4srUapwDsDoo2lbNKWh4ORFV+4u2jDn0DPW3yRelRKeTpEEPqaYfMX0AkEt\nmpboy5qwpTd97vXLpLo92W4HYKThFjA+RJW9Oy7WWM420Okm6zfXvBAIKi2x\nNkSuLzlR40ybItEB7TbE03MWjZfmU1XOZNm8RZSb6cnLPEG/4bj9W4AggnyO\ndP8nJEKTWdvflnOTb4at3hcB8jFlw95WLdbLWdj803hxgRdMVIupqYPMJfaC\noDWjpQBS9AUqljeW/MRU4QIvTJ5ijqatADjUdt0B4R6/sXaOk6GLLowKFdRo\nxrEgEXo9dKnSgTJKfDsCusZ2iFt1KS7X/ayF2M3jdUFfC4qYmKFLurRawQeS\nKzTW+1JQ2tbxBE0JIyAggQZiJL2FXwo98xO4UH2513kNFliakpHfbMgYMR/o\nx2M8\r\n=BJLo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f8f472762.0","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/density":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/elevation":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.f8f472762.0_1592863049957_0.2493728211229873","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/switch","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"922b91eee760965d9faa4eb15a1f0056a6730fe8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.7e4d55c34.0.tgz","fileCount":38,"integrity":"sha512-jM5k5gtJGNo7DGV9yMrLJ4I2P0ZeYn0EyEc4RZ1P2gV2bWrIi/xLhvpOrkRce6ZM9ZtQAF2/jORErK8RzD8F4w==","signatures":[{"sig":"MEUCIEzPXpgNMXUBUdh5hxWPdSgfZwtAjFKzrNHUVvxOQhKUAiEAjAHTvFhad3Y1nXKv8AEKYydEB+2BTi3q6kt8M84Kt6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDHCRA9TVsSAnZWagAAPXwP/0Lzq6j2Wzfwxvf6TJev\nA+2Dcl1jRinR9ssaptP4H3XBjCdD+NPEU0Wodys2C2jbfH7qYlX97SUhU/Og\nquMKwCcAIb+8s+THDBUWzzoDilww2eC4zNdVLZhYHQdBhQyvWABqCGhYJc4j\nqgIuzUPmSsDVlt+DLoijN01bPFJW1jBREDUmyFAM9ge/p/nJhj9WngTdwJPm\nQjJhmEs8c/4X1J+hv+slNIvSViHX1PIETp1Ugqs4U+s5D3Gp5RyIShLJ4al4\nGueOQIFnmaOTx8XuduGmANQVN1G3dWL06LHWt8JViwLWlvfDczfnMB/Jp7PN\ngV2XnzKKMc2WOZ530nrVcdHJfc9z7qmjrIsiA0jVDTV2trU44YOGXo5x3rqJ\nfJadXzpeWkITYu2g2CoLAMHjZhWBDzaEO/Gl0gE0YztYJ9rw0NB1O45y1/1j\n6fBSGWY98Qy6L1u4/khKzyypoIU21Bg3NqXjFrcdp7Y4NsZM4J6arhRFOGqj\nrd3x+Ow6DMNact8QP/ImTUZQhJrZX3s/r2XZgO87UWK991wpw/HLZ4IP+LzH\nS2ZOztRpPgMNnjKz1k0R/Vz8rZK8LrnpXfQlTGv8tOZGXqXn93EgXGFyWdnq\nwe+34dGfDYB1IwTllFi7m/b3d5t9BHHCcECvPrSK/BgJJvDHn3R2/lFc4gOd\nq1CD\r\n=D++o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7e4d55c34.0","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/density":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/elevation":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.7e4d55c34.0_1592864966947_0.4084137430858017","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/switch","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54cc350c75d05397c3cd40c2ed57dfbc3222f21c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":38,"integrity":"sha512-2WMaoghwHMVDmgUiMVfC5yJnisOpqn75LDWEQCf5I56dGfyz1gYEOt+jSxj0n0K4K7lqncgBmmW8kJ+MaZOdvw==","signatures":[{"sig":"MEQCID7NGVcgr9OIj291elSAZvFERKRpzn8tp8scdsIZhb+LAiAdtuBkSXgfhjEYBVNS1dp82iQJBHOaJWXxJkshEyxpEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hF/CRA9TVsSAnZWagAASUAP/2Y6KMp5EPwiXY0uJCHe\nm8x/mWpxD9wmjpImNQns6Wl9QoGMjlDBmV1PxLFBl1PbnFC14emPmFX8+jnC\n4EzSTQykDnWcyKC7f3XHy6PM0zBkrD95eHXWxY7Yb9vqyauIczqhpzrr0UMQ\nS8uUU/OdQDPIVYfbgRNRPafRP+FF8xBRHAV6fgyJCUBhXpUJwDdjR0LPzzxm\neLYGwAIvIwT/4uZwropno9dTOvsHLjdm6hD2U9idgQk+MLagl2NnMWfdLqy8\nkJg7fjTUp0hAYj4PFCBEp3+R7MLvodMxexPCph5NQ4mZHTx7wZ3pH70uBsZS\n/Cv3ULd6g59xK2LXFZzzD63Azg5895mrm05PzkuZVN79S/ntaCbeFS9HTHuK\nKU/EkbDzu2w5hQFQO2RTxKcLQvuN7Cp/ZtaUEgWUvtZuLQ43FYYe5vA6lKnm\nZIneO/BQiQJdBkDy3Oiw/85qJLjF8yKC697ieTLiFk4NVOGHSIjJY6IvcbjX\nsmPzEIITK7mR5w+0+sBnOx/MofjQ9zD12D1rO8jUCD9AX7PyAg1RSuqDWOqZ\npu1Bu/NjMlWKAEbrGGnBxN5TuduuLTADbRo9JSVed5WIwGET920kbwDIO3OH\ndNYXVojATfX86/vzTqMkOLOOoTPuAsQXKPsSh8dTmIOeaxAUeam+CP6Zv8iU\nn0DR\r\n=53zH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd1dbc91f.0","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/density":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/elevation":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.bd1dbc91f.0_1592922495272_0.6621647329558278","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/switch","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8533194e8c48980c337771a162ee7fe6f71194d2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.31523bc62.0.tgz","fileCount":38,"integrity":"sha512-nD8ekQW51QNqDJT+SlssjgQa9XOxybJIpyFeO5vAYhMwYgVixPomQu3amNXp6UM7+VMbixPvjX3LYDWAUbS6bQ==","signatures":[{"sig":"MEQCIFSFs4ugdIbJedN+HvfcoBQOOpY5fzT50Go8B8sOH2QVAiAsCW9Kj8vutqf7cnHOFcuU6nzRTFjoelTgcAVNqQqi9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLJCRA9TVsSAnZWagAAxKsP/ia75G4VXspLzbMCXzJL\nVLE64JjxHtkW5fm7xQAtDClg4ddL3pbiC3Ux28vGTsVOLmnvMRNbzwpj+76x\npoXSOOn+sAi1QLa0MrRkdXCEfKX41bnrmgHSQ8FLbiBIfTjKd+g39/eUYOec\nouTj8WcKTK9gZp0OQFVm7Zu4dW/XhjoBexQXDlziv1Y4EQdAJyj7lrqKatYB\nQ5IhYEoLWv5o7dhW9zJvy+zObXpEXhd1KLqXKPIlrjapOmFFjck48orYRi1q\ntd6uhU1Wduz8ZfogVDKjRBFr1TZXodQjocTUA6cFRTcbjKCe2sIXoC/H5hwm\nb1ylD5Gb5OUXFlDAdcHiQTKOpERyochjbT9BGLCZ9zvMvzbPknX4DFMax8bk\nlVADzbOJYKNSlaPlhFVJshvo4qGs39oM1CGSqeKI7W0J6bJlEx12OFZFjouf\n1CL8MHQKIhEFrKcLXpNqmq9ySedSHWYcNwdkIVyI31kh7xDCuyFeZnCQ2r3e\nz0V/yMS0mgBwg+q+bNs3AFVIEIc8hVMvSmjhmxjIj+sKaaUVzrREgxxAZAjp\nwtMEDx/L3uTwbSGhNZMu/gS84cAqkM4rfASMH4Y9ro3LSiBGLCypUcfge2zh\ncsiKOtxng8JSDgWQkI4Fd+z0TzU0m7TrOFdTkzSGFikFIVxf/LEz8Sh9Nuwc\nbLAc\r\n=IWKq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.31523bc62.0","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/density":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/elevation":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.31523bc62.0_1592922824870_0.4830915163010281","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/switch","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4065cd2e65b97f1a70ed8291d8f2003a7fd5b720","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":38,"integrity":"sha512-o8FF38jrAlkNOcOjm92teRiJSenNIzQiPJJ+mZe1z0SSNKoomRQgZxCnThudVli+y9pyz2E7P89V9aqxQWqiEA==","signatures":[{"sig":"MEUCIQDzu0DDx+Vy37CHDTFFqRe+ulV9mjp1hftFoGIZlvSOuQIgCp6cdwM1AJMNKZ033wXqdFmt4JRMXxuBZfs/gp0Y1xs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hRLCRA9TVsSAnZWagAANkMP/1G0dN/Q3P+MguO77g+u\nNu8F2C70fdNLSBVzjTRixIMQBkZL/idtSjNtOwbKux1uYbxxfU3UQWRQoJmE\nHnv6qRBUuKdsxUALZM8GBhCuqT242clcFhN7027RlxHXVRIeRwy/rr9DF0Sz\nEpDW5GYbwMzF80nqa0KwX+a8r+bcmcC25IbCDHG20k+xrmPTratWSod7Ih0P\nYhKhPpWAxUWfESuXVgJlI5E6Zuf+dTFLbBvL0nxPo4NOLjGM7S8ZvfW7rgxF\n8dNRtyibt6b3JVfFZakMQE4qbCPrPRaEszEy3d8JGcJ8QFfA5BJvv3K0Bmru\nT/sFx2Ntk8+gigXj1OikwEkPluB7SRPFOjfJcKSzT61peblwNgicpSuK5xot\nVKbXjxqSlDCa6aL+1x2wMTDA5p090l17ST5JV3MwL/3ab2PLNmcR2HeUAkdc\nOUOiAxt7JhrHvqGDTLAvZ4XABW11sjxkv9trDl82DQo4eqosv0GbdKvzSPrL\na8nMAOyAHt08ZHkrZlT4szo0gfguR+WP4uCruO7h1nAYVRo4QI9GSig1fMUg\nDbWqGwyxFash3XGQ6RZ28srgFyvwP4Kv44JntSCR5VkZNjHJBwKkWsmsBHrt\nuaaNlyrNi78z7PMUaqqoCY/9Q8Kdvfv3bezvxkYhSvuJGU2jBXC7GZ/BPCKo\nnXPL\r\n=uQ+2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a96b6d4d6.0","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/density":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/elevation":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.a96b6d4d6.0_1592923211496_0.14553865998293758","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/switch","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92a7922fd2db571ff0c690446837d11e6eef82f4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.ef3a09533.0.tgz","fileCount":38,"integrity":"sha512-/EXH6stImiXFPkn7el5WCSGWh/UGAkn84Aaj2vBfct4ZluKOOimpFeIAOfBIAGX51YeTnaL8GKFMnGmWbQZV0g==","signatures":[{"sig":"MEQCIEtgqNp/nyHM6HNYHlmX4kMk9c3NXooHWf0AJuxJdQfvAiBUeg+qsR3sa6d0Yd9EeBuFaoJiaOhptwjxxWctmzPYfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hY0CRA9TVsSAnZWagAAkicP/1yrM9ftrk9SHYeV1xJW\ndvChJs6Gem8caL5EyoS0yOdRJt7xdDscX2etXIE2YpGu+YtDdSl40FYydbv+\nCehBvqFyrfFKjeEqLtcMQuJHPju5s1cjb2c92x+QhxUNFBjxNr/7q2Wr5Wnz\nXYQjz7auW7Ny0dWSTbLplbmMSCkzmwMSec1TpdMTrjvu68RpLPxd64Akz9WF\nVqzHrHsjvnYt39yUFWZ934OGe2L9vWu7bUcH/n3C4NBvUJIBWpWXGRPjb46P\n+6dt0LVoMaQJGckrcgSq+ltID7BGLgpOD7OHuwCcK2hv4M77A9aRr4p9A3Ih\n54FVhgpzvooaLLjTGdHRGmiuLow4AF3LgLsIU8XlzMmYplc1T/xw6PNQcPB5\nWN9BhePoXKbZG+z3TTDryUDtljkH9MvR6dUjDRjgNyHwbfm/oovdHMNein3O\n8f0PNTm8k0F388evUlbzZINxQNaoNf+0zNvr7wtigH5mf5b3ndwk5vh1qmaL\n5hOhm6b+wgqGRreDsGejGfJxFdZo27p3NKd5amayFloxEGK73EJTj+tQ29ZS\nPW0R6dLEk4oNzdKZYeEXDeHQN9ykeldTsOVwE3/fDTDwbTDFHu8Clts5dwLE\nq4amIt1XRCnvfPiIQ3bmAg5TvyFSKmG/3Dlz6mxjQKyPYDWZRTIEylxIV8vv\n4wMM\r\n=SLiV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ef3a09533.0","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/density":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/elevation":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.ef3a09533.0_1592923699507_0.9877521188749483","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/switch","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0f24db1e65b5c3274e681362bab6927c3e6a7a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.080965f39.0.tgz","fileCount":38,"integrity":"sha512-vfPdkzlqPzXqckA+N/nXD0ilkEMS7joAk5kJZVtLorovcZ02RBzHb3nIfzcucFLwhYGFXEIgMhbcu/ov89eiwg==","signatures":[{"sig":"MEUCIDp7iRzZs/PvxzrlXxqYmZccgOGe10KAIxs4T8BZbFu+AiEA1P2T34iGzgPBH6Gy/A4h7isX+zOfAUt0SeQMU5mjXHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0WCRA9TVsSAnZWagAA3AMP/jKopyj2SK90SJekvxh1\ngh6+f89EoQE11TF/y6Y8gfSVkygvULlAv52GLNEEXi+Zi8QzrtEr8Im4AnYc\nvt67w5pz8muQx7kr0Pj2DYYJO6shcS89/NI5Jp0O/b9sVEF7getSso7YxctG\nTQJ2p9KebaObKWH1jdSR5RsNUdQxIpdQ8BqBxApvCKAsGRlCT1QJJ6DVh6z3\nUzZiIMwdxoUPF7vldbhU9Z7Oi7ZWoAm0XbofpwsSdBNl+/mBnhWaty3LhuFO\nbn7CDjQBCcefmhs61IVgqYZhEzIUBagBiKULb4TU3OHX/PpMBJQvDu7M49IF\nr5kJeYACyoYly9qMM8Jt/VCj7OGP8V81RF8oBnBDoXfmxKXIjG1SqWvr2xrF\nXuc0bfTbZKocbC/8YKDEXC+ccBxrCNQwby7Kfeu1WYVthIUEdBp0jJ6RS3+1\nDxQ/jfXegdZiGt3ENV41d2mGIqANAPSYkaCyULsUUxAWP81Pk/TbvGBwEFB+\n5eBBaDqFNXjuWrMm/TrfLkSiz8nqfxPfi6SiDVn1P3g4XeS4tItn++YDW7YG\nttFT24CfCZG/2GAxLCQ+Qj81w7jP2G5R22jY9Zr2iFWr99PxewifcY37jGG1\nwKzaDuToJbJXF3j5j0w12t4JriOdcu/kZFswIfKK3Zo3HCE6Llo82dDdCb/Q\ndxWe\r\n=NFId\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.080965f39.0","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/density":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/elevation":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.080965f39.0_1592925462403_0.8930334852652466","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/switch","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bab4f1d1be4c45928dee4c7e929d55e0f458f204","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.1bd67b65d.0.tgz","fileCount":38,"integrity":"sha512-OF9d1YhZCQxr5WfwqkBSxc+5Ys6pQXxMxnCrqED2U26awWh6YGShmmvKSklgz9hluWuliSMyr5fg2cQp7ECogw==","signatures":[{"sig":"MEQCIG5o0cmAVms0HgoM8F7iRHe1H1erI0oHEmdoHU3yF1QlAiBAA8+6EU03PvSSGDeL3WalBaUsrgbalny8pjLpLHhsww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icHCRA9TVsSAnZWagAA5wIP/jxuiqbxdnpBXCaq40/Y\n7j8V5MyiC6VDTjyXWUKcNPaa7ZrTvjpolC+acU+2x1KyKy1zcgn6aoJHFPui\nP8LJT2xxVxqN4ygMrw0FoJ4bi0pJE8Zvmwfs1Phv86MNFz4c2Ld7l15LtWsf\np7OQfdByaAgHxqttv6HlNAw0O5EXCgxBBPY/G0PHSAjQzKE6ytuVgmaIw7bi\n0tlB5yGEViHY5FinEdPXEjiGoBLTvM+z6i8zJvyt8zSSHPfL0hnPCu9l0jjc\n+KehH8+/t8zU3MifRFlFENDqKySe/OyVo59kbWiX6nB2WcN9nC/fkSdJk7bc\ntNq3p9AkPJYb5iNn2B4YXhd6IBrYaeod/odpHcyX62NV8WuxVXxF9qifNdCB\nWNnGM3urNwwsffsi3Al1y6aCosm5lU0NoMhgwROLztXl4CgFBHXu+2Hy/ZjB\nO36MHL0nnv1mZx85F+6bE73njnYphtSO0jAUlHLlqyUNE+qlmjg1zl/9E6Pi\n2oyhJaoMaMd+v5+HcHkkG5+1+YfULDIFeZ9wN8UHVZbQ4dXn5A4kTxywS9WD\nVJSXe3xqKPVcxBiCzdM/6o/ZMZH0ENzsZQhNgSS3OQ98s0i2w0DoxrRbrV5t\ns0H+tpgo6mrbY1e45cMa29x/iohg1czXcZ0jmV+LuB299fEgXU58vRDkF0jM\nIi7k\r\n=D8++\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bd67b65d.0","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/density":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/elevation":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.1bd67b65d.0_1592928006593_0.3961021707950696","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/switch","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe58a68515327c7fa9f6147cc2ed163af3583825","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.18ca31248.0.tgz","fileCount":38,"integrity":"sha512-/SejCPsyhR8xZE8flkebTHiLlP2C4trt0C2Rm4LVj3nDPrHXogXw8ktTQImTXNp04F/BTfQjio+8XV3e4tg3cw==","signatures":[{"sig":"MEUCIDiImmzZGYNWvvVyPTK1lb3XwSJgqRTYoJf0IYH+6ftxAiEAllO4gsBJMt2u2W4GKM53V3mj4KYwbogK8tEIKz9I/qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kkDCRA9TVsSAnZWagAAsecP/jg3HIgpX94ydjrVatM+\n10meODJ/JFEGm7+5gmKLGzQ0COj9x7PoZAGyvbLwvp7Oy/23++3fdJttAlfS\nbI2tCr2vwDlGk9lTKUX8msPSgAZWD2UhBRUNbrlaMDFnKkl9cT0aqqS66gZv\nBeWqXwE+/0CGamaFuaUlDyAdu9ExgM4LDkikPMvak/j8FEtwizxTNt/bStrK\nIHHuh0E6+LuH5FjblaCwuAJcxj2HHZLOXymRb0IHAoDUWBw5N0IIME1Wb0wH\ncXtCpyO4unNx7YElOwLcdFMTQ01TJVZtLwKkA7kvoW2CCXVwNerycmUOgFY2\nPLdiifXFzneU+apNy+C2vWGwLC44JTAGgicAQddtKsbl14VbE8gZ14wmiyoT\nesKjufKZEvT/gSHPx7BkuQP6HesOIbrrroVjG4ZFYypSDuhU0J7LdViSY4d8\nGGfg2PmU8khaYr+DeF50h7SOYgDrV8Fm8t1kHiJMsUl5TwHi23QzhVyU0JC8\nLuE9I8F+d+Yrb43rEvIOkHdzfmUnOUqd35ByQmDbjV/xdCdkmftFvKEBBHtV\nvGBgvSn9b4VJKY84WJgjJ8JfElbHwzFMZKln64dv0GsQGxOGdXViQcQuzAYv\nLQsVDCt9KY6+Dnfk9kF/myuiiNUkugToGUZxTAVQpA4a5nAI2NaduP71matV\n3gdY\r\n=VLoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.18ca31248.0","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/density":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/elevation":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.18ca31248.0_1592936707259_0.9902371196354616","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/switch","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2c9d6ae42746213c52262e2d2b67ced9342c340","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.39cf00836.0.tgz","fileCount":38,"integrity":"sha512-xuXJatvKd2tPpQeoI9vxgAEHrdpK0xOcMSPjm8PBMluSub+3RA0CFVfQRIWOnDWwE+5YGxlNgYgX2ys+lCC+Hg==","signatures":[{"sig":"MEUCIQDw3RtmNkzeWqhFExb7pqUbVBcEocHCzAeA0FWjA9yC7gIgO01mibyJ3nYW0j4foBV0+lSv8K9KtvOvkwkENcArQKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5kCRA9TVsSAnZWagAAHEoP/RkJcVLPbF/t4VRJxhcK\nxF/O3GvJ+oNGaBwwIYgSsvz4NURbvJT2vHD+GTDoPw8ZuK7jYLFM/NESUo8V\nu/0L6ShYktG/ixHOBKoCW5qJD/MNVwinslX6+Unxpy/cGU/VrSoesUdEwPsM\nQ5MQaWRPVNkc3RvFq79j8/s62IAOtkytOJJAVgjtsomZ0O2RNjLz1fK58Eqg\nFsEahN7i3etQY/G9LTB+yrSh6b4TBWOIYGTHVuRALD3/FOU6FboRqaHLE414\nBUK7Htc5iXK0AgSSGC9WfQ3xhARyYZ6R9kuH8cnZY//b7cxwBKzNA0OcqE5k\n2O2X4xFp4Iuf/0Vad5eZVXwWbXisZasdyvaodNsRWDg5f+VXGcXvsQlGIWoh\nWjNvyAbu0jLXXYuq/vrj1ePgmuhN9kmTsQB0DetXxxEog8B9ntGBXP72vpq9\nq2iG8+Mol0SEjkyvROH2+F4WrsF75Lg6FtMmH4TGHtFNGHhQe18FL+mB/TdU\nKInH2l7Jc/03d3goA/zOU8/CcMcD7gvWQyOwMI7tmmiWPHSiOSulGuNZoomy\nPjSItU4kUN50cupt1ZdZHkgQqhgk71ulTD1/Y4Y1WhdS7fo8BhITt0OLKtSS\nMqN1aeTCmrSlec6M5oOT5Z/eSuqK3asIJC4oTJssrXmue3a0P/ni7GXF49yK\nzeZG\r\n=xWNE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39cf00836.0","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/density":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/elevation":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.39cf00836.0_1592938084415_0.5326883772466611","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/switch","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e7ebdb234f98e86d3a4dfd44c5e7d70849de441","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.1bfda9e05.0.tgz","fileCount":38,"integrity":"sha512-pEmG+fg+6I0MM1tQVZYxC+m0TfaLKZooNoJoVNgrYUMWX5EHjEI80uv2ulb963sTz9nJXxouwifJ3aXuHTEcKA==","signatures":[{"sig":"MEUCIEL2rqBXY3tCibLDZStPiWbAmdY1kO74R6ld3mj1FPbcAiEAy/xb8YDPSbPXr4fEs4s3X9Q/S3fmjxwUT6hOvGCdpyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFPCRA9TVsSAnZWagAANrwQAKTSotiGHQ9x8ehmxVp/\nvrQBbUW2fDCIU1lAfuwAgRp7m6LKpwDH69z7VuA4YuBod42iBSp4czhBW7o8\nH5EpkbEgSUbVTvfaGXH1F6p/IvcX8w+zE5PjCG2hjtLPc9xWIp86elLR+v5Q\nVSpGgfQJon52hzQ7FlXI36jASh6C4kD0vTvMKM2EADyQVs6AM5ZKzEyZLrn1\ndrlDXsK3DjpVvvQBoMN4o7h1MNJ+PvqxU4lxpBsE+4zDm0I/nTrHu04qHT+w\nzL10QZwEqo4e1tXrhgZq7khYoZM6QApQCfTNTLuKRYagM2vX/93n3C3Gi3EX\nt+ol28p9U7/1tdU9QFXDMdgUnI2tdq97QkYjMEKjY0uN/jtPj+XqqNzLSzrj\nmYsp/S+mdOPTogX8YLG1DYcX8QWgXBtpcvJgeSSI9uG4vp8zuH8CXoOBhqUd\nwiJC6jrJWKMMljGDv3uf6wZlU8Q5kHyQ8LpEebDd7uphzOEwlMP1oWZxeL+T\nIGvCH9wSkuoqWMKJiunoiK9wmpFJJcfQYJTGT8gp20dPe6KJ15g7j8EyQhg6\n86wY/AhDjDwU4FHPeJPp05xGVPodVYmLZy8dPrsmSMp0/rAXF1eX2jifF3UD\n4Rgs/i0OE6hwzGAlx//SxPLpaB9eV/T4BfUfB4XC2uNo3KkTFKE3MUcXOvNc\nsR/1\r\n=c/UP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bfda9e05.0","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/density":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/elevation":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.1bfda9e05.0_1592938831404_0.16713819358755755","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/switch","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d9c426c4f384a8d232a87dbb1c69066bb11a796","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0-canary.08731bd95.0.tgz","fileCount":38,"integrity":"sha512-xQc7x49y3ebADKIbFDPF3yFQvZ8LEXOt7yh+JZxLEiLC1nVda3OP+/FdTLBzAH8U4xuTlX+ESV+5Mpa2fweqfA==","signatures":[{"sig":"MEYCIQCWYcVfx9orVlWoIdYKw64FrSmzzfv9b84DmZvW64DieAIhAOQq5M85/LqiXCdGduxCXbfjCsldhCW01p2yH5c1YmiT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHrCRA9TVsSAnZWagAAuAwQAIArmJYi2AY1Fj35FV0G\n4OyVGuSd29EL8n0fmykXSJ5du9yNeTo/E3Yckh5SBf0SyyC+fBBWsaKYc5Md\ntgZv27gOCcRi1Q7rMCbtpkvSr1nVuBe+j3yzEwhborBH6X9ZIh+jzf0+IKCs\nW8sAGAouxQIZJ3I+hdcInpVeaIwhQyRFNVRwEeW2kMfy0Tes7x5XEX/qS+sO\nsPzMXyUkBPx5rsv+cb5ZnvhOIjfIrbxIT34Sgbregj7AuM4S0M/OsrsqPpRF\n5CBI54Ke7lVra879uq3KWw3FnjBflDj6l4zBfSWxEupe+tyK84t0cQHvhcvW\nn+Y8EduwZm9h/Jn4mQZJowHK3pyFJCQRLwBqWEyZIz9WoxzpO6ZMYnR1JF3A\nynw9sENMvtN1QRA9Idv00Xij3LAuSLEq+hVzULX+3GCRKVYf5cx3vwh0r6+Z\nNtzX+812CKMa6oPzVnapr07QyGn6c1xhYSQCvauiJg8rGGE0wkuFlfyzrqoJ\nwwR5A2wFvPDz9MqRBq0fuRcSNcYYdTAk/a03MWJ+3RvWoDz2ecHg0A4M341G\nQOjPuHXQTUX4re1gBWm2xSgAYz2afaMvIc/oHvKqcC0K5dd6qs6VfYjEv0uy\ns4ha2YTG+EOXtizEZpzL25/2zZOXi+1nHTtrF5C0RXjTQmMJPgAI7ohknhE/\nJGlb\r\n=arax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.08731bd95.0","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/density":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/elevation":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0-canary.08731bd95.0_1592938986752_0.698885217874911","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/switch","version":"7.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"429494b66e67329c1a18015e302e8d0def1d3d00","tarball":"https://registry.npmjs.org/@material/switch/-/switch-7.0.0.tgz","fileCount":37,"integrity":"sha512-wiGPSkOD/g4ortKDb2BsE6+3aQy4t/M1Bchln3LYWAJsE0YxVukTYnFCD07iWEWPWvxR+DS47MO72Xf7NFe5fw==","signatures":[{"sig":"MEYCIQCGgNA2ppEAPaTcAuI2QEsCQZc1AfMcz5XYg1Z6tgLi8gIhAPJCEBnJ+D6aqrqSp88jeuzRIOFzBbMbB//2Bn7OnG5D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lO4CRA9TVsSAnZWagAAIoQP/3VL4HYuZRS5X0R5kMFl\n26XliRZUGHXHp/0AWtrV2F7fsgEFmhEv6WgJyvbbK7qQwlb5OqNbcDxYT1J2\njVRAnylW9ETV9H5SOpn3wY27DAbqaVWIcdd/2eoXzXYwPM6c96SXQ+YUBx9O\nF22fSeiYs2P/RysS9NnsgElQyqoL1oaKMvwUxmoy0JKUQF5mkfZKt7pKGGC7\n2n+HHHxj/27VQhqYFp4Fsh3iQ1vESUFTKEoxu/7EktFyWc8kLLXJI5qgzqha\nC35eBUGbIQzr0hMs80BELgmtMo4m1WNaHeXKaonw2ny32T8qpnnpvL2DIkmb\npCNP+BnSOfF5leUKHpbozRXVjuwGhuuP7gIqw3aBEfHKdNxOvWaZvJAQJHps\n5aIyOjYLtu8BoCS1CZrJ5Bt+Afi90budIHoMcwYBs1Kig/1inyZLuWEWtnKm\npwRal5ikjX/hnZDXUDWNgj13E9MDhjxzPIAJtZg5U8H9WvUWsgPSHgjvax21\n/YsyfXRms3r1lSlA0geMoWxbquI1E1zA2QT+KcJyNjAfdSBD7dkxt4Qe4SE1\nDUIkYvNnkZznf0LjfST4u6TpIMbnjasP5J52g+OuK9sgHUGGJOXLGz7keeti\nDACYvrpM2mrrng0xuRiqGivSHOI+Cb208Yjobh8P3v0nZPVFAa6fxL84MrDA\n9U23\r\n=DxMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^7.0.0","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/density":"^7.0.0","@material/animation":"^7.0.0","@material/elevation":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_7.0.0_1592939447599_0.6046950568103233","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/switch","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd412bf5ebe163a19f3a55e4c1be00fc555cf989","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a3212b209.0.tgz","fileCount":38,"integrity":"sha512-mjsdkIlRURJNrpYrknuIB3BmkCraxeWCZJd1C+VqrZzgx/VpYnExQlyV71Bn25lbJkxvpxlt2b7HsMnGsQREEQ==","signatures":[{"sig":"MEUCIQDWzsqTvH1PNNH4pUWd6W4g0LZEopUPpi3wA8hx40klwgIgSCgmZaz697I59HThr0X6RDgRdu5MdgEbDFB+dDQlft4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPzCRA9TVsSAnZWagAAv2IP/3Ty7oq/Y18Mi5NpGhyW\nygWnIXaVjvUvYQlR/1YYlPNp92LD4SUQIC3x+643293LH3oVa3nuMG0JxuyO\n5AUE+xjV9Dy2MWHF1Jvc8MTNHfEQmYxz7sxZMQnZXjYtijgH8kqO1yGMTs33\nQmhp77RAKa587WfUf8Q2wY4QsQoTjD94loM0R4+160Lvx3QFgsFuf1rB5MrM\nKQ3Ouns1yx/BkrQX4j2mjXg6PO/NmP89oaQ7gsy5EqBEiCEAfXFPvIWl3z0j\nmzwVefT50r5D9Do14cVqRLJjYmHTGPEYuhyL/Yj/Mb4MvQn+6o8BNhOmhBAL\nbWie45mEkCW4GZwTQVXkYbGC92tzv/9TaNmY1LGlPavYs6pYZ+mMLBquQPLu\nOHlNIEoEQbg7aqQ7B4pBHfurr7J7oqo1Jp88pKu5Va3JPDq6tU6As1wDd3pv\nGmFKWTlp57MhimnHCdyFzQXqsrMBsgyRFX4fja6Yrd1FEapqMyK1zehYF5Yd\nQ6dU++xz56/dDiWzGYDpRgQ4H6HoupCfvd9n3IYdXanasYTSPZmxkzjs610e\ngRZY6jVqr7d2ZJMbTG71DJ/pnsVZQjp20XMCjBjTN9HLFaLj3xLre9kklXJK\nAtYgb878CKyKJGcKJZBntB2xUnjRnCUokAcznTERjJ7nXGS6THClCn8Qs59V\nS7V2\r\n=woU7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3212b209.0","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/density":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/elevation":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a3212b209.0_1592939506982_0.6723636172560294","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/switch","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee7a182e5567dfc6e2de390fd1dc18fcb7f4870b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.15e81fe98.0.tgz","fileCount":38,"integrity":"sha512-h3KXAq0yLohAM4dcXQQMslmLl+yRZaGbItCqmKf1t0UcT9LWPH3AlMoeAOnfLsIKIV93ExMiQfHu+jr2WQt6hQ==","signatures":[{"sig":"MEQCIDegbPqU+E5/Z2YWTJwGHyz6G1eW3SkR+K8N/aCi2tS+AiAWiXR9TpXTuSeSAT1Ki4Rzui7c4gn9iEF2qWjH9AfQOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrZCRA9TVsSAnZWagAADOwP/jVIzxlIY/yVcNdmDUJS\n6xpCtpHfulDDI+EdTsPW+ZJ3rqqaeFWMkT1vbOp8o4M6gXGSNSwOw+AoWZaX\nkcgpGKqsCmrpszVa14Xp46ilmbYM9SPFCWIK4ler8cfBCwOCVL7n4puGJOKg\nryYcfnHooSK24/ghLCpKAu5QxXD7lOv0HIQa63z/MK0SCd4IB5ufrssv9SeS\nPyIJe1UC0RbPLQ52JKlzM66azJ7eu+WSqkAT0ee2z8szQ/r4Y0EBSgT06j61\n7CBc0okqgsKXAu7vvnf69ySx+xs3ilHEaih2SZqpFaFT9nY7m+4BLdbi6hPV\nx/LNisJ4xdgZOxO/hL6G0l595FmA7/q6eyV4tT8euxul7PipagG7PDRDcmna\nB8KJrWq1Dab9YxI1ye5gCJcvd2uMDL9XB3/c7PrDwn192qWv8tVycBr21n2J\n3nRq3VMb3NNpLUpH3zAlk16kvt/1RCThnz0F8OA+vCUvOPqiVi436Zkt7EqA\nKbEr2E5ibDrGF9uIyFoJWtcMM6ko5eGllALgXbcZRoQ+rLHliWYbFJdufi6H\npruzwRF41r99WI5i8EfvxTVMb01vz9FHYgJZOW2eD1yOlFWRubM0TupnP8Ry\nX/GnrQZFQGPn3LHm+hBpgy5ASCSrPt6XZEQMnZ40ZSPRkeHzg0zANgP9F8CC\nninf\r\n=AjB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.15e81fe98.0","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/density":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/elevation":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.15e81fe98.0_1592941273524_0.62674845019315","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/switch","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"131a0c7c54ac72cc471b473b6e35bb537d55d872","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.004c9d392.0.tgz","fileCount":38,"integrity":"sha512-32uE4dD90Exd4aoV67XH73Yc7FcG6nK9olBLNuhRyUYYfi95lgx+2gX/FP5huSBCzkHLyhtzb5Dp3UJD3Q6P8A==","signatures":[{"sig":"MEQCIEnnj59210YhQQdhtDYukME7Vd7SotNX7219yyYGNP87AiBLx3tW7yUVTNIIh4Lggfu/oOxBwSo2oBCMQSxN10j7cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oiFCRA9TVsSAnZWagAAvFgQAJWnqgitoyhkPAktR0lM\noRYRETpRd12QPO6DzkvGUZXMLG93Naub1qTFhXw4xK70Z4HyR2O/FtbprNJn\ni3/bUNy3SSYcReUSA5dGlb7r8JWtp3ZoEXekvGw6TE9mZ4g49cHC/xEbZ+jk\npgmiPrjNb0qAy/bdsiG/DiUMNLdOS2yLk7y6SZMkij3wlWdlUR0tggfYG48u\ndw4i9Dcdk3wMHds/ju0Cw8F2/4uXgeaNjjm1X5qowhNQT40p5sMtG6wKZ1lT\nzh1/k7Rznkok7Jx7dHE7JAqHQMc/Li+NW9uEvPcgFsX/trPh73/05bFH1HAN\nxG/T4rW4Y4zjWhoNhFZ+3/Dsi1FalDa/g95gl/pxay9/pWT8LsAhy8wXkwIc\nPYsYtZUR9NZKG9sRGFCtxCjv6u+iVt073qu3nn1PetAcUefw83nY9WD1+LVM\naigEn+astwZN4ZQtwafaDgD13S4MRbgc6wXafVy1APAPpHjZ+Tmkem2YWaDr\n5YWRz/afDtHoHIIc/7dYMgeq/oLl7IkL15SAwmRL4piVoVG+BBy0jd3ssZpJ\n1GI5UwR3aQid2N9FJO4rep390E6uimEJNgN3fB+VVQSTG3Nr6KS56TFu+Y0d\n4hEOsOEUJdZAbcsXfhbxh3qZ6BUMMsJgsB5lU0SupjPlRzk3V1jFhXyuq7mh\ncErO\r\n=Qxlp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.004c9d392.0","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/density":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/elevation":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.004c9d392.0_1592952964470_0.8119730190136194","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/switch","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00cc5511cc20f55b891c918895e3aefd937ff47c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.03bde00f5.0.tgz","fileCount":38,"integrity":"sha512-3vgxk9qfql7GyprrYMYEEY6/fNQnZYE7RA6lBH74hOvC4AzNtmisIglMfe9lX/XCP3h8lQDP+JIYFCJFdys+9w==","signatures":[{"sig":"MEQCICh6lJEM6nZa1cKNcgLGP92e/4/V0lopYsj7U4IVv4KrAiBVYZSzwNpvu9UUL4LXIfFS2DHccmAcpzWDNQrJtBL6Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7vCRA9TVsSAnZWagAAjyIQAJaaNHTFQx+YOgnhZT4A\nBcrqK0TWhD4dzPRnmosSwqu2Q+hLXKsIB1RtOUHrP9n71Qi7m68lhHJ3Txe/\nKaKaAgUypkXa7HxhPT4NZUQf4MsfmZzm3NT3HwhfXIf6gPrRBiRyTGeEAcGD\nD8wvUEM/nBAJ8WocyeU5V+7TKzcRovu70dD9PyQhN2gs3m7QHMPuAPotnbA1\nKb5iFFPCRxjfRHSO4hTJas8Ilwrs+tUNb/bTSO+wbJ62XFjWelMuoeFf/ETW\nDlhh0fBe14AklciRPSmNlunm5CsQ5nrAg+ZUTvyn/n6emZe/WRSdl42GteFl\nbjEFJ78HAlbpFo5XwZAqhKFDxIzF8o1Q8+m7splX2y7BL4qAjdRN9dCPuOAK\nHHucpFtj0m/vWnhX/okMARuoS5qUrZIf3b4tc2G/LHMIDN2tOYF8NiLouCo8\npAqXPZZOkWDVrAQPz71FXy6GvwQPLgAe1w1i+jSfT3vFr0i3m/UBGh4bRTft\n09h7Ah7pnZS1fbwvNmvxnE/GLpTDKM+MmPbzJaXDuvOigWxRY8elzBqwW56g\nkulmsTRje/sayrDPLjh/F0gJ3DRoJzs8nnOmldPB5JnwmOuLNtJ1uhDGMw8h\nyZN7lHe+qPqH0lGzOzqC3sSj/En2m0cR7Ox6vBHf7k2VhtyaxsdFKafYsKYm\npYdr\r\n=dKsi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.03bde00f5.0","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/density":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/elevation":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.03bde00f5.0_1592958703313_0.42763192760269964","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/switch","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da84e1c435fe077d6eeac7670e5ce04d16a57c67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.599b8c319.0.tgz","fileCount":38,"integrity":"sha512-YxpCx24n32ina/mAn2ETWGedmfhhpgOUvLWG02xhyjdCqlog2FALNdWZAADdm/f+FIg2HJitBWwM7CgtzJRmTQ==","signatures":[{"sig":"MEUCIFIWyn4sknoD+OvyBnyUnR+yKfEkJ75pclhRfxqlOnLSAiEA60s+2s6mM5BjkDYTGvLdlFyQQ499Rhbz2bMMwpBt8mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82mqCRA9TVsSAnZWagAAsF8P/iNyjlfnmWxmlgNudySH\n/8OP9Z2ZZbi2mtWtMHvV53Wyv40Qhxr67AJcnfezplb4zY579jkVwogpLMal\nSaWcU+vgq+rZ6nM3IrgFEBl+09f13+4ijwn6Z4bkSGBuU50txAS1dHGFM7YF\nZHIcRHoIGR6jOmxMmPxD6TnCodKI0Ba/8hcej1+Qlm6EOtqsdGvJ/lQLzJBy\nv7+vvr5XNMYXRBqyTZ8gpXFhUloFBGHm0NC2YV7jQ8EdFNssgq0VSeH4y/3c\nuq3xciXzsNYGO+Y5cQOyYQj9Sd801u/aSYWM3zib4w/XFlrd1IMA9fV8MZ7I\nIXEwB+J0vtl7TNbxLEDLzvS4LvXBnH/YKMhb96WiTpevE3RolOrVPlHChwzU\nZueI6EyhaxufrViypNiIRI3qpX00eqQS8fn5O1jTJx77lW+WlyY1VYJkcvhm\nc2bqZ7ifLOQZnrTHzYt5c9k96WSPE3hmC7sG85ckeT5hbjPf9kscSJSxZkPJ\nFzfdvph1ZkrHZHJS33XRIUGCRq4FmLLGYiJctNkLwpghtsd3W/dRatI7xlwd\ndzH0dSQknAYBnNMIZndHpfsInGPwgaWpvcnBp4JQQ8Yao9der08bZvHAOsto\nObsBrZZltowQgNDexjS1wvP3Fjg4xXi+L75juWZbY+GZRwkun9T3UGQk3PpF\nAjFS\r\n=h9Ph\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.599b8c319.0","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/density":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/elevation":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.599b8c319.0_1593010601922_0.45905583938338146","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/switch","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d17d61bbf796ba0ac65b5520847fa8024c918cf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.87e3be418.0.tgz","fileCount":38,"integrity":"sha512-2IsJGV16JEo3iuFApD+9E/FCU0r3gomqtvYcdod7jQ7oj4IA/MXJhfBOQrrxrtylwZZ2Pmt0rJelvRSI2BoHiw==","signatures":[{"sig":"MEQCIAXiNgVJBfZOmvPOWk4We1Ud0VevdCjplwI6mSB7FwJ+AiA6FFMPr9TufpmiGxcioNJpZoTqCHdmDAVjvU/GysjvRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MSCRA9TVsSAnZWagAAQx0QAJiLS2UluQlvgoGdOLoX\nnJUgF7Yt6rN8hKR9zraN4CFUkorZ6Zu8sNOGqfxHHfyMi5WriVzOdE8Qz2nA\nXi4dEkSzjkWPGeZeRtxn3k1xuou6ZqAgBjKR6ZxTxmPZpeFY6XmA8cxubt23\nguG+mAZk4trhjTJ/JUk8tT5A3pZtUs1rjUR+YWvznrTUNpvpxXU+3RUCvv5i\nNKZRtsaC4dyUosYoIiq5KBcFd3lRjl66NyjRUEfkm6+QBq8MmFbH0J7TC57m\nBILLMYT0Jb6Ppoc9KgwQVKkGj59u7PyEZvYdrabsFwdgMgbMJMr6QSMftZWu\nfEBCSaCRl/0kuvf4kaqWaeKEgDlIEISPUEHwuAbj/urpFNuJRf74dR8ezYMY\nDADERTOeBdpkxi5m9j7YmnhMYbpNX8B9fCz6+Y/n7njReOuIjjejnIe/IyhB\n+rXkQs+CiRdQXDpC6g15nb7InPJ7q3TeMloBEqB26BnjRbUEU6xNmuAkLvmW\n9mBmZsS4ALSjO7qIyoKpNMJrUli34v3dIsZKNQKaEUKK3EIUrgMoq/VxHQFD\nCwtIHiG24ZcTDdkY7EIp6l24SOze2jyTZakAqaFGEI0I+Rh9QLczHAHxzPR/\nL7BMzvIelEux5/KDFNnrg92xQ+NMFWyVVH64t2Kj639t6SDWF7agJZfAESa/\nuewT\r\n=qOYG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.87e3be418.0","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/density":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/elevation":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.87e3be418.0_1593021201600_0.9240933784122571","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/switch","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a18811ae38d2a9a487f4e7966f5cd7b7b80b743e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.035cf2a6f.0.tgz","fileCount":38,"integrity":"sha512-s6n4iNcNWxzPpFbgsNkkctmMwi7ohBNdR8gxsbzroQx06eCgpqH1S8lfO5H9dU/2tTP55ptfS4O7s1H3xikgxw==","signatures":[{"sig":"MEUCIQD/Mhvk1MALUvJpblGp7CwD/bIMdfftnZBmqsqizzmGkQIgToSQur4WLr9cpKX0w+ISlSkRwyrUQGz1YWmhV77ok4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852zCRA9TVsSAnZWagAAyWUQAJ26K5p8CZhSoHgn3VQe\neZOKwWCUwCV4+bbiEIfmD5nYsuINZV0oAsK/UWNZHi/RGoaj8i6yqLkUhi5x\nSkB0dwuHrVHA6aUeBm8DCl5VdR2f+xPxMmsOETbxXqQs2uAnuO/TX4GSWnfI\nlAIyNuBNM8e1vXPcYsGXiIlhfPJh0MSiaT+dVJr60sqvm7Ae4rfIbLiboUIT\nXWHr3rkeQXcZ/fPfD/F/OZdSFB2dEdIlqX4KoYW9zLw15OykLMsD5mC5mNCZ\ntJscywKCdO49+61nKwG9zEsqt3Jyct80DIpl4SlzIcbwQLXjgG0XeLCcGsN7\n3YMFPkx6NZbWbHmR+jUIVB6DnbSQjpKmu58TlUZXbrN4vIwhtR0U0RZN0zrB\nV+JVVKGLnIEfyJgAECGhbx18Hsmk3vU9JgR4jynIzocd4/bNCB4EO8zTGnKe\nmtCkV6BuZ/hl+sFpRMjdIYK2PrdW5v0o6EGh6zTUEb2QrhvRC/z6pQv5cWeg\ne5kZP/DUxHFcqH446a7rMy+tMicnZFrg1Y3Uy4R4gbiclKmafA3/u4sg8trJ\nYKyehW1b5ffZ7a30eWj9EcdDr9D7xeth+gNCLr0bf0S4kQVqMoNIdoQYT+zk\nUZGWDm5FLfwcXKHusY63QwuRbR0DdB1O6OaKlk5QadoLQvYnZ9dB2CDcrjY7\ncHph\r\n=e7/j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.035cf2a6f.0","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/density":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/elevation":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.035cf2a6f.0_1593023923237_0.4338669931233545","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/switch","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bfac751b5001c40b06e7b8858dfbe2a2b7e9a80","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2fed2c12f.0.tgz","fileCount":38,"integrity":"sha512-YNfaD72gxtAzzftrDKxcHu/475rRvR/SriGm7r9yZShCjqgWJ3hCSGi33hJQmW1bdHWFGh8LryUNf2d2r3UdzA==","signatures":[{"sig":"MEYCIQDhPbsWzCw4+oQLNLo2UJPCme6wEGqamSwWP3UK6Ynk7QIhAKjRIjF1KqbF1nlF//Cv838qszhXdi84qsbawnjuVwFi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QKxCRA9TVsSAnZWagAA0KAP/3AKbx5/QTQo/FqMvIN/\nk/OnpNSIBQEqwzngfA5cqcDLSJBxhLQn6Dzhm08jknSiyGEJF9dFm0kM4SjY\nQwacdVNyx8frOo57gtcf90gDFpkZVNkmCNfrLJIeWF9y7XXK2A+xShjyYHdf\ngLG1tEhQDhntWZWR094e+EUFYm72tln5ZxK5D8wSwsiptxxZo9d/5Eakll0S\n2Wu/QXJyhaitZRZWIL8vdQKHW56WBBr6td6RbHVrtXelUkK2MsgvGcRED8Ax\nSMuHNc+NDn15XA4sFw7Cdt+kCCIIBFfyFC2KNXeFNg5GMH4akVM5/PcHTuYY\nnDr9Lp58LVzm1Dt/fmQd/zKZJoGxW1O/02+eTvedkhpwNuGtY48J0sJ8nOBp\n0a6E0nNLe7xQ6h+oE7hKhgOxwSEHuzF99O4eze3b82RENtqNH2KFIMLtZds8\nqYpw3edv1DJMn8j3oja8mvpsLwERHAMoQPdKY6X6bWyO+2brjuBcMAPxYHXr\nIjJmf2e9VOlhWQSNh2a+PVWqx9ujPi2sRtUSboBnJCz1YGBTpey4IcfPuPjm\nThaShqdj/aRS7ttfEHlu4h7X+17vaj4AxSC8ozIdht2BIDh8XWTjQXIgum1F\nn7a1K3DMKcyxLMe2JAL1PQiNSCyZq4LGxjaGw8WvZpxTpAJiEGt5U4HoYzt7\n205V\r\n=ECvk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fed2c12f.0","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/density":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/elevation":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.2fed2c12f.0_1593115313477_0.12519130692783698","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/switch","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7724abe03c91a28a0a43bd641fb4184d61fff9ce","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.38197b443.0.tgz","fileCount":38,"integrity":"sha512-q6yHKsp3Ep1JYtehJ6gm9byDlHKADXyE1pdW0bwnnUQxzt8C9w8mfa7seJMjsbxhBQELiyCt++tHxAg1X+/xXA==","signatures":[{"sig":"MEYCIQDZtd8jLMb8JLPhv/MaCWrcld8ucECcsifIBUiDpJfmqQIhALIpx7dWPseorM+loIAK5TcgSZ76aLQ4WZQDQzyxnlSW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWdCRA9TVsSAnZWagAAyJwQAKBwNACfpQyUum05PoNr\nSfjo10H5RMo1Vu/uR6d4Vd2U8LT6qNWZ+1Y4U7dphNvE32CwxZpQNjW097cL\nYfHRzdg+QzN6F4O3f8qYNB+307inaqN4D4WnfdlweKaRjhWj15mTxs2aNHbr\nKqlL06DQBVlme70XEKyVCcWkehrC9dtjmxDw3RtWzBQzCLo8iGPoJUVvlzcU\nwka8TTXyd9dHr9Od35w1qiJ7yeGLg09QoWlriGm9TlNt2Vp1W8ihp28G8NCl\n3GCGoxyLIv4Pz6m1bxD4uddIsQeJhu+0NEhQKiMCCYwsyhIelxOOKYz6yobp\nb4FMAYJQ9/dUDhV9ibKVaiFR3mgUwWbe70mmq7WLeEgRjP1VGVgK1Zf/6NKE\nMrgIk0PyiK1GvPZ9WKyo510kweNqHwFACfpJx/onP5G/bHRm1UQajbw8dhBP\nNL0u3+l6l+p+rRTeDGzjJVi3rPh6nJ2qYI1+R7q820t6qHctb8GDgt+u8dIe\n1aM6BqhNbVq1lPTQcU3CCz/WXp15F1QkEnCQUFSyEBqEKtXUZ4IyEgWB2QW1\n33z7BaVt+O2eel+ASR8uD2lXAOEA3ODs2++jb8l6aOPLFf9S3lc/KuRBL9Y/\n81Jxac1HFai9FrA5uB9E4cuJmBKt1Tr0IzAY0BeQ/oaeb0d1S/MhynJkRYQ/\n6Oaq\r\n=Sxm1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38197b443.0","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/density":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/elevation":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.38197b443.0_1593120157264_0.6051179717207282","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/switch","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f7344bb2db676d892af4e506ddcc5858ab8f964","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.69a35e80c.0.tgz","fileCount":38,"integrity":"sha512-xnrIx6Qp8C6CwVMNsvW7P0DsR/nuTaIg3Yx2CFe+V6kVsFK8XMeg6nYljE3Zun1N4zOAhCPReeILB5qiRB5nDw==","signatures":[{"sig":"MEQCICz6LHQ/t0IrsYcn8LcVgF0YB97GzqydAG+USMf96h9lAiBgIOAhSrAnBeYvor27PW+k3nCJuh6PppnpZUQDMCpiJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKsCRA9TVsSAnZWagAAOZIP/RXNr1j85VsXAFq1bn80\n+3RBYTKWgRX3hG2VdTqEE84Wq098YgDT4Y5LCLsZRcY6KteNv64wG8vNiRQ1\nam4sU/IENFP/4zeRAHMRfmkwTVWErsY7n7dFRv/hz829P2w3wizQMy52N5EC\nCug6DNQKYeZiVG/0ztOBlaCvZX4dSN8iwM33w33Ed/+lE3bGjDYvF63zb0u3\nU5Q0x9Ns03qngeLWsijcJCcGxMyp9iyT9Oo0PlyUohUOLl1FAo5uxUM+tmRh\naDBTDBMP4V1927YLG+ukuEsHH1QoWXFV6hPHm3h0yrUvNBYQYMEy7Phl9BOr\neWyQUdu+LFB8aPb2oOaScZ65rW6hNaxti+cz7ZVdqP0yKbnBaLiWWKLFxRj6\nUPI27V06tNmAopKWsTPdOIqKV6Pfld7aAALNOC0VCtwVk495Q9pyItGRxsrh\nd8IH67YOzMT1Y76U9WmGV6YiZchzUNgkvAMA473aBVosSPXnBPxNMVXtHvzq\nGtfb5sIztAf0/E0WHNsRRufbSjO6v5BGxlvPU0KOFySAR2hbW/REZ7ycpp3i\nIKfQIKDC2BNrgS+Jvk5188XNtepZak0CgoFqSByWEFweJfcXpGh776Ik9rfH\ni+Uo9BHydYBz2I+sdXMzd52rNVF38QALu6be2RZ4hggqPVu/rCV1+ld4m0QB\neEQ1\r\n=ZGb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.69a35e80c.0","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/density":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/elevation":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.69a35e80c.0_1593193131875_0.7643119779414675","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/switch","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fa0b7e10e851287a04d298f1faffdac64d15b04","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.df7154fb3.0.tgz","fileCount":38,"integrity":"sha512-42LsqJTkKEDPjugoufqwWAah1TLsmSmpCQ7xGbwPCpB9J9PIOnrfOFtTOIMXFeYk3D4iol7sr3J+txyzvX08cQ==","signatures":[{"sig":"MEUCIQDrdDeexGXhGxChFG01OzLugIabrUsfY3q8V4BfKtWa/wIgORw7s/Q8OYR4NEroSi4xgMfMhq8HNC2bJg2KdY9UBkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juVCRA9TVsSAnZWagAAdVUQAJVEmnHkP45zJ0UKZ5vR\nVidwfB/qDBqsgZKktB86qoPUduxidlb68OCBZq3emsALCSPq+zZgOTecNU0s\nKM9+qndVjZpyeVJPeXzYC1OYRCkQJV4DDQV8ibOVNjfN7e8L+BZTi7muLqLk\nJX1f3lEhw53/B/+FhLi/lZeYnx8eUY9NHivX2fDGk93vfWuiDBAQFIumKXri\nVHp4yavlpUevLq3H2ekYQZ3Q3m6wBoGDDT7SRhJ8vfLIY0uTC87wma5M1LKD\n4nVo4poQm6VFJ1s9LPgSNHayuRUYFBJyff/EL3r7D2QAXA+g0eCagQGoghha\n6DAr4tQVFG5zlvU1yn1sIQG6Qu0/Rp8YrYvGLTLGbWJ/3c/H+kwdXZdDLWtM\nRNDTW2ED3e3f1LLLBxZ7mx9I0BSYPgij+MNCjNZn4KuHAUsJqKeRdyyhq6fc\nHVuPTgm1hwWZsbN2V+S1OE7Dp6RMaQQmZWUIcF/P/cm1Mtr/1BypEKJvprl9\noLhgNk0pgPTYFH5U8mzIff84lvc0AVpML+KBOuB5q311oEup74WJzFBj2z9x\ntTl51sTu9MXzK7PnnIEH0qXgDlhpKOV7kJ+dOi1xZOn/AH8Ot2O2mJB24+N1\nl4xcANp9JG4SoWEGQvMo9ZKS5jvcJjaYZoKR6sO9kpqLQrqBGVrRd7sehsbp\nyzj3\r\n=eGHx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.df7154fb3.0","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/density":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/elevation":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.df7154fb3.0_1593195413129_0.49308193743586815","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/switch","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8adac7b50eabfe056d52cdd55a16ffeb3e3bfb67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.d5618602a.0.tgz","fileCount":38,"integrity":"sha512-j+nIbfzvTQ8XZKxLNMCpWUr1F5rsibc+hng5y3bQD4IBlGBrNUbCDz8UfPbfI6uq4mjqePcZB/GAttaDnpR1Bg==","signatures":[{"sig":"MEUCIQCIwOifEs2z6jvolQG9O/yacZJ7gLLmZIHDR7hsC5LDywIgEEQ5u+Ut3SPVSNNUDYWIsXKhMQZcK7lDMFG6t5DBH78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0mCRA9TVsSAnZWagAAujgP/itNdxj7BhGIIzfUI0Ym\nl/MicfRoUgCq4VGm5NoxCz7da6K9tGU3apMBAabmlI5sB/l28AEhoyKSMEdq\nn2QqosKzV9WWAE7WM3LErsY/K3GHvQobKC96C/NdzbG3Zky4z9LjnkpSuUOS\n2Sa/UCvpjX9IB0KgSHTu6DHbMeTZNioKrfp15BgBVE4/cxH8Wd1wA1+7qgJQ\nb/tzAH0zXpAj1M7kuquXvGRGFiVCXRQ4xov6Dsh86mtq+P6Ki/VA7kV4/fEv\noyBIFtvh4MniIkN847UmK+6XbZtWwerbox5qfD4+tEzRgFIKrS+mizgfCaDq\nA3ipvhnBhwgTmIJOSPuaJqLzswymH3ndzTDUcnCSmHCS7GsUhzAw1gaQUcq8\nTGwGApY/wGZM/YzXDEAKztwcc74Cg3cDTwoxh7V9S73jCbj/1tCshtjQQVL8\niEiVkbGZYJ1t6zXbpyBDV/ED+0nyWtiH/dZvUBb3ILI9kYGQac2LKDQPncNn\n2q4dUT6/ysuP7fkuH9IekFAHtNg77oIVIQPNRKnp7GNLJhvtVd8We2mjozdd\n4OxsvAF/X0Kp1iS+D30LEybceZbEcbN9AUH52yh/l6er+xooj9Ap/Z7nBwBM\naeLoUMfOOfrydT8qlSjPg+5PV7nCDfJjr7dpbTLvX0UsSGqP9hUGxXPZONwC\n2DAX\r\n=c9+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d5618602a.0","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/density":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/elevation":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.d5618602a.0_1593208102055_0.8478352928595363","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/switch","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"cb63f205adc4e166b3296f2aba42f3c71d3fdc9a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e590b376b.0.tgz","fileCount":38,"integrity":"sha512-cROBsZupz5nYSa4TvIFjvq8JkucKg62qdu5TN1edfxRe3iiY8rDRFlYciPtzvzGkAa6Gt+jyjG6jZijzlLySrw==","signatures":[{"sig":"MEUCIQD1eqpbqsUVjZbkCNROLWDiscydLUPnrN1yJVsKGrWEzwIgGTyXFN0F+x77BsCwUZozLMOu0Thi3kIf7Lu5OHnLCn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oN+CRA9TVsSAnZWagAAQPcP/1cYGU1iFSGFvTrYOnXc\nOcpH4KfyAgPp1gzIZwHDsnxV+WCd27S7JAXh+49SFZGk9S/vw5caTZO68uF/\ntmobHNuiN3F8DZBtWH7aWVJRgmLKUUX5cnDjkVMbdVfw+E6oCXh5J6KSIVnf\nKgbAgAmKfW9PJoCUMVJycU/7J3fdaxG83UqMkx9NK56xmmskJN8Dt/lV7GPk\nBgvyHI9Ury3T/SB9sTm0bQw08fIYSyhfxTHSJTYC9BASon9Lk0aIEsqwZ2Aa\n3qcXXkHx2nwPrEr3m31NmK/Mlt6e94h6zA6/9Y/ZubIbEC7FXiYUCQjAb1MD\nFiCLo83jrL99/DNzqj13MiyeZjqE5flh8nNSQkSO0FW/fvCYHPq98+Nld6yV\nN7aoWyLS0V6VYfiZt7XoX/67opBPniFQ3Sketz/1BPwSznGpYbPZQCNPF7GC\nlUx0yNHlCY9/8ZlKqvh47QAnDmi48kllcpR4jDNynSApiJ2qx9s3PjPjzXdb\nK1R8t3ulwMPyqqRVndE+Vkx0yRvTj7miRNAXtD/DcwX5bxOgnkMCSdlLs8wr\n7AKmXA8TMDq2MgS8MKINgKec0Geal5maNej6DiLXvGaq6eEU2f4k0U5n44M9\npDQZ4E7OcSzzu26GNutnxlNfW6ZnsS7H5YvsrmWa59YVlTi6YeyWBw7VH6tn\nhGgr\r\n=iRrQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e590b376b.0","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/density":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/elevation":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e590b376b.0_1593213821483_0.9513077157014438","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/switch","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"ffbbd186369aa888ff0d3e81ede069d46733e25f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":38,"integrity":"sha512-61PPV+THAgrKMQIfE674bM1YOXK0GjWmBRD1dntQjOs0wIn8/Cwrm3EE46aN8ZdKsQQyYlckZ55hB/KAf3hOvg==","signatures":[{"sig":"MEUCID1hGt2LSyqFUMGYY3JAIxjCIn+v002l6uUQ1h9aJTbBAiEAvR6MAvSS6ngYljeAmi3BPmUVRQgGfIELpcUYV4vbXjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGsCRA9TVsSAnZWagAAVdUP/1tx4IcANgO+/t9KMNyk\nUFlzAagaVbKj0+beZ+W/0x2TxpqphDRoMGBFEe+nrVmbStLR4mYQ8FwutlJK\nRz610ZFlj1RdIkVJtAwL7NNVpfmwDgGGxRzl1AuJuyxva3KdnJVr80iyV2Zk\nmYe3iUnOMy8rLdP8XUZa/cq927C4boX18qRlTZPlspwybtzGgCdyQ8IBjCBr\nSTDb6Zizv94hz9Gf/SjCeE0w0PN1rXTSe1hqdwe1d5ugQZ1lzM+uLbqg2HW/\nW2IpAA88N42LgbbJhv+tXyYGqiN+tNepkW+WPFD9oU+IeahPfWlsQjKXT/eZ\nn2mXy0PqOqrSBZAN+OaMsByaxCuf1FvqF2S5W0GJbNBSDb/hF6vOjBKO3x4i\n4w7x8mcFqlMRyoYcBbcHP1NIaTfB8fLSNbAb6zZyn2Vxg0m+r7PXzIjMixOI\nh5e9yv0E4OO59PN2/cI6YI/rwwqzS2/J5buiZ3sYokPsqUbXutozOAeRo7GT\ny8X1Z+PfDMMhg8ZURfcftifOz2XIBRbQD0B+CjFFbua6WRvDQ4kVWwBkqCgx\nEaGhUgJhRRQXg+nwqTmZdc9K/lDtHupxh76oHs/3QI2ygSxCwufQ4twRW/dC\nHnBuKtEh4RmtlWo5TCuElnQH0xqiSpDM18EGdoteAf8fixqfaE773oRUPOGG\ndaEG\r\n=yVPp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0c9d6bd2d.0","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/density":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/elevation":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.0c9d6bd2d.0_1593450924100_0.607788265278105","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/switch","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"39c6a59ba1c967a427a688a6c44a4c0d969335cd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.c1fec4246.0.tgz","fileCount":38,"integrity":"sha512-IWvLWVgYLDPW60G3i6Eyn0k6FCMMYQ/wj0QCjJuSXSO5kKwDjQK77g8X2Gu+nBYYZ7MdVXcMe0qMwQnM54ix9Q==","signatures":[{"sig":"MEQCIDcK2hsJWDQ2PjA0Dz5tr+rhDLVOM/I3SimCoFzq5k5bAiB8cgM6L7b2ofufdSK1651TxPTIXZFIsI+o5vhlr77ULg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iVECRA9TVsSAnZWagAAQKAP/3bEW9j03eNGszPgwrQe\nKmiuuORUjozZ04anPbjJJg50YM+73rXNStQnGbaXqOP/VjY8+4zGNSlLxxRN\nVXCavlWtPb4mNlLolMdDcJASG0crEpWV5xI+89LAZBFZ95QsYvxyim1iYHu4\ndpfKZ682fAgbxnHUsJ29QFs5AA/TY8Sp2JgWMkNPoLjFr8abPujERJsn3TTL\nsyW1hVmeGZ/muwAwn7ZfphjxHEWcQOQs+9vAnAUcN20jSSF9nqcjqZM95Vw+\nT5vqMNPXmTPrGWHlMFVdKH6x+wzUMjisFGRN/7NATqZXbXNqKVcDRfBYfPDI\nEALXCNFlyv9yubzfedSsYvonkZcnJ4csNwJTN6mg94tfGkqyKQBZbvwbqpOD\ns7v7DOrwAThGiMpVxBeYzTUdA8Y4aYo2nYfsqtq/MZ/bbpXsDLh53kj5AhzE\nRgfS8Kje0qPvQhGpUWS9Vi1lq9P2ow3D8EijVY5U41gXXpsDFWv6AYPj7tZT\nLmykXxaA+1CIeiIUzGT6Eeb3Rs5N9BdXl8xHamTggLxvTUcE9flkQvGu5R+K\nQ6rM1iEhjxy6HWxKVT8qTvEKr9s0ct/0gZKerqznWQJwr1wwXLhdKljD7ThQ\nd+GPFMKYCkXzVBLvZVR7oMHCTDvyqWshrB1KeEQ4l3cs8fLdpoGRvEDrDnr8\nl/qi\r\n=aeGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c1fec4246.0","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/density":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/elevation":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.c1fec4246.0_1593451844186_0.6623169342873363","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/switch","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"c8d1deb522fb73f88a34416b85b5df94540dcd19","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.c678a9d34.0.tgz","fileCount":38,"integrity":"sha512-osEYsl3yFXJ189MY8eS1ZN61w5+h4/PW7s2+FOoUX8P3s93J9Y6ScSuGknih9Cst3aZ9FVKKGpxqU1JMzZ9U6w==","signatures":[{"sig":"MEUCICN0EJO1qr/4Ovebrq70feIzxzgXlmslwfYsbOsvEsKdAiEAz/paruKpvdOwv7jxaUkVHzaAbTqzobxSq71/yoVjSI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+io0CRA9TVsSAnZWagAArfMP/jEMJeTlF9VO/crJlUVH\ni3DXPo7imHwyzIiXRs2sj80NNzrZfKV77B1SHSjb+c6icLoN309s3YR1JKQy\nqbWNZ6F4JYPidsL9Fp3OfYJ89EERvnjSVky/ETk4xmZZfC5p0ykCgO5yhI+/\nCmR07Iq1MSoDJfJXXmUa+u+zmXQS1LweKAlYbSM4LeC6sH3QiGFOTSHJdRZc\nyxUD47CZ270n86N3UjYc9RmUoDgdUlhdtO/Pt7ojDRmgkd41iqVzNHulduSF\nZoYGzzECM6XVGSzvKzTTABC0rzxsumxMyNK6oDcZkkBgRbT9JQxSHIKPqX2R\nkGhNJUgSVWPnSUFolTgBW6fz89mKfZG/u1BLoLPJrMIep5u2kQ1A2W3K/0Po\nEbfgUJaqgC94CG2PCF+mJ/awQ7ikT/P6ZVKpLjnuG7DnAEySRizGQS0kaajM\nixli4ZW+xXaP9Fy+ZReoZgpultewqs2xdHfNm3v18lOcnnWo2/TFGh3yVQuA\nhM7rpOYupsJhhvB+5UfZqqIEQJh4e/GgGpBfqZMJsduH9hg+EytBzF04rhUC\n716lOPB4n0ApQ7QEp+62UX9XpB/ZdPt9xpx5bx/yqq7DOf+Abbm9KVavVDXJ\ndaif6QflOtm7ntT7YktWFlQ6fy4gVVSGwEXXO1UZ4GYO69f7qWwiib7xRRFK\nm5MI\r\n=W3Je\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c678a9d34.0","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/density":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/elevation":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.c678a9d34.0_1593453108081_0.5069199364748589","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/switch","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"32199886e99ff3894e924cd1fc1beb997e6d6212","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.521afaf6e.0.tgz","fileCount":38,"integrity":"sha512-6yi+6mXA1uhohsbnGHe1Gxl7WjaffKZ1sfa6wXiz/FedG5JypTz2k85L5WpaJmSdWZFJ5rKkDWGnCdVpW/cG7Q==","signatures":[{"sig":"MEUCIQCKbM/6kZ52C1mFmXeGWU9TElHgzTqVUPVQQsk5uy/63QIgfP/omABFeST9e+Dkq3Dp7VJIHR6p8EZTIlcq0UAHH1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1TECRA9TVsSAnZWagAAq2oP/2eZtgwbgbzXLOnHZXR7\n4erhlcTzBfe6rYwobQQxo1KKOTjJc7w92UdkBOc9WmVkWUxtbG8dut48rqwo\ntGm/VJKrCku6fiiw1A+1GD2HSkDVxrPBvTd72is5R7G32a1+xpfUmqPxX0dV\n9Get+o3Go4u1NVhk2HB9l6RDB+APnkFH63CTRxP4AkK+mZxPUbx6T9PdTiB7\n49jMeoqAxwuoM/f8s7/MdPje8nXEyibUcOSnd8Psw0yTzQCIgxAhbXXDOZdt\n9idARsrrnBa3rRaWWz+RMjJ7KHK/6LOI+N20oEy/QZDazHk1AWcxDPwUk0sJ\nXzJqIdkve6Rb9JisWSZDSfR3+Bbr6PeYdNRr6GOodvHdVWOuXsP6KibIuDyK\nkose/J5nC/4UN9glW15cV+mTdxS4uNT8HYKLpYTHZoTc12pLHz4kQcftqVQP\nuQPKT2nKiViy9cxrxgzTpjcCNVLSOzjeTCJPD1pKgZbZLpwhhSf6G34x6WMS\nMHZQGaMarNBgrD00b/BuBAw51HnvTqLFdevyU6KqT9lpp7VvDcZNX8xb3Z4d\nFJSxtRXhqNIEOxzkM8UFO7POsIGnHx/NCRc6wNALazJjNzENUbY/W9RfbDfI\nSNC9BnSlngkT0oMaRA1PecMwDnREGBdOUIfCq7dOTPs3PZQLEMj4RwgLtwHr\nwHDY\r\n=cqQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.521afaf6e.0","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/density":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/elevation":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.521afaf6e.0_1593529540329_0.003939418671466299","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/switch","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"89779211dcf86b8969bf0271b49f122cf520b609","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a2ad48839.0.tgz","fileCount":38,"integrity":"sha512-3HDYH/3VQpM5bFPWDj+U2ugXXlpl/6Rbm0aUL+woXRuX1yiaA0mqduwD/g+tcxvRhds4s8urhH8tA7tngPFDXg==","signatures":[{"sig":"MEYCIQC1qlqRSgc0nny37AM5V//xdQ9Fcy/x3nFN8uGjYwwt5wIhAIaVRPjhqHz4Wwk3SbtJeGumryip5w6Svn6fuXo8GD5h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48UCRA9TVsSAnZWagAAm5sP/3GLyTtcNl3/qm/aKqv2\nrwsp50UVwd0jkZatTPa9CbAdu56aL4DRehBrcE5ktsrLzq+vl/A6QLytc7/i\nnEvdIqYWf7utO7zIwaXc2Kk7FuzG29VkKXxEkrofADcxa54roq36uKq/puYE\nQ/OMQuUY4gVzXrT858R+eZ+NjNcjujg75c05BTR775Fn5QczlyqMZOHXvYhl\nj27qRy+HhDW1KcUi1yQnGbZh3GG+7BAf0a6/ZvXHeUU2gyhB97HmY/du2Q2u\ndBsxCu4d7fy6qHa3Ysy0D5OPvcok576fgBgWvHVUVJ7ZRguxEpEiuQ+ISVGj\nbRIdlkS9Afe3l3jKE/ykGCZ4UY0L+2xE1gWpYZh0AOTtXivNv1JbP7qsKYW0\n9vBZ53JrDBnYpg3e+akTf+KDQgWVb7mNt8m3rHjAzdKAeOf4IvOJsHPSGVds\nZMKmMX1BNifRZuhSVyJX9o0lCPQK01fFrIhdoUV4JaxfjL6jLwr/ovAh8A0e\n6jvGyfeUWTp2AfwzbtdwqImIEqwrbYMBvevW2Gfg2E14qU+rMk3OxRaoJFZr\nk4hcB6jpofiVwsxQMKoeu1LAX6RAXM8h+teDJiQkXFeh0frK6AQLrcfVVIFj\ncFlhbk/NbQON9L6+EnZz9optA11l0hpk+hw3s+WGb1oCqwSqb7yH5OFeIcif\nq0/l\r\n=2V4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a2ad48839.0","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/density":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/elevation":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a2ad48839.0_1593544467843_0.9964027736953736","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/switch","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"6f70d44feff5f942594be6fa595bb391ea60bc64","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.ec2385881.0.tgz","fileCount":38,"integrity":"sha512-oHgXak+u/aFDiomvcwujrTaVtNhiZp9W1IC6NRNy0fa86sLufoXY5R0/dw+lQX/erzjbgOMdPnfGFMtNuZ3TDg==","signatures":[{"sig":"MEUCIQCgLFs9LMWV6GvQl1BVOICP3/XAVCsJimICvpwtf+c+nQIgULPpowh8rC+oTRInQYxuK8CdM52bQXHFPYbmW4crOcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LaCRA9TVsSAnZWagAA198P/j8TqC6+V1VXyLpwvYsn\nBN3ouaWetUSIUXT2WhOy9iGuC9y3Zp0heiSsnP43UzRY9XjvMRdCEXkXptDB\nQHwWZxQYpp0MzOoUNpwjPWmeYDzJInYUcGwPRQac8BwTWZRjTDDRW2+zDwPD\n11iq80lrLx/0rqzoDLa6M+GJeemj5DjxLEQmrotfS3Dh1WilwU79oI3trRuZ\na8gfjIehGyUw3dphpMQRz4JxxXHtANuNjfMynux/vuwn1rw+pfy4h1cMfXg+\nYrd9igA7Q1DGo6Px1sGM1veBBU3uBRpRPzKrotRwl4J9xzcgmKcBfbbD97m2\nPR98nd/Y+FpVOq4ScFYCUftTVOQ6wfcL/qal9K0RXhDi8kwt1plK/Bdg/X6q\nsc2zgjLe1djYeYquT7HMuWCYqL9YyFO2n3h93rd+60o/fzFXBD77wBQf5iYD\nqg6wNpqptg1mZUWlVRflr9x1GkNqcC0yrudkXIxQdvTGOaCTv4QFetPR0rrH\nxsFLFvNfDwfXAxfNILSPoB802pUje1N7XwIa1CzXwSXkhaKf4BfcE35jkRrF\ngvDD5A3Y1BjXAuIjCussQjA2uUTME6VnnXBEVcaZ+rt62eqCEEnxp1uLq03C\nosK9DtyfAaSNXTWVq2uxAHDZDTn+WV2MRywWwWOIgN1IJWB0GcUeXg1O15Cy\nhWfO\r\n=Q3Cf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ec2385881.0","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/density":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/elevation":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.ec2385881.0_1593553625789_0.46754269950543415","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/switch","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"7a5d77e3208ef291346b46cca271830dda23c362","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.610c26c4a.0.tgz","fileCount":38,"integrity":"sha512-kdV02dIhn548XeKdJvhvzQKx9iobyt2tbe7NS3TK94QntlQwAdWAJQZemCTxomrs/PMh3CXxWWprx54aw+dBCw==","signatures":[{"sig":"MEUCIBOs9KNHNK5cq3X6k277KEKGY6jwc8lQzQesPhnYSDRiAiEAuLBdRt5uSyTSUTyTBpEEQXaLZtOWWwzPP9bl0CFdPbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQOCRA9TVsSAnZWagAAseoP/12pGS8YoXZI/TeFKIdh\nKoiWcB1Sq6/pRJljWGqtVQAHk/v+WJfZhcVUWn+rgTvEcBTdzwYcISreRR/Y\n0k2q8Jhhk1McOmJxf3FXP9NFL8odmXihvUg6dF7sylXXB9+lb269bDZYoU5u\nyEppljZxt35fKJbH9FPxoIu9+13jRjx5O2SzyxUEm5XzVEy41yFBDayj3mNF\nRYo99GBCInfBIn4nzGGzvGLpnyNLcRkeNeXuxh9TVkrjgK52lKvGb0j5ZoCE\n/cGAdkp5xYjxQXiVpyRz/ZoVVhS0Pwi08D74c5CUKb+RSt8SqyNBWRil+RIY\nfgFaZEK9A9w54RzIF1qcEM+xy7tmQ/NdPckriQL+xaQgm5n4HDradPk/HrM/\n+nd/eT5oT1deb9X6I/yBsm9nFDuQvPg7IfOCQwVrepUluAQn3ODdMNnFDqul\nKHWt9BBcnZnuRE0yqub7YqO6+uPX7MzUwjwQEJ9up8iXz0xuY0M4WZ90YT6t\n+PPZreZxTxfcgk5RpALtRvgmnj4uktC4jGPMLyVXhCkLyYTowUKOk7gSaNyc\nulV6Ny56ZAKn2S9ROhvxhCXhfvQrsBhEs5dEzzngJys1qTyXLrkJGrHGJ/p/\ntBLT7BHAJvaZeV2nGtEVhzIo0mZfXMWWLllEU+jmCgPjOHGnSBmDyWeq0pCL\nfozJ\r\n=yU3N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.610c26c4a.0","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/density":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/elevation":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.610c26c4a.0_1593615373800_0.316761602195303","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/switch","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"a3787d6334f436d813e3376bcf072d1b38e484cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":38,"integrity":"sha512-FXLPShTDv7309C+MALI0ztvp8Pt9RNi37q4s9uCtd33GKCVLpbqQbghO/Gddrw1Rkzr+7CU4WZIsbYTYpfE7AA==","signatures":[{"sig":"MEUCIDUWXEZD26ksYAM8xylAUXoRJEQ9PY81BT1BYrcL6I85AiEA5btlYKWRRpXksq4TiXVhKvVhRR1tV0z0/5ElXP1xkeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOXCRA9TVsSAnZWagAA3yoP/0wbbRyYnWV5xmaquLoB\nsP7SnSqsUOHX8enjCFpKQxYbCncqiOsOadtV8mIg0kTvsrT1NA6v2SMHh0kz\n8cFnHzwc4zNqJ7e5K3D18ic3DUamCTfKqYYvJkFZ4pAS4wqNUVUEQKPomz4X\nBXGiLT7wdtRXzTyGCyZwEmXhsldjQ/JHq7FEVN8IFjWvie75xxYpnuGMx+Hv\nGr6yzQeITGT7EkSmEqKHIthBIEHwI2OSysdYyS4VAOH6ap6us8AZ5I6cEaCQ\nCXZZHTNlB4oyULs2qzkL+e2qpqvskqrMHs8GsTj4aOZfOyZ2NoXmNv5iTg9Q\n/Ngk1RzM2pziQJTEyfQY6wX99pX5J27flydsVGWwsyOgrE1fp7yCVC5K/mjI\nLRz2y9eILa2MtaBW2ebCzAUVJlDPHNTDzpZVCjJyQicPu8ZjZBk4bi153jcA\noygc5Nr4eUDdI0VVjzw2DxVnf4vnEsq/2aBv7GyJ8FM3fCbqHfIq4sR9YVZ1\nQCR1lgQJN2MoRX6FTdUsbhT1BWQPSD+xVTxgEFCKZfy68OZtRhfQCQexprzN\nj+DKhKU3yRwIBFBFMLnTeX9zQsvO7m9mmshkKCcfscvjx4KDx7WLBNxMCUeq\nuVVRRdSXUsejOsyjNl0XkOT6TgUt3Ncl2DwiyZteTEjAmA5raZMmjP8y0fPY\n2nWg\r\n=grbO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2ea4a99e.0","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/density":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/elevation":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e2ea4a99e.0_1593631639316_0.21538765078369626","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/switch","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"bb735bfc32cfe0a5959ece836976d9706bfbf96a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a78ceb112.0.tgz","fileCount":38,"integrity":"sha512-Bu2Q8bjUCry4CAGLaaPQ83ID4xHp7BZyC3tJCvSbdX5qb7NGDDquTSIQ5YlJub5yfKPOyzHvBzbhmzFMym0j0g==","signatures":[{"sig":"MEUCIQDHx40AX4B6aJSAHTkQ2g36iniS9pA37cRQkgKkonXkLAIgTyf9qWaUcKd5NGNSdHkiq5BqWKGt06u25HcCwf5qehc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZYCRA9TVsSAnZWagAAklYP/iKv8q0vY+hc0WU5oPfN\ntu7O4oZ2pXV+HyVl4S2/UTti92RDWvFnfdoI2kb+ecixrgMp2m0GiY/Iq5H9\n8TOyZXCHaO/fkTPffnK3WjdRf8bnn07QC20MZKGVz0hK/4WEy1f2t2RLmsuy\n47E+fGdqHg8y8o3jMAmDBOeJ9+yjXcHNAx44sHjnj8cEpMyuB5Q13OwpYu9r\n8Ir7xGhIiSkpVfY0f4tEN46AVgAfUF2sLDZrYZ1CFbrDSOtcMG4QW2ereUWb\nItxQ7h6tg2VFQj1ZDlPjCT52x5SV4KFt7xxz9QoqQPmQV86bvq3q5Jxw4/1Y\n5KBDCCVeQZyN1kaN40sz/7USluXGlwtBHVWybMzt9oxxhulsvr6PK7xSyq6R\nPO8sKc6nO0abW9TdrqlYOVlmA1Pm+MYS8TAN/x/15IX1SORErt5961vzdj6O\nEvJUrpNQkiIMMlZdkJgbJ6KK68M4l8rlpZN9fKYBUaXxwIV9jjGfA6GExof8\nG3qbfD/GM/AxSYTGtkKLxsXVVP7Sv5ee0wFjS03m/9Spxe+vzIZL+BCR527T\ntRrTDJHs7qWIXxornlmeK/eFsrz96zIB3KisVJ1DG/oXRvXFvKnUw0jjRz2G\nbZGF1INJ7ptkyDHLTPNBaA2KoozrjH6zAIloKwxukvHYUuPCyPG/ic/yJ0XC\nZDNq\r\n=VvzT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a78ceb112.0","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/density":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/elevation":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a78ceb112.0_1593632344061_0.24372813478493893","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/switch","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"56dd3ec81dd5be309232e2b8d55839c58fadc1e4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.b0c456d33.0.tgz","fileCount":38,"integrity":"sha512-O7Qf8zT3y5tJuY5rdaRP77Fk0wXym2zo/Yc96wvyASqbe7J7sW3iC79+n3+HQY/G7fKC3uokrVu5lq4ki2qgZA==","signatures":[{"sig":"MEYCIQDpRZswVA2azlszua+8SOr8d/gYofQkiFnenowSWNjtHQIhALR3lJDLIauH5IbDYVih4mK21oMwT1DBJyQ/78+fDF9u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6idCRA9TVsSAnZWagAAhOEP/iu13fvaHbAJqv5uYl30\ns7pmOXL9TNdCb1lAEAhlqBjqvEZVqndtDskgtVO18kWyZcj9JmlfS/7B5JJv\n8YoEg5d5GODzXfdADaPOPnvOmJmoWHQIycGr2COImCOVe2CfF7TtvtEi8khm\n11cyzGNlIlGYOA9sI4SkNwDo8W/jFacDyIbt2gZw3tievvnqyFaexPizTts4\nLoJRAHp4oQUA2uHXGRL8pLSsLpr6JDzmaKcpt+vUG3/XaHfOG5iPwkPbnX9P\nXOk20VOTCEdXsVQw/aaxINyVCLj+y55pOIEZp1EP3mMMYrf/x0RNaDfa5wSR\nuwmtbXcCir1UPPyVDPiW29y7+mb2X4eDl/a25mUp7p6f+bkQLPKFnghLJldt\nVKWTSHHuRV5XvfFO93SYkT0aaZS0JCk+CDQh4TKdHrwuywxkGuPxZT+wlTUG\nrS0cz1ab5Qzmud0qDk5d2CcpTOqm36kWs06b2P5TbzU549YbmfrhJB8LZgYI\ndldtO5bVa+OGY47g9aKLYgbzw1028UO5Bi1ADh+TZ/M1TbKc5wn3Yp6ZYxO2\nQIJx0Tjk4TIRjOHqbTz12UhpnunYCmbiFYIa3Icg7uvRaYTHXOiGyPYhqW2W\nv0yq1bmy95Pg4hORiBCvCbXGWmoovbs5Q6unrStcsVjmSBUy1mngExaSSe8G\na7jB\r\n=Xrlg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0c456d33.0","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/density":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/elevation":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.b0c456d33.0_1594075293286_0.20812635271343916","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/switch","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"58bf5f02c743d45255fadd1ab38e51b83013880e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2e5711e04.0.tgz","fileCount":38,"integrity":"sha512-H0KYjvU+EUeo3ZvHKPs4W7GM8kESMCluvpta57uJ+gCKXSh7RQ4lelJ+fojaJwbYg2rlRRTJ9uaUSX4jXDhsYA==","signatures":[{"sig":"MEQCIBv1RCwhfckz1gzwpSgURXfn6DqnOFU5tHnO1TbSisGRAiBMwQyiGiaKQwOdgZjI9KAtMK5GK+19cy7ji2RUBw3iSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjQCRA9TVsSAnZWagAABlQP/iSomfb5M+qj8Otz1KiA\nndy5l9ph/rXJC5+nEWgYzwCOcF8W9kKZnbLklklT4CKMm3PafTAFC/5smz8u\nsFSwdEiSMakmF7RDex5Q9fHiCgejPttNcAXjHu775SrKRpzwF4mqwr2mNGZ/\nqX7BmAbwrCB6ts8/wBYsXDQE/aa4TOeiT0ZZA0+8n8APMLTDU17/0AcjRbCL\nBccjHtq0FIrioRkJP9sy3y7U34kJN4kYOtpXGRFVM+srbZE5nqrFD81lu4wn\nPkQesylhcsl5udMP9k7GEGbloA2GBid8Ou2kpk6oRSCjjeJrFAoFJ7qbk5It\nOfJKX/XeJtJbxyYnmnHNqWmvRlv1aw2icX3OzzlgrtLNZc2R10peyobxLxej\noV0Ya0xGrjtAdy4SvOyYemD4zh6Qf8Dz2gMj21+ZBXv3YVd2Hi/nW1VXOzur\nEXO/fCy7TCa0LAD0eE79MBnsAUmXJ+71I1011p9KuJNhQRyOI+UjA55oVLqd\nGVyie/T50L3ePZh7ZLJ6/jOvpjQyy9c4AF4m1CONJ64nqFJYtEU6gBNWooqr\nii4Dld5238QfCAxp+mbKrtWZllM4HiNb/h8hn2qHGHt5Cb092/MBYkfKyzaC\n+R2I7+E66IYNPBbJqKZ/sjFie40fLXIq9wTUh5navjGddpWVARH1lZMva9tX\n7Gmw\r\n=xsMz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e5711e04.0","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/density":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/elevation":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.2e5711e04.0_1594226895517_0.8857300474251171","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/switch","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"796ed0d0fd120bf17b6b778d12a9c3fad25f3eb2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.811fc5d24.0.tgz","fileCount":38,"integrity":"sha512-QSVGbv8M+1vF8T/xzADFjv+KPs/yLCoKCyOSLmJAi4hwaCULi0EZeu6wNQHFrKyAUf4qh2EBwZlFv/Fqhx+qBQ==","signatures":[{"sig":"MEUCIQCMg06Mdz+nYWaiEaI/oFQ+NsVL37QfmRTbap/XvMZZwgIgPC34IjnHRe/b/6R5Bii9Hj4gty/EodtLAgIHTi5J45Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9KCRA9TVsSAnZWagAASJwP/1dPdnjeKEHVUKlZSlcb\nQ6bTpgSmmi6aCoTLGL4Pn6sYWsV2hYhWhQCqraWNqvqBKEaYlw5ULOZiNyJ9\nJNyYspi3YZoEinWDsWRi1prEsRhY3jVtgGGUsis2gD8hSqrJrsdOzcrniRT7\nob6pyoCR+6vXbMZHdPdVcjMELP9zEp8KuK10ror+dvl5GBYwf1Drwbf4XeiN\nEWMDzD6SV4a00NWHuklxORy3tFKrMAUTjXlm6HN/v72Fv03bCPGOA/+IHuT5\nBjCacQ7kvlk9f/GuBt62BPTVr+ZMFa8wHPsh4A2Kb2mnoUBAVjPsa3pRDLu4\n6DgrjryPXtN/cElX8Toq4eI7EUd197EVwEQNMg3YxfOSqesRkgFENKr1VbQA\nXbbi+L62EpJwdWzksNCtG4RgAi+CeS40bm7C4Kfe20GFLkWlmFYiL5myknu2\ntZz1//zXFDlHW96KK8/sKIblkshgwscGbkqhSchFtgArBGHEQ55RyM3UrFZD\nXXEdkzIyTqAMMhnFymmV4PAWJQnn7cUiHdOQekLScrS4b+QL6V2gIpOy7O1t\nUQ+lvSTWGRo0EPBB94iuUPwKxfY7nP7sm05Zkd14/toTyyQoy44tipnxTuY4\nIuqt2yilxr/gszXsmPRx1Zaq+MFJmjLtDveh2GkuruvUE0P0b6les8c+gMdG\nitTG\r\n=hV5h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.811fc5d24.0","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/density":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/elevation":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.811fc5d24.0_1594228554283_0.7630494629082902","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/switch","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"ca5fb5054ce6041985be1d15c12a26b3d0765d14","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.6ed717ddd.0.tgz","fileCount":38,"integrity":"sha512-sIt8d78tQ3y7iC1PPguQxrQsdyT3Ssk+Tn7S3FgXj6qmzqDVlZeaXTXDubRNsNXW7IGS8ejksnfvAqxLQmm0Sg==","signatures":[{"sig":"MEYCIQCOLCvy/FD98EEwIs5EJELifscec+tszXD2jh526E0IDQIhAIMHf1UeL+8HA5pqNMFplvRKnh1stPmMAFN1Vtk+4aX9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiIOCRA9TVsSAnZWagAAFQAP/0PHEvY3+xa7sr8cftJg\nax7DwOdOf1RqwVDxwUsNkiX8gwk4LAJhESUy6ramn0H1LV6DdDFiTgRB/uzk\nkDnBzw7Eno77a2DXFTkhhCPT4qzdANK+WTOqJirzKCSmYZWzqbJdjnL+h+56\nchQgLWrmesW52JCL4ajkcyGv9Vu/khb/ZZzmmcid4Zr+U2yWiE70KvONNzmC\nZs8028zIpPBqUcfbg2wNhac2puqNA2sKO2zM7Jenfrw5t2gLUohUyjen4Yij\nE+COaGApVhVSPzDWvBja64fmEg7ssCtkrtAMNqWYT0BUPtduO5+4ByMQQXo+\nsLF8IYeGl0JvtoTGgz5FeasOubpcWqR6M4PgBBC/XH1QFeAPBXdNSsGL4exj\nUJRK6Ah/yPY8q1IaGkIJWoZb7MomSa/5jR4p1KBQE/oAOE6FDdx3oCXOSJrS\nZXu8HfAx4LCeW+6jTWESpadC8+HDitFUdqTx4UCzPszJRIOP5x+3PK2uKYya\nZq3dzqmIKxKHWUW0wUWtYXw4vMcH4NO80rBvl/bXlgIvxAgA25SbZEOm8biP\n+b2zjYMzREkkEm5pYBhjJKcOfwYHlI/DEBin5Nt03wtsAb+HqzoWaQaZJaZN\ntMzv0zrtDeghXQiPHj52lsaBXkRIZ4atOoJVKM+oXtFbpoxK9CIG7oXJFBGm\nOVEG\r\n=hZAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6ed717ddd.0","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/density":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/elevation":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.6ed717ddd.0_1594237454250_0.13397922597996148","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/switch","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"d9aa8d7ff9bbd12fdb0b951e09fdacb0212c492d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.d850de590.0.tgz","fileCount":38,"integrity":"sha512-tD8OQDPa6UrLRAkYi52E9DW7tIVnfR5u+pz2RY+nKyWDxFMGPAUAzHD3rBbucPzbs2unrhhhatZLF9J1yLTuIQ==","signatures":[{"sig":"MEQCIAuxjipIuysYcN4ICB7gT/HavJu6YnjE4LSXHAlyRussAiB07hKyBExUotxp0mlD+NSBTr7DeCWD95dEgf4p2+U1fA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xuCRA9TVsSAnZWagAAE64P/Azt8c42iDY5YbZJjK29\n8rofkxLLlCO4IRSR6PS1JZ6MWSBDJfYUNu6GnRs0HIg6HYlc5HiSZlh5sVZu\nm0tG9mo74AkLl3Q2Vzkr4ApkDhZLKg/AHUhqD0LadtgUUIUySiMIPznN9IrM\nuIPlZlkLADW2kcuptl4taDm4eAy12T9u4N1UwFEaabEByHzdeavao1cd3zoj\n6sra/Xxrkd3uZxQJvny6kZz7UOIHS7r435dy9ZA7oocvvs8f+ehjn6xJgeQP\nvhLs2ipfyM1ET5mwHOwNXUlB6ytHAHNXKYRoCESBMtvtqRHijCHMPP79O3HV\n+8e5MJKyOiRyv07u9vGeMO40xuRUqi7cMpjA4NQ5zgZMMCRctEySMlDW4nIs\ngZxCVfA9KamdQx0tyo1vx5oKbma6H8EaTqEZ7q5E6LFZZ82rMMuzxt2qUUPo\nOTQptue5g0qf27y3OBnupYOiWVcmpaZAIEGC8RsiTqny4sA9NNCCG9WbGWSN\nqCbrHtoaIcDzZ+SKKMOgdtgiAfY5b8VpxkoSdlWdpwTCLGR7IbksFQcfFZJn\njI33aBd7MPnL6LoH3UM2SXJ3msZWNN6y6N0Pnq/t/XEKNTM7zEgwjEHYzSTX\nEkMskXaJz2jf5/qasKXR9m+qBf61f0XSTnP5f65Cf/kD/TngHG3tj6W8xvNb\nV8Sq\r\n=m+DG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d850de590.0","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/density":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/elevation":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.d850de590.0_1594317933873_0.09485662956260565","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/switch","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"a92ec3b9bd18be268c953badbe44f1057c0b8003","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e07a70841.0.tgz","fileCount":38,"integrity":"sha512-xFgtlOUzkr5iMYPAdpZhrXDG5yUovfD+iGhutOQI91B7C3LVzk+ri3u1M/c6+GltLkFaI1pRwH6S5DeRME5mdA==","signatures":[{"sig":"MEUCIQCFezpNDh/91KjvdYIeCfD7p6OzmqArPv7o8Fo3sktMxgIgDSbhHHA9VEnxN0zi5jXj42fqT6sUoy8VADYg7jGzS14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NpCRA9TVsSAnZWagAAUDQP+wcLCdsa7614x6p8kF14\nfcHDGnKUFmd5ssj4QZyk6T8q7SNxu+3LWIUqnETGkA3qH5W8FKMBySNqFYL1\nt1pt3i9/Cdms5ZugSjVcFInyKU2l/IU/fr/mSB3/eFsEHCnMWOQ4/Zk9QaCO\n/DrtqOG8a7c+i+NQNiAQ9wLEO9TliHRmfUjF98QyJKTC/xtpy3LKE22AtULo\nqYvVB+bLCjwUD9qYb1KZZszi//ahcng4EumUZSmj2jZbcwenPHL8UsxFoC3G\n5BbWpshsqogMFajB1GM02FHPOpDlSgTpPbaygOjrvtuLb/Ra3l8v6+du0YIi\n7NOMwMrfejqVbvdWYd4WcNBv2tPOhW2p9/I0qebZ3/Ybbg7LiNCK747Ca6aM\n1a9/Wy+BVKepB1pJBf/S/SjQwSDbGvnrPBeSsSy6M79YMuQbdkuwnx2isJao\nqMYkiVi5KO0m4wYjFVP1akR4rameG5G7ULShj+lqR9mCR31wSvuY9kqVNCe0\nKrLFx1+7pki3umJr5RAuCgcNyYefBVU2WEt4sLsX1ow6beW7/DM5hd1aNCGS\nB5Kr2NCY7qJP+pvG0GNWfGyPp67wuh/Rjg8r+TcYRnax2KzU+eCRTO334Mki\noJt3dY6/I4eLeFmcti1Ts+OOfoRmWh76DWASk1o8vhMBeJcSeW3bbjNz+6lo\nbTO9\r\n=EIQ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e07a70841.0","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/density":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/elevation":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e07a70841.0_1594319720731_0.8469815672862009","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/switch","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"115bc49b63037b447847dc3f5683477e667a238d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.37947ed6c.0.tgz","fileCount":38,"integrity":"sha512-vkvYzm6bByRcQFdCp95LkeHYazB4zu9BR22NjQYBELiIRQ5hiu+aKr8Mt43H1DOSzUTUJ0kQ1Qsy+6wF6m7DTQ==","signatures":[{"sig":"MEQCIFDcJrGcq9sAhBv8VnWBfVPnTli/JPtuDJz2mYaQoaTPAiBtm44i9nzsOfEqnLHLyQAQt2cvWdFJpt3G2uHOMSe4DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/BCRA9TVsSAnZWagAAVS0P/1hqGg4rFTjNCyB/F5/v\nVA22AxhnRGGtbEiISbGlUBqgduVwnBmk7zLKPfi//64x5QCIsrle+um8EWZF\nrvhmhgJ0xpW9rmAwfOGfto3o/vCaa6lh1Pz/ajFaz6671P8k0U76+BxX82vZ\njdybybituOJqmNBj71QquT6UvPJX5zHl8VY/BqKW8tHY/4oK25wNwEx9ggkw\nEXE1EhFQ2Jh6WrrbN7b0Q7vsN7sSPIqtXSUIuDYAN40FY9NcHnzd8mot42EM\nrm8TTo/sMBmcUOyS+M+Q1Ng6tRho97NDpr1ROaiar3OPYPvD6xQwbJ9oUE2T\nfIXC/grKGJHqA+vjQgdJB/Ctdkp2VRW2q6tyRSDwfyid4LcLnaEifTe5P5Xk\nZre5rAexUUMoEhlIurIo74zIAuHhENfcSnWimdeqLQlTv+ZecSMC5jVHIX1Q\n6D3Nveh4kTBapobcSWwFejRr1XvsfmBVgkWxTh5fMl2A7ORIQ2fVuDfmcrBd\nz4cc4p26ifSbPITGf+QSOHn3vLSW1We7qQzVUL20tlWEmDqM3jT3wmXA1DfF\nus+iOkxTSXa1kMB5FhnEFpCccnM0qyU1slsd65Q5zCgL8g2Ylt4hPL352Svm\nv1jYgckGzH+JbtKfXshw1b8e8xVXX75fbAM7pjPivx2ncV9lN9wm9trrd9GA\nMJ/p\r\n=g5XG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.37947ed6c.0","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/density":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/elevation":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.37947ed6c.0_1594326976957_0.7067471707545816","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/switch","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"8347646e5f4318ad29af93479076618a4fe5ad11","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.5d443afec.0.tgz","fileCount":38,"integrity":"sha512-gPHM+weXge47KbJx2M7bJ0giLMS/Hzu8sWyOdBsYOcb2GKyL2QmvsbLtc00Ikz2ut/27NAeH7F+aA9xy+5AkQQ==","signatures":[{"sig":"MEYCIQC4LgRiEhYL5NQGHRdey4WyAU76fWXN+SxS0J6Hs5H3RwIhAIaBUCos9Hb6LAnLdfR3FbKCakykL0D+bKsQ1zJ/pkaU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NnCRA9TVsSAnZWagAA9xkQAIxgHE56RMpfKnsax2lc\n6k6/BIxNpMPARVhC//Z/61fiZC3RyMQ1TyjbHRfyxNJWa3npJXgRptcLx6EE\nB2ddyvni84L+26+fRDUGXvMNcEBzQF+JZG0CMcEcbqzdYwWgMt68gxomXzv0\n1MqcceDwEkgbWPHyra3HwWUqDxKjYWJe97fakHETPJKWP8ocqprTL7E0MMOJ\n7UzKBLuhUDDGnyqp1s/Q76MOmf6Iyjyc3BPULBkuGUmppMvYI/2rtFtRKO5u\nmDL5019wyClHqn+Y1H2vPgI/urnCGuDG+KN7/yxg+yDXTOAvzBEgV9nLXxm4\nB7almXYygL28wg9qK3VOAX+yDLsCkrIlNK1j0eFJJKG+MQqImEJ3g/QvYSUP\nlwA5gl4aJMGY8VgW4dAwNIZRRR1Er8bKDZ1zJ1xjDgI0GYEFgbboNblbIbhG\nZ8IzrHuyjyyAeJOCVeFxVy2sA9OvT+ziIgRqAYNsZeprQJqXMcTVaB2Xapke\nsPrRCHTQWtzPFOpprHwAaddFlw6HsXaw+f/t34KJioEKZHjv4w3ryDoUZlUw\nT8xWybI2JdC3+FM8lxmqnZuBjhDC5HWcYp268kt11Wxxs/ERW1Ws+3rFH9yD\nAsEyUpUkGCF/Ck+N76eyRCTyMeORmAZXbz4310Oa+dFIjntB9nE0o3CpbViG\ndb1M\r\n=nnzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5d443afec.0","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/density":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/elevation":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.5d443afec.0_1594327911357_0.6317083391780967","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/switch","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f5dab4119f843db545ef2a6da0453f3b570c3a16","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.9ac1ed914.0.tgz","fileCount":38,"integrity":"sha512-nozYs2IS/u6etGfOTw13DKpk7jrEmuOgdOFZmJNrJ4E9p0c9U3R7QqMcUaSqa9iObf9O5aWe4GvoHt98Ng4dNg==","signatures":[{"sig":"MEYCIQCv0EF0pIvAn9qubgpfnZnhMJR77EIO8pPhzY3QLnQCqAIhANEOhq84emkhh7yT0KO2ECwTZ9Z2n4zFKuAWqy6xJTKE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4osCRA9TVsSAnZWagAAxMEQAI6BCoMwooz1BmKcVMDk\np8p1DKWEXtFZIyMhowMOcXGZfxFWJM+6eRm69efpe1c2G+mex+Af3arf2ioP\n+hQ/VNYT7i408HkBkp3feIkB4RQMG0TxJ/1/wx+Kp+OjWAlSgXCbvMCzEcXt\njn9pbLYG3k/ezjcpEut53HN1aq5lgonnNEm43DgiR0QT38VVCZ0Ld8KELZyt\nPJmYKKlRiAUNP9VMnxJlIEbj0rCpzyXsH8ftOUzM+s8uV59tl2ayWK8sg/AX\nFGNQ/hkn9XP+W3B3MqwScYNSq8SCLIUHdBKYK2dJ6/k3qB4bGYlzBU34vIvY\nCIWF7N0UBz1pM0tBaVnYJMLGGnSNwfhnmw2XlgiXreBJWWC6QfOIUKtxIeLg\n5uyagXbrChgGMdIi+8H+bYhBZH9RskrVbcnsQpKduvWjWlAkucwmXmNN76oK\n6yxSWpCOMoRbREwrYdfCTof+LQSkFEiCft3H6OjAgIAiRWXJBrv3Jtiu7nF8\nW4GVEpw3jJ2Su1+ICekJVRv+F30U088MKCSc8lAbOLUu7xKMEDdqlxHoHDou\nvbdz/ygqgxdmkem7crzGST/6EUindJJgdWNljUzjYyOnmJRBnNFyq2uoN+uc\nH1fRh9euOUiG/MTBVz1SMbgtP01TTPG3DDtQzEO4S9sa55fyx+luIXangcTw\nFPE6\r\n=DAY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9ac1ed914.0","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/density":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/elevation":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.9ac1ed914.0_1594329644198_0.6498854622841168","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/switch","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"dd1eef1fa5e77686525d3c2467fc59981c484944","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.1e7cb6198.0.tgz","fileCount":38,"integrity":"sha512-mrqADQNE6LaWEV6Or18Oel3CiaC6CU3ECyTcGheWmKXkfXVe+v6ujBdW5XI5VmanjWaBPgS+l4kT74kulfiaoQ==","signatures":[{"sig":"MEUCIByWkJWEA9lPUdJpd6HfPC6DEBa1kHrSbHa47AqI+sWpAiEA4k7A5C9vT9XJNFnaEjvh8F5MqYINIUC8C/MoiN66Y7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZTCRA9TVsSAnZWagAA8KcP/RxWZWG6zFSeE6Z9wsSs\n8rlyWLOQXLlJ1aYts7doxoGvBChO+wEZRp5vHyKsrmHyHzg1a0fzdnQTTCGG\nxOoz/7uI+7crRrv1pQULQoogCUwaWi5xDN8jvn3OIgSsbSo9qZxS7XkQ12sD\n4Up9e6l9thkb/wlu2F1PX1cRykWO3rf1VCNdKnu4h8QnTpGIbLVfyrxbcU0j\nsZ2vQNDCbDloeKjzInMFXxSNgTD+RLIrU7fLxHiqTAyr+FWJjV3Y3mkz/CFj\nqo5in1snKlj4I/vcmYxhrxynyya/sMGbT2K+W5fqNTnD9fYomwucouMIME+g\nt9zXiro7ya8ZZC99EBUknNWGlPqRznO/rpoIuQxUsNlByqQikJTH/4ZT0hsj\nYdXW1qzo5UtUBfbVCWRAbDRaD/TrELRNtu2CDaTMs+PJpzA96zJIxw5iyR5S\ns7aVD6IcCqBFUx+sPcpDDqLPXpRbJ6sz6NVoORXRyBXAuIt4niwAHDWd0PEk\nczxjSbu6XLRegDCLkgouEXeaqIROe2kZO/JMvIjiTEHNAo9PPlb4cWPQlva8\nThvovzUwf0pHHPGDRhoz2tbJWfyNWXaDIL6YOE37GJ/AZ7zs7qygJ/zaE3Kd\nCxOnE+DA4loQQcjIAuRON5zeInf/2G8xt6KZzZzPAyqJatR0qWYg1AGUEngP\nmZ/Z\r\n=RDCj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1e7cb6198.0","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/density":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/elevation":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.1e7cb6198.0_1594332755359_0.7312422833348413","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/switch","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"a39de3f28a203a188b1e5b71ece90372b8df9213","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.843f636c0.0.tgz","fileCount":38,"integrity":"sha512-UgOyRK5NTBtT4tpLHt67DA2QKEePRYq9+PfdGN05zTky5enNRZYIkEbdYpHB+xBerej87OTTyY7+JjHUttq+iw==","signatures":[{"sig":"MEQCIHgzg6sL3KNgBqZX4Q5S2PlSmoERDn3qyc+KybeM/FhkAiApsjOKQq5Mh1XyHB+NapNpLDf7gLgrSOzHnX45RT/s3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKihCRA9TVsSAnZWagAAyowP/Ro6PPsXTEWfab5+GvVy\nLbJ7+8Iy0170H63qkeQ/JZGQ0tDvN03sg67GNyxWLRTZEGptFPG+i3/3+3pX\n/Uu8679AJBV54CwzMX7lD5ZuqSam2UjEEmZPno7Ey6fmsr2gfqy8YGQTRWQv\n8x5J0jIyW9W1CYG2wbfw0wMdoIsMFWAYf73aMqptNITJa1ew0hM2j4eDxseo\nqZq6XO1indGVzKEYUkQv+LZLUIV05NYeea5zDYCkOgfloQWSGek98WZ8GeAK\npwgqZCdTbBC2cVS49KcRDVw4LLlVLUVjEHj0UwvJSkiPEnMCzXJVU+SztI8k\n2k9qL0fxLE9TbBdMy/7puJvKu0AWCttq3xCcTYuEJsC2akjkKDghH7/JPKpO\nQO07yK2n3FVE2PUr3JIU6pqOYv/++XLCF/NDE5YjHmrpvy8qaqXx2PvEFTEa\nicpzAgfe4bjdPg15KvWgthEIaYwSZSxIYjiu+vsQZoYi1QUiJIxVhGQG/rw9\nLiwYaI59DGEFLWjeJfK7RogrO6RnyhQEx9xEJjVp31jm3kWUA0CZyLCcRgZy\n/1SUJYd/Qo/S+uEfnkohD6NjzzHLEJTDdQ4BkmQyXbmEpYoaJF1S1airt48I\nWeNbD11rO82WQ3HEeh3WdIc281GesRLrHTK+e9ekhR5BMP6BHlJlCK61/5lR\n0AXg\r\n=8ZcD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.843f636c0.0","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/density":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/elevation":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.843f636c0.0_1594402976683_0.9370101096963239","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/switch","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f8e30228d59cec913055d4e1f74861dca948cacf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.b2edaeead.0.tgz","fileCount":38,"integrity":"sha512-0jFtiou/Fow3uawo/NqNvTYyNXqHxmNTZC/xFMFtD544lcJxZHDPaPq2Of4WEQsg1VKfbFXiGcfPPDabVbwvBw==","signatures":[{"sig":"MEUCIQCsHxPDuGTN/WOGR3vSiO5rO++/R5Zi4OPA/GfiFvICjgIgO5Wdf2CN6TVNmFeOFYLIvPwvJy8c3zcnLcevQN4+vC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5aCRA9TVsSAnZWagAAF4UQAIV6W6wif+oKGr5N+KI1\naEmdbBtTsE0Havftygu62KMFHv8DHZKBmThRhH5CJ2JnYFc8ZVvChhZ78exL\neBXSAAWTfw2/uGmy2F53twiKVAAXUDOJ3ptTf/IqXrI7uP1nTj2q05+XLzni\nSmcb7whjQ3EW24KqCMigXBuJKFPSNgL5WOBt/+oFwocunPkJyVZZBQ9j+u+n\nDwBYDcH+qaJiKLnwBEKEZ9v1olpwaVZQnlDPHaPsvua5VI8zSgkzQIHGusvW\nlgjJPwUTv8we9wunhbe9CwoFCcQu7fvXE2Hs0nwjLN5tI9+B+5G9pZvkogHJ\nY4FXyCXexS9wE1L231PgZ9I7qx8bgDMYmDOcvG9XNBsS7J1UizVZW4nBAk1A\n5fOgn2W5n3mpJT4viVKrhxVAXjh1f61b8FCfe58sIV+FnISmGIfS2zgH7+AE\ntIQNgbx7oCq+BYh60kPJ7RA9D7KbB9RROUBkNO5cl89txjPk4JcdNA7z7vGF\nKGFTtjGJpZZwDwAzq7ZGdD0EpstC3sPk1ftZkslWE07bKirPPv1h47G5XpR+\n34TYhXkkkgrEoI+XnuFURv1nJoROhSektPmJZdxMVmIOo75Ha4xjCCkzOKlO\nUCqGAFfx7Z/yFdt8MBAHOv98/+fokbvmRJOiJdqZmfW7anzNM4TJ7HMPJu82\nFDPc\r\n=ShfM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2edaeead.0","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/density":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/elevation":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.b2edaeead.0_1594404442015_0.38529962086282343","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/switch","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"d4c2a88731f64bb1f9401f5bb75dc0a2133de406","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.5dac1f624.0.tgz","fileCount":38,"integrity":"sha512-buqtQ6L+O2V3/5Eqsq5vK0D2Mk2kdJZmbjVfd4PrPi31X08U5W2gqNskuCVhLktYdELu/AQTIASKDJM/gsvThg==","signatures":[{"sig":"MEQCICkCPk3u4Y1UCxlPIK2yFkuKYRsRQHSZEGATzeGdAnb6AiBiwJvgLKdqsqwvp0zxN99ewA+ZpeD5TuJhim3rBauF0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0RCRA9TVsSAnZWagAA4CYP/00/3ltzEcBeVMVyPjeB\n1n/oAUmt9ekMj/4QtVrXgfCtM1nLqzBcI8LvSJZh6Bp7prMFcYvmndTu5HST\nZ+G/FPBcSl+ea6pC4A+yaEuODOcZeIConyqWEso/fm5agXFqFcIP7OxclFL2\ne+TTpWMRrofsf1WGtvHPpFSYYLVNVN5m7do/r71erXwRquF7Pa/dQPWpiuvj\nAdUdguVCOogQTUg4yquXWHvc236KWhQidq179pQ/4DajfxLMvR34BtMfZFnU\nN+9fnlxjDH7ThbhIUFOIeNSAUT2kR3EoFi6EZi29lrB+P+w5x61duZaX6uHS\nbpSm5hHPDWVIZeLSoSm6FdeESnfFHYBz8qX9N7r04Hsj/zHuMcvKRkUwmEvj\nOtYVZGh7Y0/sAaoiIILos3hzjojbXySeU0EgYByu0BPUxeR7BvesIQAUJ4kz\n60o30wcIWkld7mi7gZ1jAVifN6wmh75qzL7IqRN8kJVNFYs0MoBw6V5xaZ+/\nLcqKk2m3o//VtMMrk/1nsRevOvut1ln7hvs73i3Whe31vOxkGf6FsYZxASu4\nCE8qodyR2hdPJiIdIOkTFWE1lhuWZZL1IsKGdWUkezw5RW77mzLruT/3OCtu\nIcuBbdL9Qi3wu/CraQYufOPnJWk2uaMp252TFkW0fpDRhSSdoLYSl25hQ90b\nLSxX\r\n=mKAK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5dac1f624.0","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/density":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/elevation":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.5dac1f624.0_1594658064853_0.3933269483831916","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/switch","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"2761146304b3bd095792d63ec35922b693c9c455","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.4497acef8.0.tgz","fileCount":38,"integrity":"sha512-1J3p3rKr8qVdnUnIWDnupL31e0OCKC4evCdmdKhLoHw0vd82eqVbmSqHBhN8NhJvqdr7sTu80JVQBpOWd+3FpA==","signatures":[{"sig":"MEYCIQCcyw7Y5WdK/tQjOUE9/l1V1+zFUukkG5szwcPeu1P5HwIhAJuIuVmh0jk2Qh5yh58Sc0tT3JhbF3KMvNfMjf2uDvV6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb8dCRA9TVsSAnZWagAAvHQQAIP8UT6ZlsFoizGkr5Bh\navtKGj3Qctn9ltLknueP4hRb+BORsc9Gu0Tlx236Vc5lNny4U145PK/UZUq3\n5GDnHOUSQ1xwW1h5FsdOVRAIEi+Rb/yOASISPgZ0J+hF5N0NO53yVUHS+h4M\n60Rv4U02ovILWZjnVxB7sboIm00Kp1XiNJnM6ILyCkef18c8Q4n/JFlxAc0h\n09SMD/CsCWzGpAujbXTmkwo7VfHF1uU2cEOO5yIZi4vZvabEFWzJEjtm1Wt4\nzcKnnLniObxr2cJR4tUpj7MmIgxHA7bAqHKQpViPMhcu49vncszkXH/AKvjI\nO2r2JxU2yoPYdz9tjoP1NviGoASMdUPlcZ1hgK146MmgaspvO27WRgtGNzb1\nV9YVkg1vpfT26WXojnCRq7gS3k8z9R7Yg1HjHdkf4pVEO3E3Vptqr1u5J/cd\nBiGqhPTy2dpLfi8g2qwRODdKUqZkgtTEiJTJJfr0yRdA0X4jQr6btzL/XgKX\nUyHUV8UyoRNRld+JpC44t8TZQv5B9BngNNlVs2fxsP2nYzA+ulwKPWG242sk\n/u1Ph6M5MVY12nIN7LjeIOCuthMtgkDis3RAscxhuKIQuA8KTSdFpRCw7ZhX\nvBlF1jk+pknW92sh8qPEyQA/aRzpdHXEWEv5gnFFR/NFOGoIF1lqCxK6qZct\nbtOL\r\n=/01d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4497acef8.0","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/density":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/elevation":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.4497acef8.0_1594736412599_0.948171088405328","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/switch","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"de2ed77369f6a06a2a19e447704be0074e7a483f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e6e23019d.0.tgz","fileCount":38,"integrity":"sha512-bmVgJpe4rENbLwrATe5R25Blt0yfsuIx0AZKnp6q383BB1SSTMJm1VRYzAJL7tHxpqbX4D5I8cl3Moall7hgOg==","signatures":[{"sig":"MEQCIAYM4c8J7MqNmCVD/l+LhXTqfRBpRRWSoDVKiMR1fmjiAiABXuH6ZgYRRPg3/739+1tkg+cShY8I11j4xsGQWIJt5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhE8CRA9TVsSAnZWagAAzy4P+wbiNfz8ypBiTn4xzILm\nq3sZefzO4mDZ0RWkscxpW5KhQG+9NAGPKbP9+MR4IOtyUOlIZxuen2OUHFz9\nta/YXsyHllVc7paRuASdQuaT2a6Znk9F3hnNf5dlQkxLC5cNEPZmH+hqG50Q\nI2NiMkf1yNs2ltqsER9vBiBIWHd8OQmN04c5300FIbKT5f4xM3tx8ibrzeKy\n1dytccnmxpNCfU7E9Xp7iH1RykcFnpPIouHFAOUw7hshQVzhbp1PTrGdUO1u\n2stzNxfudwJ8lhC0wxDDEkSbJmvn8suDkgCCHOMrHRgu9/X9LQtW6asLWlFF\nD1ODGKfhG8xttgCvmxrShbeR8akw+lZAE30v75qVPs1Mnfzpzeb9OHYavCUU\nUzJmuCTSB/AmcpNEP9XxdJan3+Gzdv7D8GC8F0RCtQGVZpRUfbi87GLX0nVl\nXkmYlVBxlMhxdDRxWXW4/TbUaJQ/c1IMmOYFuP44oGzxTshx0lylnrLELYV/\nzmR4LP6Q0WQR1kXrwP0p0VG/kSgyyqWe9X2iFqvUGIiGvEPCvqtj+sOpQZw5\nkEeZvUUaV/arY5EXrOScn4aY+CZp1bLwbyg45KvNhYIAYDyQKM4lDxYpfwf7\njaVEwf1EuDE6tflhMStRIIm1r7s+IDfnroxnEZVnNqg7WqCvSgkAX/5J78hF\nUy68\r\n=RNj3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6e23019d.0","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/density":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/elevation":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e6e23019d.0_1594757436057_0.5711444374534136","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/switch","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f879f0637b51b8f9b4e8080d0db7e88db657e809","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.d548d7a92.0.tgz","fileCount":38,"integrity":"sha512-anb4GULxY+IpcdBkClMAutnTQOiG85M1zPyckn2q4+gA9a/q0oyMp4ooF7L6KoMmhxKeo7pKtq5daJcGii2VLQ==","signatures":[{"sig":"MEQCIBVvqxS7/GvNXtmV3DUWb5BR7ZaXlaC3892Rs4fegZLCAiAMowg4qSP3oEPizIMRlM/HBhxSJSbZ1QqXB2z67mq8EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/lCRA9TVsSAnZWagAAI0YP/1bbD+Am2fby76BkR3S2\nvxeaalPEG0YBNPZUrsGD4aeyQMmmR25JphnG+T4RXeDj+iwX/Utmr6nIVcLY\nBpiK7sTZCWPAWAFEybqAAvod15x6LeiOvmr/u0sriJqcGdFCM7PFURKLZxhK\nvUs+j/EUk7X4gmf/lQgOAnl0bSk7cuX+Oo9x7VpjaiagQBA1B8fx+lcopoz4\n2EE0StvjgJ9/XnqGG1JzeTTM64yAhYWJGoKmaixKlA6ETvH3g2NW0QSuHCA0\nQgO9ldIy8aME373R2mTXawFG2iKSlgu8Z/T1Rksts94wM7bmlNwR6QCsMXnC\nOHFaMXH85XJZzFN5fKCPI10S4NBd7VkgSeNTnGAYwacue8H2yd+tUGK27B4q\ns3MrPF77X3fr/y+dQcfahQR18j/tp5oORAyJ2kXap5G26PQ7aLlVOSo0zF9l\nmYdFe4dxg0SFlp40Y5MnLRn20Lt5z1ZW/mFjbXlYH8y6eHqoKCPeKV8aEqNV\noGWJu0NseetFbs4TtLAiS9jI1JVZFzJI7JWsutjheTpfxS+s6Ha3IsLdcmAP\nMXbTRDmeiP7abXUqTGNnzcLmZEoL1VlV+3dR7RtYg3z7EuEM26SQLAdO8glS\nc68zSJPh8wZqtUcZXs/Sy/JpXMOh8pUtTiBGeo/FeDkOikOxyhx0eoCOiXy1\nDQtg\r\n=60yr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d548d7a92.0","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/density":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/elevation":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.d548d7a92.0_1594761188519_0.4484612543952444","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/switch","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"35d492e8db5d7af6a969e1cc3d3c64bb5195057c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.58ce529cc.0.tgz","fileCount":38,"integrity":"sha512-kM83Ih79rXgmrC9YyFGoNFxFOtYPmuvuF2jU/U+wtCbW2nDFYIJk74by4VskPXzhPUHPqDDLFWxMFjYqjiJUZw==","signatures":[{"sig":"MEQCIDiATxGuUfesgnziHvk3Hg5AvDQcX68mr/HbgVNcizZ2AiBzLtK3fZB4TTtJxSDjGGC5Jc1lcv0vKhm3HxfpnzNFoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBfCRA9TVsSAnZWagAAp7IQAIqtW4Yp9GWDShVzQI+S\n+kLcz1EiQVXKNhcqZ84C3nS49Ou0UaabYVQzkonyERYWKLFphHeOjK8RowPz\nrcMPrpbTmq4ienkCvSQ1BvEkXlrkR1hpuwM1OPC3WM7OJsP/Uwc+c0P9xsNA\nuY+iJa/fqXO7RWY+KdTPWlP0qVc0hn9z9kHSypnxx7cGc/PulhRBYWE9uYoi\nVuO1hWw7qxFe9DeedGH3Nk5KqwuTXmuF2Jt4NaZIyrJ/ENHjAlQmhNvq1fWN\nIyKe92oNWQzS7ieP3sK5fvAzGPu761zZudmwxyFGH4s4dN+40TugtJzGNFaJ\nB94bpGNbdyiAva8zsLe5O4b9MxOIFG4AvUJ4OIM4h0Bxdy97qGb5red1fyvV\nqe2qW/Xn58grCgFw22PLcu73b0zUubFlIrv2GaO39WjDol/FdHFW0HL1PPxf\nlfHjLwvjoS52VbTe143zSNl8XwoKmbWLDtSD+UnjxXjsYJuDZdfouMDrddT6\nzstFkbZVlc00UFF0fo+6x9iUDhRkzFBI6W2ZNsPTEQuZP0gxes7l+udVVyay\nqVY54IzduAzl387alN42kptvYfvwXJ1yelUwmnXpYg9alsz6oky327Kgyu/D\nyQIqS0bX9kOZGK/9Q82vwdwGmPiH/HBQt9ayrWuGoqm97F6UTJpPvVqVmtRJ\nFPLK\r\n=Qo2u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58ce529cc.0","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/density":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/elevation":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.58ce529cc.0_1594761310883_0.09530885317345983","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/switch","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"843727710fc306e5486fbdbf962b7631ccd022d4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a0f1202dc.0.tgz","fileCount":38,"integrity":"sha512-MWfbH+vvihMlLG/r+fNlajZRIbgSDYTj8ZueE5oPFdfX/WI+46TrZIbLkBdHqWOPXrOZ7fdc9+7JG7OOmN7ukA==","signatures":[{"sig":"MEQCIEbNxL2N7YT40Uj/z6JGnulNXh+0FvVjhBo/hkkm6j3XAiBYz70b7dbD20Nbiy3fr+5esI/sfW6HoH4lX5xdMCMPRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiTkCRA9TVsSAnZWagAAq2oQAISW8Yae0Qqfvm8fwo2c\nxkeXWJcy0btC28KiTLG3Mh2Xy3hfeTI/T0zFqbZvGyC3DM2hEaEW4KB+L3Tl\nei6B4QdSwt1eCkPQlVOBbnHPzPT2oeRd7+rKVyPj29VomTFSvfTQ4dt8A+zT\nc24URD1CKZRVTgQdxgKPOyju3Q/qyXZ0+wmoBEcjlUmDkULIK+Xd0EuhA0sH\n82we1mUMvG7gmRrlJC/xR40DPJ9diQGQNUZsg7WJLHEXmtCps9PbTV+29Y6Q\nenpnID4O2OIv2XvYjG4ZFmPoMg1VVwMCX2vbdHTBBmSNDRuUTPbJ9+VQXcua\nm0s1d7lXsTIN4rI50bz0ZXu7EsHAanQuZWMLEkhUSydWoCcsImeMyHZafydA\nWq4OyLeaP0eSZQ7SUe0pClufiRQlncTe7otPriEbAuXnm/G1AiRv8VxSrW01\nSyVe0ybLFnklZGa9EqhktdmQoniFzEQIHpYT3XeXP7PtkPZ4xrQ9y0kEq/w3\nPw6ecvenwJ0O3ZqNO79XszOt5d/CDiQU0FkwuMg2uW0GKpv0BA2Mt+kdjKTW\ndJHZMortqapeyhR3hckyctt2lP252uw01/5l7mDbp1BG21GLRsnLoK2le2Ye\nlWa0jQPHX73790uwpLUTQe8yHRHceBhFWK+8uVTZCXducLX+AlveBYdx1Ohr\nH5Xx\r\n=zq+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a0f1202dc.0","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/density":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/elevation":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a0f1202dc.0_1594762468082_0.6987687314658926","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/switch","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"4a86ab30a77f59b64803a3f8c1b709fcdaf12998","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.ad4df58c1.0.tgz","fileCount":38,"integrity":"sha512-kbj56CkiHuT9DvcZPpI4jVmfRDIeSgzoZZZRc808cuoEbPzdicbbAkcOA5LcKTUfXe7M/saiybzIqJ9ccHTQvg==","signatures":[{"sig":"MEUCIEF9HfPlsnPSkgPcq6gDCUPBG0gsARmZmDiXajSJmO02AiEA878jbjHtKZB0esWUM9+99HGE25qDHrD7GPOUmfIOyGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDklBCRA9TVsSAnZWagAA7C0P/i2mYuarAU5riyV06CTj\n8GwJc+VAYVEjq5IIjAN20gX0MI23TR5jMK7Bl7qnKuCdCx/p93VpETzoL5Zp\n+Y7tR2KczTXP7ciHdiKuB0rPfyDZFU44lHjQZMEA1AoE+53Z5Sa8Z8lunbY9\ne5TcMZGE8ros4KImaqjAa8FrJqDEobtyK3wjGOLzzh/eCKYJASsoaZb41Rvq\n9KJLeZrpylG4DzDz59VlGZULI7UdV+1RKBNw9NIhXpKBGgljtgj2uCcFlKA0\nk/swgNO7qrpsa86gDxPxKRaUHOTdAYSrsNZ2fY1tNHgqBV35pAIS6tTQ6KxN\ngXWTxnJpQX88oNNkQXV34c63CjalV0VXSPfwXue7nrRYP7kfD+qDW5l2H3v5\nzjqrJ8LTTtZpSCV3OMPdvVBXAuDuUmSoyYUJArSXNuyqD1LNJI3fdJFKra0Y\nRnOzBM1plKnFFTvp87OCJCZcUzadcfvbfvuAOKGm8iwJ7lkZVJpBDk5v4dwq\nUkUfoDIn5xj5EVn9xn3/dbl3pkFLmvC3/LX+vbHy+7pGr8VJkJ7YqfAgkAXr\ncxlZDUz/Q78TMRspev8QNM2nIpqURKX1rlIsMy1uFwOMwrkc9V93tw7amEbD\n5i9Bog24eEdGqbVuAXINRGtc4f2U3vIeRvzWqI/Fu3OV1ofMrsicvDGR4+V6\n6MQS\r\n=V9/n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ad4df58c1.0","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/density":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/elevation":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.ad4df58c1.0_1594771776230_0.46854783766934105","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/switch","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"cd37104b5d972ec67acb298b308e8dc97dff3c75","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.01db89053.0.tgz","fileCount":38,"integrity":"sha512-31khn1W5HaMH0//WvSycbgpaNs/dgXHVLhubRxvs5s/3yAYoK5tc+7zMYBAPtK/wxRwH36g2F6hoKeMFfH9zHg==","signatures":[{"sig":"MEUCIH93oQ8muWTEP9KHi4e64pSZ4r7jelByhcAbTVuBFwXiAiEA5lLtQzbubusNLqNNMaSo4zQ0+BI40ORGU0gt0sKUAws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEILFCRA9TVsSAnZWagAALUwQAI6OHfspz7mhR7oyeOVM\n2y18ZyttzI01zEM80D8vsZMfucR7rEQqViVgAlqdBxSEMDUk2ojnpLOUShc/\nTlmnMbU1SwDAdlGQHq6JblmgLDO092uySAV24G+8cNSgApcD5QCxlOQ6iR56\nhj15RxtzGbnZcQgHW6aiT6CSbu/FKE+L2SuAHZhzsiIW6s7CUAcO0zTlrhlN\nRDkj35oIzh1N3Y0/ECtxn2U8nFxor9/OiMNffhDGNVS2qgsciBMnl+XgvG+5\njgGV3WKT79FQ3Px3OEgtSyqtN9E0xdSs70J2Xr5cCJVR6XiMpgsJrscRQmoj\n0PbkCnGYOVs8E9T2KQumKfDq6rT2JK9ryZsukOEPjmVniYWTTIjBEldAbN+Y\n9x8IC7AQjYRGMyxXdXB0BPtr8FRURoz6EdiwMfO3KOcUtMydc6eYwPgwBNNz\nQTOtvYOF1tFEj/JehxaMCT169qMh8TjA8zbI9S6O5mDKO59zz8m+yY8ULnVL\nXBscjlzOBjsgtaJhe3s0FjPotI7AQb1yT3578TxNCL8wXr6D0eq642zxw/v6\nmemjP00nM2I6rj4vojnHLzVqdZ8yDmw+10XpbAfja2I3+Evj18Ob3hsRMSve\nNtc27Qvr7mcbZuLtsaXG3w7MON3yEZzeZzF3Vj46p1G9ti9VMAARv6q1EOn8\njHyu\r\n=2igv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.01db89053.0","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/density":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/elevation":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.01db89053.0_1594917572901_0.18109439780321623","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/switch","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"9941e18c040a3dbf2a72387617a1c6710c41695e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":38,"integrity":"sha512-nrY6N5kU44TBQNgnEXI+QwZpggnmJ81fTY5X1A7UUDGb9CLIJol7j/b0wMUdEFx9YYkbKs5EBdH5DAWX3bt3kg==","signatures":[{"sig":"MEUCICe58GhZXvH2+P2Azbzokf82cGTVCESOhrd2gN8+WbxNAiEA7cOlKYTyeCpba35tpIkwtmyLI6+jjQEbGNRu/Kv0I30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5mCRA9TVsSAnZWagAA01UQAIUL+ab2BjlhMxt0TTMc\nApynDn3S7PLcgiata1vL2wiQ9g8kKd/U/oDWZlLKf97UUqOPMzn+ydmRfpg6\nwPmaRiDmxpo9czNIUULcOU7ByYFCjhvchltCIve+etH4mzvDChZjRTCVH8Bg\nPuYmr3I6yuAF1X+dJcHbcVCDVnN5m0F0KfFVJds2egujaDeqw2adpEFmXt9W\n7300RtGzsQ9JnAlZjfym23eeW+Z2Ajaiq10nJWcxvuRMlkl5jKUfbHiqXB1V\n/VpPU6HBOjZSzSs7DKwloTmbDFbtOFsuM/Bx67AjvK2G/ydoVP+x4JvAx23q\n7FPNnWiRvxoPLcDt699/YTTSgeW/xxevRNSxT471XZP0AiLAse/roj53as2I\ntqZ8jp1bXmJ94xEtrTsiEBSgBSlhqQBJBMPBq25AuYLFha7Xlpan46MuULC3\nJXiD0f2wRRuNuFyPfVucXz6zvpaZBhofhf4MTUfevNyyt0CIp3qX5EQiCLNI\nmBSOddesGi05SxqlSNFrOP7bMpP93DvF3voJ+JReZHOxAZbf2ZHBb2exJaUC\nTDavhgxEtKk76XL4DlzyZnhJhJBWUZjKLOslpF7RfZt/edBi+0Jbhl71c3T/\nY0VSck41PWH9ClNHfuUi+zVuytF3QrmgvUZms5ofb0WEKIKKUQ/elg9bf6mO\nhf2Z\r\n=GdL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb5a4cdeb.0","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/density":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/elevation":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fb5a4cdeb.0_1595272806238_0.8880057079529597","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/switch","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"b81de34006b8d320c5d75d4ac6d921b015594e91","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.8df0f517c.0.tgz","fileCount":38,"integrity":"sha512-05RptHpLBRTmoQCJc0hP4QJK5FC81iDC/EvnrjQUp2l6ql77MplnXMEpw0C74x2rfcfy6g8MFCTbqoxIBwCUcQ==","signatures":[{"sig":"MEUCIBoc+KXcojhd6Zwsgs0lwkFRqraYiJpdSKphxb28wh2cAiEAm32xWmhAGPgmG4r1bQr2r3BzUQhUdFKTZPm+vpKvy6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8ACRA9TVsSAnZWagAA5ZsP/iMGqeXtWY7U7kHRLFNm\nA/P4kAI0vtd62sA5OBl7gppzCwUpr3JWtkPZhb3CCGodhxzYXKjKbx9v1YOI\nFDbMC/ZrHgoC3BadliuiAnAPWq9BJMD8PycLC6+puwrSsbvupYKUPPPxOegf\nwHckzDHQyhEWnCPcC7dmGtQvmhYlW/GwgCjb6a6kwprY0nK0aPWoAVKT9orf\nuAY44tJuSK4r8UQfGZnGwGMctqTWSaI256UudJOroq+3dOyafA3V0lnOWjz/\nJD3qGA4IrdA02z4DV1rswp4i3o3TBIgWZUiEHrKtzTuAN4mo8LKpjxOItyef\nZ6u3cseWWHuHyS6OtYoxFRmSQ+/BdFyi7UZ+/lPh6GNjRbwYzpK3mgyiF84E\nY5KvNIA7k6kAAzAbVBRTNNJ43AI8hVELiVh4ceDAwTT+AHB5P180lcQv3aus\nij3kLW7weTizTF8y5fojFprytZoWXlzB5x4BIMx0bREVbIAcCKcUsMidi9Hw\n2jBoDgMdPcoPRjpa+FiAOVcUb9X8mVPNU2H9tLRA/80EbD6+Gauo3mYnJ2NJ\n13gqp7K1WcTgbmIbO4ZHgslG9aK067hqQL2yGGObwtAcB0LkIanQT1uJKTmB\n2mDjQmEUG3sIlbziazx+/YgLu/SS5sPAFZvfLROWsS7O2lzIAe1+JxBB+fDs\n6v+l\r\n=R+Y1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8df0f517c.0","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/density":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/elevation":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.8df0f517c.0_1595289343963_0.9081812651472294","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/switch","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"10956aa92b1898b177d98b6cd8f9ba29096ff54f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":38,"integrity":"sha512-bxd5QN5zXwuO5n3uG4F3zFCKWtBymmH8RMsHm8WR9rj8LGwTVgvES6ohIfCNYZjHlJXyD/QuwSaF1vwWe8z7VA==","signatures":[{"sig":"MEYCIQCEv1Bop0GKDZZdU1l6mWlgjt4qftWGW5vg/rFUzpGe1gIhAOyi4IG/HO5pLy0H+p/fuzr2kstaoGZYr+oMPLx6gIcy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvLCRA9TVsSAnZWagAA8VUP/iTzm87cuG41U5a+hXpe\nOS75J3pXUO/uWbZPX4Iih7QlEf+zR3PFAkc5uMllvrHfaGxdU4bObsHW7ozP\neI1B8e1CzMlgPfoTiOZUCI58f6WxdZMyrldDZuyDjJYhL4j78i+xNMGicvxG\n27Fbb9RXiO6d3e3mXjzIm7r1XmrLWyOlvJ9K6MrqkJ49m/FhQqfx2uaNCbKK\nOWAw2Iy+sVuCuhSRdZOqS+vcVCsVTaLmdxderdCAP5iKupqLOt/2gcxHou9D\nJ3S4vW/6MeGlBvcFYPfHyxoav1SwCUtQjZjVBzNkl2INjXkY5f3hb5SeF6Ya\njpg0Uu3RrzLfETRF9AgLdBOOSL/WN8bCM1qSEiWJl4bG+mDfCe//jEhItR80\nzNtbMHpLlADPLS5HJRms+cSGYBNrN5Yz5J82kS8QxvdWflZgRosfY2ROZqEO\nsW7FDwewEaQoia2miH5ImeZGol4JZDfFUBCdqYIbNLP59FUkV/RXrYIPbOcv\nkuD7Q/UkVEIW81dXv0k8y015UfPX7nB1LJaR3fY9tknynPcwmD/cSocxZKAA\n8RoOUWTFLyNnYMIfEfoRcw/ShFvCQR795pstJMcW524VgPyPX7khXi3vBMkQ\nO2LZ8cdhsOVdq3yMEF1ZErAIsfrvqQHrgiBdASd7Jh1kE+EeB5vEXVUldlcm\nfuWE\r\n=uN0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.abcdbcfeb.0","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/density":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/elevation":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.abcdbcfeb.0_1595292618942_0.8207683047548688","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/switch","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"8b83968373869e3a3f52d05f658b58ece0b69e5c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.7bd5075de.0.tgz","fileCount":38,"integrity":"sha512-03+iGPXD22fWB9S/b+e6kqF8ZXruKedrF8h5zhv4E6VHWx9Z1DBee83VqTibngsZsPBEPqhM8dRuQR+uIA5bTg==","signatures":[{"sig":"MEYCIQC0VdgKI2FmuYCdUKP1+uOkVezlmpHggOFkO+2NcHPFgQIhAIcBFCXwGXAhwX197mcXU1bG4UUo2T9FZ69Ef7A+MAC2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzg1CRA9TVsSAnZWagAAETQP/jozae26oL3xsFYW37Wo\nW0H+eCw/DBqh2uzgWKGr8yxZNC2NJQh93Nv80KjOUUqFGEuF2Bd6+E4HDICO\nIS+VNq6NUOUDYtid58jQwVHmBxCt1zCrsyFOdHgFZbiceXsWqjvlnx7YxkgR\nC+VHDBpwcl4Iv6sMnI0o3CkOLJWzKESooy7S2Yq0vUipJJ3k/1OoSpMG+fUZ\nDTGUyCdNxrwt3juZCEbuH7tz1TV7eEb6uxgQim4b96Z6nlewPeOu+EbVRVim\n0NJCAZLfSwEUhri3wkKA4vEdeHC2oA+8722X120DyoCqp+lSbEICv9QfrUtk\n2yyA3VNnFwNlTVipZue99yO/jIe0080esVlcDKt6/BxMh0xlUTMeA3BgkMXy\nh9LZkE5daIYcTv4Asqs2vlpKBiRlRIn2xIAEyTTWIT/2M093K4axF9jHrfO9\nemklwPth4rje5T1UdqK+sK4bviF5m1W8YPH9bvEBQmm4PR8L54WsEimDMduj\nzEm0qv0gkMl5bZscVJEGfvRuIpiZ007sbJzg9Tp5kR8kfUzovIP+zGS/Qz9G\nkWzQKHLC3MxvJvq/5GuHtAuoKVl7CF2Ow+0TJx5bZgZmRK6P7a/kIO7KErvX\n2aiVoZIx6+/7RT3HFoFcV5UQvuSPaeDaUeXm/SQsdQALz6HKSZPu2kK4742J\nZDqU\r\n=mBoO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7bd5075de.0","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/density":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/elevation":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.7bd5075de.0_1595357236662_0.07783704321032614","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/switch","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"85b4f1655661c1a4b44841e5fb18b5ce1be8dab2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.405a29a20.0.tgz","fileCount":38,"integrity":"sha512-/QedFILa8if65WMsnuPAgebWqgE0QfM3obQQSkz8QnXw28KQ3RW8jzLPi+m9iJ6cwsPtA17Qa6GpQPa6DSZkMw==","signatures":[{"sig":"MEQCIGZ50X4r61Uu6mWjA8F7nt9QZ+JhxOOc8UecWn+jojHbAiAyClfjqggILGoV5bsgSzCwngGipjIAlCkyabjJgpflKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxXCRA9TVsSAnZWagAARlIP/jhIPg6AE3hWU7m9nrUu\nv5+so5Emd9oKNl8xbGFY5YJ0chd5swv7SZoZS1+Ag/ptju53yV7OiYfsQYhC\nq32GbB8/iiBb9g+msZDvDTIsn/M/zXjIyaCdKC4pb7GzCEyhXwnrPXL345OR\n4qexi9LJJ+67v7B5oEp869y/Kyj+W0rHj0O8ICK9B91qfPB5VX5ewDpda23F\nCKzYe6B/73UVExFtj7noOMmiJnwi/gYThiZDaVmgKPH5GQMcuTKQKPV7ffE7\nqnd6T3E4txQblMJYWixeEdx+fHgxNu4yCSVZR/qdXy0NWLsvDfdSTtVKkv0u\nYp9QNssNfTn4u75JvXIVuklFXGn1lLz7wdeA04tpehE6yMYZ3GUXvT1trHBp\n5+YA9pL7FJU9oc6PKhs2ltHLmreZLM2NnZUrde7q1R6V0XaP9OUqkwtR1Ya8\nvYVEP0xfVjxpmuPRXlkt0haQmTtGtaqoeJiAtFC3MZSVgy5Het1CfLG8gONp\n97ig5yygXgzfYg/BOfgMEHyzsFRfbHL1D++dQT7fM+UF61O+TtFcayq0TqkS\nwGhJjpBoNEL1SFzpzAGZtteB1KknhW72y1nLrqWXwZtet+SqvcVJ17xCbKmd\nsrnB0FXtkAwI+vV8LnPRsL0lLIBCPwtHCW0svFSBivykaYS9VeIHbK6oSuMj\nycek\r\n=NzVU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.405a29a20.0","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/density":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/elevation":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.405a29a20.0_1595456598630_0.981674149024121","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/switch","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"0499fe71e02a94427725d477c6e52a5675173ac4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.f3693ac4c.0.tgz","fileCount":38,"integrity":"sha512-YN6i7N5CvE/CbzTA14wUuySKVOGtrFhDJAkKSxldudwcLpIxa2wFjL7txOV6jruSk/+ZYqo4uPHZUGQWYsUd+w==","signatures":[{"sig":"MEYCIQCOjfqwyo2Sm0WW02PaJ4NI/qyuq4Ww5BfVGouJRMIx9wIhANgVkVbFdjws+hXeYbLTiS05WzS5ORqKMbH0N2qNXeXT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7SCRA9TVsSAnZWagAAop0P/0U6aN1rAzxxcd26z5pm\nyHp+6xjq35dil8Oeg34DmFNIMxwVAvfF/L1bxDaPNcYNe4MWCLoFgq0Krx8C\nkP9DL2zPkARzVSvqYZDrMOMCE/Cnws6QPTWphskeH6J7JsX79p/GR6iCuRdu\nScdKB91a5ePXC5fmJEg1BuOyI9p4+RAHm8vRG4VaLzwVUU0GJfM+4uqa+rvg\nWNaH+MkoCCDPkdxF3vvR+ghqHJ6vbtUn0Jt2ft9As7i1CF/AZisuFiwg+pTT\nN4l9mbG1KNMDl4Ge84NixsbXxx14cAd/Vv8vta9GzjEqFJK9ncqIEjSqEJg0\nu1BJNZlF/5Jr1LFYK2YL1GfnRnvOTLmglO9oZeNJw4ZoBgR7r3yZXwTLvzHn\nRvu210IeejBFmGfpI9T1Ds3+ZrQP9skQRoqXkwBiTEDayBStOs622GWjYR3t\nqkrWjinJtrtPqgdUSMzH/ZNAnAHtAb3Zfor06Ak0TZBiclt/8B2IQNs4Z2KS\nPvZfIOxnrvmtmKp+t51YTAzHPVlzuAMhZyj3EKKozVtV8eEHUDS0Gk6RVDFO\n7Mv5jM656CY/Hn66VJGMAsgFd4aCKLAfAo8aupN8F1hANu8ZkQAcst7yuAR6\n0zg6KBzKm/qck2VOuXSdhg8lGzNkma4ok/BQ+Tlf3fT5TDFSy1PPMgOF8xir\nbJYk\r\n=Ve+a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f3693ac4c.0","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/density":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/elevation":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.f3693ac4c.0_1595457233828_0.8432880372710609","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/switch","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"cdebb59da4e12b90f47363518251ee506d3810f1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.12a109680.0.tgz","fileCount":38,"integrity":"sha512-ZRk1uSBQq10HCGBKIQrmn5Kzvg7G0gQe56r9PvPc0rxHp2+9FRZRiJoWjiJNM9/t36Sd8ydkUFsHHX40I0B4Kw==","signatures":[{"sig":"MEUCIBAOCxOCOdN8/oxYzPWRgEkz390YWbcNr8v4qg4SdacWAiEA2SQ0N65LDffNXrVDQf9ssuMODY1ljWoCB9fWRnYCpFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXJCRA9TVsSAnZWagAABcYQAIuoKXcwDYWOBlz3yAQK\nqcwRZYWL55btE5QS/1p2tcOR0CdzJIEeZqw5MpqQZSnHw4A72sKg6IaXb03I\nBOibggoUBtuwML2J004eRSlxFHbjIPOIftfBM7efQpV7MZlUXQ5/txCv3o5f\nZMkg9nvD3iPuBsjbrP9nE1KoSP4xmA6HK3Kp2Z8dhTn9Or+CvDoUGyYtE+vs\n2jj5etgYwBD7WyBaYQaHg57uY3MM0mcmAVi6k5HRKVFDWi+PEvBtcdzbAhmw\nhBibmjrl7WST3ny0e1OA1IZFAaM6sm3lj30pBKDwQX24l4RxWhapnNtnwbYV\nY0ev8pIDWJExhDelqBi+8iOoDqMgjJyqSWU+hK0c9XFQCUpo579XfuHEMKNz\nsjvzzEqu0wlRyrsr28dnmH69gNXvaxjkZ7Dq3K3KkVxmrKm5Q3JpseRKpQZ2\nqcdv+G9CRlv40HzyuUed9YsItPx6Kk2ILIHFhli1DX+4KGNNc5Gfp8lRrucy\ny+9D9aohn53PhdFVXE7vvpe8gy6u6GRYQp9RW8LZTLxKEEHhTUxGa7rqPR5A\npkG9j9AkG8a8RbjytI+4rF7nttcorT50uiQcj7XIZgxtyYk/ZRvDHq9KFIBU\n1CJX7rWkQQqjq3vOp0sJN0vBW8pbIHAjdxWK7MQnmIXVNCH9cwkEB4oPklYE\n4Mju\r\n=ST9v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.12a109680.0","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/density":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/elevation":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.12a109680.0_1595459017227_0.6922231422383138","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/switch","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"b71e1210a095518782522219c329e105e6e7bb67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.bbd06696e.0.tgz","fileCount":38,"integrity":"sha512-rwuWe7cZsFtOFH/a5U09A/XWiYE5+hvVEMVrh+vctRbdUQI/M7e29zbq87kVteJj4vTFTvdmWjC4F1noEZMKIg==","signatures":[{"sig":"MEUCIBMNVDEtKFs9MbmfPqOzaDm5MXJaZ4qzVON39dXBaFvzAiEAx1q1fuw4feb0EtAbpyZV88WrvKETzlT29ESWSe7/tjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFcCRA9TVsSAnZWagAA29MP/3Cm7FnCUIedFx5GKGeD\n0YHgeSf0FhMLEWt1EHYc0MwhrdSeSq3oS7OHOILk943VZ234b0WOC8r+4jfB\nUMwvt6kAhPut4aubsRYTOurV3/vL1LfzD047xtWHS2JnLu0qVgD8Pd4pEiQr\nF7DIhwPl2LMIlwcOtg50HRhb648LTYzl18pBZ6Bko+slZhZbt1wrO+G2ot3F\nnkK7iAwug1b2j3cG4NSPz2XamahMarXdENeOvZbYSLxB7dw2wuCoOGP9juLU\niskyZRz2oy0dtb0AjfFUm3HLJnc4ctdfZ7OCh0K7doYhWvG0Q9F03KlhvS1r\nm5/SwY8Dl0SYMZYZ2o7ZnL5KSZO5C1nm+g6jXT+uwiEEu53nLPPem8FNJNB/\n5bhbci+4ufqY4FR8rJELOgMsZgphEZfLB4l5Pe+2X2WNYjc4pDvYRuGTPWO9\nA9T1G3gR1voNYYvJ6JPuCvEMRqvvPGSMeKge9r1kj0kvhVpLjY4ZkIQ8J8t5\nGfG0f4qdo5KDZ9Yf4Yg7g22Z5sjzyPgWsffk3Rff33wfebU2uhEj7PSusSpl\nknihMCzRG4hW8lNhDEUHeoqa3EdOtHy7PVjTqV50SMy7NQIL4Kn1MOCzjwqf\n4f8H9IrVTaOP8Ngl6iuX/+2vT9K2V6V4c1p896B/TiBkk/gv30IgzWiGVkMd\nsUlP\r\n=ke3v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bbd06696e.0","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/density":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/elevation":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.bbd06696e.0_1595461979795_0.6568283388933571","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/switch","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"0fa7728af2844634582a276c14e544d09330b5c5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.4951e7651.0.tgz","fileCount":38,"integrity":"sha512-UQ0EHnGfmh+8hni2/z3O509Ha+ClqDaPxOIN7iZsDXw5y4pJlUSulgXgI1PvI0ClLQBp6icxbhN3kMppcllyYQ==","signatures":[{"sig":"MEUCICNuVxp5dQ/KQX3ezhpl4ixPTSVPqdY4RtmGoB4y14nxAiEAkhEvkr960/B+rxqjuK0dIAwhTbvS1DWQxWj/NQjf5Dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOy5CRA9TVsSAnZWagAARugP/0Qwi9ZSdxcNFIMUDswb\nmyBoTw84cfn7BoNbhWd/hJfPKGGcaOWVwWddUyCH8JIAmeK4Rpdi091ei1so\nSxSqcF1o3+of2fy/xcYxOpKKsNYfFPFHEt6UivpkEu3M90yiAYQJnnNfLcFF\nSsNjyAOhecJA0JpM/3+QR6paHW3KJOqdgeKT4EFWWPF2D+7cE/xJg1gv1s0p\nK0cZv9NINgW4FGpgNlXZ3NpzsXViwJFDezNP3ECtAdzUlq6rqdswu0xC7EEL\nWDTjIqKiz3VcOXTccHt0FVxRlcH3VEuCQdAnaL/9zk7VjezQNK+u7LNvxYnE\npzUrVzD/CYzWau1iQiE83qf49xW4LMuw2v6R6YNj689dTlhujBjkOwNFbMTS\neTn/+zzbZybRDyn+JnUxQOhn5bg6vgfTtxNdbk0ZZVfIixfdubB23RNnL39Y\nrwrkm+ErGa26S0LY9DQPqYaaafkmI/nCuI43lXHz8TXj3UUSLNwvy2vUlXVj\n91cpEDby1V79OFBKB/k60WScFdB6ikCYPWZZIjm7xL6GVMyTCyqgpRxZaetT\nwpbQ/9n4F8GP070+4T/2+DiImlMNhfQ1H+ocvBSwde7Scb+zdS5LEZRaGrMc\nvuDZWn4RSreDOzslRxEqRoHuVC6vHiOPSYjUVEQlApWrKWKCMgzbumRdRLUX\nwOv2\r\n=EuW/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4951e7651.0","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/density":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/elevation":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.4951e7651.0_1595468984895_0.6487707357134986","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/switch","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"2361617563ed7839503df2be6284ec41f7a6ad67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.75deebbef.0.tgz","fileCount":38,"integrity":"sha512-bBynP4qzmD9hEaMHOcGGtL6tymVwgrd/WD01uThf56/uPGk07D+ZJ5r34oaJTqYAITHA3UGJwHbP6sl/mDTAlg==","signatures":[{"sig":"MEYCIQCFRXEkj8XrsNAJWFwwZFwxE6azls4fjz81RbDy76cS4AIhAOizIG6zIJ3JtaCGMLKIxPubx9LXAQ8UZlIEeDws1a0K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGczpCRA9TVsSAnZWagAAimsQAJDx+1WNqG/pAkcem2HB\nmw49ZTk5SnqrOOL32ijE8KBIns2MA10o6jANcin/ClCTLDVC/QxZ1NS7GrkP\nl/N/Ynqdadgz6ts/aj4OmmRZy1UsSWlU/ibZSQwEeGC+rkcLH0RVAQSkV+9T\n1BIX5IzFDSUpewWroAmbzkhrKMW4ihRMj55wEYKsNSlYRzWdKrMKQwAU7t/8\nGic+2z626ajB0xR3A5XcpOwrZXcleoCCprwSaoJIdtLykEZpxxiRuyrV9PyZ\nwYkgl8fS4xiopPobGrbK20h8BJn7rokzSMUGBWMfPCNTjWBhK9r+7J0FDmPT\nFH3NGPcIPPBCkJaImLoQDYBIZYBA8NuxHfIuv5JVngYv2q005Fk6f69xpQ65\nSgy7Ra8kphO0AWpuAmI3fSRFMdKW4DmnUn9aFr1hzGbFv1v0SzfsUqgWzn+H\nZOrkWHCE6V0QWUcLb+imQFNpW9Pt8i8cFUw2VpiLCUCI20HdxxpVSJ1KcvK2\nDNB1v8vhjSvFk5bcV5sSQfDa+yiInLSV8Re9OgjNE3+ytjyhr3PAAUgpkSuA\nch4Kt1Mxk3qWqtDGAMtc19le25UsTfSGBfVVc5Tzq1REZl6vYM8sEnT39UlE\ndS7D/8zbLzBcSt87LoheztGvDqcUkveRFwnUBuoV+Qkx80nOJh7pferRBQWG\n2fEG\r\n=t2UK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75deebbef.0","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/density":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/elevation":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.75deebbef.0_1595526376684_0.2662541543786485","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/switch","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"77d09da445e55fd05baeca235bddbcd22d944e26","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.95aff33ee.0.tgz","fileCount":38,"integrity":"sha512-PpzhsnUDNxXRnpUbUtl8hEnE9SAPQ7yBZhsVPOANhdP1VXhzDUWT3rB4uMawC+b1CvMNnmOKQUDeXnfe1HxM2w==","signatures":[{"sig":"MEQCIAaJJWUZbyOCByDqPEJnBwiCkq8AiERV8sgNEbwgocd1AiAR2Q+CHOiYZv83hKUeMk9/Lr/EvcquY15TGu3jtsgkXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdtDCRA9TVsSAnZWagAAeYcP/jrG54zxQsnIt80Z/Zaf\nVGYkrMAJ8jRBvrzo2ENNymUxiLAcmegbqLkYoN8lyvA6gnlHv20pdDRCMzGh\nH4JBwaW+RB4II90RIcm4lMJByeIF/1hnvzWAdQqDrdGj3VPKVIECzNLp/nv0\nkJDNyIKJwDewm7hJXQTAnttjPlnD6gVaoubQrabKTv0hxA4RTi5CBOhMFPW9\n5ipTwNaqEk1oR20rlEPdImQ1Xz6+Y4oCuLTT4M+R4IsN3pnaOC7uhpn5sMVy\n8zineTwD06x71cHoiRHRbOwYcqht7PP8PwtVPvGWlSqpZ9eoAyI3DZ/8D7EH\nfHZicAre+7WHxw4RnEz0YfMHOVt9sB+SUwhKRD8YMjRSHpoHPXFcBnfxoxTc\n2g49f13RD+79CzSsw2ML+O+Xs/XvWkCaGQFvM17nJX7/vw68Z/ul6rMuzlCk\nNe4dB8gRfO7jl6mf9cE6+AYc14veZZsTfUqzBoPsly10ytQx/CzB9Bmh9TaR\nOr0wIuWudtLZE2AdAn4uAkFsTjrmz3mTyZbw0vyEAss9rBqUFyqhSnYZC2fb\nz7AKligWaahqpa3qBaZt4J+y8EyidzD0/ODEdbi4SEj98OauySCI1DnQvFva\nPKnWTIHhln0+/8qE+bT3MLURJ4wprLTap1X1t+7L96FRKnTWkaqP6g6CyfP3\nE0dw\r\n=ZWaB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95aff33ee.0","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/density":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/elevation":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.95aff33ee.0_1595530051264_0.8297884220498608","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/switch","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"7dcb93fb83634927beef5968b5d624705a2c3318","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.9d9f47473.0.tgz","fileCount":38,"integrity":"sha512-HRQ6cZ62R1bFxGtds9g00whX/0OksYB75jQpD39/oKi6VxM4ldjsRSq4Yv8MnFVZOPeDOiIi3yv+n5IIAodKfQ==","signatures":[{"sig":"MEUCIQDaZUNcK1lPqYqKeeadXpHK8gAPcYrB+TGPNWSRqpOqFQIgGhhau3qYGqGQtOWyiwrlzpvz8qAT6IZ2+hCHQjuV0E8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGev+CRA9TVsSAnZWagAAmj0QAIj7pJpNT3Eg/6nemTYI\nINdDkx7+TuqhbkFPoghf9Iafyp9Gc84AP79BRPJJH1aYvhpLNGEcUWiR3m83\nKw6BsQQUc2VgbchCQdw+YE3NEkX+6v8/jtQKo3lKSuB3swFP4Wcz91T/xhOP\n95JATcozWAQbbrBthjlotLJtVD8JwQI6F2t8Lfga33tdHXuPGi3mUHzuTMie\nne01YRL4d4klWink3CbIz2O/TIjS305K22rlDwb1uAoZJGs443nqG9R4xCJp\nqQq81LOvfCUcp2te+B1vC9lmUaAsia2uDSilG9TNYqLEAQTq3Wg3JjcRx6vg\nYmRVgTEGMAxcIqiRSr86A68sfmzI/75BEcxXiqO2uSJJFILXOkWi8Ob4Xngo\n7I/U2cKiWY65cCZwJY3+lJOLOucgaK2VF6L4D6XpEnNa3pYfJzabaSDJ/sDW\nhxTdVwKOdZKGHdiHyAzJ7PlUmTdHhNjxwKk7pfLtgmURT2yFD4VHmNGDPQdR\n7PEgeCZIv0ziCE4EsOrLgmuz1YI0BtxScqjOrPsrcXviR6sYABL1PnxRfm69\ntDmmUAgqr/NW0SCxPsz2df7dfS6zMM/kodTXDy+QeOUeJtxTjO8hsRTMZCBe\nrk1KuUZXyBVttqCQRwfG6bc0apvDgj5CimVRsgXcyTkiJ0VZAiBGVX4wSGZc\n7thA\r\n=jwpJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9d9f47473.0","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/density":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/elevation":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.9d9f47473.0_1595534334225_0.7027937165554061","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/switch","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"2d1c8ac978a2d93c5c93858192ea276154b4fb5f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.00dfbf6be.0.tgz","fileCount":38,"integrity":"sha512-RK+SDWz0UEL+dVj5Mo+PTpaU1644Ygf8hODT2VJLbpZKFLmwC1VUPU7TnxLv4xIhRg8BOulqmc716mnauGwJGw==","signatures":[{"sig":"MEUCIBN6Xr43zRIIHWGustkMIwVwBr8EXqwQjWiT8sQzyhoyAiEA0Pve0qPaXz2CjQe+7v7bxQblfJ3zA5ODnM+xxWkY20E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfo9CRA9TVsSAnZWagAA90kP/0DzfwKJp7/q4uill4EY\n6IR8bGHWjIxPQTIb3uD85ocY45YN8Nv4QBoOf4mpogNlmllIL5SP6W0qeaI/\nFOS0mVROhkrKUTirZ7zlfUl2zBfllf5CBxCVuK1MKvIHQcx3ImT3gwIQ4iph\nE6+C6OQW32GUCu7x8Zh8GMXW/WCUaaYl2uS/oM8aVN2CisYRCb7kXi9OZG57\nE0RpRK1SPRUCpduRloNC8OFKd4srRHNKAkIxDJ+ef5LUITyi0UaPgHel+wt/\n2puXWl7a0N9lnrcbgu4OZvdYlwYVRIGVlb7xexqdWXtcVEIohRgKbpaJ21PM\n2wg7batWpUPIGtvEc/640GSjj0pGGK8wumsaFL/9Nt80ZXQMmRSs8Y3dZmvX\nAfFb4sMTR4Ga8UlcQ6AcJjt4jgsGlH4HyejC2Lh/ONJd1Rf48ALZxkdqi5iP\n+YSb+A/9UwOTQc9U8l7/po7K9/Vlrq8hn40z3ChKwdeeTHjgvOIN6aLxBwrI\ngcs0HhdXkgdVYZefpzTZL+143zzUr4AYvOSn2Jhjc4zApG+muOQLzqVi/4r3\nPkY3zNpqhdAbmSeYxlXXWeQv0KerD4mR+NzpA+GQBvr2BVJP/DxIBDDNHcx2\nFC3khhLJHjubdB3RN+PKdKFNDuwU6GZj6L+qM2ikJ6xZFEw5HYZcHK5n9q0Z\nMUW/\r\n=eU8T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.00dfbf6be.0","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/density":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/elevation":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.00dfbf6be.0_1595537981234_0.12600294044176819","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/switch","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"85bfbefdf3137286f54a3e3563756d757b816df9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.b87e522d2.0.tgz","fileCount":38,"integrity":"sha512-PsI/8ZKlvgE9b0i8qm2PvcwLEmqAOvu3jd6sJt0a1jIDoh67ATVMXA/sNYP8vnjC7WrMiONJkAxZgvZP1TkuFw==","signatures":[{"sig":"MEQCIGkXVbX+NmTgn3UztxWDrrqT4NtwXnIYWiyMQ4UCe+U/AiAaVGiNfFxlIWS62VfoIHUbidTQnX77nGM0R2CxDwIe+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/jCRA9TVsSAnZWagAADRsP/jbe0nJv55wGP+moslAT\ntSB5T0q8HsPpgQ97d/b/xF4KaBkpOSqcpr4oLsJxNL4wPPcpFiChQlHsurUs\nyqekSHGWxnVyQMw19ISrl0UwwxrEqND98JoCEI5jKbjCmTp2kp41V1LlUZ2B\n86/NfUrhA+Yz/cFnhLbY1zxrdyebXnBcI1OZQDroA7Y2mruTOvuEVt6766Cw\nGdNLCbvh1aoCVP2g77nywuOs0lrGjbX3DKNzCpt9jAmahRmsW6L2eBgBg7QC\nPOkGYXJ98+yWJj9LEjHL3zSM5TFOPox1y/9fZGFIYPVGXxELVpCzl1gSaiOU\neXlxjmYY5HCTDHcwvKaf2ooph4uBozeZmYF/JGCo+w3fMgHX1I6gFurG28sL\nhGqiadBLDnUbj47/XNOwa1qIM7pDWt2LiU/SxW0BfhG4Z143jS6iRnIS11+m\nxVAHrd3o5/pKQSV0qhECjpqcOhfVzBzXI59EHHr4W/CzxjwvLmsRThVRTfGs\n3/MXWjNJ/szsO/k6CgfDdAHTos66yzXR4xopkFMrNHUj0I1Dkkj7wp7A7i5j\nSnpkYr3SSgCQ8bK7McCw0VQIU4tlRZRsUOuxt6SWAkaglBIUchhh+cN02xbp\n5IfxvcJiDrxEySw+WQlQVjW9tJW6vJy0icx7YXpasSZmErcIegFkq+zANHkS\nlSbA\r\n=Mkkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b87e522d2.0","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/density":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/elevation":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.b87e522d2.0_1595539426542_0.5580372866455521","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/switch","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"1a49a808f1c9846ee509e652d4bc94b8f3d61a4a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.5b3e150e5.0.tgz","fileCount":38,"integrity":"sha512-c9QrMxOUEEzHSBzKmFK+yfsa28ITrftq4+Kw1FMxA83NELrP32UaDeBaHaRRP3e9/GMV39z1WwKT/21LMe4o+g==","signatures":[{"sig":"MEQCIEl3zInJV6Lzq5RdWFveuyCZnO/NZnRj51XLj0LrhSK0AiBebUbI8Zy9E+soYKSMakl5MwNHUCiOpF1tlFf/rbrdKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjg2CRA9TVsSAnZWagAA2TYP/RPLuE4yz9M21uJbjbFM\ndXiVUN9JyA7+AAPnUcVKR4m8/eZpENEZ0/Bd8UhF21NoXGwefxdXFUYl0OU4\nG3Hf39a69ZApPJRj8t1MFtwn0GLigeg3BeLrlY8s158lGSs72EaS7kZ+Iqcw\nDRT2BSdMHLyDv6cScQfiQIcVh/KR2QnOGm/SWmMiMqgJ8TuMkyr+JavQlPzQ\nN6ukRz3Qwzc6irg0aszEJ180tCFia3c7jJ/wBliogozxzXRFyl9PLitGHTQW\nX7BbUDi0GcFrJ7nMG7Ej6uFbZ6AKuepRA5PXIr1Dx9MzwYLTuIy+//9bugy0\n0YPLJMxQoaLkCULgvMAClyqa6QhtBnQMY3hqOV7HwEW0hQYzwzr3m59Lgu/w\nOBoKr6RktOWimY5KTqPID5LQMzi+auxaCOp7YL3W+B+8iUy2vYNUG2Q515Mo\nRDkNhuyB5B8rFhDNz37TeahghP4jGzBf/3YEJBC/s4rKA3H06piEmGqAMG0T\nP+m8GGDuAVRA1i8lrL674TdN9MQtedcB/yq1e8f3cr3ViegtR9cjWTAo71Af\nMNMCRhn/XJAyCei+BieaqMV3A/G02uGc6ymF7y8QIOMxNDomDdA/1H2cTUQ7\nSUvN4cl2BtARDeGcbglU1/JyALJw5S4IeQohe1QOW85s7maDDpP8c+KxPfR4\n3H4A\r\n=uraR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5b3e150e5.0","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/density":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/elevation":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.5b3e150e5.0_1595553845876_0.32058569110226465","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/switch","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"5e54b728545139d65e1c5dc6426d0111b119249e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.f0ae11786.0.tgz","fileCount":38,"integrity":"sha512-FQucQerNY+8PF6J5C0uBmlXBg+vNgrjt8Y2x/qBm2g5+4YkhgxZw/OVDwqZFCrCrFqQo4C1Fxp21FMgBgZVR6A==","signatures":[{"sig":"MEQCIFGpuLBbwud+6DT95YHGvogV07lNsIdSqcDThnmtfxRNAiButUtU6G05YSIUuahPkPZmfkTdOBkiZqmGofy5poIvMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzQCRA9TVsSAnZWagAAuf4P/2Jpia5RLgKSANph8sBX\n14t2+HDq5QHwLS4Z/VXfxEl4Jq3zYu5293tvcv68aGk3LzAKp//N1uWiIxyE\nDvLA29P1hjoljoxrk1XH3XhTFB+8Iz/6FYD3dCW1HrMSQM7GJwc4+E45F/7j\n1PTt+r5bwz+86T2qJzWxPY5muJICfRSTxDnKi3AfRvAOfKWz8Y4JWLI/IDjZ\nwNiYEAKV5YVuOVQYToNSIHqrLz+nknw1Cald4OLbHk8WHEKxxaPg/7xYm/Y9\nn4aR4IZQaCko3zPm8qUskL24NIcB7TxdXmjyRAJYBEc0pHgm/SKfzXeKhwYh\newsSS5E71rgc1Z0frIO1ub1jjACm7HjISG6Ip9Wg7HYArU045ddv4bDsd8E0\npxwwf5r9VjmJIfWInuu+2+lWBBGLbt4XmiAWXsNKECRuC4armek0j6/O0Vo8\n4TGWT/8FIDgc6wpPW8bbJowVKuhLq4KzF/xDUp5MlqsxxtYvHTxop3Rw5kkT\nC04LYzsGkeZLapH4Ot7vAVzbHlVpAnJns6erTmC658bpsYC/jGALwycjN7s2\ntXVU8upyfkJOiqlb3cNvmRrIbOBwJCh2wjWmoPFWZp8qT2c/UL3u9Gb0bKE3\nxbfHWZRyPxpJ8BZh1WGjJqUBliIODEsuJPVPi7NYBVb2dm0b9CzCoutXJ8bL\n1L1K\r\n=b+sc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f0ae11786.0","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/density":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/elevation":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.f0ae11786.0_1595555024433_0.48339326389400794","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/switch","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"dfac9bf031d56c268426495d1eb149bd03e8ddd5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":38,"integrity":"sha512-bKGUSV9TdQ/XHxZLBmbTeYiNshXb7zXw2B04S6toPgvpKS98sH36EOkZ1AURCRA6Dyrr0Tw+Q+8Sst9mAHVRtQ==","signatures":[{"sig":"MEUCIQD0wqrSCP8aDFG8pmR5DURPd6l6CEk7kF36Cb7WkmsMlwIgBrDehHYt4VryKvRKwiYwqvK6b9eWtUcKnHPvMv3znpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMuCRA9TVsSAnZWagAAwYQQAJL4UJyweonyxLVd0kXB\nvHf2jd1tjGZFf0ilDLoQkBjVvyc2ygj4N8a3tvlFq037mRKUi1lUvzdjRKgK\nKWtMvW1C9+b9OCB5YGNm0k5Ssi3uw9GEJLqJk0hK42g+Eaa6z2XEvQhg0gDr\nTI/2GB9iG5ty2W5gVQkTT2o65ih6+VehYh9ZQDv/vHbCX9LF6NqjW3y8JexL\n6D/MWdTR1XnxRvqTGKVlpSJHOnEDrD+uw6oN3nWQONg7aerWpSeP7/ib378R\ntTb53gkG0eYplAzKkxex3Q+HJ2KP4FKilLT2dKmk+Uiym5btQLFRr159MwLT\nDF602wodD3tjRxwp//QGK+Ei/plto0e5K4MBuuRQYppeMSpu/qC+Upuu1vBW\n32zdgOjemIQUb/FDsDaIsXaIH/7pLF+eXRWoL2Ct6qPOUD+0fHylOWFQ8Da3\nv0HUrmPKcHBi6CkxOeZnoO/UFjfxkoj553WOaQFsXfXO+7Mf8Ao3I37ixSAi\nTKvaQbcw6NIgVcaM7N5vxl86g2JwDICv2HRheLZDi3YNxdcBKHZH7gXto43P\n/aOiPWboLxHj6wJKfkwm7t1GROvnFeZOXLGi4e3D/BriCN72ISq01JaXsWre\nax+2nDpot9fd0PlyUPVkVZFiYgeA7VAD5i7ccGXiGDFI0/vYcHZTpDLo0jF5\nx3Pj\r\n=V3DV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb4ee66c0.0","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/density":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/elevation":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fb4ee66c0.0_1595556653901_0.27416602309157745","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/switch","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"6b068acf13df3b09723c5cc980d82b26a1e809a2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.5511e0aeb.0.tgz","fileCount":38,"integrity":"sha512-cLECBEoe9k48idYlMM0AOyYdTMYj9S2k/hyHOqpwzlf+ELaO4by7NWy4ifXYFbrX+IGgQspQtnvJltFCCaHqcQ==","signatures":[{"sig":"MEYCIQCr4bYvjQCO9C2+tt9LAMpUKF4xXrT2dRZ0O9EornmPFAIhAPNXHTOfSpUdMiLzbzVKjD4FnmikVQ5tpypQjbV9BBrA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLaCRA9TVsSAnZWagAAY1sP/RXH9IUP+PFt7/ZYmKX6\nngTR9sQGjin1cM/43qd6Os9p8oWSKp4twUu8QJzmOSPSE1tYMUf/JcxKaROT\n/06q8Vv9LfqhWfD72FBl+sQYbpN0D+9ZP7t+iTZHAq9wXqSO+CpekpOB+QQJ\niWnZyuKN972KRDTHKZPlIBAwq/9nxN0xvd7/FU//xTkb/boWty6LnXGVU4Es\nXN+naDZxot417s3L6eSsmBDHOWNq512TwLnCpauCS6ZzDSzkPkFv4JOs9ir1\nc6KwajUM7an0T66S4ezdCO1jteyt3m1DnOy2X294TxIM+xBU7gD5bMH6Jnud\nn3j1lBoZt/XA1Gom45e9/kDNVzaCaSlhETBDkdOrVdQd66sr0gEZmg1tlrtS\n/HEGvafCbwj2C0F9WKXPw7MLBKCYB5hksNb4dmODJ7Y1CkSHSOQtHXUCKocR\nmmHebUgD2FULozklzCJv7yF1MSeKVYDnTuvBrwqcFEIZ8CcTJcJTt4lNBdFG\ngoqlY5zoZG7P3gIsJoWkCM5hWGWmPeryEkx+NHeiep/wLnzeblz9Ut9nhcn9\nSitZSHkhUlu20UOQ+wX9HeHjkBATZEPqz7HZMGbvVGixHhVcZhQsDHySP8vy\nHwgiBT3baDGRMJf9qSZHpB+JSyO9qAVYRYxh854jLhst7uySKNX2MqqkWik2\ntiv/\r\n=qVtz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511e0aeb.0","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/density":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/elevation":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.5511e0aeb.0_1595609817667_0.8922630184759637","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/switch","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f373c93716526ec3480bb0a3a5a633a32a106a55","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.8388a9bf6.0.tgz","fileCount":38,"integrity":"sha512-7AryzIOxCLm4t0Yc+V42K4R3zBWKSn8OPX7l1GHvX90G6gvWIDgurBNSxfiNCVcEAwP6/ew6Id4kUpjv1UIYbg==","signatures":[{"sig":"MEQCIEsEVBlsJJgUOSOox9WHSgyHK+D+YX86e3kGkROUi3vTAiBpQrh/AB6NiLm8c1jQ1RlPqLo92waCN74NPN88tHSwgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0DlCRA9TVsSAnZWagAAc1cP/Au840B+SpiaLZu83SJU\nXoBow8BHU5RWMQTJvockeutBOTnq8vFNz0kaj4QLxToi1DNFCU4yUD4KMusF\nulEvneXrWmd0+vUDYKSsc+JezosV0N8FebZXeEf3Fe9k42OOKj9//Fs/MdF/\nWrQJWPlN5TD0KZXfRjs0ovEHOtiHe5od5cwu0tX4kZvoXb4Ly3U73L75taT+\nj9/8JmOPpYpMKNDB+wSejpaPBr03rybgFSnI9xW2vSZK8YIs2ne67Q9S62G0\nNWF2WNlN6uJpTz7qdsYmdFaR45D2WL1ah/sb9RRXjlLtI+xBSTMxkuQzNCXx\nNiy89VPtVl05JQ+JSxTJEISMDpVGWDFxr9boS0RgO/jA3eDZJhAimJcI9JDp\nguZ4Zor0l5EPEHaSgVza4nms+rfkvfP0ELnqvM+a+3tPw5b0iKjrYTQ1VXfW\nnJbaaemDkKPCbz0w9sTwpV1JxHCKYr5+fDkStg/nJjq1PTnJYdqyOmDzj5Pd\ncFE3TO/qaYx06M1YGgTkTP1Mm04SwGZZ+Kyt5TqjqsFHgBwcZTxb6QqZdzNX\nuLBISbWhKTA5DAXIwIk9qtdUWjtfOHpmC6EIC8HFyJGEKneAzibWL0ZhiR/I\nc2m/AyvddWC2tZGBswgqW6RztmKQilktJnc2VM64rWaRQbX7vznCQPrtu91m\nUGFu\r\n=jK2A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8388a9bf6.0","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/density":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/elevation":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.8388a9bf6.0_1595621604617_0.9679487663199158","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/switch","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f7dbf96b34fb0c961445c13f1c4b438ebe70fc0c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.ac405eae1.0.tgz","fileCount":38,"integrity":"sha512-ZkLfwW7HlxnVTQov6wXfAFbS1ry38JP9rZlz4rwcOqjEfDYmt0xfWvwDRpnIYjdxdTAsa2giBcRrKC6lYJquTg==","signatures":[{"sig":"MEYCIQC8Fy4MqGftmOyQWlk+0+SRqT2Kf1IxqTSITFYmhW8seQIhAIymXw4d+QnCiH4MyURCkGQxXGgpXH5guxiOjZ9cxste","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu2FCRA9TVsSAnZWagAA+/oP/RUWQOncQKg+c4+ezHX+\nsFsSHYOAG4WtikeWTEppC4NYiZ9xPBsvLOsePotL4iAkvQYkZfaeyNoimcdX\nalGaFRGd5KgD5F7dYm6RkRKjiQze/gIrZ1Z3DRwQ+sKaMzG3Tbw35jlw6ifl\nvg9yI+9fOvK62FREG6e6vdwx0gwHqdzMKxAyyTYUOg/O/ImMaUVv++uX+xKC\np+hB9H7liiHbwG4tgfUatTYfoo4uuIsPfKDsUgjdrKn0tME5iootsIiqRYfw\nUyQX5iBF9zH7ybuFthTvE0dnr/WOy/7UgtZfnH2Tn9sa826XIJMEAEQ0ybed\nXlpQTdQ9ATPCXhKhYc5wDsmSmZ+Ouh1fZhXqEuIqCNUNza4Ft2RDiq4ntv1r\nH/3vrqVKg+3gjS7cjuKX8r1lxQajvio9YnA2UEAFUUSJla8qlq1bJPPX2etm\nz3U7rBxI+8zeaLspiNLdR0VN/2f4HDCy7ItFYfrhUEpGf0a2cKyS18DYFc8H\nHTO5UyoR3I9FX8w6AVwkLXj0wngFBc2TJykThAenLRGyZh4AI1gniPONQdlq\nuyrteyJ0okFrrkkrl003pR/ArOQuEUiHIaZFznpnhb0MjumSaV3AZzFjHiL1\n8TH08WwwriehCUiMBlVUmFVxefDAbZdZT4CPpo4ZnPVG1CXiVV8n1blHOBrG\n9+Om\r\n=mb62\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ac405eae1.0","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/density":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/elevation":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.ac405eae1.0_1595862405418_0.4115734988236954","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/switch","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"4f45dbeffdcdc7840911f1ca6fcc0a275f48fde8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.75553837c.0.tgz","fileCount":38,"integrity":"sha512-t5BAXK5NKN1WmL7FZqpPU8qSCuEsI0oxbID7tAMxMS899gIEuf203IxG/6T8jDSX9ShtEooGaaLxmiSyMgg/Jw==","signatures":[{"sig":"MEUCIQD/C93cZA9cKDb9hyZFryBwPZlCmyUPxTwP/7PaJIHOOAIgMpUAXnPjfyZMkpnpe6+z9zbW+MBlCcsYRN/dU050o4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7lCRA9TVsSAnZWagAABv0P/1ARS/wo/grAooW7/fF6\nrjqtVWOd1gAuXjBBfFMEYjYbIraOqd6713R3+wARklD6HM26zeaOMkDUd+WR\n8GzdCNJRDiPh29SlCwQ0vDF3ZDhNVUWXhFbuk74q7KACuaYdl5Tk3PNLex+D\nM6MxmsfClcgWMPmjYom4acd3mGHupaOjgmBW/zr+qCTR6XpjrIanY8PSei84\nUFgR3W9LuujyZHuDca0zpvtoYKUGvZasy76fph7QRK2yODqzWyabBpXIR2vp\nR93ghZfKqQq2aiDoiAfiUEMRz+HCQMJ48l64unqcpZVpifDwcY8csjdfPsgo\nxZ6skaHMy1MVfxVCFCUT72c38JXXCr871n2zCqWdj27ljVsd/bWHkbWeVpSl\niWA7J1GyHC+7zjaKG7QbWvcwBO2dfyCzoywqdfMhvxu5yIBKKKKh8eJUexVr\nsjamsB93dF80JQ/U5iImMbv4K+TU96tOk9HlVNt8pUHrhyKAOBcTfsmQtv4/\nREPWda19LAQSmWNDjRBXlxv3uueOmcCeh4BJcVCWOnAmeRArgjxm2+WWdBbZ\nDeXiBv3nm/scVOOFQvXd4KYpwWGphJ+GtQwlH6JOFDeQrbx/sEb4igDJrdQJ\nPzTSZF161ATYg8jti9x4XQDnfPkKUU5NaBZ21we+6WNXmxBT8tWHlk/6qMRL\nhZhw\r\n=Xrat\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75553837c.0","@material/rtl":"8.0.0-canary.75553837c.0","@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/density":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/elevation":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.75553837c.0_1595862756689_0.8590158707243332","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/switch","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"4c36fea0c421bb6cd71c0ce5573d468623903d09","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":38,"integrity":"sha512-22hhAgChxNoFiiXyV0L0IgbJwM5JabM058qo6XRJvPkzKOw57GTAbCN7JOvDwo4Wu1DFWMYBiklg7jnqDP3Ykw==","signatures":[{"sig":"MEQCIClMhj3vFzqvZeus6yIVtUdFa/si3ZdUe/0UyZk3kWZYAiBlXKWp0X8N4G81gtr8bpkolPhobRlgzOPYCRKf5dQMBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTlCRA9TVsSAnZWagAA1wgP/1NkzujAatMU6QcN4J2J\nLcMXYkP8zZDy6KymLF6QFfRuWLepqBw26BN3iuu1j5sLxlXAM+YXu0kFUo9C\nZ2l3yJC6Spoo3VxNd4Co0dH29r7Wwry49RAw9tAtLPxl++BiPxIlb/cjx/p+\n+D11Zxp97EG7je+tYmQWtbMOXqZbyuVwFROQkB/IXTvXLXBYrbLJJeEn4YcL\naLvDDSTw3FPI+Awachwfr6qr8cjQfBdRsOHMG5OFstWyKGhGtgsM/g6mWFUN\n6VXUwbUU3iZ52ufG/phSSj8Hy82Ih8AXqLZ+9kGSoUVqKhrPqLQB7bSbANsk\neTDdvMcfgiCEV1mczclwqmvaJFTuyv12MKpvNwObpYfjqDw6kMTNh2XHgd7W\ne2+5qfPJsfkZzDysXZdditwqgIkCHCfGg2t+bLpcPx0wcyiUb9QlRRXQ6PgX\nYyURE9y0adyM0VIaYZ9DlMIqNbL90cuEocwWLWIHJ49VEfT+m4nItLmpQzNx\nVka/BdNhvLUBp4DWE5XXC10fdShw4NChNxR/sLqbQ6HHGGQLzgf4xrz/sYWT\nXXFnyV8Ocsi8rcSFR2Cc9qD2VO1U/ZbuVvAhJf/PXku5SEULSXXJQbY3eMfp\nhKKs4dTd5yDsG8Tf4jokbUn7/cWCVw+eVVUpXwRRG4IWh0oNGxvZFBSI2Ku3\nm6vj\r\n=VjV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b96fbfc7a.0","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@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/density":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/elevation":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.b96fbfc7a.0_1595864292540_0.7305256125548976","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/switch","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"35c62ead8444ffd884b7d07d2d94a731ea8a7df9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.61f1a8d85.0.tgz","fileCount":38,"integrity":"sha512-u5VPjsDrvtLAHayFc+Y43xndqMchOLRQlKzZwhPaaGTmSNGjf/Mflghrvta21VARp04b2is04v/lQn1SWNTqYg==","signatures":[{"sig":"MEUCIQCG3mI4oEEujzqWUzk7WGT9Dh/tg97k9RiWXM5ALsGluwIgNC3Tsdu4nXxsZCxjbFBZtiTC0+3DJSuR9afQuxj14M4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvcCCRA9TVsSAnZWagAAkdoP/j5oESnzAvyHdzeJ75G7\nGo43qShl05eftaVud4lb6B30+HkArYupLVkxGiC6lEg7ClMaYleT6QVdiSpv\n3shNblYOlgIGFuZ4wdBZcmutBwlF2j9AVRmmkPOr0TYd2gbdSYp/PTPC8d7/\nYNjJIf9qM2g0TMcZ4VxlhQDT0rY0QsM/GaumO2zkecW9p3VJ43WdtWIZjvP1\ntZUKA/oXNIoQeAE5eMXixLfdmzFqRviCbxIbpzfEI8UkC2kGrA/yDBedosSj\nkOyDsODoIVKZKvpZtCOxkd71IRe3pwZV71m9DOwxmvCY2Imeyz8LF1Rwf5Sm\ndfaVslFdsZQ3SioB8ld9q2r1B0g09Al7izNEjii3jxHskfQQSU2SURFm22d9\n3KFmfG3VaYrs3LJCVOwADmbIaLtDyeLSxFu9q81IpuuB9bECxw/1pPWhZA/z\nX7GUPB9CRNT4pSLwRNtjp6WIyxsKy/+lIsaBJkAmbpUQuivMLy8GOfllKTqF\n2K18GGLKasBc+bIJjfXiJY23ceNdb9RcSaOpBDraKiez4XfSjxUHjLORqhcH\nNO8LBWRGRTmSQkVYUWSGghTJX6VkLOab3TDRLS4Y7ZXtpzY/v6oM3C5Zr8dK\ngveR9LxggdvWMuGAvuXX5ZyB+Por90Y5fS+m3+oc8qT87qkOStt9fp5lwPq4\nibKz\r\n=C47O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.61f1a8d85.0","@material/rtl":"8.0.0-canary.61f1a8d85.0","@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/density":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/elevation":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.61f1a8d85.0_1595864833936_0.9452514685776494","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/switch","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"baac4c1a340508040274088081e27dd4f31c216f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.81dc33377.0.tgz","fileCount":38,"integrity":"sha512-0nEzJ565c2ZVTus30lHdmMB7uRiUvue4FrcIIF86n6KIlbFUfPQSLWlFx8rhw6EoAhoea5SuXSvFSU1HoLoCxw==","signatures":[{"sig":"MEUCIQCXoQrlxJiXD1RH4FdgfBWSbQW/iUXJ6vuBcKFGFVOhUQIgJLuNYISkvhP1D1lysqLKz2mRhJcuuIBZRp/gKPcC0/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvnbCRA9TVsSAnZWagAAxZ4P/AxOMfRftD4qc77AeuF9\nm6ZfzXARtUuRxSmzHgpkNUtZr2ZFg/9/auodnSWWvFyPOhranKB+84rxN6iQ\n1x5gWw1pXCqneBBgUuYonOYdGwHgN9GERNknSjXkHesOVaCdGuQJjb0BNjrr\nBHmE2JDMHi9YY4Q/QRAkJQmmXEpi9mC11Mt8zBufwdFHj3ljhX2Duw0OClRd\nnlnj+eKbbVhMhDuP660+pXNxWyOXIeEPUjaL+jfZH/nkVr16X1DSzLndO9qK\nWsayHeSWUKn0QwHInFhbUQj9GNiDZAPFEZFsnyPqYBFZXmPDDAI5ay5Mwa0+\nw58QkvVIZU/XL761ci8lxcjo0auMOD7/BsGEo6WYlWUKHwZ3L0aG2rfAVind\nvWJg2Vg7qlXns+Qmz+GEnbWe+1XT1475a2vZEY8IFNafEFXzpTdHIRMVPt+s\ncn7palFLp5NLr/DRDYnEZfhX110L2Jv2e0BZuHfW/wG3/S9nGF+GSWWdboQD\n0lTMrz2il1q2DOPU+F4tf+yaWCcO38/CYBgIwqpzl4oKwDiZVVkyhArpTHTk\nsgLq5+SZ3GCTxkq4WwXhA6jwjYSBHzOtmEdC4mzdCEqDUEoCanU91g3JqbYQ\n/SpMlkCARYvVJIhEZYc0Ic1gnF8QBgbDy7wvJ3z0DwytqNPWv53SxL2/WVPg\nYeWs\r\n=4lPX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.81dc33377.0","@material/rtl":"8.0.0-canary.81dc33377.0","@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/density":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/elevation":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.81dc33377.0_1595865562926_0.4977156641453018","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/switch","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"4083e2ec54842cbe1f4734379e6298c791c5e656","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.ffd9ede58.0.tgz","fileCount":38,"integrity":"sha512-tHAhdd58AU/x8WoO8cZPbG+QtoEVye5vdhdan25YeoPA0oq1DFPRO9CGM/PKvLaUTMcU0cq8EbDPSLpfy6ATNA==","signatures":[{"sig":"MEQCIAzJ5bnJJm9oOJ8VXKQAUSYhQFDSdvwVdyGE1mHNPm/4AiAZUQKPr4nclpTbQqw2GJ2aUacqDzpiP36ZTWXLWrEsqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGqCRA9TVsSAnZWagAAYGgP/iy0JnzeBVtP0ayKPYyD\nRXeW/rp3eYeBQveta4BdKmM6BAz8bpsfBY/JDRwkZBeGHD4474VU8ILbtf5t\n0aGolP/ltx/6eetj9UglDyawFUNvEWlP3cqlxo2378ddXux8m3AG9gwKqyAO\nrg1luxZfoJicrD4Iiw1t1rDdtMJcfhSa3HeQ8LZAGeOX3/4+KM8yvabUvl/G\n2cKfeYZlTrlir5P7R5lcrP0eo9G9okfpULM6TxvhqRA4704GxsKvGwJDJhdY\nqjRtIClCvpGHXx3kMBJ9poahX8Mx5FSThItMZDWJBarjwcgNxA2k+wz+QGdY\neDniou5Dp3qfxXDedDwZezJiHdNGH4U3X4/GpW+ev+rOLN6rHQzkcMJ4wir0\nXqD3FMioWmlIrpFLM2xxoJ/k+WIEdOUru+oxY3zpfsOxjN3DY2YuP3wDZB6Q\nCsr0KjrqNulohZ8XcvDPwTKUQ0qcqicI1PeMMGxS7AiLlldFpxmpNIRdyjnc\nQtvNcIaL6/RjQLqBmberkDqVJ89cvm18gqc056ciGLfq4Z+8saJswrC8ZVgx\nS0dhR95AYuIjwr+lLJNOt8+zj5yrr/WpDQxSBa17OBymN4JATXZQADdt7/PZ\na04E+9MK8FF7p3ZRdRcglE8PK539x20t/NyquX5FYlJm9+edMXJgRVvlgnAu\n8rmi\r\n=EOb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ffd9ede58.0","@material/rtl":"8.0.0-canary.ffd9ede58.0","@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/density":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/elevation":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.ffd9ede58.0_1595867561890_0.11065971254192619","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/switch","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f90d6a84a4d4b18be0db78c1e323e9992e758431","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.52dc55acf.0.tgz","fileCount":38,"integrity":"sha512-3kGa9VydK++sFyVJV47QqLySpqGeOe3B0lXAzWF8enVENuiJTPLUcsX/U43rLVwjI7q5Yf15j8H87ZeMWKXLhQ==","signatures":[{"sig":"MEUCIHtWc6BUfXRwyeWve13x7iV5Drzv8aCHPBk8mBEo+nYkAiEAqps0jNK6VnliFkjmRf0EKkho4AmsGqitIFCnr++mPLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoXCRA9TVsSAnZWagAAUOcP/i+c7H+HUL8YVebdGpdj\n6GH2PQN/P6T18HNyoDvA58AXMwpZB+aG8R3+YupBYmVQJfC8xaNbJMNFaKkI\noVYFPWJBPR7ybYmbpzedDpMXtNjzL7kGq6i6jd7A3QcPZKyTl6Zqj1Thjm9b\nP3UfPv01sljZcQ4Szp4LD4a9CH9fLvp5nK8juep9usda94f6503mSX6Sxsga\nb3cBULLFiTzzU4nZx78bXZb5hLpD1TnQWM1iCqJb99slcWf5ERMA6qMaaDMW\nqmMNsd3yQwNFu4xMLPwiGtJWCFGMnTG1wGXytA6NsLNWRsHVSrrADj7c+UTx\nVZ5kTt1wChhZJznYh9jEYPVLStSgp0/pIQtP80tpufWP+b7AfgNBPtCYG/xv\nBnAfP3pJWS+pxjo9mjXpQWy1eItjtVB9eOHRPB5ioYfVtREoESKIXF3AmEjv\n2aptZiWZ3zz8aOzgxgyXXCPbBELQH8gMtwdUTD9FTsWhupXLeiHkTpDFLLI/\n67lgnm+g9JX5NnVIYKkiCNGiRKClF/dIzSVeL9ES+BuLzi7r6wTvZMVqZY2/\nTHENzIouYP1Mo4Vq8rTjFUtKRuVsfAR4dibfik8oOY2Xl+ysyDQLoataohxK\nT8OZk3mVo6N/I8IJWrb8ifNmQIs8/pcMh9S9OdB/sJQ+GGqapyPx3cMIWxVG\nIwX3\r\n=8fEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.52dc55acf.0","@material/rtl":"8.0.0-canary.52dc55acf.0","@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/density":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/elevation":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.52dc55acf.0_1595869719011_0.938883968088166","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/switch","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f2bedefa018f432b26aa325a83b6027d59b2a423","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.d4274ff05.0.tgz","fileCount":38,"integrity":"sha512-z5lSGQtSzDIaK1j2BFRY/gYdEdDAOmh+kRCVszPAbqAf2AtE78n/jfiQ6GtXDZKNt81vMAvehw+yPeXnlnNDAA==","signatures":[{"sig":"MEUCICzZl2pFHkXROQXIb4oqlkhm1VgjRkAcnBOiEl3sj41HAiEAtiYQawFOmieZm/QzjWHOwYV5JcJ52my7CwaKQI9Vrd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzBWCRA9TVsSAnZWagAAdEEP/064n8NaY5tOLIn9qarO\nfGY7f6aRLFrRVJIbNxzOaDONyxv4mZYQhQN+rDcDG3jX/D0WGSwkaJ6QNFZC\npzhpmmsLxrKoeeZ36hfIt75gChLvp+OQZP0DtW8vAZxllv0reMvj1oHc8AtA\nlgIG4O3YlE0zVbe4AmklpZlvKdUtzz2rpKtv/WyDUrX+o0yhcQXtCUaLqpMu\nKcT09s+/OhW0By1bDgIb/puV1dDJ/hAgrpmozYS91HZY6hNTkDUohg2ehOUT\nGUQ9a2CJVWzP2v4J/a4cecjHIuU0YQwkJgwGDVoAOUZ0r1ME9dmMFDWZgdrk\nI0fmOt/UfCWOVEEq2LQzbPXqBPrawaXQXMi4iXRC9Al6C8MO5KbXXVTm7Vkq\nxVCsrpgB7itvbJCjoYDsvr9/Fpoa+7Cw6dP+gR4jYkxYjh1gTqAFDtz5j1mI\nNpccHgVPsObZ0Sd5hl2N06kbM4FKlJeZlJJLb/TpwZ3rpS50ZYjv8asVmaB7\nkQs8mAKFU4JIoX4ZAwKy/ewLHZBHnXjUPGGODuARQHhefLOpqDIHHD7z42tJ\nhW8naxs60nzEO8gO+5fyxgxYHxfJyostVswb+WiSVlC29QD8XJGvEOHu4zws\nyfMyQNq96K+FJqJ7UoRKYG/m6oNJGWm4XAXloA5ozTirsMeRorBc4q19qlXR\nZ4sI\r\n=zYAz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4274ff05.0","@material/rtl":"8.0.0-canary.d4274ff05.0","@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/density":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/elevation":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.d4274ff05.0_1595879509522_0.6330620889537855","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/switch","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"e4b19c52778773720c978c00a839216f356a7c36","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.b82d0696d.0.tgz","fileCount":38,"integrity":"sha512-0OAenaW6KQXQyMI4lWqTHlDetKpfX7+mPGL9pmFUolFzm+VwUme2azzbLKxPEJKUgSRpJ6QSxu2BuwLuDCbddQ==","signatures":[{"sig":"MEUCIEJ9+obG/Frshbqxu8ZFRiyQPlI0Pw2WR32RhNFoxqhIAiEA/9K5E7Lz+U3+GtiC9qvKoNuB8LzXxlPxeJhKAl/P7FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHTCRA9TVsSAnZWagAA7m8P/2lZj7YoofXSpLvLoKzS\nhsGNxKklI4O5c+hkUvol/X+nR7q1FlrsqBb0ouNR+f5GmZ/hSPz8y/tvU2Si\nU2/hf2HT02V5kJ0sAlzSuowWFnMd+XY/kDriSCkrOvPmH3R8Rn1OrAlNq/jd\nwm8iCRzliDQXc61WP7wse4+eUZ4Qb/TcbH4NkZiZuO1o0Y/v9fR6dEBZ9kL9\nUbcbgLBTutPEHIV3U63QJz80xBCdv9aoqXpPKxPsPsoQdvj01iKeN+wyynfH\n/4fBZJ1eb60gV79gesjVFlzP9xlyq5uk18OZi7G1pquhp/HSnwQ5X6zgP30Y\nRqnpC7gNt2ylAujaCSM4jDDMuE1ITdDO2fF2pQE0OPs1IdXE++oKICPxT5QR\nKCw4aYp21gCBP3ZLrUj4phtODBjaaDG6AZkcsR5JlsZd8HSiwTLzfHUO0pDF\nauZDpwCLr2eSrsE7lYEcHCICD6KwmO+ZCj1QIcDC/LrZ03qIi0nZHjTsUE7I\nA2eFE0woLSocvz+Mj29NXtzQfaLvUoCTPULpK0bsi5AlvQlHICr+IAsqbdEh\nP9IHKkUEcKPPznXDhz1IzNgbW3dqZLTDNrIY9ee7+9iflohWGwzDAxWRh5mt\n+H9EBEXEbzyh3nXEKus9KKkIVpIzGswD55GMDKAGj4CeF7hQEIWKuFAavLXn\nBMfI\r\n=88L6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b82d0696d.0","@material/rtl":"8.0.0-canary.b82d0696d.0","@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/density":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/elevation":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.b82d0696d.0_1595879890954_0.3661468367239167","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/switch","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"fa0b4d70de112fb4861ae3f3698d4a33bb901476","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.c2852000d.0.tgz","fileCount":38,"integrity":"sha512-mkm9kuvO5wuS402pRvNGGOUft2c7YZGdaV6mqO6Pl4Fve6u/HHvM+BRS+h+2jJKN2wJfUXpt17f+ZQ+yBS3KJA==","signatures":[{"sig":"MEUCICtVA56vGkIVc4ce+mkC5hrKRQ4l3WbDnweiqMjP7fq7AiEAmmxYT9gPbtEHqQrX13d6w2XhnYinKZ5Nt4OQiJLmqrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/2CRA9TVsSAnZWagAATG8QAI4+S2Inlyy9cjP+HnOa\nBpxNCVEBn2qp+baeoK/7xeDedznasIjkv4YDL3aesdBdejjoXiPmqZmHOmpc\nKJSbGA+5PALTIYpRcRw8EHZhsaZR2VrekJRRYtuPuFLAj86bLqaCSroWJ2c4\nu47xTJQnfLSSAnfiYVDv13fo0vGzSH/xWS1oEy4jDpI+uKxjD7kkCZoecUo6\n6QxXrTNJu6ib6i4LZ7NvtUYtbPTd7I8kTPfuWaE3W0TbIBH5FvsxKCfPvnks\nxIAAvDd/GZzgOznGBbxKpQPgVAV0sBtkUBPJneBw9F2g7Heu3ynAJup9/qXz\nrjG7s4pWtuTtyg03nTo1BVrtubVUnl65CBnHPOXPs8XJs9lfG4VQWDBVC1SM\nXNDSo3mtUAFAfP2sfMc14ci67PGe51BSoRSw+J19GK9QqdTaklfBD463wcOo\nlbd15obBvnPjC9TNvDnaTmgZXVZXx0feFyi4VXD7pdJCRPRj1RvC/IRxQVlp\ndR7pISoW2kf8cuPdI4IcurV4qouMwqnebTpO7NtkjxcxckWBC8qqbG7uZxk8\nlUwTLKKpGaaEIA33RaBgNdVAvWmwYjneLc4egj8PdfLZEglJDA4qBdWUaBOK\nBk8cDmF3WOO7FFL66bzjiQw17rk3V6CnyDnh/kroBD/cB/d4u5Ckh5ykTuaY\nCRpE\r\n=GxIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c2852000d.0","@material/rtl":"8.0.0-canary.c2852000d.0","@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/density":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/elevation":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.c2852000d.0_1595883509543_0.6084496265936628","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/switch","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"5c73f9f115ce99c401457b70b1ef55650d7371bc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.f86f83f54.0.tgz","fileCount":38,"integrity":"sha512-DqO7yUs086FOZoU9TfWEZPQwGAz1I0aIScT2WPE3idA8mWwxq/+uJbwN/9+HT1FE6Jlf/2bF+xC69ejfe23BiA==","signatures":[{"sig":"MEYCIQCLVFmRj3lT3DvC6N2t/ILNunHamCJTmEKzuFmGfxOBBgIhANKQe4QgL/ldjBYlfzT0F+FdLGyj8Cicoabw0svJQLkF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00ECRA9TVsSAnZWagAA6dQQAJBlFFJRqlB4e4nGgCD3\nQnfAKOq6YNQDIjfp0n9vp8aBtu4Ewwia3oTNwsPQpzf1p6e20vpERApe0s3P\nxRepI019bstj8b4xG2u4RrFDcUWpT819EdmsuaBgvrp7NLRfPCHywU20kDJW\nYrCSA/Jfy+cf5c/sMkZ8AIeFNtXGZafOnCiwn0JOK1yju/HnVitoOEsE7wTI\n6zgdy79G798lrrzL5MO/eOTvLiuxXkIXVshWmQ+BAxQ3dliLbrvNw7Sd/RBW\nRAYrplIKmA8ppz4WsGpIYmxWtAPzxw4oekTYglO/zKn951muILgwy6B2yFxd\nAA+z017qWOi9wVlDOfzQqHT8evs4AXFQju34KMJrHxaicwf/KIRuTguzLdzH\nFc0D0xubbcz3Gs9HE6PZ1czgYwl60Mzlvf9P6Z5PnpiUvYvj3iv8NeTU4nhp\nIoPDUC8OAD2nFrm5Ynu8Ui+cgELlKQ+Q8Pi9pRAyS9mhw2BF3CTZFu8ec4iV\n+0eC9IKkoKAB6qZW9S8nI/AUa4lXExUqz9BAt+KiOpSPZWBTikpU5BPRLgzE\n9QmfjoGU5B6kpDJJ//LzF7UA1xXw114tOGektvcvYRYozRN1aGHtl5eWtz9y\nF0L+AksOGPTaH/FQKNYfhQH0aF3HamkqoybtseOp/3ScXAb/yw1I+K+o/wOZ\nFbMC\r\n=tVOk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f86f83f54.0","@material/rtl":"8.0.0-canary.f86f83f54.0","@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/density":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/elevation":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.f86f83f54.0_1595886851900_0.36048471653145153","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/switch","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"100c1200bf9f996f3a13b717438834e442090c8e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.41eb1684c.0.tgz","fileCount":38,"integrity":"sha512-vUUDmDYqpCJQ3znekgahkiG6EpKHv3kXNXStfSOWAzMzjj4kFoTffd/6V0AeSRMFZDIEuea+iIMBPFZKa2N5ww==","signatures":[{"sig":"MEUCIQDyo7gUPmRPv0KEd2K0EFhI5m2wIQ3L2KPfbRGYn9mfjgIgXDc0LZEkidCzkOG+S5IjHViH1WpQgC19Of8Pi9vqnOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVmCRA9TVsSAnZWagAA2fQP/RUAwf1lO0fi9hqqI6AL\nUxRymNbQasIvzymB1XTyy78QrLo/LsF6Xw+9Qf3URy38AQjyhcbucxAYtQ1l\n7SwV3cJTlvejJLKEIPZZTO+gnYWOc8vw+X32Ro4DGGVtUmCGzalBMtDwLZSK\n9TddpTfJGLpohvX3jv/E3wIpIr2nK16UpmmkDLI5mPw99tk3x3L7mss7GUSt\nJhMineVAkWUKE4yUf/aeuLC3sewAiSfBE017e0s4TJg6W2X/mQTMEB5onA5y\nigZLAbAWyvOCrxoBt79JqXQx8kLy91+PLS+/EO33o4+vcoWlIFj+EWkVRvtl\nNj4O81rI/nP404cfpo+F0vPQ9oQVNIF/Q5XQGDYw8qq0NJvuN/FflXX3zt5T\npABFYalveQjLaFcsC2foIgvjxktt01gROsAuGGJm4cbMjdMUh4IyR37H5/AG\nAO6xMUQgvKtDeoyLll3+zLugPLLiQxXoW+h1biwNb2FByK6T3bxRwLrx8j13\npkQPs39BWthqeWuWraZgUqoX+TLqohCwUF9s3oZgi20zNdzyPYyzTa5KwEhb\naLUpqMGDP998jBAPKgLMTYL4bNaTBlOq++wzDRg9UY4c/W9sN+tc6fiCznFz\n6W7qCQHGlZkKhBoZSlTkB7fTem7pPjLJ7PwnCJtYzQT50RP57LujjyRdaqO8\nhT5a\r\n=vBI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.41eb1684c.0","@material/rtl":"8.0.0-canary.41eb1684c.0","@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/density":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/elevation":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.41eb1684c.0_1595958629744_0.11305860468352336","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/switch","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"af43eafef800e9a58fdc3285a3825a53fb3709b6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.9e2f6c450.0.tgz","fileCount":38,"integrity":"sha512-XZTmSHKiRXR5Q53eGeguPJfHhr05BM5jgPujrwXArgOQFmq4D5/Dzi6prh6fGuBSMd6wJ+dbKlY4cBfByBy52w==","signatures":[{"sig":"MEUCIQC4rzdHXzAcYXdMkt/3NDnGDTbwBZXoLM/vcTa4kcVLRgIgGAfL7cort2eNCZYm7/LixApIKfiDGeG6ui7sQqH9/4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkZCRA9TVsSAnZWagAAfjMP+wbSmNAPHQxm74qpi7Om\nlre96+4x2xv6ZQJ7z+Rx4Nl2Dd0hM2ldy5sbETWOJkTRLCt4nw6FTIdkNkPO\nuoac0BrPMBGTCzpEmXE2QwYTDQZSVt/3uB47DN0BaiTRsmlPus9IzU8Tzyrl\n69J88hNMfYKIq3yB91EUsGg2x9R9/W6fLqQkKA36MaGFEBzSudOM8+CPMAV2\ndxz5uTnCNSoc2A35ecEJzTgcEG/D5P1ni6sJoVEjuw0NQ8OfAYOBiGJjx1Lj\nELPe5E1tZP6nD/aEs97DrbMmWImsmIxmmjTHJdEiS1qBwRbw8ijjlWO9qYBr\ny9VcmkwgIY3F9u6MmezQzTQRQ4A89UMhBJh7la+smSTZQ9xEvqKsoJtuDc1x\niUVQNa8vaxiyOyaDLfBOkUPqgSV17BLQZSHsbict4aM+4SOLBcnkQQaoQThD\naUGm3OJhXmdMIuPrT6Sn3sPbKkcS32WMjMfZCs+fhHBP7dPuKCJVsKYzxQQ3\np6lB4gXN1T8jePLKN88S3Fc+u/XUr68nPRESiQykLhpav4Nu1eCT0Nmp2ftg\n2iNRkyv+sNtgnSrn+Vu/5pmNQwyC7gG+rKlqvqQWbcfIbUJW5IPxJhYiLupv\n9WM5DBkx0Iu48tLtjsLNkhqN002HcbukLc2B+Mf2ohl1MG7lAvts4es2VZVc\nX2KC\r\n=95L/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9e2f6c450.0","@material/rtl":"8.0.0-canary.9e2f6c450.0","@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/density":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/elevation":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.9e2f6c450.0_1595975961011_0.5400817784347893","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/switch","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"0de6ad75f5817822728abfe60943096a0be2e85f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e6950b55a.0.tgz","fileCount":38,"integrity":"sha512-SeKtXEo/7N3jmkIHsn4x1WALtNn2l1kSwmUQHRQWcm7NQ3Av40rby2pc62HCqlPRiy1nXz8eu3ZGw0DeBySGdg==","signatures":[{"sig":"MEUCIBFeIQG7zK+3S83D8lu75oVoK/zAhLFjHrxfRhu8R+5vAiEA/bKiTT49YbnbSEPduenwIKwGjt4jvCpL9/zjRgftybo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKwzCRA9TVsSAnZWagAAujYP/jBiMa/g/8WixaX1xA4c\nM0Y6ie1ovL0s8FQDL+8npcUJPnjmzvvcoOHzbXPmh1YZ3B2uZOOPUAcvBOIj\nk2u92UxtyFjPmnW3HHJtamY3F7Wz9Y5dVyZoml9fwkcECEUeeFCodEq78HgH\nAaYH9Vq/jB0wds+ORAPrUEsEzlgsWmq6NVfDDxLe7KPimENGeGjHP9mhnWin\nf1v3ML95TZX8iIGp0N3uqmeQcNEV1KyGZDnhjOHZfds2lrojE8KIPtgkQDKE\nAdWyui6QlOFivu9EQLAoJdZOhFNUpCIzzek7LVs8R5/Cx0I09dauMVbyvZMo\nieI3Oc2dsJU+gCSHrmy5aOWfLG2Z7rpwvxk+i2HYJJHRWQgZFPb3mRQdBFV2\n1PUzXI2ZSvzuzG79upWCRGpNDw4Xfpylb01kuK5Eg7sJvEbDDtwl+6SucG53\n0Rwl+4WI+HLyuRko174a1pyk0wDM6TwR1pmtXV+nB9ySonzns92daaOvEPtv\nIiuQE2ipjOFA7QiqTePLYbAHmnarSlSv2PeFksAdsUNQbCeZ6fksvt2UJRBL\nX2DRNZZuFwqqUQ6eCJBUt3A6za9I+f2muFWEAANHj7njV03pD4wG3VwypwkW\nu+0x9dBUBUPWc+DrMW7e0/+n8O5jYPbaj4pjS7RREHkf8RFFdzYnGIEkiIVr\nxdEy\r\n=AG1R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6950b55a.0","@material/rtl":"8.0.0-canary.e6950b55a.0","@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/density":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/elevation":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e6950b55a.0_1595976754851_0.30085561498582325","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/switch","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"a5d509ab92ff15fb0b12521527432d6801a331be","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.5e51ee38e.0.tgz","fileCount":38,"integrity":"sha512-IswEl7CqyGNxMTggtv1s+1BNQonlyzwlwJSKqs8tvCDqmABtU/CXEgLwSuEO+eLwvmhs52/SK65OaNcOaPmbbA==","signatures":[{"sig":"MEYCIQCZgYB7nAUE0YGbTTsTEN4d1ofUSFqrZ0mCiMLso/OtswIhALMHm/r3qZgzTm/cW1yofjO2/ycXapFdIS0+ZuMJr/io","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILG4CRA9TVsSAnZWagAAppsQAKQj+K6YcWj4t1ERdf6g\n8R/eG4N1U0N+lIiygp2hVsvGo/1qn5ozGgAxnIZH8QRLnQpLw+IrLn+fVoGr\nHcmX0NRFd/jMD0UN7ykzv/OGD/RzDQeDuZd8C4AOXECSXbGs0FB09Ha3bTh/\nMAHvNElhHr0tZcPjEPJnveasBd8sVuf0SLmHmWJQaPMj9ajh/0fM03yH6d3t\n2xX2PYYh9E0vdLbRuLCAejvZS1QZdFYR3jUxt+M98rFyXIB7nww2XULG4EzM\nT16JwnaoJZC3SAz2P/8VEEjeuSXoEPlFzLi69l9GkhCIyiM9GGy4xs9+bpRI\nfUoW6m4lFrQbv5Q8UV46WS+mZaMpaEC/cmBD1edg+MGeNHakt7E77cYIdTcH\n+5PdChfYiax6uXYM2BN3vsRu0fAYlarjCetWmqTTzhrgyD0hOKNZKcCaOPkH\nkaq/5MyHgu9yPOeaRPCWuOm3MJbCut0uXJM6a5BAijzERKnhSSNtUGKjqbyY\nvVi83c+T0vtyw06rOIddNbJFwq23CyRaOnm32NzfpjWhUuXPSMGmZaSd11e4\nr1llkwJjW3WqjDvTOkmy9gKoZ1U3svl2XbuA//QdDkm0+1Ffil5vvi7fcjDw\n6e89ZKIs44+bmHCYejwzdSJtptZOqTALhjYHHPBQaNmV0wQVe8hdmj3iBnM/\nluVN\r\n=K7Un\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5e51ee38e.0","@material/rtl":"8.0.0-canary.5e51ee38e.0","@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/density":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/elevation":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.5e51ee38e.0_1595978167886_0.06809953933254986","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/switch","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"74c6d3e97948fbfea3b2b0d7f048c96ba83cd802","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a3898ffcf.0.tgz","fileCount":38,"integrity":"sha512-1KfWBjOmJNANgxcRa1ewDInEI+MiUdxRaleBcQ5VhX4SxDd4gHbQc5Gkw+t7VmPVnJPjfQy1QIKmNXBkNOr44g==","signatures":[{"sig":"MEQCIEc4eYEOe/lWEM2y0/1jcfkYBrlXtTlu/vIlMXqG4hVqAiAY0KppYYbSPu+2QlzLQjflAdNtGxEY4iPD5SKh8jqeFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSNCRA9TVsSAnZWagAAugwP/1jOpighWYRp1ZBF0HDp\nd7dCLgG5MhRaWRo9Ub5bagvkdnREIkdAGWwMk8O45ZXqkW1Gy56XKX/k1Xuk\nY6VF28Oqr+9xVhuRoIsGL0v76NXfOZPe5PlH8HxiTU/tD5SoOCoj+OCNJLt1\n6CbtQnPhvDuvXVgqXczkgGEKLzFdKghRCvMMv4BUat4r6/k6CpBjWvjonZYW\nDW8C+NpFG7BFpzLM31L/tta407wyCwTzYwd8/H/aXZaZUJEfx1UuZ1wJw0pY\nd6vPtom8BTtoKDmD1NJEPTIDkeCRGxy7jxALxtht6JJHgwYPrrBSJ9c6k0CD\nNbR51t/UaUzjTfERnK8H4AvqNMqTma6ISv8AOCaO1SbNHlR37QevTTAn7Bvj\nhDmNOkaZU+LZgIyTt2qgGo0GgEaWY4PiSiNdENY4RRIellaSPbCrx/ji43xN\nH/9L51Hnfjmv86AXIpwPmArybjm5gokOZGwS0d8F/5Bggepa5PaVDm/2dM8W\nUrUrdTOu3iyGX/5b6sxaHo7js+vtQR+Dbp0a3FQ6yZesU6xRElGcs1DTLsUG\nVs5zaqmiU0WE2yh65ak7nB3DfzSi/iI7NheuY6MBAtIysMr1IclY7ODilsN4\nzQBEPk8oH759TFMk+n0UT7jpImUa4PxKLijhWl85CY7s4GHrpMYI+2zd4w/C\ns1xx\r\n=Bwpq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3898ffcf.0","@material/rtl":"8.0.0-canary.a3898ffcf.0","@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/density":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/elevation":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a3898ffcf.0_1595982989245_0.888308054060696","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/switch","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"805f07e1476b9d6c8cf234070f48724317924f08","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":38,"integrity":"sha512-OtTYuCZPKQmiK20/KlDcj4fM2rxrmbuefapjpZMlavME3CLPtNm6HUsn6YwsgZvabPfxQbarALlu/a+oyf5lbA==","signatures":[{"sig":"MEUCIAlLxDOBxnWfPVlsTJTwESRLZOb7S1J1KxImg6+p5jo7AiEAz+vX4F0Hi+0EHPbXEcWZSqmC8MV0XAepbN9AZQPePqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMeQCRA9TVsSAnZWagAAG8MP/3MLisci4p6r2og2UpOw\n84+6k1O1W47TZj7jVqGjKBQ9JEPLtwdCg3RqOpCuQjpZ4NmMkVyfyfrCQ5cu\nDuGXWiwpOnW2sh/4i3qUgjf/FG2aCl/A6P7nvGOGFVZuFVPrcR9YxYoh1CBb\nuPd5vBlh7moF/zNPDVcaJgkwPk694TgmgrR7+SzzQxTucSiVlu3hemgCPHAm\nXt9Kp/WvrHWR9ghDvXsTUGeNUvrgBIXUQsXjGQ7aABPdgnGWft5drZTsBr2j\ngVsM7lFGtS6bhEfObY0pR1gYSa/r4YLEHvlyWGytN9bxMa1RMAvc5W28+q61\nLowGNHGSCDMZIqL7feqYu+uEXlmGBEIyjw0+s2GffwoROg2pOe1kWzZtPBuj\nn/Ym2MnrpYS+zDHJquy4+b0/cSVeedyZeiN9Ha6SDbDf4WRflygtJWXlkYK4\nGwFiV+dTzETnhebg1MGjI4Bys2K5TRpC1mtQBnfNbz+S81xdqWbYrbpd5yIh\ni3OuWijdxNI3foW/f1LHc0QolszGjFyPvVi9Ivk9WoFosno1GtwRGOPMc2mP\n5P/hLYNFkx8400ppo25lVn1wQ240hE1SG4Lzytiq9B2xAX2gGApTsNshccGU\nemPSacjN2po/ha4Z3N69nnrmNR4YUTWFJL/zCcyOuK8zZNoi9dMWDg1FKtvN\nn56w\r\n=997X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bc5cc6c96.0","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@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/density":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/elevation":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.bc5cc6c96.0_1595983759642_0.47445403594337154","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/switch","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f1f8ee78050525013db80f8c4d29b66fa5289b78","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.9bdeaf928.0.tgz","fileCount":38,"integrity":"sha512-vs8MawpYBklh0l/3dI8wBVjOFe7ZGlGbiM0zeOmm9pIQZzhftxfAEvVRqHFf4JM4ZJQQETh3QoUfhmz00PERbQ==","signatures":[{"sig":"MEUCIQC4YHsn4klIipfgf+xgDI3QGZN46mcuPdmNPpwM3OznLQIgEreIaFpfarTyz7XJm3R9+jrETh/vXw/yEgY1dpviy80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7yCRA9TVsSAnZWagAAhNQQAIOiODranFSqs1vtykNI\n8WEw9deZJSiv0fLea9Oun/5U6bNIwbCDmOX48xxzJuiRnnHAvpqr/mn9FF+O\nLqatofIKFKiUr3xkylgreoo9jH8OfLaPEV2nGSN3YplNfMpE2q2UEXbVJ4UR\n+VVk5Wg3VIfsW/DhOxYd7WpviFsrekTLfuhXIrQQlqbx3X0r0sxhk7jANFtv\npseIqvXx0rP+zc5zjW0NJTh9bf9+78Yc4gVSmj35fLU4vnuR6c/Q9JbYIxvj\nl1/7GpKEf8542AwXGUOXKGGnoos8osn0o83WRil4BaISnM7qpJWg8JFwRtPw\nGAicHPNt7DjozL0nsZAMmIWZyRvmrzJngfd+z9b92vzK2G7bMtsTpQN7KrBV\ntvmZh4zrE9Bl+sOYw1pC8V/WjMpUH5zUOz9u6exlEB+R/KH93y7eALNJSkfi\nwDYax/jEGx/V34AVzt1H6kpyc5jVcm75J1Iou8iAtNsdEUAhJnjvx66H/dt8\n/w93iO5qi0atmmc4n+isfCuq0Z2UB6sfcBWICuDUWOwgqXOmjDJdx25LobsB\nzOZQU072LSj4dESZ0Zk+u+JAdIF2Kn/DvmY/oxeMgEBczVeMK8sf6wf10loU\n5i6eIwm6Wt1483b+lXvt2kr0FbFtNLY2GyPNPDZPi8ybwQ9T3bFIhVooWuyn\n1DFo\r\n=qUym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9bdeaf928.0","@material/rtl":"8.0.0-canary.9bdeaf928.0","@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/density":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/elevation":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.9bdeaf928.0_1595985649637_0.11906582870759852","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/switch","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"e10f963930173357d13fdbc14e9445f0b4bd5888","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":38,"integrity":"sha512-UUvH4CHX5QQtKM/dE7ZKNRHEX8Ykeii74yQXTdLbQLdJ5CP+pamVsSpjQBrv9th8ZZR5muaZxcRQYp1j0tJwuQ==","signatures":[{"sig":"MEYCIQDqtw6GHEKglgLpvLfOModbtGd7lk0fFRX4ET6yiF02uAIhAP5p6LIORC8oJUCriwrJUBVwj9Pr0Q2kF9lXPEWMyfiO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJJCRA9TVsSAnZWagAAI+wP/0+uiion43mNAs/3e9by\neCtMqO3zRvGQ7PosQdVi9DnrppFBbK0Y/PD2+mGcXW0wp7SzoaoADss4EKzE\nEeDksnfJWxXQ7DBe/RKecMIVR1ifrsVlCW+m1svqAGMzoDjz89cGcKP0p5ep\nE3fEr5uTctsWfDlEJMbuwzvT6n1CwpwV/QqbjkqRhCoMYF9AyONebeayUqgS\ngQN/mqS+cEPOSVzNSxRD/wHkuUdpkWluzhJfb6mdU9J525sCEw0U3+yVRwCX\n6/6DuwZ8TYw26ayeLCSA1f1bweivrvcaIDvvtrsjTqKrGtlvdo2HxD2HtFjk\nY/EX2LOKull/imsKosvjDEfi7vvOHdJ3kS05ZIS2RI/iB0Wf+JSblY84q3SG\n82OuO+xUKzS1DEsBH/LndgI4BNTjPNb/mqXlosQNgZB4wrefHWc4EOABgsI1\n9nWBPAVUQlbFmKX0Pqr5fRO4Az8sEpMfaNmSe6UTJ6gYJrMEXPLVR98SpURy\n+Th9tQID/dLgpgNDrlRGA/kje4F03ZWOHUkISjdwqZtBzqK6mKgPmSGiWUyp\nTqgeLunFPTyoH2E+E3vzZXwaNQpitj94kzZeGV0US7I2UzC/qIat/r4DpJJW\nSyPErnn93P6g7kYQGSfUJRvWtAfTtjIBIBI1uPMnFLgB3XDhg9h9hxd2jF+s\non/C\r\n=UOza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fde2c1f9d.0","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@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/density":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/elevation":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fde2c1f9d.0_1595986505017_0.1953727009712889","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/switch","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"52d430812830dcdb06f8407930812c80ff768b62","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.6b3876d5d.0.tgz","fileCount":38,"integrity":"sha512-QvgzADXXA3L+CXVPkUkeQUX6E0fOdgiFfodBZ3DsHSaR9IRgpw4JiUyJzBu5IyMa+plQWR+vgEo+wkkUxbENhw==","signatures":[{"sig":"MEUCIF3RzwH5r7cki5RlzCMI6gCmEekdYU2+1WmCZeRiEMNVAiEAvBIvP5QdWvCKHtYMXq2GUuT+7J0BixddmAHkjgeruUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMvCRA9TVsSAnZWagAA2cgP/iah1FFkgIPwbCRghvBu\nMUBq4/z41uZWZFH6bEJqGr8BqkbOkEiscrka7FT8hXRUSOZVSj3eZRRoU1Ch\njgembkRrd0X7qt44mtxcgDfnSGISm1pGhf6ZPFjk9HNsld2fprdYr2vOebHE\nbsX5f7kmgDiKSdDJ2EG3kEqds+ne19Wiusx8MaUkFwI0al6XIB+P7Oj227ma\ndS4kSvGXpVuiglLNXEoPNwpU6ZRq9nBGsmRN1I+fmFz24s4rfBe1kmK/mqxC\nX+oG9s6LfvlRKCEzEoAT1NiHFJDGZiciroj8aAhSO/UEN2UBB4XllN65Ud6a\nVt3md7HMhNoyR4cGR+jVLLow5HcsyALYMDb5iMePrBIsLFRDTbeYHhXMrv9p\n2ANgBe7cLaPYufPG0QGCp8J3b1+FCO1a8jctJF8kHZTqK5LeHhQU9TL8B3s1\nPpNaVDRNLGDam6lS0uBZCbRbpALNtRkNlVOTrXDiQf5XYPXSfiExL186wJMd\nTY2Txon6odeCAmWKXn3SeOZmm5CNiyAWSgEdDyBNVrXXCZVfw4l1Y6t3zrSG\nN63fQsb9OlF+cc1Z5rCoRUDmH1hv9JwwwVqkjiGhMJlYI3vi3ulxpYM2egZn\nMQxNdqZ9WUbdrU7zjEVgz/V//ERM6HtTwZWrfvn/Xer3lrslApCtoYTVY7ZT\nhDE2\r\n=lW6Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6b3876d5d.0","@material/rtl":"8.0.0-canary.6b3876d5d.0","@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/density":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/elevation":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.6b3876d5d.0_1595986734633_0.6852171631192978","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/switch","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"4d9cc61037c7223055a239593306c4e93d436023","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.30ce17873.0.tgz","fileCount":38,"integrity":"sha512-WhDGrv0fb0nkDqedpgHci6Oqo4XxRVk9yVNN16JARKQPvp/nInX0IO62BmYc8ufxCdEgAs0CAfAcCjyAAut7Qw==","signatures":[{"sig":"MEYCIQCLJfYfVlKbDf1L014TR0eAZCoN/NnLngqsFmdbDH0SaQIhAOKszUpIrI645V5DIUxbrur5FCQmuBuaGeDIBhmmzM62","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6QCRA9TVsSAnZWagAAg3EP/iAx1kNR3BUR13VhwOOg\nYch/zCY64KPC5TSSixycHaeROum8882PTgA39MqHqS4QDwR30ARJ5PohfXKb\n+4AG20zvtfzqgX8aV/uX2YEGUdmrN8bCezoLnM83bKnFUivkQQzbeGwkuRX8\nAFR0A2M9xD7nlbmECCwa+VeuccxUr5my1Lk4rI5Fp7XoPVFFO/2FLFww/VI+\nUfc2IJQchHUFKDI8tSvEMkRMG8fPD6hGHg+uA52P9m54Me8Mn8BIO8yicjws\n+N0TMZd1tjYrmLcr8mp505P82mkYu6F5zoXVg+x+91rRKF36zdKOxI7CoPG5\nxUuNmZJaEdVQ6PtEo5kVXhZRNeaWYtIMCgzcbR8bojurtwRPWTXG/kS8v5+7\n7YqjMDUqtRzcgGt6mccQXQr9BQKOL6pyAF2G8zK5Xyh7KoaouRwP1J7365DS\n0Rn309Py6nEE9XFD7YG86L+KEq60HPbxlo/3/+9Pv+iBCyTsqN3qTcfXbuv4\n57utx2U07hc8j0Gfvir10QVOa3L0ZjFSsMZoLXfb/WFxBl4M2FumgCFhWMNA\nQ3ZW0AATiNheuBj/jYn/BR1Ncx5mQKjUi7LYUjWbIenhk9XQf8s6O8BUfR8t\nhCO5ML8wdWkOOmS5W4x79AZxQ1b4d8V4YDPLHBfq7Hy+zrYzdWoy68zWznJg\n0v5Y\r\n=3Tfm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.30ce17873.0","@material/rtl":"8.0.0-canary.30ce17873.0","@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/density":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/elevation":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.30ce17873.0_1596042896286_0.4686484931585386","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/switch","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"9b7413fb0d71e454595475250e7610ba08ffc77d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":38,"integrity":"sha512-u9e3SufVJFIMhUeUKtC9Xv/HujHbxAXZGw+5enf4YEFXyrSzqD+Y8dfdOe0H8/2qLxqojWn9jw78VS48bhs4YQ==","signatures":[{"sig":"MEUCIDTtSN1O6uH1UsyJxO287PGZkziUf5mNBb+EAK9a886sAiEA6rQNXGh490XDPcSvZN5kddlby+Du1n2VQlK+f/4KYLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8gCRA9TVsSAnZWagAAyOQP/AtHkyO66qF4EXPLlW79\nkmqNvCMi8OPvWsFfxFqIySF/H6Il+FFLC4KdUyIWkDScqZZa99Lm7dpo6qRa\nG1Jb2/n+15uZdiQEU+cXPp3K1yVAFC8mQQVhBUIch0QxBVAffkTGWYXjZyMp\nJOZOfDtbEKrswQUsvGDNQNQDQdRmkYg1RgkXu3lseBAX8xISzUE9wAllMbrj\npWjmvlOcq+7AiBs/Jo5/AWOAopnFFi+OYDpfI8jIQ2/8hfWQsniVVujZBMmG\nfs0lpaT6+7nTmQAOfk6g2ORjN0u6Vk+R14fOwVz00xhJAy3QUxTmiM5MyC5E\nGpkdwcon8Eow9+w+w3IZXStVD3aCUIv21GaCq2AHKB9TgTBBmY1ZdZvqOuU4\n19np49Fg9pjVMGV50GdrW+yGRTFfzfisU944RIEYsELAv0g3PVLcJvfn+hsU\nKfhORx1CbN1Pfn6N6ee8zg5tpid4lvu2BpfqcAnSlUIJX+4pgtJ+TZV9vcFE\npmTaunSvEQwfSi68HkQrI5eMx5ruxOzbFv/fAEn6u9un/w7/pzHtWbAeQbiC\nAAbgwV+5WznI9aq8tc1AfVuH8VHzyGwTU/h0SzFLeoRcIdvo4xqkitXCZD61\nljfMBZCytO6oSJvtfQWIqiBPEGOTmkptohIpZNkhTUU8AlceJld7gbQw6D0o\nN4CD\r\n=Wk9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f6bb43bf0.0","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@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/density":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/elevation":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.f6bb43bf0.0_1596047135675_0.3483749169847279","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/switch","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"1335d272f4e4817c143038db2834753203a349a8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.6af75f6ab.0.tgz","fileCount":38,"integrity":"sha512-CIh2mkVqD9fngJOcrhjsyjtbzaR8dyxdQOGtE1hwLHTB1mDGkyckxDokeVwaALKQJQImt0NlpbP5HX6vaiHB1Q==","signatures":[{"sig":"MEQCIH0VWFICDQzgfdjkQqBs/fOHnzFuab67APP5frq4rbxpAiAOkrIjhcmYirmtak/MKfU/xHSqWYovyIym7jxsLKp2zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3aCRA9TVsSAnZWagAAGhgP/1EaO5kL5Uh4OVWDmd1N\nSulJM3LQ0KmVemYy2fiKuJwFl25pXlD9dwMSdjsMJjOEURcZWXpxtRSdkNhH\nzyeNjWXq7XRHRWgllBhQE7zil9kFqt6quWoMwfeU7IA39hJX9HOt/h3r5Qsy\nvnRwOGnug9bHZDuK7Pi33b17xTRSsNEIJqnBBbjzqJR4w6w/WTwpebGDiGwW\ndC8eesXh7RYKZUvglIPQp1viMe0f1ADJxefhuToWNR/qaO5gy1f9ova0fTK2\nhPIs6wnr+dnESEKTGMznl517tjVG9q/SAY4P5veZvNwj4QmWUUK+phZPLH/k\npxMs5cbzpJXP6ESxaYrC0Rv9fqVijMiohbEIlYVReigpeSb1SgOdVH9eJrjZ\nF4GL5v0UKHcgXZewWpLpccX+A2avG1dmIHPzk+8jY37r+dJAXzhxdYnnGh/9\nxVtAW2UsFtIaoiof9J4TZ1tv04iGY4mceCKQxuZtnSD+DLd78mCQEa7e9ZfR\n2GC4ixHGvx9Gg/HJoKtdImAW84YHDrX2T23hjJUFyGxIv/SUvnpdjtkJQY7B\nxQZ4re95cJ+MLEbBCMdLvTQv3IXHXPK6PdEnLxl1OM4N+0hVmzn5S8fG/PEr\n2uQ6pp2lVCjril1czhkTXL6SvOgttDynNCEuvG75EvjqmwRbanEpmnojsT9y\nuEE+\r\n=9xSe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6af75f6ab.0","@material/rtl":"8.0.0-canary.6af75f6ab.0","@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/density":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/elevation":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.6af75f6ab.0_1596067289926_0.05584698933499577","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/switch","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"ef17bd51833148ff8f3e027f90ebf10d908b70ee","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.42d7a65aa.0.tgz","fileCount":38,"integrity":"sha512-gdnIJySvLqSD4kcOLa9JWl3fH1YMzD/hyqrygUUczxN2s6GPYMERJoWd918/PLzLlZHlf/IfbsTwt8Bw0eTgew==","signatures":[{"sig":"MEYCIQDlWxyR3vTSJOQHfP3D6N0VlCsLxmPFN5UzJKrjCLsy+AIhAPV8w9IXwmnKYdvZcL55Of3CDfB08OGEIPfkm3MKcfhl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/5CRA9TVsSAnZWagAAGRAQAKP9V/DpEVg7sdAIB72u\n9eHARryDrM7Qlmek5CxhCV8LZhaVAgR41xhcvEte5E5tdynd9zg4jwaGSBiG\nVs6DDwPUk67oQ+vyJfQntaY4ag9biKz2VOfB6rdLTqtftfD1Po16me49XQMf\ncK2xZd0Ee+KzpK4x/V2O9UYs7jSkuW4V4em3sEaK+Ix9BsMsy/+hKZZTID3c\nKxMJTDizEUowSdsUY7vnUsGTFVbmP1sXLs9l5dg+bujDgzO7yzj8FjX+gDsJ\nbmB1IdRML0zT6791pbrbiO5iymTanor5h27k3GnncbNkuu+RC0xwAm82Dt1q\n5LFDfXg3B7BTqf2iAIqnF9Jn0s6ksA3+NC97ZG5DYgT99LmRtnqZaV5oxBPK\nRxqSnG1y012eDl6DXHKLtoiB5ypmJG/IePwgRKJvXALm1sogceZeDZoC1dYc\n6llZkHmxi15NormhAGHG11+Go+thD8HroElGdejtUm553tiBAB+IoQydE4l6\n0FwmCOv02SydsBiMEDarzPSzxfTGFn4Pb1U5xeN4iAN70f1go72wbadFs+oZ\nIPLG6fc46TnW+2T8voHGDm2lFRCdSOd9zRHtiUhop9LOrwubx6HRp8DV2reP\nC8t2204QU1AL/iym4/E12H2BfXz12Wk4jWZrRiokOHuhco69zH9HEFuDu/nD\nuGA+\r\n=VHU7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.42d7a65aa.0","@material/rtl":"8.0.0-canary.42d7a65aa.0","@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/density":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/elevation":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.42d7a65aa.0_1596067832802_0.6509770436642428","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/switch","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"2b76c8318a4ba3c98fb3f3c3acefb405cc9cba99","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.85abdabb7.0.tgz","fileCount":38,"integrity":"sha512-pL/yR2p69tb5QwF5HktOrn0zthN+VBT8KOlP9epogmU1gDLtFnCvHnydWS/lgw3/PppaljuKEgi4r3UyiaawMw==","signatures":[{"sig":"MEUCIQC8Lt637LyLWTRtOcPxBzpRxCW/6oL0BhPV017huHmslAIgWLWCirYZ0EkECBFe5HuYfw5slRco6FOVaBbtEXZlZxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhEeCRA9TVsSAnZWagAAauoP/1U4DyZwSltIwcf5LszJ\nUmxGSfmRmjt660qwNoLeWinjHKfv/H6UvejcJzV6BrMIJtzQkXns2yX8C4zh\n1ohyEviregpoc0lIxSkPBPeoQgnVQ77ERYKzAWUM5vw2oHw7Fp+XmrjMDOxE\nOV1sEEFW90n+hrWCSJ9hFkKbfScvCiD+7JGNTGzfxwnmpzo6rPjniz8LDmep\n5NxhkwzWsDFvzO1T4ibOt6VdUIR8CsKbWqfo0Hv9E9w69Y7uj85zxBmGvD9H\nFnTn6ZfV2x3iZffSXCHGMh4RyDjPooAtOD6T1KoYIdWEUXIpbuOXiIsvCEVq\nJHxa1yTIwJ3/FCVqGH3p+UdHl3vg9y6IHUWmTOvJsd4u/B/C8KYqG/U2Jg1u\nQleHSiy0NMIQJXZvoERAPsBwoCht0qYGTNeOL32hYPLPnPY6ayxqVZlnwU38\nTdGm8vs/0/PZAfOZ7cHQWBrHXYKCYx2nCBa2f7Zcu2R72+HVQTvpDsBpl5/g\nvX5GU6Jm14KchdbKRoeuzJK9RY7EdbynUsh8D1hm1G8FwuKKr7fzxSydfmCh\nBXt9Sdjl9hEleYLnebLevh0h6Ywu6CYESmzoRlIRSgsIEoI7gkURzPuBYvKL\n42I7x/uaeOQmWwW3vIBhg1SFSJV0IORt1ALI7T0jprcajizMtD40b8Pfy3Um\nhgYU\r\n=Eu3e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85abdabb7.0","@material/rtl":"8.0.0-canary.85abdabb7.0","@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/density":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/elevation":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.85abdabb7.0_1596068125889_0.7809268800156688","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/switch","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"4288d5b6edfcde04197d3d78abaf827384939cfb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.49fb20ca3.0.tgz","fileCount":38,"integrity":"sha512-w/Y14n0BCG6B+KSyF7TQOZWew3Beu1ptzbDwAaxlOJMMWYcHZ3pACKgUQNcAtRgjqrtRSepIb7YcTMzzhZO2EQ==","signatures":[{"sig":"MEUCIBdvIqK/auyn0/JYSHLNq6PUifQ+VF7DwrWEGy/ib0dDAiEA/BbFJ28emx9uPujnaV3DR710hu/g9Pzq8+GlJXb4oww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIRCRA9TVsSAnZWagAAGU8QAIQYYEg/vKJA+u0MtN4Z\nCg+j/13p0XuC6MLAlhI+V+Px1r8yVbrkMBAe9FvxTgDlnYLHqEcwVsU9VIDw\nx6qdFyWs4hzSA3nM0mmVQW2JXu38/6ooKtaBQheYzn7301w4LbHK+nX+koQv\nJ5kZPL7PkMxGNGjgEnySPEjAYdKf0cCOw8K5AVh1IlerXX8eCwW2/GsDuBjh\nQoCcE3kMVxtLXP5yv8BMTlkWqmeNxFR2mq2TLG4XnS7rFliSxGd/Gdum5E4Q\njFTNjBczkP9SSBDmlc4xVedFMFjMQhEGOv+To9yUc1lVyQLUNxfUEA14UM+J\nLPgsgvtLx6Pfk4iRtcPdNphhijAunbMAXyKmNJBvKr3oxdrXFUlCeEwpG2gl\nRZuH8a7wgCuexPCYTi567BFhBf2f+o7uZ1xNMWwuRLLbyB/pHyjVy0EhZR5j\nlSPzjiIwqzrnaQfC91MxPg/jJvMOZ9XemtIsCzQrQrlZIpoT/VjGIWtdUXuU\n23cEbMu/enZJ6mYkYcAupS5q3n8myYwu4sGKJ6lXbFVMJlQmh39K7gP7pzWk\nUpNyAPbxouK9EJjhxmZBfN3KPu56UdycoFpLi8nsUe44NhPj5TdiBu8Tyy9E\n3+DUb65FcaUbP4lwmHsFgBJf4MOG31UIdvqovHFHorHbmZUKYLR6AGCw0sQJ\nf6ZV\r\n=M6dY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.49fb20ca3.0","@material/rtl":"8.0.0-canary.49fb20ca3.0","@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/density":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/elevation":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.49fb20ca3.0_1596072464667_0.9130199535485373","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/switch","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"315837fbfce4ebee9ae65bab212a1d13ea8313a1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.962d4abbb.0.tgz","fileCount":38,"integrity":"sha512-vSioQhJ8sbjV2MEDrSljlElIFXc4xIupwTl7WsgeBjo2603ewMlSUQhlUSrvovOFGVLdg7eeLNeDkGxZu7GgUA==","signatures":[{"sig":"MEYCIQCSNbqaDTPtxTmTV2EgtRStYFwrOpzPpF7ThSuOK53xrQIhANSIPEKHlDLE46ffaQ+umKimv1XRgQg3Em8G0YPh/uUd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDuCRA9TVsSAnZWagAAfjMQAIYDP3jDUk1DAid2KbE4\ndW+EgWrox0ocUqIX0GjuVHYkG8Kx+pGi/g/ZhmCrr06LevmwMh9cFplO1cE/\nCWmBraTTcVddlFWWALFX8gZQSl/lGWd2/b9x3T2tWd+qg91/CWCblNzza6a9\nySetc76oU3VqApmuRBnTNcHMlNX9sbZNkopJlpiSwHYuj9Ek6NB0dCGCCT1w\nLWHxuh9UdTkIx+jnECIkodlbIXGY9QGaDkE9SA+IZCgdwRpOQp/NrTK3+5Ay\n28PuuR9ky8ct5m/RsXSLmVRsm9b3p/k0TYCb54rG2pb4HwFKElWdFpcLWiM4\nw7EkY2HCCzdQyJPxEaiEHkgGO2swnVvR23D03cb5e40UBy+KkBOyUebwcRY1\nbWtCRC42MajLuJDDFFFoyRrmTmF0Y3ksqMN9y5hp5EteSPTjkoahU2T7EKD+\nGLLcJLUfyogAF8CkTEMka4RBpdXmi9EFmv+g6p+IQhCqbprbW+zQw0Ys22IZ\nLgWn61qBuwsaIzojLJxT8xWWKmTfLaFN6LGevZ0rF9a40LHz2ANtsrHwD3Rq\n03pg7wMbU5bmk1QLbbNGpix8BXa+OP/wsMNWE3viufTvGmXJRUHlWF0QG/5h\nofsGRgfDjzElEKyD7tvXM37Nqu40Uwvkg9UYkBX+yDO5THSPgZ8O6yaJdm9v\nF1nl\r\n=z/oj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.962d4abbb.0","@material/rtl":"8.0.0-canary.962d4abbb.0","@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/density":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/elevation":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.962d4abbb.0_1596125421591_0.9340265928478557","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/switch","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"ffee1d6cab23af0e30de209ecaae4241d6912e7b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2fcee40cb.0.tgz","fileCount":38,"integrity":"sha512-I9eMGiMbmP0yKG5NbjGviZLlNUWEXv4y7WTnv0SuGYrI+iXLgqQu9MseEGa45XWO6/Ash5BN3hD35LCcMu/yhw==","signatures":[{"sig":"MEYCIQCxMCbbhFgUqJRE2eZfIgfuiwPW2wUNIRvSFpPqc15y/AIhANQys7HG92u1+S3zPfpDbl50ZaGG7AOASjdOK1Qe6fNw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGiCRA9TVsSAnZWagAAO+YP/0fLzexc9sSpMtR4JGH6\n9Lj/DhYdaKsVHmW1JpvbwV9TH4eM3RTcym6I7tvT8Ya/xi6bEPR7mOYeT6NH\nm5gCu0Ymkd2ywITmcfa4ek6Tct+WUAKhbxe1YwKkSghIRsZNpqNuhirrCcnX\najOG/6FVtJhU5Ky/RsT8PJXFTee5yveVgy5kxt6n56xxnzllpUsRgg+tabm0\nS011xrOFBd0gmcUezALJsvN3AtfUOS5UKtADLC+QAUDkO9bKa82pjmofd9CL\nRYpetIXFS2ILgxxoUJgQqSkEKnucKQD5U8M++Wwv+uImN3+wOanoryI5Ako0\nftYnHPwBb0MuLFMv75qzux2YLzHS2HhSGHwm7dUz+GB+24kMU7JP9bZ+Ip1B\nD42DDIl5sQOjwLrjOkwwfpzOK+/Mbk0GkMMSFWRL484r5eVLyihLe5xtSEJd\nTLvIWG/h2c5RJ7xbWUJLg2DeBxdy/KLSeSKCY9FDsvEJWLSAXUWSM7yAKvmy\n1gApHytkaogAs8alPAFZHCo9Qdjn3olpDnbxhkSB1X0VhrSCbBzWl0aeV3ww\n9aGevsomy0uh57iQDDJFTujhAXCN75L+OxTXIyxvlvJMhKb7stLIg8jJ/SFi\nGdkEM3xKCpaHRqWcck0gHUz9MJsGXJhWB9m77ajzgxftGR3Ubr8TUYxbEHmp\nhXTW\r\n=x3BP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fcee40cb.0","@material/rtl":"8.0.0-canary.2fcee40cb.0","@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/density":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/elevation":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.2fcee40cb.0_1596129697728_0.25719238456511473","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/switch","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"bc01562c3a180c2defe9d293d23ce78453b43843","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.bd5987f5a.0.tgz","fileCount":38,"integrity":"sha512-tBtyTok4ADDPvkQfYsD/n8Q7TP95Th7Shn7fD9izdfmbpaHNYMdRh5dlGs1bgjLKBjvt87/HEhgAGMSPnIz+lA==","signatures":[{"sig":"MEQCIADu1C9xFUf86LTPYHoXMyQUfGg1q68cSk/b02izJmb8AiB7fjSmhbsNxoPg6iPWCOTZ4p6Ycanu29qwBNW6+OswKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdoCRA9TVsSAnZWagAAeb4P/iL2IleUrih5v6KEW7mj\nE3lwixYgvl4lK/J8mEj6QaPadpOkrjzKzBLs9FfZ7vAayJph+OD5Uv+F4Eea\nDnh1lJq9vT8JXT8y8IWkeRaP+rPTkCLgHDsP5y0jH5QlAUELs0y7rXPk263r\nd7fBV9CRGwU8rtkYTslf9CexbzkYApElvogFYYr24N5o8Pt/0GhoeSR/aZkx\n4RjIc7edbTTg4ue84gc6XznbWqO3zEvPQPyJH1DChRI5AD4zDdS0AALEty0c\nQdxKIWSYALZkKVcY2leekkoF5JfDk6B+tcR/Vbr8gvGOoeYepReMbNBu1YfR\ndEGKGMsNg9sTDPU3ODhYyOLRE2ULzp+8A6h0Z1mPVUdN9ue0cJht3/s6a1y4\n+COVrxT8+DM/OLmduwarlwBD0SdBdbRliv2pIb/+A4mpJgIvzXsfngxLzcuC\nZlqElB1paVh7V0q0VXe6LwUTaSbe4lhTpLosXHGJ9HzKLfaJ+G/B5lbtVjCc\nLK8WohQ9TIpnTTxBrEf4y3qnG14UBHlEM/XOWwhokCJxlEbu64+a77pcjOLE\nhGK4HE21id19pYEIkH7t68K8w+CH0QLFxOwBtq0S61OQpZNfux3a75KnG0NL\nRyX3oAVd61xctXknQMQxStwACXmsZrJgV3rIYaLC89+EGNPALfS/tunjJSdS\nCZvm\r\n=9B0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd5987f5a.0","@material/rtl":"8.0.0-canary.bd5987f5a.0","@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/density":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/elevation":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.bd5987f5a.0_1596131175854_0.7764606783466077","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/switch","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"9cc25cd7fe1b60d1bd3b858402bc9b7d5741f4df","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.005e86a9b.0.tgz","fileCount":38,"integrity":"sha512-p814xSIOo2SMoMAlxQ3JsPiUVjbOEyRNquRt0ztxxWTT+yO40uHupxsU9uNIkJHp6fIXNjn+3RtdF0K9IFxUWg==","signatures":[{"sig":"MEQCIBRFCg5RrT+adX2YKsUzFllR/KLVlvLPvL7oOx2RrqSuAiBpP5Byi52ivX7VfLXew0tELEoHd5VnugD0ABROwI1jow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqlCRA9TVsSAnZWagAAOeYP/AmDIq0mfFvnUxsmI+la\n6SCwLP3zggPt21oXmoRi+udVw6nU2jQGp5oOK8nKobtaxQXq8Ha/CzS9GFU8\nSJtiQ/Fi639zEOwtQ+8WEl5KDU1CTS9H0Eg+DJ6aONL2qfMvA/Au8OZH7giK\nt2GPSpn15tG3M8whBkDL80Mn6DTl3ekggQZoYEk/fjqdNNFNymP6MuWeokMX\n3Jbcu30GKF211PmXcxfmz6t8MNHnCAKMU96M2Vntey9+Wd8T4YvjHNvlqwUp\nv3T6MxMSscOdAN/gzvz9htC5AcxOUD8HACLGUV3XXfY4QhXNk9tdFJidVfEf\nBODpP0DIXrK/zmQoDbrkQ2Zu8KFOFI14JoBevCfeLgqoRwT4zFbJfDmJBupX\nQQgfOXinbAZeopmYikTW9z70KGlY2s+0hSHCiCxaCby/NVAT+NWBIqt3KDOF\nJn/tfuYvGVMzAgaQvqPVzNtcFoGU50/Mpa7Iv11ABXU3ICeh1DQ3uzqMCifH\nCzHfmSBp/QmsgNQbj4aUe//1P6kXbagvQAXKBIPGQJBugAnIWixKRfb1Gxqc\nUeYZwddct+4jVXbrVY1k83nDa0nnI+pb/Mc7tAuSGxI6RZaYCj9XIabe51eE\nnkxb7W5yJU3jj2GYS4WIrBtmt6gu6Vr/WEyhLzMvxhcyQR2W5jEKjw7PX0QN\nmCQf\r\n=I1n3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.005e86a9b.0","@material/rtl":"8.0.0-canary.005e86a9b.0","@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/density":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/elevation":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.005e86a9b.0_1596132004944_0.4394973603982866","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/switch","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"090e3ce4c4d3bbd0691955ad107fc83d8db701fb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e309c7c68.0.tgz","fileCount":38,"integrity":"sha512-2j1u/HsIA7JPCpnfHji0Nqli1Zk6+tDk4X6I7trsS/Wxv/4wXY6jdgQa81CGu/kygc9330mfwCmwuOVAVsFtBg==","signatures":[{"sig":"MEUCIQDCRW4EtK7VcfOYnzT6RPz0fR0LRIoI0Nafku+1ZYR4FQIga4/b5jVqcsCLdiRiLt0o7dq1vI8HIXTk/qCh8GnWVBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwy1CRA9TVsSAnZWagAAusQP/3U+PoFR5cEIMXXP6+VT\ncxIN8czfXx6Ay5TZ8IkL6TYbI3o6g7sPdB0e7PXv1zlT9xddQSETiLOCz14t\nrm1etcrd5DVUw1rqisdG54ltI01Gz7MOLuWs0/FK1jcRsiHDYUDYrYNEagO3\ne00ylpGLbqlkpZ8qI9kZqVz4OPwuQSY3MLHowj0RHLV1HU/KnJVgsCIZS+IF\nFT+k1pwmtMY937OOyoljz57FGpsSnne2Rk1FWcfR6nRvNPcItcES7mB7mVcS\n5GqkXStx3Xi4VOyFkvB8P3CYLdSqebjy1IxXsuuj5ZSgj9umM2n+GG/OkmzB\nhEJ8v3xPO1UJXzNy5VZVFiH+p6ybJJV9+dZMjaiD4qr+bvHxv0AQypbH2ZFa\nBvtc1/q/Upn7LpFBAKMGCiRD3NkOcsfG0ZTgKYmBX6pG6qLZfZXQALoDQZEj\nIoPbvqGZLEE3hYYY+FLGojCaoiL29VESClRoAr8ICsLws0YGnqiYMppMDRAh\n3NCT9XOFemT5SVl+HnEhhCtaKQtEa26pHrcn8w0Mg55bF1VqlkHiOHzJAlT3\ntnEms87DK9zb/05eby/HRkiK9QoPBAVgJzhaSLB0Hp45QOKwGj3Pw3ikV3hx\nPAfuYDRXCB5OEq2D+eABpYXSDiIblkl9bNO6P9bYU9yN6mCthE3BZdqBGquK\nSedz\r\n=hWc5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e309c7c68.0","@material/rtl":"8.0.0-canary.e309c7c68.0","@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/density":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/elevation":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e309c7c68.0_1596132533192_0.4705535518624524","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/switch","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"1df84ba7f66d6f9287226804354c3a67a6acc196","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.935a51cc0.0.tgz","fileCount":38,"integrity":"sha512-t3wrddBKjYI06JHJ/F19hcjsdqg4EpIeSey7YUJI6bbvoas5EFW8o+K3WRrpPyMlPBtpeFZOM6iDTHPmD5vxZw==","signatures":[{"sig":"MEYCIQDksyOBYNpDA/dU1TlAlZ0obGDVmhno3joCuSImPogQbQIhANmlQ+BuPZqZ17Fh51WsZl4i0mzGroXwGNfr5M0VUPLK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9uCRA9TVsSAnZWagAAhpAP/2V2FVPZrlEnPy+pQOeu\nSMTFUOu+L3oo7GZWqFg4fjqX3vhdELCbfPbTt4BrwbgYWW83C+lKP0x0qB/l\neWI+u88iz8twPWbMneX7M1bPtB4uN+vmpYJODYQrSc61h4Zx/Qif/YBHenrL\n4yRgTJcKHkn2Tvxoo3PRXdTXPhuLVl2cZPFYpUK1jZPT/WUUbe739kH6KCAR\nCAahpAE4adyMVhb0s0DpCj6CeRpFWcThHHc5sbOWJFjYFHe1g5WtPNo05+pj\nKLjfmCd+WSgSkKdxHReASRL3bgJciAa7dpOF7sTxFYsQIY8Z0BSjHWVG6K+t\n4LZePgnGKjR4L77NuEuTMGbxs+zGw82CT0uCeV8Ivm5+w/wWjLwGr7kgO+en\nKS6wxm8Jz9DbY2zR+pNrPuiw2uWtb6rZL4zjwco7CTPHD6pDHSbGo2nTRG97\n01By6UTHYwdb9wwMYLGxujeT8H4nqrd+v3CaAMwCXGCWOWS1Qgx03SRsGFDL\n2W/BQUqB2McVWoz16QH4x1B3s4Q6EbJ+ygye6auyHC70es1j9y4SDA1nICBu\nNC1fEN/xpOtEv5DEbreDu+kQ3w25r2B7quhT9ioDrePfUs3Tu5auAjJVFs/e\nsL1ZCr2W7q/13KhufLFNZWjRE//iScv5ElsOBRrQWlW6VzGse8ijlStinrQ8\nIQ93\r\n=v78A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.935a51cc0.0","@material/rtl":"8.0.0-canary.935a51cc0.0","@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/density":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/elevation":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.935a51cc0.0_1596133230117_0.9325876566235378","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/switch","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"643f2f9993a68a32b65b6f3bcc3de9ca882a6f22","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.74839da7b.0.tgz","fileCount":38,"integrity":"sha512-jAqqrj80GScNC7UbqqFgPRBUNxwYCbEcBBeMGPeO4LCo3v1nJyfzpW7AYio7YxNLIM/dsg2Qs1BBpRy3CSVArg==","signatures":[{"sig":"MEYCIQCpldiI9sQB8alaSe/CnkiS7VvIf8tm7SXTNh1jsLfXrQIhALui6GKq+N+pcjzsrDvQdW+ml6JW6nAVDva/3GmOVVJR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxIBCRA9TVsSAnZWagAAkRUP/2jUTKamfGGRdqETjlPY\nkSwQBd14RdoVsUVhsn1V+XDvVOpLbHW+SyxtSKFDSmHpvektpMLWmkU244FF\nzuNHPl1+t6RhmaC+zgfpi9AjuFG88JAq4QUdxCdzD0vFYe4uxI+/9Qy944p9\nRbPr8ODkYPwTjGbCKFebClBtC+3fsNraltclFqBiqW/KD0pyAFHo3ARP7Ou2\n+RIJqHWSABWmzJ644+zxsEkC5oduq+zYOtP1iAe7108rPMea1gTESUZOGrF7\nOSJEFs6sHShsNxRe+HlXp8/k7jOkmNlOZdmpvOT53mRbjlfF0Igi/dcH2aJp\nC38M8iFA6FAoDSuA4TE5srZqAoOkVqhviN+rhOEDyZRO+LxS+s+4yZ4ok/q7\nFhyz9jFBJfKkmkhs50Z3A4O7MyZUtN/t8L1/4j4D+5opB+A/1d2vVyaHt8yO\nHZBauElU4yzmseXR8KjHUqOqM0rq4VMlp3UP1pQ6GXnXcl8v1q1KK8Ae3Uvt\nU0gttAI4aWilpLqZqo71AtJ4vIPU5VcRDdnn5ptXMoJ41ZpyYXBIZuXy7cSt\nIZ7kFyjrPRhqYyu8Q+YqnCeVto2+k3UdwUZ392ITHgjUgAwVvRcrAI62rhWJ\n85Zm0V0DprjPsIIjNGB+akHgaXB4C0GX3m7WkUdgdjd5tBfcLEYlsXJDzfyX\nDewb\r\n=5vNb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.74839da7b.0","@material/rtl":"8.0.0-canary.74839da7b.0","@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/density":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/elevation":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.74839da7b.0_1596133888958_0.9759786414123792","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/switch","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"e424a9f6aa5b7cccf1bdc5229eaa62efc426b779","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.f041a48c9.0.tgz","fileCount":38,"integrity":"sha512-booMagyJvsbJR8YZthwiP8c4HqMl+0V9fL2r7c6dQyEZhIDfMV0cQKxAl3KSMiAxh7PfD7y8Gt49tGNbDSM48w==","signatures":[{"sig":"MEYCIQDpd8W5igtK9sK4E1LLCS29HU998gnEiGcKpLMb0J4K4gIhALwOCnVURZ3wFJdX29ui8b4A9GROKAH6gzSFYWu+OQvw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DeCRA9TVsSAnZWagAAEMwP/3lZBXZy7ICQTjOcUc+H\n78VZE54aGO8oAj5SU+5DwUwvZpbNVhGCyh/pXUcNkNBGQYP1DIBV6y4UM4Jm\nIk+LWohhhQZdkTmy9hOMpribgfJvXSUI4lpLXkqVkAo+S4c4MBuFrrt0yGd1\neB4VyMCchAAgaPhb8vw1TYMTv39MzOT+I6eJuR0PLjFKYY8/arxITooSguJt\nj14m5IJNBHxcwoKSg48PPuXOB0nkzRY1uFVQwMvH2CwEGGTgYqeO73I3ZNHv\nErS4ZxiDHDTQx/aT6z6EQr0vfYko8ugX7QUTiqGOmOKM3bgS0UUp1FbbGjrs\nUu0x1pSZe9zkRSt3nhyqyWL/82ylWbY5hB9D2xB8Tq0Sxj5rC7b38fFJHSQB\nwBypfXNhfz+ZAw4u9WdMbY8eSIlrROjwP4ETRgokfsHJvU0M7ZMd3qbtDuBD\nlqZUnowYps74DJKnWirLE1zkPNNjRa3tNJo96OSLSKykyqix0N44xWaIQYs9\njOmycLK21+kBQ99bNVvPhim0yjKMQ9O+ES9ftWbKoP0ZnujSQRG4r/N78mx8\nudLrrL4m/L+tHVlgo9k0fAWqWnYnZOsLpD/zowmWt8Bxew8cJ1kEZ1pnPgmD\n5eFs317RQv0sonwc7rmjquOjVmmoRO5zxnKwH9eW1EQoaJ2JaX/b0UVxnK/u\nQdJ4\r\n=3VE1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f041a48c9.0","@material/rtl":"8.0.0-canary.f041a48c9.0","@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/density":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/elevation":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.f041a48c9.0_1596149981697_0.696671747193333","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/switch","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f6d5d0b9b84e9a6eeda04f72b318f78c0adec65d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fbb1381e1.0.tgz","fileCount":38,"integrity":"sha512-8NYGQaqF6+wwleHqEcMqS3zuG7ISjHKLuxbWB/8N8PqhFKwRL8hkDPFXHW8kNDkOUknIUxTDUYcoxucAnyZYKA==","signatures":[{"sig":"MEQCIHtsSoadVpTk+KMmMTCQbZgNBOBqfs7g37PfYtjvvsPBAiAzVDb0smi8aXbDGZQgWzu/gx5eVYl98t2//0CYtaiErw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3KCRA9TVsSAnZWagAATO0P/1mhyDQ/9KAceMb8dFYO\nFR8RA+Y+UrrRW3IwOKiX/jkgziOjTeh5pQBHgQdUchlHCOZgzPvNp5fRvD95\np1Z7G/K6Az1QnyFJz7kcOZ7PskjqnEDNrLLqer/OaU+ktgRKyc7s2t8/3Zgz\nrwtarL/D02D/z/a1Vs+FN+1qGApf4ZqXJnl7+A9/H7TQvNOjsjVbOuzITCT5\njDhePiBU3oJEX5bDk4d1ylgGev+8D3wqIemaMrTNJTQ/Bmk9bIu8n3QPsTS+\nr4L9IQx1DiGRpgZ2l0++K0kSyMPUt8bHxTOzipmwuRmN/VKg96PKkc5yhoin\n9g0IGPFN0IuTJsrZXCc/mv+NmL+uDThcql5qORTGAri8YxtJ4IX4f48zWYFP\nu9fIZGm6HMkvlHx4zqf2GfjTkXm5xEG9v9vM7REhqzIMeRUyM//aV6i8JSW/\nh/GJzBFemam14Yw2RR86RxqS31kjaCSyPu/Eg/ukc96d4a4+taCWen21nNgU\nSfRi9y4vhvpr6fHmcnTz8vpuRL7PlUFMtpyGW/q7LhW3F1zJASzt2GG+n7wY\nQ3pgVzPGhmpUggzferqS+cQHHp7Elg0TT4C+53hn6l6VlVLtMa9U+yetlqyJ\nwCt35l4MJC2QOPxaKpCdeZRy9eiKN48CnLv3doQ7MKhiWoKKqh8BHz26YJBi\nVP7K\r\n=dgBU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbb1381e1.0","@material/rtl":"8.0.0-canary.fbb1381e1.0","@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/density":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/elevation":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fbb1381e1.0_1596210633994_0.22212425507148392","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/switch","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"fa2024913fbd2365ceb4f78fac6c2e7644a65c3a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.7f61d5785.0.tgz","fileCount":38,"integrity":"sha512-RH5Rre3ZprHVAPZkErxVhxPZ8AOqrvevvCLgP9jy34qV5nw6QpZYM4g8hbHFZAy4WxsmflHdsZtek5SqiaEHyg==","signatures":[{"sig":"MEQCIB6D/dW2kx4meAhaUDyyw4WGy2bIbWhIMtSGjlYiRJ8XAiAyKA2qTCudZDpw0UcCiyJs/6Paddx6o/SxlOd1qQrHSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFN9CRA9TVsSAnZWagAAsY4QAJ133Ar8e/oqPsozeANj\nfCm72fIgZQZ/PsPgyWjK/eLxxQIxeibro7cZQGWI0RqA+ZwkWYqMIGEWH9tu\nG1/J8YrYqrWnPHnGjEOohm953dwzQocApJ361+fJd7vJ5cZ5VVCMn4XYpPOa\n+iv6KM7M76UiUTMzEbhTNuGWV5FbLQWZ9cGF+xKirHi1ox9FRcWfamBNK2fV\nQ5K941sH0NAuHjNn4oal2eWQs9dwGOiZ/h+l6Q7MNo3ZSFr2d41Z6ujSCurV\n2OXDvHgJE1vAseqlixCesVOo1PHkffdTF9J+x1it2J5fvKHKgtkXz91XeUBQ\nvrw4MH0kucgHc8J8g98AJ0AQPLmXrqGzzyS+3JXRxX8kM7pfr7ztaLym7vt1\n87lSdAoldLmkUzTbNreht0SjUhr4QI6Lz/tA6wX0wOYk+NxtAaHBPNyJfiHy\n0TRSbZzjcNwphXYHT6lNETh6P/e5hNNHn9ghiT33HVSrkkC5KNZ06xirP46T\nytzNku8bqaouIykPeji/amX5jZl7fx66yhIHqWVDNpr40tF41i/uNIg2OXsu\nkxKU4fZqSPvLyCCz81QY+IYmyGMuS/w1ri4PTKaAmBHu8hxCaBl8Ck5wxZuw\nqI5uEbQZxTMe4K1V99B0FUIU3OFKRCcmor02vhTL7iGW850z/JQ27SwR96yl\nsDqH\r\n=OUBo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7f61d5785.0","@material/rtl":"8.0.0-canary.7f61d5785.0","@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/density":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/elevation":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.7f61d5785.0_1596216188726_0.3413100701771383","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/switch","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"9a4b616f93af05660ba4232c2acc04cdcf9d4d25","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e1bc84d10.0.tgz","fileCount":38,"integrity":"sha512-tJV4zeIYSKdxh/NKk7zNIXamj9HZVNh2M/MznAc3Z/4g0FlpJIc3FRs9GC53JhhYONnCZgl17XVLgnVA8WWdFQ==","signatures":[{"sig":"MEYCIQDUr5Y5ytMbw3/oov8H3qxRsnK62mEgXQvwos5ft/KUlwIhAJ5lkU/TLzzXC0bSgPmaVsVeeeOmGr6ZJmSzGEvHyHD3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6ECRA9TVsSAnZWagAAc7cP/0SRLE3Ftd1Et0ROp5+B\nTSaoyzhupPp5fBo1Z8OMlQ6QYl5DzBz4NZVjOsHOBgyjBpd3RxDOMjl07Xfr\niXkiN5BNeJSsi7gw02QOpH3UcBhYGKN+PoluwXVMiiENSqF0NOH144mjWMlb\nYtZOiusHnHh/BI/1uShWDRrufl1pirK2jdKTwzYzeZLPPbGdZamENpUnD0Mh\nf0JD6BhBvnJfvzaJoAWtxcWE8PvQAs0IDIEzQ55+eVLMnFo1j6bR4QOUv6YN\n7wDm6ENffxCwKjM7S4cZTR3kCNAj92xRiov5A7OdPDHGhN8bStpbn8vepbjE\nIp0BAn9AL394S2Rg+6xxMY+GshUyJyc4wLS+rehcyXxCG29hPSLhWvF8JLfr\n0jLMFw6l+SnRG0WALEzqIMSFKuE4F08Z9doY7MgTaWvd07XFdF4gHEbyLpSn\nL/06mH8Zht3iAyA/kzCtrUnq6zppZvRvInYqkvFjQ0xaM+IOsRiHcFdPuM5R\n1GBIz1kZxIymLyIC8unrOmRDakzrrR0QYfOiymohsKaRu/v1x33S2KGsAKrz\nuQFe+ZmKo3JmBHhBM+pMAOf1jKlpXuO3cuj7GVTGKKhjn+TrrFEGSbTdK8Ue\nX1NC7fFqtFtIBMCxRuWmozNZE+mpMHvJNf//JOm0psf+eacxudSOVhD4QaK9\nRJ6e\r\n=Eya7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e1bc84d10.0","@material/rtl":"8.0.0-canary.e1bc84d10.0","@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/density":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/elevation":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e1bc84d10.0_1596477059611_0.6835605731517171","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/switch","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"13113c13edf7cd775fa26614e8d2ece4a45f8904","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.096a7a066.0.tgz","fileCount":38,"integrity":"sha512-Mk08eGQ++0aCUyUDvZzwsDElWyRvnhRkCWd5a6HOI9pIimfvjz09ATyRzvFLDSD9AxFYu+apr6SuYLDJTEStjg==","signatures":[{"sig":"MEUCIQD8ZiOlCBHW7cp8p+GR7QTtcV5HQsTQPv92URFyVKxFHQIgYG/vFMwh28QLzqlcLapl7jdrbC0t5LOEyvsstG5sALs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8tCRA9TVsSAnZWagAAua0P/2UjSrbudcR/3IFySPEf\n6lcyd7aJOuz2+bnBLXqMu0iHFri+bi4c3/6cPGjAo/WgMK+dQqXirIg8QXYl\nFuO6L1h5GcvccOcPgWwK5S8vVc5CqY49n/YtdiRAPUY6OibarPhz+xrXPCDd\nO5w9EKCKMquhu7n588JQdgSGM0qt9e2YN8n+h8xoXqk5cbNQchi/uFNg0Pk9\nwDMvgAaXY51n9V4VwdTldssMEpvsMbdxoLncOLLMbwuwCFe5tKffhJ9PQ4Yr\noQpINXB2A/a8Zi6/b3sN2LBrktIX8s04GY5TMj6UAoxGDQw06m+V0Hm1s8kt\nMPeSCP+ZbdHfbFxp9JepHwlitTYisVPaHDgqepCwz5fEkDsZtq7R9bT4/EnH\n8ICazVcZxBIo41GGSbiR34U7sCPuEsbG/fvkAUT9/gyVPTbuDzj9Tf/e9ol5\nFRr6m13zVbWaqRApXejEmQoII7/S6ErE0QDnVuhImVqOapKm2386k3KE40BV\neOmnJiscWAX2dY1NLUuLfq05v+lb5L1jO0d6XgQ3TsqH+YMVpbeOJReE9+Ss\nks0VKBvuUkmGQvXECvk6YtYuomZf5UbHPKJ594gbkL7XAHrwvkhJpOfTyR57\nE9WuTUrHTkOkdCdkh7O5S/a8EjBGUjW9fgvNasI3k7UkboNvOqDAYAEM0t6a\nOnah\r\n=iMKM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.096a7a066.0","@material/rtl":"8.0.0-canary.096a7a066.0","@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/density":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/elevation":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.096a7a066.0_1596477228917_0.12565122447503718","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/switch","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"ddc89b84c312fe140549334e31cc0bf491fbf8a1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":38,"integrity":"sha512-IgQcarniCj0kZL3cCAv29d85NNTeLIuSjtpCQ7lyENo2PJ904brRW6ePnQiiVnU9zesw6EMNNmOV2T5q5l/ZTQ==","signatures":[{"sig":"MEUCIGgZBgcZnUevMD6h0wpZZPGGRc796NEwdvUACFmJdPxPAiEA6rxvoXHKf/aWiINmqec/5p8kp8xAEo0ltMnrdw1jJvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9KCRA9TVsSAnZWagAAVmIP/2L41ly+N2pqusRpDTFS\nvkgqGa9njBFGmwdnFJ1sSmXBGkos909h7vbYk3t3lAFaSeOxsHxFCGocjKWJ\n88/w5cyJJEUgsIIDI/YNmh3fHvY/ReaKMvylUC1f3UlPw0hOmqXwwYoJ2mwJ\nxaao8CxCxsmxiSE7/TPyT4BQ9vauSAdcBJLK4rUeNPiblkj5XHu8c03E9zGn\nPkf61t6etWJKiK9529qiBCLxvI8ea9pJpK9woFLj9RgiiZzw3t7AhYoYGNLW\n8XAAnyqTfX5cMs97itL77U/cuSINgb54tlQMMqsaxuvHRp341r5PhkkCoQhU\nrwZsQHi2BbTp+KLyHgbBc8+5KU9BE/LlNyllvmNakuwSOI6SSNWdK6c1VhEr\nouOrJ8HXkjplqDMRHolXfr16NcB4WOrIMV6v0vFh6GDHANJy0+MOoEuD734a\nwSBQMQshot8ht11WMALfeOhO8WrsPOOtD8TlgRHSRjffZ+zmNXymeHegx4K9\nl3++N4VeVQxwTKK6t7ycb1QgskZbRwF6XQG6cD/s1Hv/1PsLS1sFsUD4op5w\nSpXP4EzO7+bs5oTGSGRHP2M3yku3YSJzhPeMNRT8X6Uo7G8Bcfr3gYDZu0+W\nwwKjtARyFX6ZPBpeR2uxFpZyHVeIJlsLrS1wb34XFJCNAWSlxG3ZSNy36bLb\nHm1s\r\n=mwb+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@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/density":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/elevation":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.aa3a3e5a4.0_1596477257701_0.36185575468777587","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/switch","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"023eabd8e452149fad6a61296a0eccb356430876","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.5903d39af.0.tgz","fileCount":38,"integrity":"sha512-dLkjGCS+yOhZWI0J3BdB3scNcaUu6jR0NgllXXtAXC+D4dmBNV+vpLXbBezoHwYvpBRMrqzjsWT42F/vkwFnXg==","signatures":[{"sig":"MEUCIQCwTV1LeevN/B4pU/bhYbmTUgb9mfm2odFAwjWsBHLEkgIgOQWYxBUoGdyeuXg82Hqq6ZhUV5sj0kErI9fOvSmIw1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9eCRA9TVsSAnZWagAA3cEP/iV7wfCVMJsivQRfKvL1\nf4nCDtnNLxNLCAKSIUwd/lOTRWtUDlQyg6VB+/TVxvjThf5ogUq3XDbsubvq\nqD81i+Drh67+6pHZp18RoYcVbDutoSyCcxwg5Ty/QIvP8vbGIMch55b1jC8K\nleEa9tEXbqM8WZolvHq5dUfwqXzIkZFrkdRpXo8ecl+KVP6BTvcAbDxa8XkB\npS7RCMew+nyF1zJv56FLUVfggjxvfY6tdXDXrXV+S85jK8v/ueKBhZwkyP25\nN1gxmcerQI0a0OVtTCaOMyV/AiC2h2PEz+nsqF5lFRK6cmiD80H+UU8/4/IN\n0I0mGO31V3u6bDmXmWb4RqWLGpylGm6ro8vb7dIWl8Krvy5izRLiXTye5bpj\n3I3iWPgs0UnbwoibBMMdQucJZLLREjEnejHX3HuDx/xH4tibpyPWApN/ANN7\ntVFKA3zCMq509pSPE86rvNPNOk8mdgxQQIGgQfeFC54VEK0YOy10xCWqLom9\nUuYlFzZXXPXVMhEOxmHXP717nYz4NCmRvb2GLWgJT1kZO7is/oyilgcA568m\nhtq0HCZ7m5gt9n7656y4knm4IMEjQpI3SDOuVTDe/0V4SwhrczDvK4w1UioS\nohIQiQB2++pGobfHGspz2vERJagaj/foG9qhiQSqZMhMCjCy3G/13YVlW24L\n0fTJ\r\n=xoft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5903d39af.0","@material/rtl":"8.0.0-canary.5903d39af.0","@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/density":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/elevation":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.5903d39af.0_1596477278150_0.07918341863375544","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/switch","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"9902590e7fe01ea3d868e61c005de86a1caf3eca","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.72258f898.0.tgz","fileCount":38,"integrity":"sha512-D+gKDOYSp+zy1kQzOgHeaFl16I3Nc2mk81DtwwvZxSvUQHsJ6O7SQI7B2wRG/k94P2+qY0SwEO8wkBJgwBQIqQ==","signatures":[{"sig":"MEYCIQCUko4YaAhwDKHjFVwFt1q5oPsWcC6WW1Y7KcK1dgBLDgIhANN47AdOGyTdsTrsIkTlqwopbIV+9Z99lRYlWzpzw5j4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLcoCRA9TVsSAnZWagAA0TQP+wRjHS+90iFDn8c60FaE\nrst3eLS8waie9cndohbdX6/ehyLYn3bx3L02864SKWgOqEGvwHnQKH6/zLOO\n13Zad1JLQcDYwwOn/jbV/gtI79Ufdy9/pulmk2h3yJC7mH3PyQVNn+493Uq8\n6LgL5Hnt1Y3Kr8UflmY33s726JTl/X7r5a8ReXwbJV3Czwdr0x3/GUjwiN3T\nvAdMR731WUQsRK2bxVWI7oeCQ2Ru5YVdYTfX7nXWHYBYA49/YvWMpQIF8+0q\ng6zUgW9oHdH8Az86g8OxSfpdKTCLnuqXrlJbrlKeCqC/ROWHIwfMyfsVbxmx\nPwE11igNG5mT7j1i48JNktPi4SQSQEWkT1VwasLpLDARZ7Cqtc36hokRQLgl\nRiQjvxmdiJwFJxKZGFQ7ky0EMrZwPZfsJT7ynwxNDsConQbUSbNwrMGeaqNR\nM8SyQMoryNKiwv4il4LNTcFCLFeJVDlu1wS3bfAprte0uORUuXt1ZJR0vcfU\nmDcGt+EDIwmOXY18QsHWFy0KYvz1uE18hnEuOC+i2OnptKtWfluiR8meBJyn\nSwGoCHWWKyN4TJ543BeUsijeeIxhM8mg5FrQnCZFJwxDYXZPn7s+h/PzHgle\np0vc6ypKYRaBXWJopBmn/hOGK0oEfRXjAKMXo4iySmrnftGJZdXw6DvSRKrl\nYKKT\r\n=LdKf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.72258f898.0","@material/rtl":"8.0.0-canary.72258f898.0","@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/density":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/elevation":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.72258f898.0_1596503848501_0.707101109541608","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/switch","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"69320dd224752d72231eaaf60a841aacebe97ee9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.1b44b43c8.0.tgz","fileCount":38,"integrity":"sha512-HHQNtosFyWrS92PaHa2JEQGYnAKwmFJ9/8oQWWzF3n5TjJu1k4LqjDthGy560fd0LvJmlBckq1SiEH7z4b0QFg==","signatures":[{"sig":"MEUCIFmSRaopaQyNn0Rba04qGdUKuLtWCSkMQr6S1+nEvhFIAiEA5jcq6oCE7ymNU7xpykT8OH98v2M5l3DC1gs4T1eCcdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFWCRA9TVsSAnZWagAA5TQQAJzmK6ewuKy84zG+CW7x\nWX1nV6D9OObn9+gg9Ckzssvjtb1rBPI6Ui25A2nKiR+n66cZnyPwobpMuRq1\nVku01VP4OJC+2EUOLQu4m8b48VDU7lGAylSqrRH/h3V71Hpmn+w1kFC3y4fn\nde4chEK/dN9k8OFNdMTpXhWI0H+UY+bIL6lneDvHh8PZ2OiLSoZXKNvU3x+C\nbkEbEwZ57KLGLoutZ2+BojGcx9+EJzDVjyAZTSJQtwqB43p+dhx+Zm30qqDR\nVCaAtYXMBmJnBwYhmp+VT0UN+40QyXDXoMX35kPPozK8Z3ckuKbhfe+wkHs3\nDdZsx8BkAS1a5IOqmUV+Ig+JEQm48XK2NR06rscCMdmJ/7XSzUDpknn/QANW\npdGX1EUNCX85zuBWwoE/OI6TvR2I2cOxzbwBYl95l01IWiHZCXiu2quE3+XM\nCKiWHjhlfx1Tn6qp1yYX4vGL2GOaY6Xt96piDUvjqSav9VWdxJz2mJoNcIZW\nX+7ObwHVUAE3Td9fuCqIrpsBu/9FWSBNX4TeZuiHhXROca0n109ifjHTvMiw\ntWXVxBFKuqzsshIYwuOf3XLYlos+41SXikCo6hp5Gue45BAQskrkoUU2mQr5\nQ2hdbaGY0mGplReFHsrUWnh6/5X3TmxAxfrn9U2hOzwdtdRc3Bt2mV/NKSGr\ngTQ3\r\n=UONN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1b44b43c8.0","@material/rtl":"8.0.0-canary.1b44b43c8.0","@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/density":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/elevation":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.1b44b43c8.0_1596559701609_0.09416828898511675","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/switch","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"8aca5bd58413c0f28333310fbb89542dc32d05ad","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":38,"integrity":"sha512-28WCubW+WPHl9i2f4lwKyUm1owE3nWHrTY4B7f3NKiRgBF3cXKF2RdHxvj+K19aD88PFuPIMbOBEItiwRPlbwg==","signatures":[{"sig":"MEYCIQDnYgfd5PL+RUsYra7V8FTHS1c+F2kwbd4qrbCUdj3vHgIhAPSqXu/z1RSYhRjveyQge/4OuzA4lhNJYcr/TP6VN96U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPzCRA9TVsSAnZWagAAS2cP/iOVGEYHb2w/wh55QdBL\nxU+irVVTRQ6wkRXTMib8pYjftiU5f5YialH/nMnvD+jkEvVhpjfJ2jJwAhfm\negNAtxdCJxZ1rAZ/Gc6MI1lqwTAu2uP/FNUYzBaFKt24jS2YFYqOnyFLTBk0\nXaC3ZKEDIZQKewhplLzAUvFoRZF4Dx0VDhZQSe3M4U5Nq4B40UwTz65WfNn5\nFWP2ld9w3+Nd9Tc8c646qfecPt3tTlSvmU960n+gMyyCjbboAvv/vXlVOTq2\ng9pt1FHXLQD7YwBfFNZ+eWD4kBS6jpTwL3kJcJMU2yrwLynDjPGGS47FjS5C\nq3aX/bEFPT4TGHl9H1qL3EU49hIrjzt18WsgiPU27cfN6gwrvKbqa3Ydv0al\nDx7oq9XeSiyomBmWje6+rglbtD05XJK1jzASDMj7btVPtYddcrG0wMC15+hm\nnzjwiu9gmubVZ6uOdGNunnQCAV70XW7W7KmYlfpxYP+Q3AwKzRiCouaD1dyU\nKBjrEAFhwNSZGw5yO8cUALweaiaFPLIn/IDcnHsE0Z/2i+3AOQlGibWYc/ZV\nRJvri0tbIeS8B26NEnFAJ3wVMumOpCQV1FlB4f2MX7vjP9O3aDKPO1bQb4Bn\n73u1ZCFuZR/lGK9kJelW5mDpB6yXkfdVF2JgwdVLJ4guqvgJDz/1Vl0C1SOi\nJ2zb\r\n=aROy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@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/density":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/elevation":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e9d2e2f96.0_1596572659336_0.5042735017957078","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/switch","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"574776c65f3ad21b75d4442578c77e1eb400e5b8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.b9dff0a19.0.tgz","fileCount":38,"integrity":"sha512-j4ET2LVTAy+b0PtwMnuacWfqyeGUHGLRIdFs+QdwtS6z2MCl+M2YGf1px9SHeGMGiyyG+X5q+M/Z3PcaDEiY6A==","signatures":[{"sig":"MEYCIQDqx3oIq6Jah+c6J/VXYepyXts02XT4ih1AObJ7fNyPXwIhAKIwk941FP4kQnoukP67Hx3uTGcXDVw7uOGAQA63Q3Tf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwoCRA9TVsSAnZWagAAawcP/0uJNgAeh10Y+NTSjckQ\nxF1xpUV8CHQRXn3bdiC+Eh3diiUuScHC+l2nEPAKdJPEM3MdnZatfJGl8TMC\nk5temKFXlMqGN2ZIiyr+CyYJe2Co3ad7C2mnwZXrcp5kXGs1u+uSPFLjjo4l\nwMUfSPP6k8jiGs8TXh0Q+R491xycCKvMQMzpmPlG9PwOyzgJRnVMH0bKOnkF\nCvnwUAiBYFqa7uShTAPaS27E1pwDiW2l0Z7lknWFi5bKdCL87oRFxYbKWxkD\nKbuZyDoUNFMAJv+H6tkugqk0bY1H8P5IUEnbIAEkIzfSH1n0jIVYVowUWeQk\n5mmCpGYFWF6o0YiCKf+RoWvTEw1ttMnfv9AHRNz3sJ34MDJGyqKWYcTC8RNx\nRZMWHXMOgtEGQZ8P5vNbSPMcEq6XgZqJzi7ukarMo+6GahTwh3ikNtnqOvSJ\ny+b2HFI5cPXsEJMNLQWDQjDQkWr7pMIdAyDuwnULdY8QQfidUhkPv8jKm/iG\nM1nDRi6vNCv12w8kpcrUFmJRqw5rRFHvdUraYWfZchihKB+r5ys49fRocSEf\nFL4f0rP89cD7sr/Wsk6EQ19k44zFA9pvbtiUjzzxX0L5lufiZJf/RffghuvG\nv7bDkgFWY2W5oa7WT2+qgjbyTZJyBTjtilepMnEcguDjFeggsGLwrIzPW9eV\nYG9O\r\n=7iaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b9dff0a19.0","@material/rtl":"8.0.0-canary.b9dff0a19.0","@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/density":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/elevation":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.b9dff0a19.0_1596599335753_0.7897950333740347","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/switch","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"516db8c5a621a26754bffacf8cc44809ad56cc12","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2bd09a706.0.tgz","fileCount":38,"integrity":"sha512-929RmopgWQmrroCQROcSLc/ie0bS5FdXL9Xp0msy1arKohzJpzvzp0IamNRyWXhStT6rXMDoV6YiJF13YOHoIw==","signatures":[{"sig":"MEQCIFE+I0xrY7efTDN+CdVpSQTnrGIYkysj5QMUmFUp3kLHAiAUiOh55vYT+OOkS+y6/yIB4u690AX7YCfaRjVmlIPhTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1eCRA9TVsSAnZWagAAkQoQAIKQC5sNFfbPYD30XFAS\nJ7HOUePsumExaZjwGGV7jwzNShZBPN4VSfr+pDNy5vR3YkqRWt/4tUJ8B7ft\nafTBqFzHny99hC4mrPuF95geISB73JVRt9MX06yzDqidJ4ZN3jUik8m91dj+\njLr3OubtRUFYKoG+Z4rhGi4XA0+WVaVwe0ScMkXsH+UzRwI3d/gmogRMJtLY\nE9fcYAX1INbiC59IPAQ5VVRW8uGYKcNigMGUCIG5wMt1FLcDQw8bXF9uAuut\n0YXXX4Yj7XqKTEztXjYXpU9OcOZcscn5vRa1wgY4+pUxlFalHfhTdpS3VhoV\nc0QxuulgsSeL4nKlhITcfBQviXTeslTEOwFGbcelBFoa4KKLRZhlY7N4Vswb\nt/FLl0z7ad5jhUquX2iRFgloXeWBJdWNVOYW4Hn1ryxAeU0dPASZ81K81sWR\nYlpJ0/tydkUEYriYi2k7DNHtc3MyZJPIEbeh+ANI0kLif3S5+eApSU/lvncV\ntDAI4wwrcvknKCKB94S789SQ89pasS7rXQ4+SH0mNxPsWr7+z+nFTKVp66qj\nk0lYM2M25FETJTd5r367/i3EVjsUDv+yrq0cynXE960LBAlo+JVpCIpP/7Xc\nmqCWiJn3Qdg2InWySvkjB+wG9kU8Ib/HBplx2CQrksAuBG4Wz2Ez6MK9oP+r\nVZJH\r\n=K8Sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2bd09a706.0","@material/rtl":"8.0.0-canary.2bd09a706.0","@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/density":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/elevation":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.2bd09a706.0_1596599646504_0.9221723643174198","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/switch","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"4dd5bc5190d3264a1870a73070bcc29b36696e48","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e0560522f.0.tgz","fileCount":38,"integrity":"sha512-04ywTonwWQ/yJgWI1Yo3DSQcTZHClmKUUhiiUKewdzkL/lYxPCRU5eDyk8PhDJJJwV5khaCuXsukQlFbTpjt3A==","signatures":[{"sig":"MEUCIHlouW85RpB01xR23TxEEgHaw6HWRDV9ecJFB7tkpE1SAiEA0Em4/17cXzQaIRn37HOwd3T5w4iF0chC9/pTKJuAtXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuo4CRA9TVsSAnZWagAAC80QAKBPCtWO8WDNKGxL6pAX\nxL9vWOg4Ed0e9OoOS52KbAamFp8OqroLbay1XKJ82iMFTVwxsDf0OcItXRRF\nDYysKiv9rRUzhAFBxE5zATVBMg0smxlb+ZOxmqKftp6OfnJi7EnNhm8gfXq1\nnHv12C2kajmdMQD8AeJjVGBJ6U/HiuCfxsVo75ikX8/f5GlgfGyoviLxYTRv\nYfVcUeoHmvGhj1uEsv9qoCHGwNtf83UiJSkItoq0oNIuXiBSN/Oc3o+TX+Uw\naamNMOWVzqrgNjhO/V9nQ36zLAZoy/Qs310IYI6lVzr3KQfbTkzOlF1nWwNX\n70BRliVa56+FC6Tuv+v38rTqZYJEYaBNLr1FvWVGP8P+ozNi76BbP2pBSVIP\n550zsi6RmaiUb17/8ahaauHCC4WSJLx74cqGHFvu63CFX3uUmz4NGzO/ce9j\nUhWdSwG/+ytfLdz9T6u+rflNWvhTNkbHCtc+FGlJvyTi4zKzUc7fHBr8SUV4\n3//rzUQBmaazI4XOvDQRvg3WIr0u4VCaIdKT6oUIGFTdaQuGKvPQOcWlER1w\ncDzwX6Ler5qbBfHs466q0kHjdlFAweGMzdrnRQb1+jQh/sT1YpVvzaV/YzJZ\nOq0STUp3vAIdRkfzTNCaM6Fxz4y0ms/810gUUTH4QYT3P7Mt+6KPvjuYg/bc\nGQso\r\n=SbIt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e0560522f.0","@material/rtl":"8.0.0-canary.e0560522f.0","@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/density":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/elevation":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e0560522f.0_1596647991727_0.08273799920683045","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/switch","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"e962d96ba220131d708da23df0ebef49cb5662e5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":38,"integrity":"sha512-hIQllmaCYky1r5GZpJGoCnPQ42j7fwuznI5pKtCBJOWELZ8LXFjot0ChuXlmGM44gg0zkJ9WFjKqkN7zhx522Q==","signatures":[{"sig":"MEYCIQDs45qJOJpSXiXi6S8/J89TKHfIobDG9uUbu/daFhfxmQIhANF6ngql9iKcyCcO7rtZ0UiUS1Cu+Xn4tOinBIqUzurZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7TCRA9TVsSAnZWagAA2NwP/2WeLX0vV2ia8KUzt87N\nViH5WZ8R8EONpBS5ePYTk7Sv/6wdYVUujjUYF0LYpB+hOs1On3qfdM6AwFYm\nOjR6cb3aYUNmAzxYMcQpXwBnlgsGrxtzKtmu030pzjqAo3L1EJwzQAkRmSv+\n9QxRpdvm9FluB/ace0u+c0rDQcj35q68WUXz1OlBOlIhKLCInpPUCFHhPS5E\nbMECF93ThZ0MMSXH6cwT2YLR8H327OV+lCUf0W2nO16qIM5hqbADfesqx+m+\nUU/jgky7v5nGtkq3+mfVRi6FznU+5AQB/OuflPcn2Cwy5kes8v/1Iq66/NJp\nLzVkOriLFSOucuUmhzBSW9WPi9c7+8Pw1d5gVgCOMSoZHuR/+EkFwkDgKLqg\n9pkSURBQF+ezvc62SMG8J9QypfZUSwo7hKKcKq27k7v6LBHWNRTvBYyXuHjt\n8iFBJ615cZUONwQ0uvG0NUpZslkuALeCfKAqGwZK7jB+guWySwFLiQBP0V+H\ncOqWKob1LJtOsTTDLf2CJvluYFxVe8BwYQrGVz6S4qIaUjCJ58mPGWl7aOZD\nqSCyjH5vbAyaKclOQ57rmaR3mJGNQ7IJ2hRO0/xvbY0xDme3+k8k8doXoxd0\nar6mIN66HGQhCLs5pJXWAezl7Sd27iQm71XHW2jJ6IhfKlqN/hABqvfJHch1\ntnSj\r\n=2NrF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@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/density":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/elevation":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.08ca4d0ec.0_1596649171423_0.7700894773530909","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/switch","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"83f5b4a508e70b06356495f9ae6dfe18e7810b2e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.08090126b.0.tgz","fileCount":38,"integrity":"sha512-vU1YcTy4hyPj5j0Phe8MTHN2v/5j89ZXUnHT9AfEhY+IbHqhie10Yg65/A4Qv+8cZo4xSPPBFpL/wlYdksn6rg==","signatures":[{"sig":"MEQCIHlLng8o4hPLO6SJeks/4HWkPk/gRCZ9vM1jg61rnD0hAiAHXFcm0O2gAuKwS69XsvL5/F0X6XdrQPpgEyb83w+PFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrdCRA9TVsSAnZWagAAHjwQAJxro/hdn/nhLJH69HAx\n75hbSFXjGWNS0Z0FyMdy33LMMMyFJdnIzq+dvMAiqr9Mb7DOx83KUA/+1lsT\ncaGGAYV7uQ/D7C+iCBqdCuTVsZNraFg0oTI+JgSLo0aCBepK7O8IOhyiPVFi\nzEtuMKzOurV8+ltp/t4kBRn2itk7wdU399biqk9BGW3lWgxV77REF37k+MHr\ns3H3qOw2tx8GVSnDD2B/DqLOoWRGqDPlaiXOcB3wFY4vJIvYC9A1QXsDNoE3\n9ZpW4Nmz8TPejIjfqCPYQHWSAnY9TgigKils7bWFuVnNp+WBLrjhOCWq3dGG\nD8PT5P462fuJTfaLKZSysuUOmds7Eg+3GMCMOubJbAu9DjRm2H4kxSH3kuhD\nw53QSioo2VBxenSAlY1K95zHd1Ymmi1CcpCqKtkennZ7kM0wbJ3zoXEt+P8h\nzfN8R3+CuJNVi2TdrT0eLTKtReFT/o7e7Posx3nDHNa+zufyQhDO5tBv7Fdp\nvIyxb1KyXuAA6++PWIpLmu0TeQ2pFVLElmWgOGgjbF2LB19Rpwx54RM7xUD6\ngec3UCKwMjIAeWD17YAPluo466ROxAwKGr5yGK4crEeWSZzcGsCvbEUJHxbp\nztl4XUEik+am8H/496kIt4PbyhlovDnCZA+vkoVLQKh5yNvETfFlHnvIMSxq\nDNAV\r\n=sWK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08090126b.0","@material/rtl":"8.0.0-canary.08090126b.0","@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/density":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/elevation":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.08090126b.0_1596742364929_0.10625013164565522","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/switch","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"cc8f84af7a675791b4322e61223ceb39fc5e0a01","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":38,"integrity":"sha512-5NSfYfP+noE1ZKARvSINnc18CJB846zYb0S4qyCgiduMZkYBn4DcxfEXbK/pk34q5lht0Cpr169OZ7gkkmRikw==","signatures":[{"sig":"MEQCIDOM3kxDJMDcVeD1VeLzmI7B3xZiUaaa5WL6e6OPu7SFAiBBwkrKWCLQj73evRlngQmw1dKAVCcEvM459rYUwU6Muw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHsOCRA9TVsSAnZWagAAEH4QAKRzxJC7dzJcLC58spI4\ny3IajcaflQNyJTDHXtP8kVpq98hG/UTW3jMzM9leTbhee4tNYcc+zGBPcwNB\nPxlPIzSfSreGP9SklnwSpI39H3VeS9IfV2Y2tWkLNOQKZ/rGtOUSqQaelJ8+\nxK/DQZHtp/yNUWs06wfrLK8skGgwAmF2M+8AoF9h94uPhvfCE5PNKtiDDv6L\n7zNW3FUcind9m19vCHZKBvQKNCZFcIZ8pFzL6/EXwIVI6E/oX+SArh/7Dm3Q\nufiFfxAbfQs+w9fhC4VCG7AKFnJ9n9Y2C3WFO5Isdc3G/rbS3V+qoPo6z0f0\nHqkZL4MHp1WTjzbmPocBrEZpPZiP2O8TJmyaeMDYFSkePscvaq2FyufI+NSQ\nIXQVpfH1MZmbvw1oKh/IUXtBJJUiFNoCnSSE+rsVwj7smCA5tt+j5nwc4mmH\nNUCvrXrSSSHCjj6MWXwmWoRYT2vaXta9M0TKs+Yd1taNI0XJfR14dcLYdw9Q\n1cwj1RoHUD6id0YMmJx/wlMmDNFJ6+pjO1JCVvgsR/1HvrDw3AL9SuihmonN\nRZKAOVSq23iEApNYOnTw7JutLhANrxq9TCPa+b9cXuuoptc3zqErzNpKhZvb\n4SzV24B/1OyqbPk7oicdtDiBcaeJMNh9Sdc8CV7JgDCl32T+iJm7DWj65/hS\nCpoi\r\n=2o/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@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/density":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/elevation":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e8bf5b2ac.0_1596750605168_0.15872195039653714","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/switch","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"0eb99178d8c74a09cb2215ad3a67202ee1c394fe","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e3b746208.0.tgz","fileCount":38,"integrity":"sha512-fNx72yh/R6D3T+OHIHE90S5yM7/KvnHldLIQoVq0YqWz9yx4GtoAQZx6C0QRTGBXBHKNviETvIB45Lf8mjTt6Q==","signatures":[{"sig":"MEUCIGFB/EEmgR9oQNWXKN31gAdqlyBDL46/j0oqYM6XcfBKAiEAxaDZfClAsHsW8QUN2Df9E+MhR66lh0rEFflUwuiTxXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOqCRA9TVsSAnZWagAABLYP/2d+ruDV2T2x57dpiQao\n9wUGHqQnprc89J8xLDOEkPosz5eKlEUyPE+e3aBxFmMDctsSdHFNiC6KFSEn\nhmMsdjAPetI20FXGpzW32scefRXnkB37slAziPMbO4p7epeZWZeWmfMpiNl2\n4f2JFvvDYOto0bQFv4Chm2ICc4IN2ap3TH6JTBccJ4I8h1xAExCXQdMpiMGG\nvJc0UQeYJoM6bnlESvDoQ2y1RXuzZsGD/Mke2b7w3I8cZVa398xxQwp3z1oz\nP2eRTce7LM2TQqWUIoj84Vh+N2iJxGU+P8t2KEpE2f7RLgnA42pZnXUMtztO\neqwvDDI334s+50eejNm+EKSp/EFP51gbnHJ34r+od3hZPEI4YWLRJXYU0dZ9\nMkJqbXdA3tWqRqy0mkJ9LkY+L5Kz+VSf4rYdjBATnUiQavJXO7UodF3JC5Rr\n8ayt3AbSEPXvhUDSzN8X4bbMplFapqI7Q0JZaN8c+S763YvsxSiN2BYF7NDG\n3DKFwt6OCddHZYtz1Ik4advQIJTauf4AUl/PmzDjVboGpVUzEaeIcgY+dwgp\noXG5Ois3ry0WZeCW0FTDyqFYw8iaC6kJxXmoK0LeDR0cJrOSMM5quc5hNyRB\n0AP4YMXpfGd+HcQKQ6Ux9qY3rrx0Y8Z6GS/pGYREqK+XLaTqRL76CeCrI+HL\nyhbb\r\n=ewaG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e3b746208.0","@material/rtl":"8.0.0-canary.e3b746208.0","@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/density":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e3b746208.0_1596752810367_0.8003600789854997","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/switch","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"ebb1169f6bfe0607f9506e0629a772c39b01591e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.96a640534.0.tgz","fileCount":38,"integrity":"sha512-cNF/sRIXnPYirGsN9F9aN/eyrjHiGwcVq/yNVzHaVHS3YvUOBwAj5NXrJWXhieaRNiBwzXVj13hP0KBivmvzNA==","signatures":[{"sig":"MEUCIFnihj4hcvjNLY84KuVHiv7Qv1KQm/vtLEWvnlzK0S+6AiEA9oq0MmH2aHDNsrG85nTDvaZzoQWjQuTzmh5J4ZzBr64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIcgCRA9TVsSAnZWagAAGVMP/iHF4AzOiF2n61jDTMp3\nwnhdJMrnIxkiHPH0aQPjPrdyynTxbi6Oyvqpsky/Ws0sjiKsGnvtuPgOtfAx\nBATOnGgsPL85CKqXZej9pJ+OKY44eTILIogU2vzz8aiO+baBJYp3nFk4qy0l\nasIJ+jJa6N0lgjPtJKtKMOX40r7mQO580BL2ZQAx6sKopayqkXHVtmFdnn/C\nvyaiaUwTOKjGrICxkGKFa4jhFfOs+hT6QUXFbi+pho5xtwRyZIUX/l7X1sT4\nSKxaZIlsFa8DMKQyTth4AXezw5nsvfeuHL8Vz1tkvIAsOV3n+3IMDghQX+MK\noggzq0jHIiPCFUx5FoF26sjmT+9whdkMVdKLbJCRdfoPr3XDHjzgSOUfTEWx\n7ndl8zOJGvOB6nAENzXZq7ZKarwbAXalRCd8zRnnx0NKO7O3MEbvdk7AfyRZ\n8Lhz++f6OEG6DQzxQnyPvfYWAyaNlpwNBj0P1qbZwqmnJrdkWQ58bXwc1+tS\nwFUzek4cQSQJziKzDzoaQTEm8dq6Ij8EnyZQ+5iRTJPK5xB1fKategTlgz5S\nNttl0Qa1Grcrz+4hNO5DRv8JoE7vZcudRTMQ/N9sCamIVG7gfgqqJpIGt0fP\nZAw5ksq0F3elzmYPGu3SXY3JUSVihM05zLYnBYzf0XEcGJgau2A16xFxOv0D\nJVJ5\r\n=kSwP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.96a640534.0","@material/rtl":"8.0.0-canary.96a640534.0","@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/density":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.96a640534.0_1596753695882_0.973266116441666","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/switch","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"dccb98c204bcf271a02a27490fc88e983cd46cac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.9f9aac825.0.tgz","fileCount":38,"integrity":"sha512-b1hxsm0S+RQbyxAQ5txZZk/oOytZDBGMW38V7Hi+YkN/tzj511xErpVxcqpuCgxy8/cH4Kkn6zPnGycDZTuERw==","signatures":[{"sig":"MEYCIQCP0iwolt8xhm9SdPGLzEiWK9nfhLOZ/KeKPaR5lTDNJAIhAJFU+79fz2zkOEnpfvobU0Tuy1FErWJBZfnJ2hnijCup","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7RCRA9TVsSAnZWagAAuRMP/RnDdq+l/HKpn1wMgHPj\nDuHp7cSicJ+16etxwL7+UV8tjBdG8JLxO6+Gk77gmFWhILNxYq8woXLforol\nFB812/GItIYTMwj6o526qGcF6YFCqWvs1EkjasFL0/UbJgSKRT4T4bhlFKks\ntpQjk8jGjUNWF7ppdKKGldmyfa7/1F/E7SaCTpOnTLDzygF0Ov7RfblF1fWd\nXJlHWkPylNe5n1YzxzSrlXQsAzQVdPz4uB6TS0WB0OIO0SWLu0kSvwVManwc\nEdAam2vDde9rwxG77rlAuojFX/KCFoqRZFKnOv4OPB2IUBuPyBl/wyrZ7aHk\nj3SQCRXiI0SQ/+L0JQ3DHri8Kh+fnUdKESnkq+UsjFLcYA2dQQZlM47YzbFu\nfTNwxNPUJw4KAj/XhOWauwg3iO0hW9Bo0sU054nvJt+WcEFz/peVWyIwdeIf\nrdGP1yOQnxk16T6/7CwGjUkr2BraL2+10ODHXU1X/oK/AzoWd/fEqkmwTqRk\nPFLf6EcS8JS0J0jflWkY0uvrsfA6OCf0T46JiRImeaYHuP7ICJ8kzGQ/PFUM\n4AFRMsJbBF65ZOVVN3Jy9KOGHQIORocYWfgbF3YtzRHmPU1thDcmy3rEVVUJ\nHjfsSwGdqDVqc+m5mbCnvf0WgLQbyMeDaIpGdhhy1m47fsOB9Mc2ki3r5oXv\nK0hr\r\n=hBEb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9f9aac825.0","@material/rtl":"8.0.0-canary.9f9aac825.0","@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/density":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/elevation":"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/switch_8.0.0-canary.9f9aac825.0_1596833488582_0.5718666948412621","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/switch","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"1215a9c989c9a4a9405356fa0f5a932d99ec0384","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fc65fd00b.0.tgz","fileCount":38,"integrity":"sha512-EImre1lDEfYwlku2ChYLXDX2LOfdzc4pZHG6VHEqiEQJhBDWUkQBvcONEe8XPRqXGy/kbwB8WIRWQUZsO+RmKQ==","signatures":[{"sig":"MEYCIQCptrRsGt1tP+44xeJZJ0MW8MNy+UM3dx7gsufH9EvX/gIhAOr/nghHQbv8gpuYZFU2kKqXiE6GLBDw21EZRKEDw+ha","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWW9CRA9TVsSAnZWagAA4FIP/0C6SU3sHRSL20A7wpR3\ngGiglhgtmVWib2z26Mls3ZJxAlU2pvgX7gm+o8UQToFLsml2dP6cSpWbp8Jb\nySJ4yANFERd0uI0n+OvWLmjqokisGCGu/ILv+Ig0Tl4dgkUaxMkvMTSL+nCV\n4o8uggTQJRtNAM15+fthkgITXNLobZoM16tCAvsl/rN2K/+zD3louonEPp/b\n2j9mV/RsmtyCGQY8UES3MLe4fzzvrZ39sBCMBA94X5Phczx8EFSp6UglEVuz\nlxSEtqgBHNEdXvqcRz7jYyn/ywSHm3yip00yhi6rICFBzVyB4Mu1hPs2OPDQ\nr6ZkD4OGiK6xG3J/P1y+KZPItWCfQ1gCsj9brZJiY6wigLUBKPvvWa4NeRu0\nAyqEjUizJVCmci96LapQExrkVGO98cM4ymsTaCLiTneBaxzIAQQOx553UO3C\n6SqYtv2ZUyDTI1QVyGusJG5ZypIerF3A9SDomCeIL9+7sEga43nznIm4gw9c\nJkz8PWXQzEvdN7AVwuT3a1bxUjDrRfvnljZBtMuX9y/SeV9NtiGciXQiCqkw\nRjyK5kLx5F15ZGIGBKz4Kf6LuxsFvISWH3mjKgw6UW8mwp3C10GSGc6VSg47\nqSF0MqAGwtaR3JUg2dpzFv+AFttshmDqpQTTU/eLwast1BYkFZXfQYwGOJnA\n870e\r\n=xj/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc65fd00b.0","@material/rtl":"8.0.0-canary.fc65fd00b.0","@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/density":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fc65fd00b.0_1597072829037_0.7536535774731612","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/switch","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"6ad1ff4b8bc65a9aef221230cabe0120fb1b37ef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.02e372c5f.0.tgz","fileCount":38,"integrity":"sha512-x+131M+6RGsBWxmO7ZtyWweN4GEe0c28Y/LHdNABKjqzDChogTYt9kKeJCva2NtpJ7kj3I6B0xuscnymEn+nZA==","signatures":[{"sig":"MEUCIQCyQ9y0mclFDs1WdqUQSCWIFLGHE+SeNH2JU9RG6BLNzwIgbi48AKg1QNBBx/YGV0Ae8HRtlfhFz6P+NW2swFZCzuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxbCRA9TVsSAnZWagAAN3QQAJFZoixPkT+vAeeIhhWo\nqO/qkc0f6TlyA80wfXdQrt1D01ZubJleuOGysug1S71qtnPiMaE890lbAmqa\njNkL56G8JXaZLJeqjy0Z/Vjh6rOSYU63bLSWkmYjwHIyNrtC7FRwKWD55LRo\nw6/UADgg5BGuesgByihi80+VehHfOdA1E6D+qVqjK41A6R/TpDIHhmby1uAW\nVDKe5Gy7fSvjIGj/CoxEH3O1b+Wrz5gUUQV91EJguFZW1woZfxrgO68mx2fd\nx0xMEfhsAgtjHIYQca705tlU8q9pzFPyZwl1eqvLw1CJijmw2jYe2cYHsbY7\nMhfjKlkKKa1mErLytk03WCtTfy8UNiWSpMuoqSbunh+oZC0IbHL2Ve3tf5ko\nA/iNaqYPzdTjsT7kHuA+gn/LqYW2EwSlbE+AJC/DESi5DLLbov4yyqY2nbYn\nkNn/uyaB9KtZ9rAOOc58VczPuR3r1+8c9Rzzuz//i7a0LZ/oRRc4ojmn/P48\np+TflGs5gYWLvkHj3S96WwXj5VrYxE8we1yLR1yYO5OVoJs//r37ahCvZsAq\n8a/ZE9XJNKx6Svp0wdemRXnmy407WFdZfWB2noWUx6rvFAHqc9d7Q5ncLm4L\ntGwo/f95GrCcMDTgemiXWAGt0xR8vaiJRXMFp06+1+gHR64CZ0k6CQxYhQ0h\nrqm3\r\n=43PR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.02e372c5f.0","@material/rtl":"8.0.0-canary.02e372c5f.0","@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/density":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.02e372c5f.0_1597074523042_0.25681702117060157","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/switch","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"09dabb74f2ec54c01bb10c6cd9e84838baabd76c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.66669e3b6.0.tgz","fileCount":38,"integrity":"sha512-EiHjH1QBwYmPeOBEL6Gdj2nXKb4KYZ//JdrIGNfUzIJQm4ZE0zd3CgPMWeIcDVytO7CNzdDSpjlT61meHPtg9w==","signatures":[{"sig":"MEYCIQCPRas7LiPIxcYawTImA8yhaDbc/50iHfJXrIVgQlCl5AIhAMqptyyJ24Gmust2Ekq1CSUAwRS/c2zQEdXZHarsyvor","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1JCRA9TVsSAnZWagAAxekP/18lHv3lMceaUW47jhzB\nxWl+oIuPqZkpzLg52vdyLDpiAFQP6vtn/KVNTV5I3ue7I7SKktp9SJgeFygB\n6pVpg1rD/0Hqhf7hPQJmJtmJeXCTkcSltkzg2CK2R6fdijeHWQ6GxGcvvE0T\nD4KmN5NdMT6/gN095hnC8W8d9wSc4qMU+9h4WbzeraHUeaKZ+BPVh88wZBXH\nkXr1P3hm9AxcU3zEr4NW/KAmO5zfeCIuOrXNUiwqZGPW73Y+m2eFfAUKMFJt\nKfHAd/NUrV0gMomdDC4SrCVOFZ5zzmqWRTWyYZ1XB6eq4jkvTnXSylo16DtC\nPVD2I2rjP/livrw+u23RVCrv50+TgQ04M7k24MBZ1nHaiRQ8Zhuc1wCN+Yt0\ndJHqi73bfWa8oYRGN4eoheBOTqwXthlsvO28mUdsljJ2XnFxROdRpOGKwMuA\nch5g8CI1IXVz/YPMXUMAftvADUMr/DR2yQ1A/x/O6tOqoEDDCoeCNh7LQGP7\nA1RGcOBNNKkgVE1FFaDilQFbMKa05CFeGbiJ987+AackHMPgIcNESIiIw8+Z\nMc2nfdFHPVzTFU1ipYSMB1fLMgYVtRVda3YJYIJrX3KkpwyB2+2sFD7WscXq\n8ZzUWOi09AbNGPr5fi0r13ikNsUaN5rcX7k6vwC1bVi8Kvb2hyJPJTS0HGa2\n2oO2\r\n=Uzx7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66669e3b6.0","@material/rtl":"8.0.0-canary.66669e3b6.0","@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/density":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.66669e3b6.0_1597074760861_0.5343843324966633","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/switch","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"aeacdfa6a9dd978ecc4c115310c4b8a1cea82bf7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.6d1ea9761.0.tgz","fileCount":38,"integrity":"sha512-PXBa2lt3uvnRXcjzvYYfri13+7gjC1b6wExnMtVGLoEkI0TIBqkD9gq1YuG/w3P9mK2FiAy41Va+zfQ1aOqL6Q==","signatures":[{"sig":"MEUCIECjOt31PSFuEQutY0qKfFbC0uuKI83Hb3At/d+1pGsgAiEA9y+IQ0MB65u/hjbU71i8VryQkSF8czU1anFZB4fesTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqukCRA9TVsSAnZWagAA1p4P/j/3UTn3i+QUVYhugJRy\nh/EOokwUpRmpCHTERfLLChH2V7u1GKmOmskhRgn8YU5BlZXumVQPhE/v0GC9\nUoTS0joWBArJf0ERyKdtsLiMmelKIPl5punq+fG9iUXPVxYhpfvCrMwqMCCJ\ng2Wx6HLZiEyPO3XLe2wTfnLRk3OiyzPsKBM4XPcNQvRqk455Oe/wXSfe5oqy\ncPOsfMNfpP9FAc1XeFpUiGLk9dOI2WXjVeKa0sbWpVKOQqlAvXUEfWyjn7oK\nrXSsAvZGiWiOKStHRiXt1OsN93skZbYEVDo9myZU+7EPchp3MggjXYaxdsmZ\nz7/5r6YgrPkDQcwpdAqld4FETeF8CoqRA/kd0hoCG2z13+ISD7DcwiKlXzO+\nP/e518e3lj/wbEBajnUtEEoE0KngUBhIVcnKE0G5+cr3gWbLVdtSsHgKjFeE\nrMCXi+bozRkUG0eMxueAi3Jj0vSZpj0XrKAgifCnF3WwGXfc+C2/fcvJHzf9\nEDXA6Ovc0rkYoYFB1USymiZxAWoaL/i1/61lgMfvT12k4xSRyz8x/716AC53\nG6Ofn0SW4yenRD2EbB9HtzoNhHdxPurS9YqgOnViwP45k3rkSBFoOOd6OdoS\niGqECxXz0iWRLbh+QD1gCnVgrPkMJQo5qi8Z/v1Jv1shMaj34nW5sfd83CyW\nwXGF\r\n=BcTi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d1ea9761.0","@material/rtl":"8.0.0-canary.6d1ea9761.0","@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/density":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.6d1ea9761.0_1597156259412_0.5336243914210468","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/switch","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"71322533cefbc2dc472fbb5bbbb3f8ee6a00b340","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.79414bf9f.0.tgz","fileCount":38,"integrity":"sha512-0/Vfk7YMCWwqMCgmDIoUnLm9VFj43PZfs3cT7VecHsFQ+bhaYOtqA0Q3oyYdHS96EQQVCjZR+NH6edW4f0PW2Q==","signatures":[{"sig":"MEQCIAMAseUxqCQIHxJdhOQAtYBIUHY/QLy94uTfixbKOMhGAiB85LOjLcK5ykPezpCPFxh8VnV4h1CchvqxB8km1v2kXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusmCRA9TVsSAnZWagAAhYkP/ji2OQlfLtBE3oh736Oc\nVC21GyxfGuUhSTm/XNTU3aBGPkmcfA8E39piYvA2Qbk/B3NEzqHeztWvAzvQ\nkmUvi7adD3aXmi7OGwnJ/mKRwM40IjefmYiEXVPBLfWCmTslptlyWT1DiWL+\nIGQYmb7l2ZUCGswSywZzRYZA4Uwzg6EHYlSHj2J6mb2SVuLIZpMcfoDw+kDh\ncX4GxMnIsr/3trSXWaYZT6AJ4OSl44EoJ8Y6czS+RgcSS8+RAdSjub8a2lD8\n/yQtNivFBZWgHLmkecJWufM4AZO8dqcZ5BsTylV9F3vkdb19WajDrUX0G9ar\nk10PEQ6ewrkJ3fmi7TzaUTh8V+0h/MgX8qh/A4JraZL+cC1j/tuxTSGSRRNS\nH1fk4ki0KvZ8uIOnWJegiPzIDxEkIiHmdtFwJYTSX02xTjSVF5DYIXPOVVxI\ncZOE1awxzam+HECCmRcBKS/4kuCULhpKlEPMoQCOu3jS/E2gINQralhS85AV\nCLHwmveIcvOZA3/0VP14YjH75R6fLhj88CwEF3RkGxtQJBNiuUELoQMRtFAK\n5rrpcbtAm/JsdI90nvFI5VnB+zYOkQEBVExGQkpIorlSq8k5EWeG78PThclc\ntPGxZESy0kwA5d4N3/cZtPx9cPndIe5I6q1I5IaXA65KXCDIr8E/Coy5X0ld\nvUdp\r\n=0PnA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.79414bf9f.0","@material/rtl":"8.0.0-canary.79414bf9f.0","@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/density":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.79414bf9f.0_1597172518181_0.7173429047928961","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/switch","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"1891fdf636b7b29bf0cc8a0bc0e8f0cd4c12e0ce","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.85a5272df.0.tgz","fileCount":38,"integrity":"sha512-nd47mko16pqDli0sJeLDSQDlcBBhl3rmvKvfc5+lBt8aghHzI4NYjFQCxdpwFa8FNMMVYwYosPFvqBj3qk5TlQ==","signatures":[{"sig":"MEUCIFsdPXllB+dBKfldSW5EMaGljAd9x5sQIl7mg1jmVtx+AiEA8xoEpuEGQDrgeg/GOhHFEeXE9WCCFUxHuxXuuUrSoss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqzCRA9TVsSAnZWagAAfeYP/3fkSG+fXRFXBVKooQep\nljwJQ/Yutez6SnXOX13DIuq+piEn2rWrG+zYqTgBG8DGVQW/tAcpGaz4KBj7\nO0LF/UswXtSzMA/H2ffvi+Zvr+7nNl3jjxmyrLBzqk8pvC9P+ftzGmruoEjG\nYIIyZ486tkvEgUPcmMpn2o/FkR9k5YnkrxgdpN1p60Sk/d9oZJ918l5wPzRO\nkBb5I/clwsBkwb7KJnumigB0JJ4bcpqUcn0SUb/H/g7K3uXtq+uvbH3A1uwg\nXx5FXLGblxfD3RC6RUO7JDYVT5339ygdZeIqR0mgJo53iRy4jXWs0Z1tx0/5\nSuXzzXMhCud+ODtgwaNO64hQy/ikrz3VrSxRtIanin5ZhD+9srtcJzmH/ToT\nhikirBQd+Zq7xWICyXvEhOyYr9WuCWhAetohXijCql8Qcr2xD7OROBejTuVx\nQHRxMUrrZSaYwU8Jym7nt3hwi78gfaS0Eew9fw+mbJgcVAuRRT388lnhQ4Y7\n6Oj9KMWlAZbedaJjPXDi3tDExrpOaV8OURFzk78Tv3Gbwc92xeqH2QIt2HkN\n7DgWGQQ5yT0iapu9fjsgfTNpV99zMfpo+AABK8Umk93hrvkBuddysu9wsFPr\nHfvalCDKeSzxZxKQJx6CxWa6YWqY2RCdTpKp0Nowl7krPmuk3pyAhlKPPpj5\nAgTh\r\n=qyYv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a5272df.0","@material/rtl":"8.0.0-canary.85a5272df.0","@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/density":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.85a5272df.0_1597176499178_0.9693866843235881","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/switch","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"1e2ec050819ff5fe1587954c0fda3d05e593e116","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fda053eb8.0.tgz","fileCount":38,"integrity":"sha512-p33zv5HN+ZOTdEPN2/gHfUmimHZ/dIUJ70Jw2/ovXsb+5Z93CB/qUTBe806Yoz7idvduikGth8+IcHj+kzAY+Q==","signatures":[{"sig":"MEYCIQDktFBxp7KFrHPjzR9ESRDpWRssHItFR9ZIlcNU1B88JAIhAIiP35ew3y0llgh7A/4rxFSyjeWwdwF5I8f4/8Np39pg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEtACRA9TVsSAnZWagAATwgP/1VVI03iYM/j1E/T+3YR\nBy37OxWHfYJBjUzPrWV7BqOmqIdcT7/pgupB3QiJHGoCbrhKm0I3FyI2c9FE\nCpOLXcBeS7xTpoigUymwL5vcs3VMAKaURgravEV9ikLBfURJyX0CA8ObuiF+\nz8MLCjMvTfIFvqAwjVHIe1gSnwE/jAPZjpZ6RG4/yWRxs5g1dcO+hnDHvS5u\neFdQ29o997+XVqM4dLNCw00Gb0yArOuFUBlfbQgwjP8FGXge+oNcXaFozOb1\n1bXrV+zAVc7sHq43eleSh0YqEez5r+Qq8cY6fWRtCVvjaiKjWXS28ulZOxdM\nuFYkbtKaadsxS+4dnPsULDNfvb90Fspv0PdRwukPzbcqjkwVRcPToI+rFoCy\nK5kvdHgw74en4HDDTuCc9I2gt6l7fwpZ7c6HhGkSJGsUtZrOvjz7RYe3/qPo\nY7fNVAxje+k+FTY6yKvwU8Qlki1k1xi+wX1l9ikny9QLvtz1nixCO856JFxy\nnKtbRFcCX+TIDu/KbHuRG4choDIL1B/o8JHY1ON4kIYSoYmcCr+msn3uz9Pl\n3AxbgkTHgwdUm0Irg+alCy16I2mn3zGxp7E66bJfFiUX3wt/bC15pNgtGDII\nPYsvYRrvFRN1wSBTbr5jHEP5xh36mE8HEZaDKf3sWf/6jVKf/qDZWAEas/Pl\n5cXf\r\n=UFf4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fda053eb8.0","@material/rtl":"8.0.0-canary.fda053eb8.0","@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/density":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fda053eb8.0_1597262656019_0.06465865089488188","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/switch","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"c18442ace0d6cc93f54323b295dc9b38c34fd479","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.760873445.0.tgz","fileCount":38,"integrity":"sha512-/8CXeU8FEr3x0coyQPyJtS/IABXUi8GR6IIF5DTU2+t+apLx7oCDDG3hndy5yYS4aurxZMqbYE6OgL2C0y3Nfg==","signatures":[{"sig":"MEYCIQDxALV3oY/SdxqWnwa1ksLr+W3hh7Rlcj3wqqCGksF9mQIhAI2gwY40muI/xSCalKwA4CPnwqPgK9fesnXKS6jW4f4I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJ8CRA9TVsSAnZWagAA1X4P/jgmzqSV2Fk2Sbqh9fSM\nH/t6FMLHZVPUUhOZ7cvVgEtIEK0sQ1UEgjZNJuWGUvcV3X37+DouBwMHeQ3l\nUjA8dB+YtVWRROai73t09R37mbWRV5K76nSFgFTUwih6Q+joB8MBlkVwiRXT\nB+H8z0dM0LgMk5hmCU8m+yW+rfb+36ieP1kddpKrmfusexqqNy3NyuuqgCjJ\nTtVzNf5CrZf+kKlwkgZnEUtZGWpLJCJDhlzZOnGJXU55b+cTuQ45S8HKmeRd\nYyFIIz32ikaBCGWiQVR9sTzev40gI0hshp7gTYhmoBXLkx0Gaz5bfkd0kuRp\npKVD/oBHNYKtOeEkqgSfyBl1Ez1eFqqHIT4SGoWBYZJQ3ztizRinq7Dqr5hx\nVNA9AlNVq9SxtoEzZuAIepBgKWa0aMCvxiRBMXmUXHEaQ4Llu2LLdZKNFuBz\nCvKdA9d1XNoCWjZHpO5KcUFFxBRS2OTtVl7O+CxWkdT2Y9ikUgYwJ1Ch5WkZ\nXzlvd6PeCo+m8UeKNuvV3igf3Ik4eKsHAXOrRZoEDyYksS0zJ33lK3micyUa\nI7AfiZHAO1hCpQ0yd7RUERv/YXny87+e88iIhl3JLCXBgnvUQcdbpWCnS3qa\nYvdG2ntjvBBFWLwzEw7COy87FMt/N7NBk5lirE77GfK+RhE6uXpEafbCGqgj\nvwAF\r\n=0/lk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.760873445.0","@material/rtl":"8.0.0-canary.760873445.0","@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/density":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.760873445.0_1597268603399_0.4584635145071234","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/switch","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"de04e308d664ab885d23d88a73d13a3ebbe0e9f4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2f4711a30.0.tgz","fileCount":38,"integrity":"sha512-tizdbPsZU510ywoXcW2AY+4BOvV8QAO2pYWB1xGmpG4gg+tp9vv6UA+ccI4RGnTeaA19bFhNueUK/nJfOa+GqQ==","signatures":[{"sig":"MEUCIGxqkljbBfAKG1n4og89l5Vv861X2zz16D0QH28tDfnyAiEAmqvjNgEeiJTnnpWgNIW7V0AVa6uba/IceUjV78EcH5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTQCRA9TVsSAnZWagAA0PgQAJ2ZzC8oDg+Gicr04xEM\nx+jMyXphgm+1LcTg5l2uLN8mKGq+ebEs+qCAwAGyLZNVVBBYPqt8YdM5j9g4\nnh12VAgBeb/x00t/Cb3zASlqug9yX5IBxrGqSOVsyd5C2BPTYOgPnRP6jZGx\nqHfYQL5kRVL4Pp61SsaFxbHMNYhGWbrdEYHQ9FkuBmxr+qxC8fcbf8a0z+Gg\naAh0c19N7djGAwcUB/jzKXYoryc+7AlHjndbIhwjgO8Zp3jeSJDUz/938cw9\nXXfACRpJGvtx41jxsukpmR3Bv2TNOZrCiBGJrhNyNLIRJUrcNvSjcQeAfBu3\nVGYFyHYBWFezHch7mnpkmk0vZ7U3MZpO35fA7xgX4/QHRVsDQL7oZ18Ki4+H\nfMFBzobFcJmUjv666WUvKR5StKXQw4nJMysppC4Jjk0BOVZ83tdxb/UHBgzX\nkOZoW62HaadsXUOx2nVS4NinttdyRlX4UACucy8cZTvUmhHCV/NrdPGGIA6s\nSb4/tW8oCiMtsCtf25+sZ/a+HenlD70vSU6p9cQjxLnVCxIZirOwtaOC/dqj\nkeWFeoSKdjIaw2kMA7FKHCpHCxjimQwwSHEce939k9F+PcbbwagHSjupO0Q2\nsrerW9q5jS2iRiwrIQs8O6OkKwXeN5B9fuPYbe7R7shBOyUnRACgfmLGXMkm\nrO8V\r\n=itCN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2f4711a30.0","@material/rtl":"8.0.0-canary.2f4711a30.0","@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/density":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.2f4711a30.0_1597269199825_0.31036666223017284","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/switch","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"b5891e6377cec595de3a054677f6265bef461c98","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2d72f3659.0.tgz","fileCount":38,"integrity":"sha512-9zLH7EWGU6K9OqlR4UzVSY0b7jWH+Fe/4JHhkr8NOXGB27fP6YIIAE2v8sxJbt1k+uy700yTn1FJqEpIJd1XDQ==","signatures":[{"sig":"MEQCIAnFisVsIHkpl5UZ8AsS5fOFsJqLQpdT/+R0gGmiiQWcAiA0TTAw4p1g8iTL0BjHuFxNjIM1e/OpfwbkQOtdWnSizw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGaQCRA9TVsSAnZWagAAnbgP/0QEfjc5fmr74aubRLZ3\n1pc3ihcUfTQGsg1L1dnsiu4WPzbIn5Hqv7SW781yWnfgZsSIU5nGfUK/phc8\nlTDP5nV6XazD2FtQdOZldS8okPB8nzj4HaQlO6uFOUVbdWA4T5OFrBgAX4EE\nXXGIJBsmAD1+EevJ2KQEqJnQoSQa1eISaLPWZPBOjBnLkJA9cMP812SEAffR\nsdCAB5Guk779vYgB5diyocFGFavE/LtY11hFhajlKX0SI7deTJ2YP8196L1e\nrrUfXck7Zn2yu/DzTDimvwiB9Rf/87YAIe6t/uR/SVyo16QQTYUQocWFRtvd\n+Q30nNrSuk71sA93ASz0N0r/UxkRVLpcJhHDDhTCK10fShdnNOtMZ7IjQ6Ic\n4rCmmWeWM2dkCWUzxebAMl+JWc9ed4VXBNzM7aUbqDKHVkz+0keXeIrItHDI\nAkHCsiNZFSVJ6j6plxvHpj3r2WyVHHVSFeB4mOMSiqILmIw2zevcOszCp6u5\nFn/yPCQzZuw/jz14/y6SviKa19oeC0isSE/6yU7+Hh8zrXTMXfZ69kQ2+w1m\n9TN4qWx/+R5lbV+h7HZ86OWo5h1IyBD+gUYPyq13gnepu6MEf+IhL3+Qo28w\nWUdZ/C9jjaN0YBdI+KIUQsir2ZaPWBT6xfcYwdgmJhLI8GG0fkVV1ORSYRY0\npAHf\r\n=DC4v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2d72f3659.0","@material/rtl":"8.0.0-canary.2d72f3659.0","@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/density":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.2d72f3659.0_1597269647515_0.3855196429129446","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/switch","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"c96e8e0fea0440b55adf9b72014c6abc5a5d49f5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.1fee70a5e.0.tgz","fileCount":38,"integrity":"sha512-4sDlCjkbv7CtfnjaV4DGxTtxKMO2LGGHntiOSVtlu6fe4qgxsVyaLT0Od8lmtRPX018Cs88+v3DBJXdvvirEvQ==","signatures":[{"sig":"MEQCIDPFPUArKXVvXJlajFHxtpptVmsL/sxFmikXXwYyBBMdAiBSezDCEj78wOXE4fiVJ8c9W0ipExAD0b2VbFgT7WFjEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHsxCRA9TVsSAnZWagAA1GMQAKRa19BbFQAclWTOF0nn\n3kiUHNM0LdWRnJs4mrVjtUUARzAaOd+/Sw3OIh1bM6d8W+bV9zPK4N6w2TtV\nC33V9oeLLeAjJcd+UCVxihNnNzwCNdfZSpytRVRcrpuKqti8lNb4FaockP18\nIQrkOLqVa2T6h1R1EKMk0ZyObn0u8yAqnGI5ktNVEuh8aiTwd0AXmIv6ghiC\n9Ejn9WcyjstSQG4SOztsIng9zawErAhhPasc55lCrTtuFuqqT4D8YaRzIrsu\nkWP2GOOFJCb1EiqM0+xsUiVuGbvFutg/CEW5GxZ2myq7sezTuIRk2Elpxpiq\nGhFLxlN2ux4OdxSebf3Yw3TvlddUmXmFv6zpRPsxq8hARgxYX7PBtSqikFJ5\nHPJwxKS1odAYWadodRvlOl8N8dSBGoDSJ6IhpgP+iZNDCU9h75vnvv8qCsnL\nfDP0aFaeRBcgw/HQxCrE8R+cKy9nmN+UQggfDZovyzAAEU0vHeEt6vhZ5XgQ\nzVc/qxLwOo+X5u29momQsULQDwtq30Kt+WlwM3YcxHeP4rhwgC1CFKzIjyHH\n2O8KKUDiW6qafuUisiZHQl50Ed+nVPMF/OvBdePMoDKSVFUjFB27/Aq+poMw\nfeWiuseJ8d5y9PlzXNc2pcKuCNzanyMgOILqZRhWi9Y905So964/PyO+5fKy\nUCOL\r\n=TJcv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1fee70a5e.0","@material/rtl":"8.0.0-canary.1fee70a5e.0","@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/density":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.1fee70a5e.0_1597274928919_0.05394581507536356","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/switch","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"441280ff94978bae4c8b1bee543a30e19638a1ba","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.023f3fa34.0.tgz","fileCount":38,"integrity":"sha512-+QURV6bB1GECebYU2Xpu4DcftoVuLKGMSF3q1Vsg/di3bzm6NoR9WkFfmdJcWrsaQzdoxBYynoSxjnvyUQCv7Q==","signatures":[{"sig":"MEQCIHS5qODLDUu+9ZNbO3O8Tf2GTroAwXkpXRL2dEZi4jOKAiAJuRsBQK66LHplFtHgW7+szUo4RZVX0uiD8hMcYjEIzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOACRA9TVsSAnZWagAA2L8P/0tvDJbs71X8vIp1uCLl\nqvrjWQ/lN+FQiy78S98VPEB51pswphz0fS3EwKoA619JvzkJdEORJgO/ECTK\n2ZGq2rM2h7zx9ChShweDGG2fVvRa02oo6G0+4cC01TfeiZbmtLXfHNFcRBBS\ngFDJ+2P+ZK5t0eiRTVsV9g/Uckmj93xFtyHki+XRs3FKnVhj9Fs8D2+h1aDn\nsjLpzO0A3NxTlcWbU++ZOZlfa77ORVFV63nb1DeZl0OrAvTZih1bMv1QED3F\nZirvvdBA4ePAN+jND7bVu2xh5/W1ZDj/qAYDoywQ5aWLMK+kSIjonX2d25Hx\n8xig0cC6oktXmBsPl0kYywfVP2pYKokV+0KpBLv5EJI3RLiirIKyxAQLSMRZ\nz55M5O16WJTj2HsWRUCllyWyysGgS0Ekchc6RTAlSnGeKmEblu5TIYd+h/px\nnp7MFvOqQNyGQEqxzJ27psVoOzOLYY6i+deme9J0oCaORMbk6M3Cij+5HNMO\n7qf0rPQhTPDhqkzQrQGU6cUr6Xc8jGMA5ogkHGtLPvbTK9JgB/UqjLauaGna\ng/ub4f56R/+DIf5c1BYZvNchY30umHZRBbtolwGoXgkU1an/rsnH8Hktfv2X\nTfVPyTLQgYGM8XsGqJd07v2DUjtyXROiZQis+If2o7AGAnrGtvIRbR7OtVsM\nDG4/\r\n=FSND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.023f3fa34.0","@material/rtl":"8.0.0-canary.023f3fa34.0","@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/density":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.023f3fa34.0_1597281151555_0.1448862520731471","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/switch","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"46ea451554a701844d7afb1b48259fbe9fa6f4c4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":38,"integrity":"sha512-yeicucOlxFnSwYfww8znlFvbMN2NcAduLfqM/cdkYe6cJq7Rk9qEm4MjkPVcO5ceKhKd37ByV6PFGQsTt9PNYg==","signatures":[{"sig":"MEUCIQCr3ctWrXlSR4M6o+TxJpPtZcG1KGEwk/kbEgyQ9bCMOgIgTcr5EI61YjIKSXr+lOb7RDjpLKye1SDfE7vI7cPRYG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdjCRA9TVsSAnZWagAAbw8P/0hJxSll5iost66pNhfN\n1KLsh9gF8+aY7zqka9kJYS5jXvPlJTDy69tr+tqTNU094MbT/BHju/Hcy3lK\nlBcbut6mtQh+oC5RbDuBslf8XChVBn3zQJZx4gbD2RruvcH4Dqk4OaTBYPNu\naBJSZsRX0kJdgFypgqx4JO9J0/LMX5pqyYpOsastNJejX74zTvBCDk03Abzi\nG5/UFwEtGs6kZ83DqEzdgK8eNo8I9c/vyvX4x7ibVOtH1Jr1nqeQGE5vFdQn\nR4+I5uEehmUakqg3fin21EgeCR1AnxyfCir0KezaefjQQHTCJelG979zvoZ8\nntSg8LtZ5+Dgv9EZ/S8DWkm6/gSGFDlGuz1pfPazbo3caqDHbRAHGFChgN4j\nGRb1XdCSJbK/KPXU61WHNBiOw5qIeV3XpijjhhM8gBMSPBmVRS/5bCIp6y8o\nXR7bt/zC6qLP5VNgc8pELLuwVuSmOVF08g+YPvxyX///vYNBWEtG5ZKhFjIV\nuo5acuRTIQd6inAwzaO65ZCaHuKwSnTvoeYW/MxSbcCWbUy4/XMdF2go5Oih\nU871vlAdpf996QfrMHGpSpW4ghEmPCMXAjFCXsF5IPr1L+cneB1rmu7LjR8N\n7dhwSJ266WBVfcpytyMBS3ce1pSvqlyHpRzq4S1U/b3jPLd+I/RzEeAVjGPC\nzwk1\r\n=WOQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@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/density":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.80f3a9e5d.0_1597282147155_0.5150932908093455","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/switch","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"df16583f4224ed2dfccc82b060f24b8db574a96c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":38,"integrity":"sha512-ajXvutIOI4LJUC9eOq4gqjm4lyn2i5BJmHs9d1SCOUeK+hUV5KYOHI45QPy/NCUFzx+SptcXWrwu1Wots9BYOQ==","signatures":[{"sig":"MEYCIQDCOhvNmwtbFADMZd4KejUB5Z1bqMRL4y4U28jkhTc/cwIhAKu4tGVuBcOfakEA5AulBCdi6rxxaQp2MGKrayJZEkhv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP63CRA9TVsSAnZWagAAl+4QAKBuvri1x7I32CQ/SeZm\ndeezDUdSNSPp/CNLI5LAXkJWAQD5tyT3b7MjD7tedE+iC90F+0Sl5KIMtCpC\nZxWrFHS47MZrncSteq12vLT26fTiUS8vTlnxW5+ddSRNQql3RoslcmHPQWS6\nGaleRegtCqfpxYPeaZZas6aMZ7eUQJaI0IjlYd3falFUWA8YqOt3kAa3zXor\nIXX467t07uOqhT8u7Lg17Y9pPR03CNHVYTWnS0K7zVE1ugdkDGzH0G4D7Vft\n1m83Ory8dL5pWl0uTpVYKSAjm2FAVKpsBMW3KtCNaLi4TJArDHbHGFDxhRom\nIgFBwSUKA7S+/MghoNqZwR7Esr/1dtiXr2Ogdt0+gQi7WI4zGq1QZVjndMqz\nSoTyucXgjdGKAUuIBTiKOx/6XngzB2P/cX9ILjiiAHVLhKAUUKpEdrcA0rKD\ncnwKwhrBNSjbcq2dYL2nw/Er9p2G3m7VZAae2lhrbp5TwpX1an8z/T8D6vYt\nrRjW339i5fgDyeUZQIRygBOz3NJ3GVmZl9Ig6UsOTjdH9Lx3wkSwxzwAHmdB\nUxRjLHyRn9DcM3t98Bs1icSZ/1t4PosMLujwNdtIQfHDwK6q1wV6qNCRlzOZ\nlhuMxvh1++WkAOqY5vhVCFit2yPWoyQgs2kM9FLbbk/+4tE+tso1jBZ+rAQU\nUQIC\r\n=tm7s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1dcfe97c.0","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@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/density":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a1dcfe97c.0_1597308598970_0.20527330826408918","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/switch","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"2f88112bd6e4a23b875d3220dfbdf0eef64ce490","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.af332d5be.0.tgz","fileCount":38,"integrity":"sha512-JqUW+THbhhKkxquupZDTXccqhbw9V+IxCu0T+8bmCrrcQmxi7GUlB3oY+z04sPcKDJDdnMVHyZnXFOtzbfplWg==","signatures":[{"sig":"MEUCIQDI+jLorsRKP0fysNwbMWwwfCdvO5oN7AlE4YX0edzgsQIgL5pmtTm4pPf7f0VtNrJ6CaGFRL+T25cXJ7ReB8E99dM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3rCRA9TVsSAnZWagAAvE8P/0yg9P0vaUky5ACgO/RC\n6hftRVFYSlWS6tKlmc74O/4rNoO5n452lSA1ctIRzxTIFJTHlb/VpiVLIzC7\nNSIBSvxiG5VTF4BnQInMrWmxjXW05OOlQ8t0CmLxE2+80HOiaH3RRkAQL0M9\nODNkOovbbweXuNjVPlMiU++PKqIN65B1Vpo7bma2x7IA26DPh4r3YtZ5D/y+\nZ6OdficXuscy5QnpmS1E4A+aAEbSf5kfy3X/upiSjIFUhVIsk3EYmmUF/U8C\nS9VhprIknk9TdDa/5RJ2wBd0skUcrDnH4vQxyxeyNxtGvBhy6oc+FpRk4S3b\nEkcuauGpK7Ug63FPI0Pww1xgk0RTSu1Nzrzky4XBs9wlcinZPQ+QQLI5dWI1\noD0TjEKZbu2sMpC6vjvGxBQu0Otow8nu8uCtxqBPrfATsgjTcsLmdiI2PNQT\nIqbP7BdIyMbICkLxlTUZbEC3yHJXVMpQB871mWCnHxXDwX8zW1iuQIXg4DvQ\n7w00z7urSLHopc68z/IPbr3IOww1Ccten6b6rWLCwubwBE2OVCBVsA0V5f3R\nrLYb1oSDpDocX+2s7MoCJ0HJmxRYnh+PdSYt9yMRGYyc8zOxkCBcK13u2K+4\ny/IWZgok+XyiNEQrumeWrUHHgWpNMdsVPIC0N+9d/l4iIfmEZV13icjee1gZ\n6tfC\r\n=x+Ho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.af332d5be.0","@material/rtl":"8.0.0-canary.af332d5be.0","@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/density":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.af332d5be.0_1597353450362_0.41515996011148193","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/switch","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"9985665a57f0f7db5edc2e2241542e198a9643ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.7dd4567c4.0.tgz","fileCount":38,"integrity":"sha512-8739jLTsT9CdrwRlvc9L3iD1TgsgzGTpTkIw+krgKLxiDS596S9hUQb5ZCCGoAtr84QaaAGW8LORZG2ocZLVEg==","signatures":[{"sig":"MEQCIEPUy20NndFYWxL6OG9Lee89tNxJJDAhKBwu7WZ8RbQjAiAXntoUjMIP1AVTBxti9vGDVH+bZ1ncTsTTDEIk3WIZAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/6CRA9TVsSAnZWagAAEJ0QAJcF8e/fHsgeFBcir7B3\nSA9BZwRQU6pggQRZJFeP6HJUTikQVVYKrmXbWHGHnRaLqWZKfCVty8SW9PDH\n5aUcRVe+r57xT9L8K3sQovaKKf8lVCc0fPkkqSNlkSe/ANrkQg8dPBYVbAZo\nFfhk4PntPoRLUPW87FeE2M+yiyVQVQwf1Cc0PldTvCGI+hS4h8xYM1IH2CAH\nbQaPoeZZGY/OJDbHxhFv0d8tKMUsydwInfIvDfCZZGmDnSu1d0wLazmR+R3v\n6Y7432wjdEtu0ANkddrKg6U4oRc6i8WHaVQLhUMwQ9TFTjKeAHJw1b3R83KG\ngi5ZTjO5tX5KoMYPuHygywnbIQ8UCcmU6oBN+mX+NPTT0tORUc14HX/WChiq\navwnmKXnxbFtrKpcjHn9Kt+sTnAYecYREHO8wstGlkRaUML6kG4j4Zn6y7Er\ndbeUj5eIWZkwXS2aR3DTUR7er8zzmftB0660dR0IqY0a3MH1ErCfYz8UoJpN\n0yC73cNr+yJK+cLvCCqDQaM3XO5830z9yjhwouFCQyH9hwTXYtI0w2vXWVUi\n3zlO8vlGULGy8A76yqH9Kj/uBBAg3cfFIS1BBA2CW7rn6aE3MTVk4wCULQ7G\nmCmXOuV4R3BCo8imQNrR5TZ7e5rxOZMhZY5NYgRmCnVVYp86xqgfQ/yL1Q42\n9/Xq\r\n=Z9qb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7dd4567c4.0","@material/rtl":"8.0.0-canary.7dd4567c4.0","@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/density":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.7dd4567c4.0_1597366265352_0.2433428814458971","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/switch","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"d7a4ff0625f3849f4c34c10a54d1c9cafd8b3d82","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.ff870005a.0.tgz","fileCount":38,"integrity":"sha512-nW9zZMY9ms9ERAyyhdr/Hn6q13INX5UX7R3BnjiB8XQJQtQeL40i7N4iPd/wYTDwfRqGBFeYAwpKlIYPFQmQjw==","signatures":[{"sig":"MEUCIQC9ZZdiO1BeZ88b32JF+KFknFs+c3bnMHwo1LtAM4Mi8gIgayBSO4CPPKo7iXrS8OJaKfPMccCGxE2sesueuidABu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXjCRA9TVsSAnZWagAAVdoQAJUqCZ/skcguajZIuSl8\nQ5h3/PwEQ5+lROu2qbwrBYFzPlNuzF80aFRP1ix0seWZpuJgNDIcQGxn09ij\nThayCyjZqjdV+L6q2nF+kH9OkAYqBlTRxt3Y1cc/VDsj0D+Rid2RBM7Imr0f\n1vGIo7+zblNMcDbMtdsQGuH4+4jcO7+5LKYh/VTWb9EkaJcCgrfBZP4csUVo\nKB9CWyVSxgARlBQ+Zt3eeJPQcDZBf8H6g3TJvWMCtrjv8MwrW+jJ/WtovLdc\n2aJhl+ShKIQGrzXq53ikkZ+ZcX4EOpK15w/fPX7hD5hMGs98xxbRT4nIETyZ\nir6Rf/nHSPO7hG5TjomT3wS8Ea+yEq1piR8OiR2DIo3aUVXdVZTVYgZoY6zN\ngol2R2Pa6kLFMKZIK8mXabBBFtyHZFXlWy9oo5QYvHjVmID1yavJcxX4+lfb\nQbW5XAelCHJjfde1tbaIgy8g7/Y3mdHxJbHwgFc8piEpcR9bS7EvlU9bJEwa\nfm/ad7ovfFrzC5TLAWrrgko0nMM8E1ubmRQbTDipn7CMO0aDWHoSYyazBiSK\nnjV/d0GoOXbola3ZWad8XFApmAFGmXIegX2WjrPzqQdsGJ/wfwUW5bZbHKBi\nbSQx7s34Wd+PG1plTMNjN1tvCu2rGgP6aZoBw42B9K23m/F2Xxib6bVe5rml\nGrKv\r\n=Midp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff870005a.0","@material/rtl":"8.0.0-canary.ff870005a.0","@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/density":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.ff870005a.0_1597367778400_0.6780773054195184","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/switch","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"0b83f3f3dadc3e79243bedb41221f0ddfa9c6629","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.150f427a0.0.tgz","fileCount":38,"integrity":"sha512-5giBv2y/Lq/zCl5RKJjLO+yJro/tKssjnlStrY2uMNdOIPpg9jWy2ZjHGtr8VenuXklFCh1NIX/FX4+b4xp8oA==","signatures":[{"sig":"MEUCIQCaxiGFGXr/rGBfp8/oHeLgDVd3EJbHfgRAZA0m/WRS9wIgVyeUF34tTGNw7X5Y0NjAPGCkBOGZ0YLDiRO99GpvoIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpHXCRA9TVsSAnZWagAAYPAP/ieF7ifFDHXmfSVUXd7a\nW968uqEjPa2ka5sYiybBETlilsmCoQAsLyIphTJ/4DF8a08t1gEuBDBfyzD9\n5q0t+u6K9QIcXsnLVPmonuKmk5z+usTd4FS7ZBl+hxk2qlyREwE0QO9JLlxX\nGt+cJF8pEECwvEPx2+iGsM97hJO+koXjrmwuYzUzzy9ooSiCIwucsBHU0GP3\n93UGDhE1Ag0++8lMi9mnCatjEQczSyDtv41YDRXRsG2lqdeZZWkwPbKFB7h5\nVOYu8oS8QiGAhh0CV1d5si/njr1ildP4aaAsFsqfsZOMJKOnN5rrjxaLKABv\naWprb4UjdnhDzjgxWqLPs5FRmTMqR4Iuk3fk7ma7ZRvAmAEStRQpE+KFPcxK\nTOFPFvzyxtHTZeDPVX6RBFZupVrXqchM9cVYgNC3NEi4FNZ1rpOOv/x6TyXf\nSmWaeeTE19b93lFFSrnneuZn7QJFztQP4OboRF0pQupAZDbRGaDSIrnM8T6d\nXxgKDxW7gRrPgwaSX6YQBH+vUPEvBwbtoc4HtMQgi0PujJZgBSqBL3Zb3sOJ\n+1yTpRzBNnoG+8+Yxzb3edhzSLroDy9t4sqyNIHNAedrVH4B6W1mWOq+rQm2\nNxSMJp+z+jpTkxtaJZkLUa7xSVrBp5bB3bsUxgKA0vgb2gFcwo9lBTFEqUob\ns92x\r\n=D2TW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.150f427a0.0","@material/rtl":"8.0.0-canary.150f427a0.0","@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/density":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.150f427a0.0_1597411798328_0.08157909133294572","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/switch","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"d0a05079eb03f19b36ce0091832b3f456d479042","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.bcc58290a.0.tgz","fileCount":38,"integrity":"sha512-BeLrH80c2q484TPzHlRYESQh6PhYwVdwmCyRcxo96YQ0cVIX0trcgA78X0vvK4c21YlR3BiEgL/KtkkPjudL0Q==","signatures":[{"sig":"MEUCIQDmQQ19r+3JvxH3Ux3N5Ek5sp6yS55C8OLcvDm56lTTIAIgUWWxj2nRlUeAZxdhW5WbSb+O5Sqi79gvVOy9vTGecuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxy9CRA9TVsSAnZWagAA2eoP/1QRXgYCVRYSaRuMJ5Ag\n4qmyq544AGTR32L6nQXt5bHU1kgpQfAUqx4TgBvzk5HXqKzElJKIgvB6SwiQ\njpIaRsY34g+5Bm0LaviT0Y9PVvxCko42MPKWc85uUxJJx7iCIHp418zXDAo+\no9MW9cNf4pzLv2EAg5LNd7acBHd+yr2YYBa8ewIPMh4eodvQHxF8M0TBQFzE\n82Qk4V8TB6+QkNwc/wd98VkD1JTfYbV+55PvZ83PQdpRTZSK2eNRPj0/Cu6k\n5XPgzeEaMegNbtigfYjiMMrGtv+7T4JQ5g0WXQTCUTn+yXC4qQKessvt3QlN\n+FFROvMAkXHPlAxPGqcj2vlqm9yIXjgX7QABBDPkfW8RfyPOXyY4Si79JZh1\n5He7l6B2z5Kwz1QFnNe7o7+YnfrxWaFd9E0rC0L8iMqc04pIYsolryJfVQqR\nObfs8D2qQ2OKFJoNY0W1BUqZdiGyBte4hCE479hIVk+73XYR1MK/ssxDcfAM\nYeTJAKUYwTwsKbuU/CG8VLj53GW3cvbcV0f3ffPArFSReK0ZsQ5wQDTmfgnV\nbjeDVyVylIooX8iI3kSyhx3HnFaBNvqaWWL15EBHKmB3Ff1Rqojqyrmmy627\nmzOkPJVfKPERTqlF2DXzPptviUkRsfQV3hvK1P5Go4thtmJw+VyaM8bCjLDu\nGTAb\r\n=dREk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bcc58290a.0","@material/rtl":"8.0.0-canary.bcc58290a.0","@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/density":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/elevation":"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/switch_8.0.0-canary.bcc58290a.0_1597447356410_0.3972689434308847","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/switch","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"565e632679d47e416dbd00812eae04465901cc44","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.4f55400bb.0.tgz","fileCount":38,"integrity":"sha512-0I9PDCV1r1N6k8KBfl88+lZHo5mN2T5FuFbcMaMmKX3uCTz4X+tiXh5Pwr3NeVj5mDUGBirdKtVHG3IY7pCm7g==","signatures":[{"sig":"MEUCIQCN1jisDQ7Fes26Xa6emBKiSgCio0OhaeYC9MwnZB2oTgIgDaCRTW1il+Mk5km2/M33zgFhefF+PsUm7jGLyNKNWGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKJCRA9TVsSAnZWagAAug4P/1rU52voBEFFerPXjnvq\niF83za6nI+jSO3pbBJh7/5ipuGIG+h2Apei5eM9JrEZdtM9Ezs9Nv0N6rQXi\nv5x8rFYeiwhJjUeDVfo/TKWBexA0tigBvKQyI4oIcPvn4p99DSXVYMgL9q2M\npjLsGkkKYzZhsRJKwfcc4/lE00uInQ5U/d8BQHeYUWaK2CZ1iiE46IKsbwBa\nLh0GwFCRFheBPFdnaC/qD0owkqE2amiIoGH2o0NJKHSK+RW7h3Ru4uPnCOiE\nJ3TyWogeHPqlFkK8IbOxQarwRPIg16gL6wwWGnO96SE9b4fNkYrrlXziLqha\npWU2q4tdSWCbT7kIsJf02fPvO4JV38kOhln5cNjrGuqU+9pexVUKB3ItSETn\nZOdWxNIqX9IF45tGKlD/V+BqwhCyXECXgC4e6jHm4x203N9L5zcoaMm/YGRV\nogUjFtbMNHBTax/NSwTwsg/WK0qZVGEOKElK5pNkVvkd3jhWKfCLU9WBDqHW\njjkREhiBadlpGQFlFLwaG76dGMIVP31p1CJl/9cATWDgK9KnB+DjGJfnrrXb\n0M6HFyR7ix5yxLoui4TT75fPa6exi7DHcu+i6T347dcHkcMhLml64nT7ffV6\nORvOxwECmjcorzapjzE7cvemssR5LHtKdgPi7C/4ebG9MXFpohnTIGvuov9d\nhiYn\r\n=DTom\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4f55400bb.0","@material/rtl":"8.0.0-canary.4f55400bb.0","@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/density":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.4f55400bb.0_1597682313189_0.689563575880298","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/switch","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"22b66cd61c2696c48e8fd7ce879c0f4eeaa2ea6a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.000d64815.0.tgz","fileCount":38,"integrity":"sha512-vbO0LBsP2gamUw6EmgeUDos37ctkF/fl2YqSbABxmkv7pJjWDB6rmYE0+fivt2lzIrMqg+/RiKG5BCKkDQLU5Q==","signatures":[{"sig":"MEQCIEu0+I9H3ZUGwxyUGotBcs90LzR7P9AeMUso/J0PBImJAiAoAl1pR8rLt/lFMnIgtNyfmRwAHQ/JrobEnslU5Ruafw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriYCRA9TVsSAnZWagAAKlQP/2JR5r+IUQleWmlt9oLr\nkl4EWzZNFqz0AA9l3Sl7uXaMX+NdpU+0i+67GeXUAHcTOyPHsJJ5S8UhmSf0\nbzx8X+cH7hB32UnXCLVySrqfkoZ9FAvGQy2KwFhSPsopw3Ogqc0vmeiYmZSC\n418MSItPiCPeAmZdmcXEFBd2/93lUohMkPWcVjMC9QKoOQhS4XpTG5ijQHO0\ne9v2wPdQFoJ6rl9YP/1pVa2sn45z3dA+rjpu5xnSzJ+ZjXh5rl4IS3VC9str\nP3i19xWVAXS3ZpuQPnwx5wayqUoLR6G/w1NNknZdLsA9x2n5+NF+FN3+b8dS\nCj3GGS0h+5SVSEwSYsdfCyP8hV1LzgMt2aKPQx0Cuzj4hnfV1PpOTmP8UdU9\nKgfGSeUwGIriA3YKVEyqrVi4gW09+kjTq8zJhv/m9XaBDRU00/HsAsuMs5pV\nRkIk5biJvMVl3axPDsd7gIbkXo2W/ZSjHreUoxS4Ec11MF41MJP2dwORF1DY\n81IDn2LHTDK9nOxGa+0fPn5LtYf7dZORmVBphso88EV0eVrTWsia65sg8+MG\n6c4oaaYJ5oFJhpwQWyQHOUeaXwxKCf6XcPLrAdRPOXbt4LCv3M3ifXAiC47d\nAwGhRnFHD8sxYBExwh9a+8tKTv7fKu9aaunKX3k86o3LpOqxTBBUrQcTGgYN\nZ/9g\r\n=Kvqy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.000d64815.0","@material/rtl":"8.0.0-canary.000d64815.0","@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/density":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.000d64815.0_1597683864336_0.1076567463403284","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/switch","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"02c02768154763df04809f9967021ea135268fe0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.defa599a8.0.tgz","fileCount":38,"integrity":"sha512-KnRwUaIdWKD2pZaceZZ3usiIfkdnRNpUb/hvb3nikEI7rnj8sFT827nLOnA4gDaYpozpLCEOuyThytpTmqbMuQ==","signatures":[{"sig":"MEQCIAr5PZlzk3H95uX+Eai5T+nIEms/cQN4dt6YwHmQQz+DAiBSR7ssJnAzaUtj8i9oi0E4xAoHFUKLflU1ozKr+peCIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOuk8CRA9TVsSAnZWagAAJAUP/juuM+yJYv6DxljvbjKJ\nLwD9enMXfk0xME8bPP8XIZR1wFMIGYGKw3Xlp3RmzKZH5kreEDWCaJOTQY80\nv3UxYLJ2eTAF+Qk5CjUUoTLxmJP2gY1Zh8mwB7FHsrdHWDuvAT3swc4xzgRA\nyuf30vho6sTzWaPo+YT8azxyqE424VqPpv6GOh1obFpoyJtV5EhwPIM65nTS\nFT/91hw0vZU2X+o40U4S3rwTLsiU68oyzzs1nVu4QHNAzudFdbctsP3f1wdq\nIMdQt/pG6EGg3xojSWscPYubqUnqKnEOH00jhmsTxA+tg/acy67iFgr62Tjc\nQPBfjz3aNh7UjIpESyfZkl3HjCM+K/9IsbUfer740SUjBoglPStzhdxZvBAz\nGoaUOtQ+I7qGMHJhSxUyuVoJV43UFjr0eBv3iio7CNCQFsIvB8jQfVRDaI85\nGt8yZthQGepPp759GvvXVcsVP55ZDr4hp6cKpRhbIOzWXnIvw4NWfFBnAo4g\nVIDby50xiqUhBBrr6WIh3SkcFHGbMartzQ0u9XThHgtMOgWQDPMa+qrSeKzm\nATqBN0dMSt/vSmcwv9e/w9kpTNZu2MdoTM5K7cJtJbx3Mh/f4BmJN6WDAcAG\nkBB4EUz58pjaMopBezcY0l/zEClecGkYnMkBp/EUVfmbOMt4rQCKS1zLdK7Q\n2n/A\r\n=71ch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.defa599a8.0","@material/rtl":"8.0.0-canary.defa599a8.0","@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/density":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.defa599a8.0_1597696315755_0.1974393183047629","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/switch","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"69a71d76a0499773533370830e48d634e1e37a89","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":38,"integrity":"sha512-6c+EiXhHLvCb7BFKuNFjR7hTYvixR38L368GUvulo3xlzdPAhewJagsRclX6MCUAiUZlu5gCvbxYoKhJzM9mug==","signatures":[{"sig":"MEUCICOAfEyAa7AZctys0hrhfxKO9qjmGCehUmiMV+VqgkSDAiEA2hUE55xXgQdO2RPGiHRGaw+W4yORqeXUAdNwaWRtPh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/HCRA9TVsSAnZWagAACGAQAKM5J4NvPruCSq4sHmCG\nQQKNSfdqMZnEE3qY5SDb6AoU/w6PDUV89apNiDamjopNluL14MIvLf2a6pD8\nOyrsy1k/pKhYZ25qKw6ZEQvuLfduk73VADJoTcGazip5bcJTMwWfbSaekyzk\nXYWSwW8qRzK609CsbXx9+cIHe75ANg+J2CqiscpxOFCq8Bwr5HLanguy6WAP\n2hddrpevh7Xg6CpYAs3yZiajQkFkbOuvblOEOPdrUVca5TNO0GyO2WEuWnhO\nRG1TK9sT52RWim3C5u49dSDxykWPxsqMZ7Hceib8s04wOasAL9VkyVu8e3XF\nG2wpQWCBBd15RKygZoJLuMZ8i4nPldwk3B7muwdl4b2nLyHpWYxxtOdICXDY\nxtulQXh+yywfICxLWivcSPDtl8HGRNkDvvubPlPfEWOApVpZ9d10eZSKUWdY\nd4sPCpugkH9QRWUzFOsDErXQWST7S3x3bEe2Rii0JGbBpL0d8RocE/h/uF3R\ncY6E3fuaFij54FoI/2E0PM5LsyNZFc5IexD4391ocggWSTFou11hwPjQ81Q3\nm8jWpXhDM9jZrgHAt7wsjrn7Yc/VWolEFxI7X1f3E7TYUlFsZqg5bEJiV+Wz\nBY4iJD0BkEBuH5ka4SfuMUiAhPbiYSOJlqasRAfGTB5cUwpxCUIPde+PuSto\nsbNk\r\n=T7OA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66b8ed7e6.0","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@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/density":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.66b8ed7e6.0_1597775814704_0.5069760131614014","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/switch","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"09c0347a514cf634b27c22cbac67fc266c19373d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e2b1033df.0.tgz","fileCount":38,"integrity":"sha512-60gGQEb7Qe9SDb1hDwf9vuj/CxU+hJ5BrxWfUU1gv902U+gd3ZJnwbqHU5Qdv7RFMO+vqYvUt/qknksTNF9Csw==","signatures":[{"sig":"MEUCIQCaLVoWAZnXMpzfp0Ecf4MgytaNYvf3OExTZabhL/ypmAIgafKju+eBlO59xvpH4z0DviZ07OOmk+o18SNKSsEk4DU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJ8CRA9TVsSAnZWagAAg3MP/Ao5ibPYmZqDAKUZMuiT\nRE/wNCl19kF+m5vKQQtiEUAn00CLnyH+y6OmRuMdTxx6O14/ceIw6yTwIJx+\no8ba+w60qS112stpjC28aVLhAZ4EjPht4OCfk27mWok3JPkp8f54tnK1XLnr\n+gE8GqJuN+IbWc7KVh+bINldmLTd5o5GvJPhwQL23oBhRp+s9REDCAPhQlcM\n0Jr8d4m+kHxX4M/GF0JgA6yfcKphktGbQi9L0KeAzDCQgzr4dviHYBVyGGTd\nm4q4GczWsorR0FadYdppJfKssxQsxq4KEbXlLL7bGb2ovTj/kskIKFoM7PCD\nZnS6zuiDpGxtyOlsrKnqL6r0vm/P0VGP3nktBC1j9eLqBrK1oeBtVtIPYhKV\n3hTy/PM9ZHFKpyqib81QHeZVEA+OHkhwpXtm7l2/05IY/jf7wzx1FSwFczh2\nByg6QVVynyDmtN7lsIcRJspGTKUQflfKPax8TDvUWKEIfsoDwEQXJUWX0wy7\na/5FJJMp6y1NavUZ8wqiEpzxqEkJstCPvAelExYJhfcrscFC+ch3IeEAjkbO\n9N2pgGnEKqcK6huDkY2Lbtgci3c4gjKbw495HLqyHnNrKGfva6tUdx/vpFim\nwXFAHSNmYQo5253sqOuloWsIrNCFhI0qbG+IVL3xWuAo7TfP6jgSCUiZSQfC\n5FHp\r\n=WlP7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2b1033df.0","@material/rtl":"8.0.0-canary.e2b1033df.0","@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/density":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e2b1033df.0_1597862524287_0.7846101161576424","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/switch","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f97f2bd64e1b792b9ed09319b92fc023e9e723c1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":38,"integrity":"sha512-P0vshDJqCW9N4Z8N+WIkrzlAsaN0vo4zgBR7WjbznDI0X5HpRMPWU7Nyu5w2rLGY59fMBdPgRcBgHyYq2tJgaQ==","signatures":[{"sig":"MEUCIAZqfCQJ3CWyTf+Aegx+Bq/4YRDeSM9Zf1CAYvgPqMR7AiEA6aFfm3lVGx46UO4c1WlsLTmgV8hh0fo7E48wo4E4JBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxTCRA9TVsSAnZWagAAY6IP/2shLMi+/mffOD0c1wQ7\nXPienoiHmwq6a1luhozAtY0nR1NSUm+8BAw5Ov59ZPBdS+Fig0FvukMOIzPV\nbaksKO5Cu3aufep3jvv7dw2MQlXwkaoMbLjK2NcCT3fwkOPtWNK55LcEehBh\nG6DqS6OJ+XjvVonKjCCVfrTllI3W8yQ+zJ/yDSGzwqcsrSlc8PmXy6Mqg2pq\nTtCCdw2GLc5HdoJncMdQ0dbhvmUJWq/J0Rge9JmYLPp3toajyySmMMXJ66sY\nE26Nz7HbTdVljtpae2H3k4HPWTlwiSSqBhUVegw+4wmPzTx5mL1EfAxkUJRa\nvEzeuoLbNeEbd/iQC5x50gSrElRMKm/qiCE2ta/rItWea1jkCZHzcNqdnxs9\n+/aKyfNbs+iR83/iszkge8EPk+KLi7wyJYT1IInhGUuqaEo/YHTzyua508b7\nMB2URGCBomI1/qPVe7NB/2QeA1wG4HdbWgPgQqlDgrFAO23iIkCG7f1wxNZu\n4HTcOOdBGW+uhoFx9fGz2vyLi93ZGUWU4O2F3o6IQmIVffsTOIrcj7uLu4Ls\nv6FfSbOtj4CoX1xYYL5gHgDuYlbYGkPjxj7ItaaLNpf+BxH3xkqTPnhjngBH\nDUXcklMzd0+LkrvOZhFtH19Asqe6oNun3wucyk1QYPTzEiSgmqhI6pcvRoOa\neavk\r\n=nQVO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@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/density":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.2e8c3dd2e.0_1597865042396_0.8374761926189487","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/switch","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"d2d6f99698360a6b289991802385ed13fe45689c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":38,"integrity":"sha512-qBLijMaxQtFNEtkn9V3Y+WaomN7iKWHqQ4CReOjo1yY5vdjqBqs1PtPFxBN7HSeUSC+hmT8kqvzRM9FaxstENg==","signatures":[{"sig":"MEUCICaJB/+OizQCNMEH1A0rVppGmxKYaQfnUhQX/9MxiumoAiEA50IX3g6Fq42BMnBksa/uyR/htz7nCLtxNEoxKW2ng1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXPCRA9TVsSAnZWagAAWKIP+gK7bKm6ZlUzuQ5fJ26F\n8gZy+uWrkgXFFZUHwFdPcOj+s8kv0C//zTCSCkZcmTez6s55mMMbM3Y20AdG\nwHjnC6+gN+jR57TsOCZp5qFANMwQX6CmVfUfrIT1SNNp6epXHIUZYk7xCHOn\nY2xc0+lMlltqxdvWn2z/4PMXMOcQpQ+ZkpAYQO0xwPnhaN8M9YTy3axBvyhu\nZ3+UHMsi0Y86zZjYFHlDYxD7M4qsPEfn02yWIoyQ/T7iSJ1gNOH3NGvXZujN\nKh6Xgj4lJo9WNTtTJ+3aI1Qbi9wrngdJ+6FwN7P7M6Ac8TPMLw4mMozHG2q+\nUTL18bb+eojGfSj3ID2fS3YhVCBtGDOipFmOi9Q8n49gmxyxttk2WpDnsi77\nqsrLGvZ/adCvOmZqb0ZpufR/VZ0Hdms/k/H9qjC0UdLBNXJmnm32SiX1Vu3w\nc9FW68gf2SKAi4GMpUE9eofEFh1nBkreI4qg0KKhRLwMPokIAA2Zv3nVQnP1\nQXVx7TiL+3rJ7NBU26Rg0tfiYfY/A4WoPod5luM5gSiCY/RA/Jki6Dmfo04R\nnVbVhGChzEAB8NVKiSAt0gUdRw024pKVkhMM65A2nGnasrh0eSyEoJsWXSJx\nkIUR1haV5DFTkLtggHyKhPSbgd1EUFhPI8A7eE8hht0dOlh7y68FSTWJaoi0\npiiM\r\n=6WnN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@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/density":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.b2e80a5d9.0_1597875663337_0.7830267075203263","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/switch","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"a0f0bf5f396872daa39471ea9d4647dad82b5cbc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.ff88df637.0.tgz","fileCount":38,"integrity":"sha512-NGCAxn6MNnmkDbxNhfeXVtI/qRCmplxHQztLKNnYyjXMiFc7eNMXWuR6qA1cX6k+LNPar4xVQ38oM1M43IPLdA==","signatures":[{"sig":"MEUCIHNflW9H0XT8o/fp2xPxbe09h6Qh4jcTZqBToSLxUdJNAiEA/l4lTz5QwDFsSn6pk91a15UXMXWCPK3lyCqnEyaTPgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaifCRA9TVsSAnZWagAAL+4P/0Ha9KFxByu+myjSfx/y\nFITtrduqy3UlIva1lB7KisT0oWmAsjUfQwiIQLsR+6iNo9+8dELwprN7PxQx\nzqc9FVQ2IuHsuCBOyYkR0MkpzwJKapEZjsXtMeYSHhzrAFsiv+OQOiPEWIgF\nh5XTWrWTo9w2gVL5+dl7crA/GZI8WM0cbEMuInQzSC9vrYZkQPb0zJETUeBg\nkfV2oLaylNaDTNmOBPhUcgrM3dwHRIuzR/nR0qX/iyXYWGi67B/wAF4O+RPc\ndyOTVIyR/8rwdXxu3VXDPKk1YIrA6RL3j/PlcevEe5ktBoRBFzsLpQynYEaZ\np2LnjCmHXpgcQsE9prF24rF9WlOULXuYAjsAW79/MbtltdAZMmex4/cpstfI\ndnkMcArMoX1BIsEHz3Wal+6fQaa/MS6dr2nDbgWOUa6Zny4/8EzJR3pm+cx5\nxJ3eOYYNMXipjhFG+a/+V09OS23NiMCCXTT515Mh8KH/1kXZ6EiMgWpOGHDY\n83nqIyNxx7rBM03IS77aiATykCN1n9leWhTRc3YkfJDsso0JJiWj/Apx2tF2\n3rIUQNIx1D/6hLW7GWUzg1ElN9I2Sz3V4pp32ptLIpXebiVtYR2IV6dLQu+Q\nUFBFMD9FVdZfMErqe7xplN2mLa+2ArR73/2c0gahbRHQCoehG7LCgC5NZ5dd\nRa1Y\r\n=0rOf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff88df637.0","@material/rtl":"8.0.0-canary.ff88df637.0","@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/density":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.ff88df637.0_1597876383360_0.304100458506424","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/switch","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"c88cb70177a81a9d242932f8f3e856ca9b5915a6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.32fb314cd.0.tgz","fileCount":38,"integrity":"sha512-/2COCrzTDPSwnaRv9z968ap3naErBjVl7//4+VprAUs5dZpbp9lcCNp5p2MYCZBtYiGzDiZK6MUw6WdbTcipYA==","signatures":[{"sig":"MEYCIQDjABA/u0GUrfB0ysX0EkNkFZA9bob4aOuVIB9qCTcrVAIhAPjdrrJBZENtgpnFXt7N9m3JmPxCx2kKXJVReC16CVCy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJ1CRA9TVsSAnZWagAAEnUP/R+nExz7XExWiMzDn7r1\nfuKXtb4Y/mReu+Q2bBls6ubqw0JdSRXWfSa/GlVWqORgqQ0fKrqt9SRU2vVn\nnUvA3GddMKM2FQcaCDtFkE25r/+ZUEPn/mmaJwF4KH8An55bYAkOn9Q+Yhqe\nVqifFu4dvDLqbtSsP6zp9IZzrxVAiO8hK7jsO8yQV8/LBJDK56fiBuvftCx2\nsecoF0FDRmxhjX2x2m6aUmSG7oKUVx0yfHDem36UXzvpRfZh13l6m1wkeTNs\ndKBxgGpSRJA7KXpMt4ZXKmuzsSMdvHepx8iTA68ChnjNtF7DjcLPiNwyi8AP\no0ecL8V8ajAVmrnM8VaWcnrgw9SZOYnEXYY1Hfwy/t6cvDXL9HAMatG8wSan\nbRzeZGIXR3AHj2/0wR3+LQsUsaJsNYoBm7z5bzLbamPfjW2cP8t6rf30+OSy\nIPFt58k1QCCuGunRStqXRadUymO01BCRVJK26S1pdvYcowPonKaj5rsO5J15\nI2bHGQXNz3lqsAeL+p7a9B+yb8pdgL3Rz+lizoySju2dCFVad0BtSg7Rr4/y\nXhJp3UK6S8iqmEkT3UvjMvu5/ZNx/SJfTccenF+yL4NCW/67/B+ocbSN6ohD\nFXuoJVpaLYiH8THeqAsDbrB+xLnHdL7iEYxWkUpA2cu+4gOLVUo3V/AuW5aV\ndPpN\r\n=wsRT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.32fb314cd.0","@material/rtl":"8.0.0-canary.32fb314cd.0","@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/density":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.32fb314cd.0_1597919860573_0.1826559173094371","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/switch","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"88f2d6ed998e5ec520bfb6bb1b82d9ce47527fbe","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.546277d32.0.tgz","fileCount":38,"integrity":"sha512-1KkL75XSKBW5yD8ecX4Rzoqj6EwlfuFXY1IMnS/9JGsbXn52vARMladRb0NR9mx3p52OdNE7ohEnpRW8SaaUYg==","signatures":[{"sig":"MEUCIQC4e9ULU6FDvr0K65SSpsBObMhjWjDCe3QJAYFjs4kzDQIgeC0/IVgNf3IM6vWLh0jxjacBkuW58YIJmNAo4ONrBLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgjCRA9TVsSAnZWagAAuWEP/0EIp7L3PcfGwjvRXvjV\nRdnLALLwgWnDP+uMlVO5TvcHOuixPRNUB+RXNsEx/ar8jmBWp+SWR/PhKUqw\nRJ9zT4RjTBORHJLhKfCD4uiKHIB4KIrUuQPlBt+krJiWmxuQcRw0b/MUQ/is\np+TkjBB689d8CRLt8v2zcdSBfRxLgERWMDQJ7OFSQ92tOmErkDHUcoj7AZOH\nYuf+QkQk6LKPdpfhKXfDzzAVtn+4N5lmiTq8x+3nP4QXa2O/Rpb83zePQ31K\nqmom4dgCAE3ISOKbpNPLugPzq0H5KLu/f8EU7Vbzvn4WM9dKUqZJ0ezljaBe\nlaqO6qgT9gPrzjYWnQ7QbT76DCWQ1P4GxSlKTxEgG+bKkgqTPuqnSQGpZomj\n+3Ew9fb21T5NNzZCM5xGG6CGiYSVhYsmbbMT1YjeYIRZILC5N5MOisf+arK/\nSV5GNX8GGanO4tacrFlbkWR5Gz7o8jNeRRR56jus+qE7DYy+eR+0BXm9OtCU\nyK2VSOe+BXtxJBAo5SBaFklO7VwIBof+sevyWbYGtt1aiAVoUzDLAufE33eS\nQHbiKbM/4CSdMjWRtFhVIomtrGHMRIoWsD0PINgfa7BBhHIGfloVsb4ABsE0\nHSaSs6z6liOE8XdsmNSbndJLk7DU3igytdkzJat996UjpzczsQ9ifQ83cmEd\nFJjh\r\n=OP0W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.546277d32.0","@material/rtl":"8.0.0-canary.546277d32.0","@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/density":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.546277d32.0_1597941795370_0.03174560938134641","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/switch","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"6aaba939fdb5d3d48d237c2670fef4ac228e6d21","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.da72839f4.0.tgz","fileCount":38,"integrity":"sha512-SXiI9O0K0d8DTA+tkXVaPkmeWMa88qz3nNI64EQTbTlRjGWS+U+G1Dm/QFkxmogNM+9QQk1syplc+6u0t+Tinw==","signatures":[{"sig":"MEUCIQD1wun/owpZBx/oXcZ4twOrUFehFP6KiHgiarII5YxaugIgLfuQ8DGDvhIKbWzPJyftQrCDztqZrypNxvzaFual8VY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfProiCRA9TVsSAnZWagAAeu8P+gPGKhAndCpulNmDSFYN\nRNY+7wBjsOG9oH8978fsU18c/fjP9k4pcXk6Q70DHs3sR9Nd3UPL+HveWc2M\nx1gMNwrmRDdaWgN3Poap36C0wen7zm6Klr/LFYDv5bOD/dzwm/4IFlQwhrBA\nPysrnZG/upYliUKYwFiRE+SnFCxF4V2rz8Y1Z02ZXwxdGT0r6FzDNQIxlbPi\njt23Yv1YOzVuDChZ27+1V8WmM/r9VBhsPKUcJYwMhGEzc+y8v0zMVsZJOiNc\nq9Wbr1q123+TVTzwLVux89EogFVidDfwWI0bRPaXFoDvzzm+dGw8Bp78izua\nXv3x2O5/T2gZmTP9+igVok8Q8gcZXP/N8nmoABkiGqjPNwltDe5tORX9e+/L\nVLGQLEWa4BqW5x3sjrmBwY7YH+9wj08lVjxvhh1RkfdKWxsxrbcXPnhV4NVq\nMZ/oTVuEQ/KhRAWOb5iGfNu2QODbQmdM1NV8Pcg2jwV8O9NKKzuADVthL6oW\nHXTbVe55/irDVtH8k2uzdRc8l9t10Hqx3zHGUGBWjNcV1n7oZSyqI7XVXRdC\n5qXdjSgM/1M+fAyjEpr+Kh91YsFZ2YCbpXDLUHB2wVjklXiUZhE+rotSMwVo\njlQucyMo6MxjU7olXnGN2tFgcWnrV2nDyKC7wIT46hsClwWcCxRxpSuxGjf2\nFMUr\r\n=T1iG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.da72839f4.0","@material/rtl":"8.0.0-canary.da72839f4.0","@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/density":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.da72839f4.0_1597946401535_0.5365975501010731","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/switch","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"b12dceda26adddb7c75cf4b4600385fe9a1b8546","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.346069ccb.0.tgz","fileCount":38,"integrity":"sha512-AzZFnV2ueo68OEOclsaJlSt1rW4MFVRcgikNctISjQRKEyyPaNu2pGj9nyWysqYYGAAAO/ODRv2Qh0bSwznk8Q==","signatures":[{"sig":"MEYCIQDwVgl/OPPVB7A/LvSU3CrDxMfidq6FBSI9hZo0ULBwKQIhANLu4eSime0hr1kVBCXFheERYJCt0ZWfU32MBGGdfM8Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr55CRA9TVsSAnZWagAAPOkP/isq2tMbHgUHrqWXu/su\nW6CSvp/D9ENiPFDzm12/YGn1A2r5JklwhP3671Q0hJOZSNFlHqrO9vURDnco\nv39lVkwpenV1mnvhtk2/zv708NL5ivApB3ELy6KZWxHGHtU46N6VqGU35LcC\nmTBekzIAXvrAO9Db+ijE4RyAt5W2hgvmDS5XZiVDp+YiGZyBxFtAO67JjCnW\nNG85OGlR0QTSDKwTNK81PaYgWWo+GWxhIUsNxx2ijU8B8ZizxfqlTuFXVvdL\nSSf9qRoM7RgawqG3MHFGiA4PzPvz+N88EfnLwmMTQOrAy3w5WjOSfhCLI8a4\n/bC9li2CXO60lzomcofjjpW1AGy+qcdquBPGAs2SU99Q/cOJ1g051PZ/A5pf\nPGNUv4J3IXLud6YZ5S/5UDHljj3jBz+R7kWR5RCy3NnizlWm4XljcL59UCZ+\nJZJ9/8kQXOSkcF2pFAGd6pWGBOaT4dUSrKNh4PDccIIeBs+ajWsMM1snT5cI\n4d89v8kMj1EMU5T8hoXlAvRDSZZKuJkM2rA/Q2yH1sqOkS6PWcc9gYsgMjV2\n7xtLeGvBjrAlykd8Ellp2jz0r2Qs0PvakOS1z2oce+pq8zsQy3oLZlT+vy3s\n0q4gAsdN4JJNmyz3g8YUGv6veFLgyxBMOexDBXRF3IlRTjFx3X7kbz8nrwTx\nCgQp\r\n=AKGb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.346069ccb.0","@material/rtl":"8.0.0-canary.346069ccb.0","@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/density":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.346069ccb.0_1597947512535_0.586699087815252","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/switch","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"43ede0c16280da2373230804cee27355951aed0b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e27c5802f.0.tgz","fileCount":38,"integrity":"sha512-p68+vgSj8ZVck1dC02NA44JKhOXsCdxDJivxxns9sCbsZjV5hMpDrKEutOuKgjkWkhyXhbYfkv1sGPgC9oFzTw==","signatures":[{"sig":"MEUCIQDkIPlzN7UkR+SkqQk17jZE+aDU3z/oCbO2xdxUGP9xmgIgcwELJnA0e/0cESvENf99mkXTc4PJXzC+xMK5eM7MQwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsvDCRA9TVsSAnZWagAAqvQP/jjjBD5DkmBKTkEjmx6l\nT+6DYD36esuUe2KVSOgegZftAlJXN7sYPB0FI3T63I7xRpX70FTGUcAN5/Co\nBoq+JGyPoJO4xsjQrHZBAmaRMm/86yDZs9SGlbUPG5cy0+k0r4+PU0Z7H4aP\nj4bGesQbZAS3JcDnmEX+9kH3tWJ6y4IKZ4a72+uyVx49+0I56iCGAYfyegOc\nE4iYGNDMiTSGjBJY6Fd4ev6y/1Bc0WP5ob2x0g/QePaTzEa5O4sS8c3vOT+Q\nxv1tXtdFVDH6m64FJlGUGrdxqE7md1f2Ifvp8uxQMtH0g/ZAD0L7sBWefgdJ\nXEdmZza1+yzKjj63yWZmn5Xl2WPPB5GC6IzjpNJcW8lxmfNfzOCG7LtkuCoU\ncZODeiViT6xnOuCflILaeztjwcYIbqYgbNENl5E8RPD5yz+kgVwjWuxX/WQN\nOaSR0IKAzGa6M13wt1rWwu/+kwGp8jUtXtowCoVTV2BpdFjUXPiUPneV2jnJ\nusujLuMBAh6YNjWvH82xobGmdxFgbtxPDR9wTJ3Vyhp7unpWQ/cDuc6QkJmm\nmP4x8RtLbTgKMyTZd09BVgz7aCeN4fzL1V4fgW432VSKwi6wMQI7vRmPfN8R\nZbZgjNsADKfyoduh1C5VwUXLlE5XAzfk521XOH1mIbdSisjS/dRIq06Xy8OS\nnv76\r\n=FebS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e27c5802f.0","@material/rtl":"8.0.0-canary.e27c5802f.0","@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/density":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e27c5802f.0_1597950914968_0.696185850084893","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/switch","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f9749f72ac68b9ddcef39ad3486556fcb3d4c12b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.f4532b9c8.0.tgz","fileCount":38,"integrity":"sha512-EXCggD3QXch9XMWa4JHmZjXtQ/sWBv9bzhYTcDYSvGhPDVRJEMgCrRA/ewEAwlSq6zGK+2Dc0Z3C1/DBTcU05Q==","signatures":[{"sig":"MEYCIQDynLJhdNJ63+5fRi9+/2bDenxBnwU6eRDf5ssSHK9OBAIhAOHURP+fgWiVizuKIv8VhOaGW2PSOE/LansF/YO2sQ5W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtW/CRA9TVsSAnZWagAAPf4P/iDeIBiGFbabDH6AY0Ye\nBiIdl2FK2gv+yrTx46QwzvhDV9XtCG/XhOfjVPK4fMHmwOrYz95mxAUTMS8t\nvkfhCmveZ420NlhP/y92mEY+BKg9B+O1k3+S85NK2nkJeDYJ1S6gADv23FDt\ncSvbAw8wsXySzQEj7ldTyuo5BU07E+abMfFURxiVa6DLQ1mbU146TOfPHlSJ\n7r2o6DB33Hdn2SOYz08eMmWFNJhr815tCdCinLfzJ+d3AsfvbXgegDq9Ca9W\nbdr7+Bnfl0HFiHy4NB37800TtadcafbHtgXXcMbKol2H6tkAm1JJWmKrKc1M\ne3kXJRlSshH46X2iDaLckqLLgDUYgmDMFcI2wkz+MsLXgtAQiAmhKB4kdZRF\nN+6FQZS86U6joVnlhRLvuPPqcwuJz7WRd1GwO+eMhLopc/Qoet9ftZSj51XZ\nLuWviwKbDiqClr+Qj6EpfHdIqivr8mRkaz/OAcdZ+VL+t9OhfrQiQ+D3YLLh\n5B2m2ZIkps1KeTCCaWxdVSwrOEqQAqZPJ3cEFR15+8HvTWGwTJyPN/ami04m\n0BbiWL3gjWg/+FxvhBd0hCk3XVZ0XNzyrPAUTI+MTNkpIk10tA7jAnWa/Dd/\n93/yHUIaY1un7ZA2Zo/K/vGEbJT3EW/TPoOO5bH5b9AReM/mrcS7mhrGhWMi\nfmFE\r\n=g/wa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f4532b9c8.0","@material/rtl":"8.0.0-canary.f4532b9c8.0","@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/density":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.f4532b9c8.0_1597953470642_0.09345329319101459","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/switch","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"44c654e8b935d0e4aa3f9dd4194064df18d6cd17","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":38,"integrity":"sha512-k5B+3OpD4Sf7p7pyYxY9DRNowe+JRrOw27VAAbLKMJ1bLyfbxoJA6cZxO3sF0/kK/C6gWnTDKFoP7iEq3Jnuyg==","signatures":[{"sig":"MEYCIQDbV6UP+mNTqU8ZEpb2I3yA4j/VBiMrKfTsab8fFyp5MAIhAJp3sKvNtqNMi0nyZTn/ZvVzZ9RYsk9tr4BF4ZAUfzQ0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXVCRA9TVsSAnZWagAAXA4P/jFJijyGfdh3+Lj+/Pcw\ngqdZOyaggaoWQhehqBh5qVruZo6inYlfvbJ6Je3cNvohqAnP2GEAMgAvgh3X\nTWid0jozmajd6vo7F8+FqV3dcfUgoevoxfiH+sT5HEmh3uMin5fuCsnqp6N1\nVeUJXpppReEUz2uD6/4UbWS6uALHDZuCjekqL0OVCzGnGPHRXehmQvDez09q\ng/oOdxS2TG5bskRFoWE4eoaO6WGMAOf4+a6PqBR3vhpeeCEyLVnTBp4Y4dLK\nvS1JnzP8x7j6gduQRVkvo1pGzRQy87jvuZOgA4g/3ooUXTcXkRW3JtGo6yS4\nS4S5klvayTSVoLACjZgyiVK2uOZxDevWptO/bS8YAgSKXXx92lUCRoA+yaFP\nLhvkFH6sK4VSaYwm5W+zRxuC9NijVId3hVSpOOh9wDZ0ndJrYhzhNfqtEEyx\nbjP56idqmyMnX3uAt2VEv1BrP9K6ZYOgUgirLuG2EBQHt1ccq3p13ZZfSdJP\nMDkwC7tNsA3FNpPZsYhqn/4zKZzeG9cag2GGypaPBU+SBoXNjenPD6FYaS/B\nsWql5CCG1mTDyXQRBHkr7GpJyPGN6oq25XS/KeN2VZnWDc43hQS696WVS/72\nWhTY80PnLsX7d45eUB/C6tS6utjUC9W+xSUjwUIk9njsapyGwHlzbSF37n7+\nYIML\r\n=Lb0f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@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/density":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fbf73c2a6.0_1597957588982_0.3468491226908248","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/switch","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"a2f50ebdb53f9470784ea6b8c5f44ad21b052e8b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.cf800124f.0.tgz","fileCount":38,"integrity":"sha512-j/p/i0Zc+D036JWNuze9sUAilbNdLMMOMyb4p7yQ7UnyZwZ+e6+d4zj4ouU5EmgFDMheaD44Nnn7dCBYrHn0QQ==","signatures":[{"sig":"MEQCIBA0Scu5HFB4OUh9e9NfjRBqtTs4TMGFYrp6RrFSvthzAiAZMbDFJAutfZr7DBojYopP378l34MtG7XqP56u9QWBmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCrCRA9TVsSAnZWagAA8BYP/ikQv5cUcdXY1Hul13sK\n4HTRPRIuU73Idvww4OZ2PsIQRg0llmbyXZL8Mqumzw2yhSPnu1X24irH2GDr\nF6o5W7SC+amAY4lc+azUzRL4ZAsxWcJ+e5NxOoo3LgzsacU3YCl0AvEgIRi2\nfOXMeV+swp5XhbybblsyNcQMUNS0v+DLYfvKCKmFBtY4IoG8qbSXEqHKEc97\n1w6Wcfl23PTrf5nq3CDxwVOuAp4sYQV3vo2EhYHsGrBiWfzPhe29YJzstixe\n/rKlCM6BFQcMZBKmKYK9Rr5mCAwSK1Ly3uQBbulSaDh8G1tLaEdd2c0wRGJF\nKq1/FhPhcJ7sxj0HxR/4VZfqjQDnFOdoHOQFYYw1qsgdHE2wRhwGVnse/q4X\nisRExU31PhpZYd8AbHpwWxbELldKR7xhZdAY8RAw6oTAWDARmNYZuL1araYR\n9/D4nrL4YAuibfChAHgFkU0MvEC0P7+dBCzWJ+4oHe8QtPUTBimESKsRVWjm\n+VTHN1Ao1xodfBq3x8JG2q2hID6nOYyrrtMf4ndLeuE1+wkWy+GbSCOoGZt/\nsPhav8Ay9cEn3RhPPFn6I03/aGIBinVFY+ZnmvQoqFw71iJ/+IoM1GgDR/sH\nxC8zON59Ah9M7eGIghY/OISiUH4RIjNjXCKQV89+NyAqX4SGVLqfysj7VBZW\n3Oik\r\n=DA8+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.cf800124f.0","@material/rtl":"8.0.0-canary.cf800124f.0","@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/density":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.cf800124f.0_1597960362524_0.6374847134128774","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/switch","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"7e499c6c38a8a8948a86f2f68baca9747d0449a8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.95e4eeea7.0.tgz","fileCount":38,"integrity":"sha512-Q9p+uGRK7zU2Cfu4iehbegnscnXai2arzb4jV6mMlilVj0i5pwSWa80ogWPv0CQTZweyCmdVpXSvD5WBlvGhqg==","signatures":[{"sig":"MEUCIHDTmz1ccj4tDmVSzxMvq30UBPXgR65Xf0toRxzgQAQSAiEA6DojxumudDWp9BL28vibIv1Q2p1zclK1a+l226h5k5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwc6CRA9TVsSAnZWagAAuWUP/2QjlP410Kkg2lk2XANu\nBYEDas7JKE7Ts2fk3XJ0GGnBCpjvB6j/jtfeh2MtysgHzqfrJ2hhJFn/oPRP\nlWUZtJ9ae2rKjaOtZTcHxOnElrJ0P4Mv2kBblTVRFeFiYf1s91JospVLanTa\nSsGFoko3i85p4DzjdYFSvDYcVMUGIYIn8bGju1aviBu+aa8I1jkfm7xSWZHQ\n1nPsO3IfJPg+f+CLvohD98shm7SQOhtKyJQJ2vCtMnzlmrJ5YZLyi4q7QshK\nwu+5qBGr1+YCDwISCrf5dkEG9zPNBwjJJnvXupfL/F4+C45dQw2EhZ19V0fo\nbNy/2w5BJ/RXwync83v42sLAXTMmEI9vPX/q0S9xd4GMQy8WRxpoLkUkX4ry\nr6j0G3uv+QJZTffjI0PCK6xQlXZPzHnfP890uxindeg0/gNBCFbTmEb5Mq2m\nmQM5F4+/56jT9C/jc7chkXQg8PKa1pUXzN3L5E6IQu5QTbdozfeHCK8YkhiO\nyjQhazZ6GhIaXtnukG/8wghZYrgTLUGRJZsfbm4fC1XdmsCx1CMjdzkOA9aJ\nTeYuL01TU5Lk6ot+EXbikcf9iPzO6z4bWmJ8IjoZnNG52uIhHJKeWOya+0Zs\ns39m5FtSdrWAPe09hltEWrrtEY8VGrHDZiNmPnNMl1LzNW6l4LNwvaBbZrgr\n3jX8\r\n=CGXt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95e4eeea7.0","@material/rtl":"8.0.0-canary.95e4eeea7.0","@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/density":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.95e4eeea7.0_1597966138160_0.7186177321560607","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/switch","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"f18c75d1dea2d0d72bea01abe91fe36600dddc35","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.91ab1c62a.0.tgz","fileCount":38,"integrity":"sha512-8ZPXY2zyjN+E5XcMUGAs+8zY8Bm5O0nJDFjNbiq8s3jW5wkTmGwOOmNbUZ/lJzJ1v5a6Twc6W1vaQsqxClsnTg==","signatures":[{"sig":"MEUCIQDkCLI7DSj2tqRcvCEQeZhEsqe/I8IUQQuSrg+8Fdq/VAIgY96GsbRjTZJmuT5AcWb62yXNyLSIzWKQiaRCq9KCfBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+Q3CRA9TVsSAnZWagAAmW0P/0MLtVZi5r5EqA1LdKjI\nqtPgfPgxQ0rlhua52dcJfyYLCsBqPDpZe1amyIE3l+9zdHh/TT2XHMBtacAe\nZMyo4ZV5nXtwVXBODY+DB9bhiBGbjdcdV0TLtY6OuzcJs15o3S6iaQ6oozyH\n98Yp4dbLRFPg/NEU3xvnBb6o3KbUNkkNBd82wOoaFOx4jrsyYdIxCqgcDTjo\ndoKwfKYfA2N9aDtkwIxAUHiYOrLrZWn87POKQTRmy20ZdNW83x8mdI7yalEn\nTPzx0v8e4n1ZUUJ+ymJ5RFOU39Y67bLxWWGA7MzdTvJmQyvLmcH2zmuOxD/p\ndRlQ5OyuTVoEBh0Z43N2GskeACeZW//sLRfuupUNQPCFqvNf9L8761eSZc8B\nR8MwfgHMG8tlLickl8BBFvJmhN3TNtdsXar/Gjp4d0HkQXaYjO1bpzSqm/jw\nwyE+yOCDf680IaXvPSh1CFI//FGxTQE0j51IhcTlUZKcHojaYRGNwkmdV6jR\nCx1mJMNCEIRiNX3sU6efMeARdGsaVQRDyZqTy5yXq6R+MbRxFhkmFHVMYz4q\nVdHClyf6P3PyrRvdmAOBhSnBPg/gF/2/Zn9BqVsUOnT+/5aqlou3uabA/B2i\n1NTC/xghYjejw/stMG2omghHat01utkg1KKGybmYtK7YWOBSCgjcqjWncdHN\nIU5x\r\n=Sy/0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.91ab1c62a.0","@material/rtl":"8.0.0-canary.91ab1c62a.0","@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/density":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.91ab1c62a.0_1598022710705_0.8745512770661472","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/switch","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"47c736710a8da384d0e3dafc9b6a4e474bf96014","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.58eaa9f02.0.tgz","fileCount":38,"integrity":"sha512-DEY/5w9IvghD067glsif/FGgiAxf9D65vcaU+JOm9G17qkEi6yD2QUlHridEyHbb2yiN/Rg+7RWDyd/59XODQQ==","signatures":[{"sig":"MEQCIGMMLlFzlKZvkZG85ZNMoMlN2hy7g34uO3y7RZncaXdCAiB3vmN81icQ8V17NJG1ECSf8fHYtyaWrig7mj0e2dZedg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfcCRA9TVsSAnZWagAAf0wP/iHOQJyp0u/OHsiJdrNs\nN8TMZx/67nmoACfxwKe9A/1rujXot+kSzz3d6QR6J/0PQBdwC8wRR6rmW7uo\nKCNILp4798UYB0Be/2ytgdjR4B7nSvj8JNzoSmIkED5U9vPHurPUPKqaRfJi\nk27sRlcU4YCTf1stL/SQ0s4o86Va3HKykVM+SFUGKElh6w6ksv1KY+/4v3CV\nGkt+14U+Cd8lcw/ITqypAVBfioPXZvqlzK0PSSi0Wxx9YC2AR63KTUL9X7tj\nynl3RhQdUgXh0B6HeFOJ+FLonADJSB3TSWIgSYHRgdSPXMalZShJrEIFyNn6\n3dHxhMvyxykKWrhnDav0X9EgwGtgIstedVT5Fz3mFGsAtLhGSg9T8RudL+pZ\n0Y7R6ugg9pc82HvkEMSlsIe5avTK5DdSeipdnjnGxBUSaxtG7rvQy5gPPAw0\nxCtNvuOSvvSF/rgbuyenh9S6URrKqPFpywLeQAA0AQyTgbEsBu34EVlJXwO8\nKolQafbWrnNqjivrnHefZ+phK/XQ63nr/1g+OYfvnv125h1nR2IM62MgCEDa\n9TNTN+d8drddA2Mu+bejCJ6VJMtIsrrzmaXUo0VLZwP6A1wudNQ1KtaSsKC2\nUzOUZ61N+PfkAR5UWhVicI3DVcWPQZTdR4VWeRZZqU+DFE+TOsXWYyO6cI8u\nIIgi\r\n=P04L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58eaa9f02.0","@material/rtl":"8.0.0-canary.58eaa9f02.0","@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/density":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.58eaa9f02.0_1598040027071_0.37845300596754106","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/switch","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"c008c81c9d5910acbe59bcbb211850d10e7ee34e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.238216fc4.0.tgz","fileCount":38,"integrity":"sha512-M6X86xe+Cn3kcu72sAo4oeHb41gk6g25FfyeDut0IEd1cActHDuA/3TCvFRssdlVtzGQoe8zkL6wjcG+s4MYyw==","signatures":[{"sig":"MEUCIC0H5OUPRYwIof7UeinJV4poblAcGGgp/UW+CAQMVinMAiEA8BafaF2nsbnE8CnM9Fdg6fFKvla/vn7ZOPz1gtNxnTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+JCRA9TVsSAnZWagAA+CIP/0r6QKXfbBkIfjZZNKIs\nOnEO142GiJyaPE99tqFZTSgZe9JmwqKOi8o+yAEixJztJXuFP03i+N1tntPU\n7CLSnOsqIMpfQCbOYxo82RGlW+G15bKDs0S+bfoCF3S48EZbukne1KVOGUd0\nWyPLdBOtONa3Kl9pTdEKnGFqRRxN9oPdwBaDY954s79mGKxltGIUxoalwzjj\nGFOONyHwa5DkluLcKqq8hYIhe84Kq0vIuMl7h9WE42/9QdwrzO1wjc6lu/81\nGkIaocz8oHrAnuov8DblilnVM+r0gz+kUCVNLwgl09rf7CyxVmz0DJ+G9Qmr\nJVOYS9uQRVPdHzr8YcJLpj9qfykvbJfukdAvCfWKpZcfqCLcGsBdlg5LJXJF\nxDIRNHNwG5NebpjqVjTn0ilF40oFeh9X5WEOnaexhh/ANQfkxqWtWBgGRXvL\nnAiFIL1QcQc/zuWyeLdFLCr56BB26y1Tb7PYd1GxsH/rewICAvyq5bEkNVOt\nUAoLYyYiIu/PgclguWNJp09MFXVzk5c9f885yc2Gs8c0CkGM/MVwuN6DZFPX\ncYXY4y0tEVGGmKUZlO1qp2WaE6uq3ciry/ZVKEHEDGydgVsiQu59B3a/B5vo\nM3fYARJIwlXqwNj25vAx4JmNpZIOlcwK+UN+2phUz3CEEbVluErBRaOYPlGy\niGYw\r\n=VWkY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.238216fc4.0","@material/rtl":"8.0.0-canary.238216fc4.0","@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/density":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.238216fc4.0_1598283657424_0.9574877773431645","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/switch","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"a7ceb42300f3b83635bdd4e8d8598c3368d9d318","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a1c65593d.0.tgz","fileCount":38,"integrity":"sha512-cTKOBLU26c+Ret4TnwFbKs0m+ULngjZNLVX/LSK45aleMkFkE5veIx6LVCUO3SyFJ9rvLFp0evpFh5+UVKEETg==","signatures":[{"sig":"MEQCIF13xhpjoKysAbQbKlrix+VdRuWAgrp1M9OklAOYrKZDAiBMyHvK+FfivsnR4FJCCOmbigjgYmsIUTrcK389k8GKOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+cCRA9TVsSAnZWagAAOG8P/1ZSS/+t10AB3pyrbhR9\nIynvRknV/R46DWe60QlMDb8Qr0y0dc0kIZs3lVSENO3cSgFQFsz3rxX47EMl\neDRtp9HUMu0RRm5TuGLem4Or4Io1398V7cZ5h4Non+4WEU7Mm3aK+hfFkukY\nldYbtbxhHbnW0ZZfYpePRMEjn13NY54vfAVM71pjiS/Pmwmda2adtyw8HJL7\npSDBvJoMbWzC3m3Cyon6mZSXHu3uAt7fioLbZ6gLN5Y6Pynn47hiEgkH5PO/\njEKVwTAi5GCCfySzh/qqzWve534UMoCY+zXbWICefA+3F0IoaqR4OyJBMEPZ\nnVRIFM8SB00CRfnidivDd322CabKQR8yiOdgvQphtNt8GqKy0nkQfmn2eYZ6\n2wuaotJZpYqYjW8GBVd2sCzcn3EuX5mYRssR/Bp8xP7Cov+ZVH0roNfMM0vi\n0m9CL55YH/uMyFaOKbkdTcirGoX75Ywyz4Qd9hvnTI1ANPeCRCAVWaDXoKgF\n2UT4m8AtWGJ+rmH8DFDMCPPWlbpo8mHWhF2njlrOqNAyLjhzhwIYYaOP1qKe\n3s/6Knf3gwRpyJm+igsSOSZZDJ65R5CCtTQqQgGO8h78CU8k/6ehWq0sujw1\np2T4a17C9lpODz453EB97CYNbq52+kcuDpNCLJZtaNqcWmuvrEpVskiydSiX\n5Ff+\r\n=O2ES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1c65593d.0","@material/rtl":"8.0.0-canary.a1c65593d.0","@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/density":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a1c65593d.0_1598324636399_0.029358300611203925","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/switch","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"b7d73d13fc342c9c372a7c7e648f52c83c4e59ee","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.708cc09c4.0.tgz","fileCount":38,"integrity":"sha512-svmYqQgyAurTzRAuqfuj30wXRJs8uTPpe1onWyHteksRtmnHXxlU5L8DAS6Ao/0cFsu2ush+/f4NIBBNPKfO2Q==","signatures":[{"sig":"MEUCIQC9fKIGGKCSO0bOtJHdeZDSSfBHGWFixX7yk7wp/+jHiAIgTOdTOs3BdlWPE6wVLei/G3Nc5v2K0g/cDDqp75rc7W0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTSuCRA9TVsSAnZWagAAKQcP/2lAcAS3MXXHTsXvO+G6\nX7M/To9RTA19rtJZFat6wjco351zN9mLAKDqXOQ5gA2Tnt4P4KUQspzu5ZBG\nZd5puxruuy3OjDO/ruYTgIGfWP3j8Gw1A8siDuWnMd7BS7pD0WOzcyZNk7iy\nvjAe27wPf7oAWVBEtzonl/YIcEs6SnmVD/H/hesnmvSxyneYTaIR10gMKIRx\nKz3Kdpsww4xcZdtkh607VXF39IxZ/RqgBJkOfWj+xciI8+vKa/NSBJorINvO\n9rNXT6rWkwuoPwzTfAnXiA6WSVfO0hkMmiOPgI551Dxs4V9wFXmnolgrifYN\nxdYSbAnQ6OCu9Ez6+OZzXtI0IN5fFfSODBdDsCgLi1up1N7QKvdzrthU8eH6\nAQzrK3+oxMm9Awr0EammsJ3IPE8vxdKvuJn1xqa2Z5ujwxpVXizJmee1h6Jk\noZdK1FRgkX227T6j/eM2sHBHwYHjQEzWW5G8G18BNld8Le10ZUuQka3X3E9M\nhblqvi9bIVyU5XrAbnqp5G9dij3oonzELkDGO18P5frdX6NAm409fdhKgJEU\n7TvkveTd15No7NxWgFROjg0K3W1i97YsFlhrFIlvJRaBqxWa4VU1X+NHFtmW\nsWicGqmcnw7DUJEfMtaFex4EjYuPedBdx691om9OKjqJcV/gDou1RxAnU2vo\nRjLz\r\n=dzyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.708cc09c4.0","@material/rtl":"8.0.0-canary.708cc09c4.0","@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/density":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.708cc09c4.0_1598370990451_0.8447825726794258","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/switch","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"9cfdb715fab837369a89bad0537e08f0e96f02ed","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.19bea2ad3.0.tgz","fileCount":38,"integrity":"sha512-nBX9mDw8+rJeYM9JjUwlnD0fcJqIjBW6oPWsv1ITBLduoZxpnE+lb3iDSAH/aMpTQ/wJUgc0Vaolu7O2wcvgyA==","signatures":[{"sig":"MEQCIHDEzRq0tsoPrpnSOGZWFgOCQMGl78qYmGxxbvtrznweAiBIDiWfhW70kss97wIcWUNzg3Tij46jqV3Oj/TqZ1T4mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq62CRA9TVsSAnZWagAAhZsQAJO2os+Lvl+Dv3YiMGRN\neDveySgoefR/wbo2Is0IxlrA/oRoeqnfRpbolaB9tXRmKcWj04QyC0WHXyjz\nF8HGueOtYAHwsnMTA32ZewPu4FSSe5B1XsBTJ9v6jNtsoSY7sz/0X1BEVpiy\n7vUaqZlebDeREDibjdGrsyFASmIn3iUkoajKeXjFPrMFUf+rsSvlDq1DoLkT\n5Jy3LVHEvYODOVu/Ts5YlRgVdSHh7ij7IsR6mF/AtVPlaUvD7lGDSA98GiUl\niCuPuMe/8oQlJpek3tJv2d4yd3PMK2qkgOflEu6IS3+pqSUMSfLzIbIy5LsP\ndMpz6YERHgXRU1Y4j+Q/nEaatWzQO/qO050GDNPwbuWxIBNWqrOet93W8uFM\nUNriI/dXly8WmfGKfrCj3e52jfTH3lBxd6YUhDIW1UiKA97EIyHppVGfONq3\nfFLGY2RPh6doWshOp1GLLVJI78N69+l/3G2Z00pUaAfwCNyZVBH850Qh3NEO\nxcfjG0SFRZQUbTIH06i0R9pPY+USQwVgbDhcpAA9Olh/kpZhtfxS/baxR2LM\nJXRk9unqBPs25csznU84cwIHV1A8Qnsxksv7Yq3AqV/XYRLhIZMuwW/J39EH\nFQf5er7ccG+NhNYuq9OsZK37a+mfRRDaE7omXXhFCAjAEo/GlQB+/xiBSsso\n4AOi\r\n=PXrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.19bea2ad3.0","@material/rtl":"8.0.0-canary.19bea2ad3.0","@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/density":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.19bea2ad3.0_1598467766034_0.8289224264588801","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/switch","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"9b5b5685a7d30778f4506616984684e9243eeb7f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.911014711.0.tgz","fileCount":38,"integrity":"sha512-3R/mKlqL/Kq5vRTXrkBr0DzK2zMVWwsS6tQVWQBudIMxsrsTGbCeMTjfyXuAjZLu5TspTUcFR+aYXFpD7xN8yg==","signatures":[{"sig":"MEUCIBnVc54K2jNNin/AvbL0G644sGUdHzmRNSLHxChALk1rAiEAi6xAugg/uyn1pzSHor57gP9Jc1cDm4M0qGJ0EgEyeFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9prCRA9TVsSAnZWagAAwdMP/RrQl5/pXJZcRQgOHgku\nxkzmeJM/m+P6QWM3wINBrYNf6eljZbcE9jN58qTZ6VYMITBRXaQXRb18k893\nrdav0c640ASdKGrpeyda58h9KOaNq3Z6JoC6WfdmRBpU0neM4feSCfm+VlBn\n/fdO1LyJ9E284EbNLAQ5WZqKMq/NKP5hZVnqMDDGb11Z6CU0Xa2XZjrttdHs\nen6C0Krf07NhxugdYILpg+2TCMGI8DN68hsWJ/MnDra3CO+6arVSajp+sxOo\n1FBxmMGen/fhCxrWlf3V+IvklCpnmtvoX11RmN6ZpdgEvbv8SELiubctNLjl\nVUWfckTSuUZw16bou3Le+5vrlg0Blpa8BzsG+RrmU+v3l5qkd+F/N0usWRQY\nJHRsL/5uD6Ujro2+2hq9nziX539o0NA/mAXaEo2jGI9fRGfGf4fo7XOLaFOR\ne5VgM4OpNZOmUgqsgiV9c0WUfXUdKsiJ/OW2r/yb337WpyOCOzP4eAiRrywc\nFjNAqMkFaxuJR6O7N86ZBBQ7mKKG5ffQvykrP4TlTU5GxS5+aZLj21Q3QNw0\nTyZap0jCfhhjvkOPDR8UCK1K61n1Om5pBVS83wlNo8i5rsBVSoj7UHr1qtga\n4fpJrAYvjlf5HyKWvkTINDUXu8XF06QGucuHgp4dBIPLo3KO8FMz9ugLsGVN\nprsG\r\n=FOW2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.911014711.0","@material/rtl":"8.0.0-canary.911014711.0","@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/density":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.911014711.0_1598544490756_0.17028031111524444","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/switch","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"e0420c8778de7c15c6c2af2279d214fc150423e1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.d3387f54c.0.tgz","fileCount":38,"integrity":"sha512-fJip95/cvf1MkeSWetAugJdoQ41Yu1B0IfZvN1CDYI+baN8EwDyqTtlY8OHCon4SM+ALJzdbxYBd4J9XIN7k1w==","signatures":[{"sig":"MEUCIQDM9+4fOEOwURWMOmbVq6r8jvOWohhhA77LIAPG10ZLNwIgRIhcOqSmI7fFSo4frW9qk9ogXEylFeIVRjVpQlkBspw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVg0CRA9TVsSAnZWagAAFyoP/io2VgIqWiRGnIf55/Sk\nVIG/W3+5h5QgQQkppRd3UbYK4pEmUjKZDHgXDrsLYP8z0iwgSVirlnwOhuCQ\n09k3GTvaSCPtDF86UWlbkLO2DV3XZ7g9UjaED1mls8u56Uo5GWVejwib2pCV\nLWQMBdrLusVvUX4bK6/FEAwald2hTk09lOJCHeXgy8Eyl2DRE0USJj8RrFVV\nfyXkW5CTXJ20BVVnCasM4Ad9Eb+RK5wmugESayeNiLkyymJ3P3weq0aUIdUZ\n0lpmONB/2hIW0h91rzxTSnWQByquaqf44If4WASzeZovngVQjW2h7t8HAIJX\n1Fo17vwTjlaAFBmS38ou/F3aSl71pKo8E3IKsDP4lMRoOYqgiCPw3+nnMe7B\n13fdEhLjmlpr4tc7hnXAzGYFD/AIlgZimpAV0dIr+6c5a8TuwxT2oRjqnNKp\nQF5fsJtUF7xvNl8slAkp/zyztcgArJGRA3iHMVQ8rt8rF8O1wG0hPzoEW74r\nbATqS+jE2XKSIoawWe4ynkqEtItT3heTSBd/FDT0V3Sneum7w2pai9JLlO6i\nLJDj4+GERcTpp9tDmVmvnP2FT/MpQ5ogsVv/oil2crQUhresQq+Ps1IIb8Yu\nS9AX32Lci2FXpt7HDmSDxyiEqwh0qhnQ5O4jua0dYWpxoV9/XZtxAFkvvpsf\nX0Zh\r\n=7F0B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d3387f54c.0","@material/rtl":"8.0.0-canary.d3387f54c.0","@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/density":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.d3387f54c.0_1599166516226_0.6388797236666468","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/switch","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"21fe9ded5c4f00106b0a2f8fb607d74e188d429c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2ccf996cc.0.tgz","fileCount":38,"integrity":"sha512-Um5s7sg0YJnPPr0z1OzgreHkj3JwoojF4BV4EHUznCl0bL57g4MAY+ReItTvejqfycp1/9Niha+rWPTrVqVRrA==","signatures":[{"sig":"MEQCIDhZ3OgsrE0WiRAdSoh6bU6v5TYdSJDCIggnLlcseOdgAiB5T49XX8gHynk6Bip7PjBwOh9eVROI3RPpWMRHeotpRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhTCRA9TVsSAnZWagAApp8QAIyxrkAanNUVad8a1oOX\nuOa6kXSTjoYtufL0n4fmabPILE60La8rdN6ajSqJnR8RD5T2R0JVz8rvedJU\n8jjy4BTBzBNvzkOz5um1za7eYNn4PAHwx/k+N3K8FYmasUoSzX/sAHVzNrkj\nedzUBHBXj/V6omuIz0zyI0Tidr3L5sNc6Hk5d4Co+neRCTTfCETYxda5Cr8H\np4EEt6dvD9QNCoLrBHhNqrwXCE8OEcoeZU9SwYOnzMAxPgCZ+543Aeoayvbe\n9IcOfkKbyZyj6zVMCWLRZ67OwiEpdODPEejw4RIrvBXc71ejh4y4G3iqMvGs\nHENLmWouF0Ll8cBL8FbigW43jgXakUsD4062eHHYd3IfmBrpq8ZsNLXH+GC8\nWmee8kagX/V0BW5PXMZQpPyOMgmO3tkd3opGq9rDRfRf8Qhp5HMZV08k/chm\nkFXLAjs7oliS8Km14CjCT+WqnlaC8IBiOKMQoKqC/MRCVxVukrZfTAMUd1Jx\neAIGbiXPIEedZEq+xxdigqwxm7V3ugOS9QTNJOWHqQt1a4CE/DhEa1N0knom\nexQqcjTUaZzPi+dtTiyFkEeDoapLKljbIYAwMDZOu5bogidBSfaXSgrfNEP5\nj10pOhY1yEQ5x0htuzjCMk7vLELObIxc/OfRF1EIq72uu0ON4s13g5oJZEs7\n0iEL\r\n=ccJF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ccf996cc.0","@material/rtl":"8.0.0-canary.2ccf996cc.0","@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/density":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.2ccf996cc.0_1599166546537_0.7049748871436381","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/switch","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@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":"84163e48a1cf6f05bea765fbeeaa614145e43f17","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.744bfe5d8.0.tgz","fileCount":38,"integrity":"sha512-2gvq+cRohiis1chulwCRgUQeAJEL8obEFtHXzWycce4Ebi7rxfVOQzWy1wet6Xb3mJpeZ5eQOmXPq9h6q7a3cA==","signatures":[{"sig":"MEUCIAHlCIwDTujACU7b0a2RfGQLwprlxexJksZB+lqlVPkjAiEAvYpWpW7L+ISsJXl/640vqKwoZmZX+SReGpJaSCMTqqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVh/CRA9TVsSAnZWagAAfqQP/jax9Qp0+RQ1JYm0oBXS\n5t2jRycYO1RFFa+iBYYwnT1zPelx8ivT2Wmy87zMOvNEIyxA9F9IUJYC4OGu\n+kAXCXjMSxa6mP0VZNuk+ucB2MqweiEMnVj1cDTUwo5CF5TcuKXYA5YbuSCK\nw+068roxnfT8Ba6iHnVhuq/ZyU2NwNj6BGlS9bzseEm/obzO8vVnUy0y3yEV\nqAvLcsVUOXbW7rJo99uL1LQk8xmkTE5ha72DGE2eG0hTGtKj6Uq38633QNhY\nz/UVcv4sDTnzZhoun8e/odZG1lKdIolkC128VYm0qV+yEkWgewlt+ebYKPpX\n/FTb+Bs7Y5vbNb4xOsm7yMnCm+S0b5WwzS+SNwGCKaRBq4IsqmPDC4JnoyfG\npUY6UF5U6V/zp3J4162cYFOR+iVdarvAwahSyjv1560ZStVjc2pk7rhBA9OR\nELO7Vq/X1Qw824FDorh0xdLR/OM6LNwK6nToVhW5kKjZMvQNtrb7Y0WDyR+8\nkWveabWHl4CkoKTdOOaBnhCTrp3aUK2Yz9hiA1YzpbXV3bbitYYOvo2JAZAt\nIFAhubvvYfmiW5HOc1jsilDQNM32ge3XOK7C7M4IkPO1JuSQUrAw+zGyeD+e\nZrzh5ycTN6ITh9Euw12dv+IrCFwq9cxmNSAW1T321IkiRcQmJ6NNZhzhmyfH\nLqUo\r\n=3wxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.744bfe5d8.0","@material/rtl":"8.0.0-canary.744bfe5d8.0","@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/density":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.744bfe5d8.0_1599166591014_0.7061252343667119","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/switch","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2f4b688ae3b5757ca447a5691f3a4935868def5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.78da96eaf.0.tgz","fileCount":38,"integrity":"sha512-H6ry5iRq8J7A372Fxv3fsLhl4v4IgJ897UExPeYC0kNT7melS4uNYgbElL6kS+DkVNWI9Ev/8lMn6EGcLeJcrA==","signatures":[{"sig":"MEUCIDQnN64aGPVXkS9zbx929xw5kfnxYSOdWqZyE/5svO+bAiEAgkwdBD6jydSaC8m6R16XSbTUOl13Sb0VO+J6915CISw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9e4CRA9TVsSAnZWagAAbV4QAJdvrGMEk2IM8LQ72N8e\nWCSUzQhnonxpA26BZp4OcfZjS60jA7cDOXPWixT+Vsg/BsmPZakgOrOsVWYW\nUNi61A2Srz3N8UAaLN6WXqhMjj0ele3rSn+m9cDnd7wc5JeU5Q8WxBL4FnS5\ncBVtxN/NvQhZgEBDGcq6PBLIYB20lQpwSk9hRWOCZu2ulPG9wL+MTiu86TXX\n7XJq+v02EHt0nmXrB/Guxb6I+BlJIKD3iEsQEhVtDwVnHd4WE0MCiC/YF+lD\nx7c1uH5sgyDuBTo+BodbIVuiBNl/M4KJ5SE8tQc1BrdNRekAGzqe313apBWB\nfSGSQvij2T+TvtxzknFXG59xZ7XXelrfC77TkHW55xynUbVLEEQ35s+YFxpD\n5OJLbEtL95UVbgd2989lyKajQjXlQVSxJUtlLNR0PZBQgJobtjHI3brAewb1\n74+1G+ZtDdVbyJpwYWz0SXK9ThjJ0WC/4Tx7QBQZqOjb0ClRqqKSNaIjJkPT\n1ERmPEH4zZ6pzlCufJSU7d/BP31/V54Uqz1IHsBHgO2zKdScOLLIFHvbZxdn\nZVMsNZZgbPDbQAgZxgUDTMK1UpkohpPavn3KohoY3tVubGcOj7EF7WRM5smw\nEjAW1/vzj0V6as1eR9jKKNN1Sy8UK4pMqoRtZHL4HjaC+zhqAnIiDeHsC1r9\nhKjv\r\n=4o0X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.78da96eaf.0","@material/rtl":"8.0.0-canary.78da96eaf.0","@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/density":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.78da96eaf.0_1599592375578_0.3297564448475647","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/switch","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e9afb170586fc097895140323aa3282f8addd05","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.b0ed593cc.0.tgz","fileCount":38,"integrity":"sha512-TZpbpmEQHt126Qmkgejo+UpgZbngxv4k5CqxdJ7R81wFYWBP1yGeLG/yvDmgZu11CMXDsScU1am1P/k/o2wmWA==","signatures":[{"sig":"MEUCIQD14lEr9MbJYiMoTsgn5S8h3t0GhoHblAzdiVxUns9o1wIgRUJ9ZLGPqaEJrwLXLI3CMxmfhyGa7NtefoAYlgsaLOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMoCRA9TVsSAnZWagAA0TkP/3pcTkuNKpOz8Ba9ohMV\nlT6Aj+YQ7XF1erODqK3P28u06hdQeyetWn7/UZOqdwjgS2nfxsR2d2D0knwv\nmSb9hqBtIn2uleNnqSJyKi0KbzDxO7yL99MWoS1IO+PbHjWAkreS7KSmggkG\nqty8E12Y1SJME+R/aaCJ5sUqS/As3pDTZhU16y7ZdGdLHzAIXZPTI3Eu/fay\nCwcOMUFLrE08CK65FxFsIFowjuh6JI++bpyJDmgS3VdCrSkofdIvNr7iXHXQ\nLcVGc3kt2c/zAgYydAyTGT8cmsTonlhQwnI/EhqS4a6H9+fIunzhlZrve6Ml\nGJmjdMreRVefEvgCukmGvrpJOJTAGKxSdWD0HoKOCQt4EWJK3ZLl5dpBdGzj\npDKTI9G7PPaEcaScIj2Flm7w/qUf1EbAap4U/9msnRcGgD0Jhbncl6pfGj/9\nIIIGZ+W/SFIO5DDKtpmwrnEPlhEX9ByKYUSTOQN0uVpggMY5WE67FltJG8j8\nHHNQaYqsZraGrPsIGflkcqcMh/Zd689NSMM0zZKXLsJsSlct44mHYj44MIIA\nTnV60I5W0L83HDnPyoRnetuGYaHGpOWYhfyrW7unRtj2jOOHVB8i2ff6AiCH\nUkw6Ac1JwTjShtT8RLM0PdkpkygwuCS7vERsnTrkbsd0sJOA7QXa2PnVBI4W\n28K+\r\n=a6ZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0ed593cc.0","@material/rtl":"8.0.0-canary.b0ed593cc.0","@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/density":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.b0ed593cc.0_1599632168362_0.6738705107793059","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/switch","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48201ace2a56436bcee529453f7390241143cae","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":38,"integrity":"sha512-R1RHtWDQMMusD7g7GRJHLztuH8ZaRp+9J+6fdK0r6aG2ycLNnbTCbrnL44gpsMJZMjm+bpAjAW9zLEVGIS93qQ==","signatures":[{"sig":"MEUCIDDoCbnQdToJ96VXIHbD6u0pAE6DNnWlaHz8WCn7GVbFAiEA4RakCrzsfTMvwrujrEFXyuCf6TzFmw9KcqnhTE8Eb4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZPCRA9TVsSAnZWagAAwPwP/3tcInB5k+u+F26zkR/Y\ncXOpqC8d8AhCs9PahNo3gPtFs/1HPP9yog+qLrnWtEvSvU92owA4Dxq5g8tb\nUhZh8JmYU35M54yzEQoxGGvLjxtyHL5XAxWHpJ50nDqXmMIBFDFZQY/vshZN\nUIQwhmF9Baeko5wk85PfAYYKCYTR5FdxStbS5OXuZ2N1do4031MpaJKYSH5j\nNlP0wrZvQfMICGtz4P+2bPklHPGPt1Yx2aaJWLy1uilaoZZxNjZ8goqNKfAO\nqUoMv6AjmelyP4JK4YOxkQZfqd19VpiCILWaq+s2GJ3qTFsHIILMkO/+kdDB\namG9Y72f7VeWbcy/4CyhFKGoBWz86G0WEs9izmiNQfoMWuj5/9PE8IInvoUN\nPbKC9I98DHmnb1H7DiniuNkR+ePt8wUMhBHznZqx6IwMMPIZmsNcAVtQuu0n\nWWdhuGrE4sD+j2D8jd1cI3tkdCB1BkF6s9VX6Mf0NgrQveYDqcArdtW5ZEm0\nYsPmgLI8tao7X4ESM1QZcA3Fpv70a+6N1x/JPWxP/wUbzlNUUycGQ2dmAmEI\n8h/PT0RE5AFxmo1ZzVK4KPOt3167NPWZjzj1ricofk8cr1VcDux/iQA6+Xdp\n6eChgg652+iCKB04S8rUfkGSZP+ulske653KJKmLAMd7sYxXYRy65xD3hR8p\nG6Cb\r\n=E+Fg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@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/density":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.85a1fa9ea.0_1599772239285_0.6951338813479984","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/switch","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"479e72c4b10a4cf5484c532ec312e7616a6a5f52","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":38,"integrity":"sha512-JNzW81cf/6VDjkBoa4byPx8CN1lAluQRqrli1yedZExAfKSUL089xOqpF5sFWf2AsW0Jq7lFxVWhs9oJUU1+rg==","signatures":[{"sig":"MEYCIQDIGxpHi0NbzrDWGmLHDtX5egTelYuFX70+QvSoga3MgAIhAPZaxuk5gZS5CWPwcviI8bbJp5q1Ph+PZ5mkDgJ4Ytfx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7i/CRA9TVsSAnZWagAAxBMP/iiW9nNxYQi+sdnv/n12\nwLh8C6jsTTI4RoF36dumtYXbXvBUfSsTQzC4nyuUTIf1dVbNRzTjPwaImdjW\noXKsCLOtNkJQX6ew+4jXg8mvIZuE4d1wfMBm5ngBFSNL/yNenpYKGfa5SiPz\n3wUQZvaaXkFQpTlydCWqPNTTEm35TdL2LxCvtSWtBvSK0mu3+d9qA/ZovO9q\neEvJnzHmD9ZgXmOHjF1+FRiIBckTod0U6RufWyBfEu+4Vauu587z4338ZAZy\n5INFYDz9qv3S4P6Uty2hZupCftpRUM6mdrGTyWCA/+iS8G49q3nfdnFjekgC\nWgmrHN3FHZ47ftLmDUsF7BpUGQkuurrTmtWtCDD7rbFw1V8qOle7fqmPKwaw\nIyGsIR9j9PbtsQdzvMt4LN4NI/9CpPXDqIK3/pgHKdc5KNhfvahSsE3JhTcb\nLvaUSz8Tng0c/rNIqfKXehhE/fV7ZKNomR8Fs/PE9pesvuBfkgsfPqgh20/I\nj5mXlRTB3ipbeEnZzo4VSBzb0WMV9Fb5ZuPEgDog0nr87JDo9LqMcUrfor5c\nRZ42JHI6RLt/a7/THOUR3de11tQv9nk6GcBdzVStKWAJWNFrEO7pksevLA+n\nT1mO8IBlWrwjFTjszWxUBAsvWc7b2V9P48WBnz3XncmAZ2Hvn6ITs9GPTT7m\nmkLt\r\n=d+rP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@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/density":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.0bc41a9c7.0_1599846591280_0.17701968698699755","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/switch","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba824dc6a7ce3e73bc8875b59049ea391638f94d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fc0eb5013.0.tgz","fileCount":38,"integrity":"sha512-n5LvWOkr6w25DzHiseqRcEIX17AjqWvhjdCTDkobXu0631v/avoIfJyrUufQUMlZz9xm7wA3UPmiKd+GfZhs1w==","signatures":[{"sig":"MEUCIQCO3HldOBAw7wm3pWpFZpQfJb7SiwrOrXq29fNFqcqJagIgYeiO3rrzahBXBVkwxvEzjmzF2pg4xuFDfnF+LHP4/08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9ZACRA9TVsSAnZWagAAgnAP/1ejoEmiEvOyiuVo2hNd\nhwLPAZE3puokAduZ+MtbK2RXn25onzWkyBvBm/uBO/+p9Gn/pGnYkcGy3udv\nXf+a+f/GQumQmD3lwP9vTjlnV/Ifcp9z8KNuG5GQNBz9De6S2dRNxoGUBHjy\nTP+qGXXmO4PsXoRE3DSge8CIL9RoHuoVQii4uMjPpaQf99VwlqJYzen/8LMp\nQn1HrHfr6NUX0dw76CKMO/qLU676l+aJcxICLm2g4vDTER0F3QVQw/Ua6nk8\nvRGoaodqhX4G41tDxMKw7aYIc8Av15Yk2VP2IiQPt7AODOf1lWvtEmsxLZ9Z\nrup+j+lV+coVIGLqKUndTLKjDaB5O6ZFxIh06fT/GyT5psP2SRI06cg8NLVC\ntBb4hYw53e9rPMxSB4YPoJiSUHLSCDfyz0zOl1yBv4s3Xb4pCPVw2U70Lx8P\nre/ZUiuwLV4EDKCauQS80263z2AZ6zxfGpgfOLnYt2En7QIy6pNQDahgNp5A\nVOLbRiEQ0qQO7OyJD7R0BsnviDYjh3TDucad5PqW4pdRpxE3ZdS3t4xKTp58\n9D0RxxJ8WxskE11CVGc+c3qhNVkIhweyctn03ANloJ34cDPehrMlJOU8v8we\nhtlkMWXDBYbyEL2v5o9dSA3U1odTn7jYo0aNAs9awWMHpypb2kvqTB02QEZQ\nxVxB\r\n=QJNz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc0eb5013.0","@material/rtl":"8.0.0-canary.fc0eb5013.0","@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/density":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fc0eb5013.0_1599854143457_0.44209773297037525","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/switch","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.319bf66de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e902bba6d34e3d643396bd501faec94d991d713","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.319bf66de.0.tgz","fileCount":38,"integrity":"sha512-qLM8l2IWvaKEF/IM6MhO4tuyOzoPksG9Ca+2w9KTBV+37t23h+GX6LsYvouX0Nx9MMmILoFmqfYeJGpaA4alnQ==","signatures":[{"sig":"MEUCIQCtm8oKDfPIeyjX6Ap5DsW8weelA330VSbc7ML2BDYQPgIgfTQz316Kx0ZOgq2YOggUN7IVUd5lGF5lbDcQkpIn0OQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPbCRA9TVsSAnZWagAAwZcP/jrq8WIh4yNfwAkjaeSM\nUqm0LsEXMFp7QI3ARJ5E++g6EkJMqmsqzJ4XgJOzCxiSezw3e+OO/FjY6t2N\n2vMagG5hGi04L15OuP5Uoyi26eczpin/fIVY9TRx4W47/wbR+lroOyj33qhL\niD78wet/em4mo2KXaY8vQ+WZWUh2QejUAqquSpj4jD6IddlpDIiQCyAlxWbP\n3Tu9o6i9hc/XOM3oqa1zUOEtJiEFb71Zdu2414xQfzVJudupt/Pi9aaD8MqN\nKiHnZyQmJbeXY0VnHfG1Vwp82Af3vA++gXBwURe0cy6YgAhUGjwFwM7XEloe\nFJzc6p66okGMM46s/jydXLo3On2ungWsaT53kuLmudSuw+DamNxH9mGkSbfb\ndgj/eyAlCvxkpLGOZAGldQ9r3jT4tEPVyNRv6iseD2+W+Ft63uSg8PRcPT1E\n8AlDLoD0utsz5McPyVFrZcQ3Yp35RRdvo/K6REd7fOCXMdnqqG5jfjaiNnHF\nrqhxvUfc0C8OxTb/du8QFYjjZ3LpMWZXK4mSR1BHBo+hceJUiPWk+cD1YAVV\n7LGb4yFPfqhkPkWf/t9L6hcWLFihOatHeJnAWc8zLnMiFVd3uBGhKzGTJFLn\n3xJIGrJEvcmjqtQSL2O8EXl8iqMNKSMpv7keHcD51VEAfJgj6qNtURzc0Ca/\ncAth\r\n=cLBt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.319bf66de.0","@material/rtl":"8.0.0-canary.319bf66de.0","@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/density":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.319bf66de.0_1599865819056_0.4120903799338336","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/switch","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81409f9772a6719ab2aa957bbf5fc4d4723e8e05","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.5bfc305ec.0.tgz","fileCount":38,"integrity":"sha512-wDV/H7EV10hsmlY4bF/SC6OshqGS8iddTWbaM10JcaWLYJDjQ9jnRvZevZI3IMxLfy5Q5niFUrISaNzZbXtL6Q==","signatures":[{"sig":"MEUCIQDYNB5a2WhxASo5mCUZKaA/F9VrnG6O5qBmU0S665nz2wIgeJac6nF4fKsvb1x0onQUvUkB9YiLToZbcRfZjTy5OX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqSFCRA9TVsSAnZWagAAFRsQAIqlaKHNG+5ahCElZkiH\n/mMLM1O36VNohWL/j5R9DwwbFqJgke0/uf1n2r1HO6Rg5oUkeuDjBF+GRcuu\n6LI+jAhRRgqNt1COFZjH4G2ipEK7PmjDPlW8LYelMZ+TOx8/3m7/rLKO2Iu0\nt7G0h5KjkUgt31aFF3dae6OTcI6l1ezPwzmp8puLXF7gnqh74xhCm09qsNdT\nI+PJfwQLEvQy5htukxU4WrxtN48jOMT/TEMGBgcoTUz/TfSTdaXM/Vhf+fMY\n5YKDqoSdueQL45CDBKccOw0XbQufzVDdN7JNu+K0fGnIxYBkYlcQSZcCJgBd\nZtnItnpnkZtSMBS0PKm7kTeUcWk6rzbXX8xT8qN0uQdUEWu6lW9eQ6h0Icjk\nip0vJCVJZPG0cjl1W9C7gu/Umujg9Qp0DYCNzT2URKmT5SVEDWrOzGVu2Ep8\n8Xuw+rF48dQ2DdJvx1IQ1LM8IkGIg+iMiIU9LGv+TooAntS8OeoITvogCH2D\nDYQacGWJeyR5xsJAIXSepim1EYHYInZPHpiKLMhOC224B7A+TDj9GnNv8NaR\nwuUVa0A4FQNuIeCUDIjZWfTD+G4Fww5qtJlZq1JJ8qPZkcnIn4y0kaqkj7Fd\nLUZUDM3maV1raBvZjj/7W6wS35kpsaEKSFOdiwxE4uOhi9hDMcTbkimPZrot\n4anv\r\n=EbqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5bfc305ec.0","@material/rtl":"8.0.0-canary.5bfc305ec.0","@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/density":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.5bfc305ec.0_1600038020542_0.12632076787166957","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/switch","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.83d83f131.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69066ffa64b7c0a103969c13630e4b09ce84394e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.83d83f131.0.tgz","fileCount":38,"integrity":"sha512-jaTFz1ZpUJzLfMI5y6SZ88yL+hyRFfZdB4C9jRnJ5U73ZGSnrIcAIc64AtaFHPO27znZZWp0R+IHfPIJXp9vyA==","signatures":[{"sig":"MEQCIAJpYpBHrvkB2h4PyZCEM1zuo3/GMhDPJnDHZ/N7SAO4AiBu1LoRl+xQa0W/U+jP88yTvunU7EQMS8jzlgkCbGenmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrozCRA9TVsSAnZWagAAt3oP/iLAtwIFs1/wA+j2kxzn\ntmo1a0BRq6Bh3UmgnajlwxFlco4eebkkhEjgLQJsUU6nDIDoXmQY/P/za3RL\nycoGNF8hsYXY5NfpViKDQKl7Pux9UDz9pPE2+tU4D498Qqu8wCOdzm+7V8Ws\nLcWikeVMsUEkoG7tDSDlNavbtnJUirrBysGHsu81LZv+fKVC/cq9EuXSHaIJ\nnUT71qco2OCX1yKSfQEz1Vfj8NRh7X2gZgei5wnjvd4NoJo+B2GW7yqga6X9\nBeCeGAaik7fNBck50tw2gmqD9z8mq8+z04H5WN54+YM7tyHvI6GrBmninvl2\nBoLrOQoLkfOEBh92T4kVKysz0GOyFxXwcXBobNQIr0fAX66nDAI1r8cQnf05\nrylwwPufVH0DafNOnJJm7WVFYjxLjW3r78g0gnlo5W2Fs5Dti4vNXGRbFdx+\nYUwD7v5+IcMxLkQ6OLbMncxIsCapCS2EGF/ZImMgmxCy9f6hv0dk3XDdb3T5\nP0azRPsiCkoD7uO/6HDwLItwUU84ERxx5MnB0Es6l0siX6tX7W51kTGAS2ry\nnEZIH5jCvqSy1Q+MzFLANViqlAbihVcj1pCrnNKCFC1GizXjuMaXHqUVu+r9\nqWroNBkx6zZQm/LmHoqe7HremOj36SNjN/tQP2B9IyFIZRQvzdzXEh1m6tOi\nES6Y\r\n=rq6d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.83d83f131.0","@material/rtl":"8.0.0-canary.83d83f131.0","@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/density":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.83d83f131.0_1600043571370_0.6508406601523542","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/switch","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.40d8e4726.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6283ed0995bcfe467886651f838e71902e71b2e1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.40d8e4726.0.tgz","fileCount":38,"integrity":"sha512-uxPAywJb+81T6LCJQbiUK//0rJxeSuXFQX8Ld+jHkaJ2UoOHOzwo3XNzgVjafuLhjqcatnieAexSoRqGzZkJRA==","signatures":[{"sig":"MEUCIAurYxSEvmayvMWbNWMJUp3M27y0UrIZ1boatNKzhA4QAiEAyOyaYgv6uDl9pbNk2XTNlmyadajvljnsPRr0GrMILU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/z7CRA9TVsSAnZWagAAE2MP/3hS9RW9JucjZjz0syvb\n+C75wbZScCTsS9xcX7lkLQbnYOIdH2PQhjmBiohsHs7lN5rgT9PDYp73YtZb\nMoqj/xzIT8eAw8DvjNVpcnyWQD7a9E7xQeN0qYBgxLCq2vJsj8+QVBg9sayY\nAgrZCZZnsfvaFvqrGu6P2WOvucQTC/ADlB9QDB7j869a29rnfh631PkoWq3N\nTlgBz5Cr7iLxBr/WMaFWs7JMiHuUy+VDYu46AaZJeuD+tOvTwN4kKYqTOYeS\nXNa7z4GeCge0dT34kc4X3oBcfwuOiAIbI1rzhjvegjUPuucEuGtZl9QubuIB\nFEg05uTdoilQMk2NbjPkBdxxFNoGGM1an/hvXflWkWt4ctqmZNe1NC+KCqmy\n8DeijDciPjWWQjv/gVzOGpIGIgiUzfcMrdms3LWX318UZ21o+8gYFgIVcVeD\ndes1e8BYOK8UrsGffPDKHjmDY78BQFN5oFxFakTnGMuJl3YoLExKSSLuPhRQ\nvdQw7Mtetbwna2CO6/qYj6d4fKbk+p5hMjhORRGEasCBfrwgWwBuRoFIQHdH\n5sucp5LtvlckYgmz5u/+LiDREMG37Trc2DqCeyeE1HcVVjw89BaPk4LyrFZK\nMe0YxaxqduhKr/9o1QoEnOgaOIuf2acIq8PQihJcrPKxak/pNOXUVlsEtw+w\nffJh\r\n=FYh3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.40d8e4726.0","@material/rtl":"8.0.0-canary.40d8e4726.0","@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/density":"8.0.0-canary.40d8e4726.0","@material/animation":"8.0.0-canary.40d8e4726.0","@material/elevation":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.40d8e4726.0_1600126203371_0.06524094681801951","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/switch","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.c25d70a31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ff0a3b8a243a9d7b00a2d489dc330ee7b239453","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.c25d70a31.0.tgz","fileCount":38,"integrity":"sha512-j9q5GSfgqJpuE3oo1cR86tiTI6NR9Ai3hKx1NYYmgAT7hL0KWrJyUzIfZJYV82EYNLaBuWVjk/44fpx9QyM0tA==","signatures":[{"sig":"MEQCIHJ1kisSsBYU+0lRPI8hh0CZ1E1aITPuwOftGdvER0NkAiAzGhgtXHl0BDTmvAI0B0Dj3734ZB7pVqoLi4PHpbrJ0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCbwCRA9TVsSAnZWagAAMiQP/j9UD1/OexbVDcgXpKyZ\n03+hcoAl/bJ98ePOWtL4QNqTcIqohZRLQl4jn6zykKTeNxUuu13eisPclb4H\n9qIcbCpdq9tuOfUZU7mccA7NGqodDt9KAdQ+KzqNumbNrD/2metBkACXdd/t\nkd+r/U1FgXyZFjMLjWuDwGQdeTC9aSOKISYQVIVkh67Ka8/Lyiry0lEHHt2D\n2duoedxJloBs6SUThqIdVjTm2palJ4G3Gi9MNPH6gEgc+QI/8k1Gb2po5KFO\nnbu2U6jsDuvcgxqsC9CBVTDIUCrSJ2pG6+XoGmLxDK0HTk/H2ijrri7YevEJ\nmaz59BHZFMiiaJedBFfpxuO7Fx10hMTS38TIsS58X3ygXa5sAYq8H4FAh5PF\nVBoiG1IdV6kG2lH6fBYflYVYBxUza/7kbH7iCBgRz3OVQ6dX5ihoXV2LCibN\n0E8DnRulzVi+BZo44BiiiMVUTmgVIKX/ijCTxT4WFruzGgwVXasd+Z0L6Bhw\nHwg/PWma2GHjRPPKZ6mPUFL6cwFNKIdLCur5rdfPhMv13qzRr5TXkJz/Aal8\ncTNnll2da4sSzXYBO5o2UkR14a5fsiQDFV21mpSqdlTGuhsrUp1K6oSrz65U\nZ1IMi+RRKYDnI4dXcL9y6DdvKZazslvRH9QHOaczk6+XIBwX38g0o9O7UT1c\nd8JZ\r\n=YiG3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c25d70a31.0","@material/rtl":"8.0.0-canary.c25d70a31.0","@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/density":"8.0.0-canary.c25d70a31.0","@material/animation":"8.0.0-canary.c25d70a31.0","@material/elevation":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.c25d70a31.0_1600136944464_0.43409086337983527","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/switch","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86dcac7436cffdaf44fdaa0bd49ffeff26729722","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.d52b165b5.0.tgz","fileCount":38,"integrity":"sha512-7v+9/VyFjDflFqpyi8UjCVLczLLzQ0/kMtwhp1l+xN2YuBM+oZogDmgwXklQ96Fh7C1MVBGplXTv2GhKUZV3Xg==","signatures":[{"sig":"MEUCIQDIUmH1t4n2tL1KyYfef4vF+v0Kaaaz+ZQlBRIRrxpoVwIgUMgZpiJDqmJFZ1wRrGZwjqCmloVFPt9zFVGYd3q1/sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWmCRA9TVsSAnZWagAAKaoP/20cd4k4YAKSPyuPb8iv\nW4k+DisnyWmxtkzuP9zYVknHeYV0cUOPuCBlR3SggtPZ0n/bZvCTU2JrcJcV\nDDHI8rk3xAxjQP98P/JJ3cFXOnq84dNHN0JmNhDHLGmUs9YXOs+zrpPtUJHp\nzJhxXogD11rnf4Kdr7b/lXPJw1WSp1mKq73iB9gk5efnZtvm773yoDc68//G\nK4BDagBrPKBQyIjknil1NuaI1zG/tw+6qmyx3RBNifj38TcV/bjsNzD6/X5+\nUPsRwQgZ565jeG1nSqmqdgAYPaWsiuYVBafoCFcRBebsc3jCi/C7BMBBKrBZ\nKchGHaouTk424AyCs1U1iIhP+XbCqSAhT0HvXPvnImEmE0KZf5ZfHUAu4GuA\nvtxLjwA35/Yfa+i3/KlEH95SNgCQPcFAgLiCJpjnQhjDIBsjVCgmM6jPcyqj\nNeAMcnQYMZd15UdK9iq9FA/aLcd2GFxkNgYRg0HWKfRw5M1sOF2kOrtJFHbh\nyphvegA3QgHkp7/4iLx18J8Ai9YbY22sR0H9fYP+O1wMCTgWIkce8OYpnv+X\nI4pcIYqd6pMxbMbMFYlxohlYCrh2UF87ZGFMyaygmypZZTgxXByQx1J5lDPO\neCKopVErAVgHVZtJJ5l+aBWy6d40XM863rXLW0GY/SCEWW+cYNd8N7bJ2KOe\no/Wm\r\n=g4KF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d52b165b5.0","@material/rtl":"8.0.0-canary.d52b165b5.0","@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/density":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.d52b165b5.0_1600181669930_0.007463819197272459","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/switch","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.a831d4799.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"320a1d8453e79cb388972eb763e9904aa805b0e4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a831d4799.0.tgz","fileCount":38,"integrity":"sha512-7FXxgzY7BAFaYlw6CpY1JC+0o7MNwj7U4Frrf90ChUm29yH0LgNVRIodkc9s2Xz3NP57aGGW1sFhjhf3Jt6OVw==","signatures":[{"sig":"MEUCIQDhI9bGB9jNbHLhv9durCUc7aBkLS4JOOZmyECoWiQTUgIgPyK4wtkxt0xla9V868IPfD+Li0NjyHHVap6G+OPQ4xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP9CCRA9TVsSAnZWagAA3KgP/jsCf5f5SRZ7DBdtinZ+\nzSCgHRrMsnNFEe6xgnXrFjTeaNdzYBWr6rhp+7kfmEMOMAFcRh3GOt0mczcJ\nHITVoo0cXhqHRAiBPjEH7hmE0IXj8Z1TTKy4UH6+hRN9LTZy7upnqhOmrzp7\nOmhlyYr5Cx6IsAMw/9PjKPzX3JG4Uo432/uCkJ3AW3PUJ6bPh0eemIwLynmU\nulYj3ep+DYUQGt1lLhbqkvIL+yiWK9FJeg0GhglICZdbtYzTobkZwctQiM2K\nWVacoX0FKzNSCZIv1iJ8Q85zT88YkrizsfoWl+0LqlY0ECCRJZ9InUaPxak4\nAifBlZRDjPnJ6aCE4V5Tzpx/5u52VkqySAXZ0gBSCV8f1Wm1g7E/X98UQVka\nVV/FBXxbBtz1bHxUhuk9izAhS+XuI7J2FL2OYu380xA2z8fiuofSV8JKF18x\nWr5EmaCBLxs1Vrk/Pi1eYQIqWavGaGfwyNJ+xGRlNI23y7/IPmKZzD8i2mes\n8tKd0HdD8L0VH04Jm/1yFtfqarMQlNWAaZjk33fOdG+plYci42tNkrFUgfEr\nYnE5nxytfLTCw/q1Ul3HN6v5lQyEWaSXA81kyslZN0z2sYbSb4hwlfC3EOY7\nSde93EXea3gOMYulI3M2nvl3Ht1uhlfPNlTNy835S0qCk0LAWrIg76Nlb+Nh\ntv85\r\n=du6/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a831d4799.0","@material/rtl":"8.0.0-canary.a831d4799.0","@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/density":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a831d4799.0_1600192321926_0.30205096027159417","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/switch","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.a306aa488.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8fca8e1539bb26e02a39b79e708c8519c8b73c9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a306aa488.0.tgz","fileCount":38,"integrity":"sha512-YgPlF/SjsQcL4KFLFojuAYD0fHs47EterpFrmsdB18hBZO48XF2AFKKa5J6f2Sk7H7gBFTbCp4kdo3Pblu4XnA==","signatures":[{"sig":"MEUCIQDC5TH+4OaeASkGaGIc6NJU3jqiXBe43F7j2kQrVfIQeAIgN5CujzNo7b82evQs1h22qHBJuqP7Lljh/Qdd7dwIKno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrTMCRA9TVsSAnZWagAA/mAP/00+S1lRA5ONVy2rC+cc\n3P2r0zpyT94FItWyRdsXvaAjYkepDNyJnA1+xsTGNlFlt506h80NM58bhDgE\nd+BTnyNtrJoyS8mHzlL9UIOfGC+OGU8UiHK4g8HOubDl0RHHenCZxg7On19z\nXOs2wJjD73GngL8JDdUs4O70NFcDzh+h0Tz4y6vMFBIXpGHZ+pVV2EK20c/7\n9A40wpjLqTLs5hiNjc02veIml4b+lelEgFDXPgWSf/xJAxT0De45pvEowcsL\ncrDJlONGMUY2V4Df9clnbQhuKq0lAYvm/emcMSD8VXbw/TJvunTfhPNmF50P\n/vHmAHoJqpj5D04mIsL5ywxJpjCFW7z3zQYk/34JY2qiLyrrDJ5uTUuTq/QG\nQzgdVXTCghDq8X2mX/zlcb5wahsIef6CGhbNOY2dn4TBW5nxnGLnNTqcxPdr\nJcC0eNhFyBXVhRNedE8HICsiUCho5IW40vAggJYsOB/DCt/MdK2hyMNVYqry\nZRf7lznkLh4u3Tw6I0XCrkYBjFCTcUSyg3Pr8yELQ4vvffD9cXym92Ijy7r0\nG2IXcgNtOBg/LkBIbydQhSJhUdLQ01nBKsbXpktTh72glKrFYLcqCHMoKFpX\nFc2BlH31hOcUExlZYQ3wOjW2eBf9aTGiqZ/YIOminu+ahteyMGMagHTAWrtj\nip2w\r\n=fN/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a306aa488.0","@material/rtl":"8.0.0-canary.a306aa488.0","@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/density":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.a306aa488.0_1600304332043_0.7487511534602627","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/switch","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"991371768b019dde92056d5503397af90787a9dc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fd608ff66.0.tgz","fileCount":38,"integrity":"sha512-+5NPx9UoO+7x+0bwtebZDTbEHihyxpPmtCCwSFgWzX1i8dWv+hpCxL1bOEM9RwPAYMaO53rRRwe+kRN6ih8U1Q==","signatures":[{"sig":"MEUCIQD4FFD9NFxlKbPHn+dL1lxsqU884CaFIluPy+KIGznE4QIgKdL6x6fqdrRAtdOvKZMhL4TYMSQ8rCy0r847ljWCp1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3HwCRA9TVsSAnZWagAAoEkP/j1zoHUeWUhm4TtVo7k8\nQfsxtu6H1JeccxXVFylXy3CXEm1FHRk1QTD615/5DmvETvmrM23iPt2oFxhK\nJnCIkEuM/udYTURm0uGJ/WFzVOu0aawPBXIhGd093kjnGD2/M3TJADYksoji\neu+jzGf3m3hrlMw79LzqYx+ZjK61cmk8Gib1YHHCQDvjKCDcnKkkFAG0auXF\nI0U7fToaK46K9rx1mGKToehikd3BnJIKlCd2DSozlaC1qQmpNSNjibhskgCe\n1hGRgy5wvCXRCV5hLCfaIP56PILc/QMJttcE6fD7e7gl8UjSZSmZ07qMN/se\nOA3AbGrFCkjh/mES9a8d+Y7EUfL1NoX0ARWiKSTX4c3KT3hTwyahQ/GogDbM\noZsayIgQyu6LRfcMTD5uqRFbX7gtTwobycMvXxnedbL68PibPqhpaJ7soTkn\nC0Zt5kc7EzDaSbt25H6/mc/9NjZKcNhK7urOd1UbTGqDx+7avXhZombFlVHe\ni+A6F3nEUqjgZF6Sps/L3NJAcJGg8I2TuKXmaT1Wx6wwJduvuhO4JVWcLiZP\nIAqqOPYuWSCfhnsTCHNvTKGCwuMc6gIf5BmUbyQOthIyeTH/6gX+9altuYQO\nS3LeVLaiDsjg4uSusxE/JYDB9wK4BQLry79mECbVqLkJN6BmdCvSzd3fpFb6\n1d9F\r\n=R56k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd608ff66.0","@material/rtl":"8.0.0-canary.fd608ff66.0","@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/density":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.fd608ff66.0_1600352752212_0.26538825598314886","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/switch","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac81046911f7e68610a0aaca4c959eda3fbe57c8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.3e435ba57.0.tgz","fileCount":38,"integrity":"sha512-MTkyxnFov8ygrjl9e0Yx+0TdLxUg1uhMTr+9Mv3p773/YKcDR8ELI1vFkPYUZELFtJhkGAe+Da/Wx0EtiRpGIQ==","signatures":[{"sig":"MEQCIHU677BJGAr79/p3QysBClOs606f/OR2lUMz4z0ojH9cAiB6RSf9jM+hyzt+iUGMHvB4EQHofSt1ptDpaz5zGYFMWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3X8CRA9TVsSAnZWagAAvgUP/RfE7WG8VRpSNcym7VlS\nmRelJmlqUSv8Ys2qiB+Evn9lT5FF+PxCFpb5mA1VOnkPyi4fTP0zcP/SAOLz\nnCOMl/zObwNrNKvCmfbttFIoPHDlwSfxcGbsTaNkFEW8pF97cqr9Q39yPhcD\nDwOHKeAILgp6odOpzs0EmWfmmfObWdpY0BDZsa90fDiI7bD0OsG31bFX6cZh\n6URx/CyRcIaYbe0wFAGS9Hv4TvZkrpdi1pC4ooJfktnw7eupM9k5AcK2TI+y\nYVdmPyY9s81OPNM4vCELLdEhJT1eyZh55WJRFA/c+r8EJlLOwgJNIMZwxkpj\nBVl87EuwBEBhbkIcHdLrdlpdBwLSq116rAtDV0f+rUjC0p4ES5Yg1eoQ8Wgo\nKeBi5pukGtpQ041JIAnLkr1UG8Pvo3J2WEQG05ALH04TT68hfPUC9zfeYb/X\noc2WQjXFqi2Gig4q2yeU8j1H6KmLPQjAAg3PI2MEu5Alb6zz2nI8OF0UNBmR\nvlXO1WfSl7hfoz4v0AkDcAtKd/lNRLbC/nJ/udIjEJTxuQ4S7WGUqIrzSyv9\njC3HbsUFGXMIA+M9i38BCd0z/2j10ziXMJi+TChDEtv6Ql3qbSbkJ5y+yrop\nG8zu0BidSayw84LrcTe+4Pl3vLjYbnJMPOu/hnkKbOGNss151/CiPJRfATTi\nW+0s\r\n=DFoP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.3e435ba57.0","@material/rtl":"8.0.0-canary.3e435ba57.0","@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/density":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.3e435ba57.0_1600353788431_0.3536935770357499","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/switch","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1a37be7d0503e910781857f8f18fc34d1d0b86b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.c250ec52a.0.tgz","fileCount":38,"integrity":"sha512-HsbIZAYm1NQT3MD+gBj0AFAXCC6fNCMDLHtVDqp6zLCU/XIpK+/NiY5WW/J++jpIwVplwa0GlxuEjOmXAkNQrQ==","signatures":[{"sig":"MEUCIQC97pT/xe/NUKSb+DY7fL2yhINXBhnIEmPC05/qROrVJAIgCVnt53P51yXPx9ZDl6CcKoKgFFBzDRduTXXn/cCEgwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8LBCRA9TVsSAnZWagAAaagP/ivA2hpF7CiYVpchiv3T\nQa9R2LDartCDy9dbnKc+TuEgUtWyOcYSOZcFFcPTsNIWri+3NZnJaqNnIF4B\nVwlkNA7Thj856dg9kyRMTUiKtkMDErfzSgjBJQEEzvQB5rcNt9zZ9gaoAJd+\nfoChaxUjYVzLCC4tQUVNy3OmCiG4rtvXNEvXFWbeZEm7KsMLERvKq4oPkQBW\nkWw0cU/aJBpxRctf44ve6482FHQcxcA+HAG4AySIkng5ZNdaDlzG1RIvRkD3\nsc1O0ORJZs2owUBdcWwIan1Uh8Ay/DlCdb/1ieoN2jW3pUaQh/EsiQw97GaM\nrowmM2xCz7rIZKEyR4P0ArMkbkI+1ZDdCoNSs98Eu0gLPVi8jpGpQVblzCWS\ntzj3XeaLtYv8qHzxXw8ivEn+hKPpvh4CNMaMh2Bb7q8lBrZXpaF00UpD/AMF\nBXbwUVS/T0bdxkFd3fWWgxZXe3nRuAawZ0lMeVKmOm8otjVm9w5/W31kSrA9\npnGa/SuZl+ZKHIYGA3Pg+mA/gghKWXSEedsh8N1J2nq4aFlX8b1nZevEuqam\nKp7GXRMdb4CxewWt1QbiCNH1FOQyMa7NJJSo5KUj5ZIcZBMLWKkMHRdAekY8\ni94wx8yU8cWMN/hqE4X30Myxt9bbyai5GM8ZONiKFPphVwmg1oMzgq5dICZd\nA0YZ\r\n=mJMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c250ec52a.0","@material/rtl":"8.0.0-canary.c250ec52a.0","@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/density":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.c250ec52a.0_1600373440444_0.9046488654430787","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/switch","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c82dc41e41b34ae8895b81544c86dee841ef07e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.e34e411b1.0.tgz","fileCount":38,"integrity":"sha512-ZRMYzpFosPygG7bvPsR8IjhDKtdsvfdG4vFryrDg2LTQpdWwaAaIpw6SZfEoVtB+bZLzT4xjLscUe6GoUa+5VQ==","signatures":[{"sig":"MEYCIQCEGv8MrRb9DfVkXSmp11VkrJCXxv3k54FNoiBkF2IxkQIhAMosQF0ZxVWbvdCU2QCGftwFrcYrvX3zyPZbstrBEj3k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8R7CRA9TVsSAnZWagAAAZ8P/2T6DjVCYxCSFNCFV9Gp\nDUJCf3QGmhIKUBBlMR2BjZ/jU5VzEDuc+6cxKZ5AYXcCyEQNQMdTsdw7espo\npsvShWMHz+MWQpNOT506UmHhKB6kDVuqSR42T21vqRLbtSku2YfRG2GUX64i\nBVeBSOtCGdivvCzHqlC2u8D2fkqWlvd2q8cvJ9MF7Su3C8aBzlrqLey/aUvH\n2trvGsF1EfRtkO62lXL3q7mZpnJKEhOpxfTbgTDPbooiXBmZFU1WF/w3kxfu\njzMEN6zicU6Z6vViwQjEF8nY0Pxb2+UmnaydctquCsOMLsTjOVqokmBh08FE\nLR3ISjZHXVqUgbNmHqIEF04Sfbv7MfTlz69oujFisKx0YNZKtWUhSnJkxSqY\nV9GRI+QV0fSurDmCDapp6ztETVT1Qaa60k271mrkJnFTODM8HFRU/BKOr/mR\nuEvnA/1/cSAh5556uDZBUplRj0ZtWRRyZWhygTu7dfRiC2GXvmIypegbnwKs\nY1DidlbkZP9VEBI7BVBDxo0xnbQXq8nvYhRvYT8n5TxMsEHfHp6BmvBzdOLf\nSl5Qzn9fFv0n0zYkSr+oafB0i04yqoRcx5y+kQCl2GC161u2bB2v28EgU9q3\np9oHkmEtLFch2lwY1a8INU3fngpN0muGE/RT4nXUR+8aGlIziGHDC6Zsklku\nBwJ7\r\n=JN0k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e34e411b1.0","@material/rtl":"8.0.0-canary.e34e411b1.0","@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/density":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.e34e411b1.0_1600373882740_0.05046424721185061","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/switch","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.4e9343929.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ec8c789bd1929e52b63820a320ae3620b866652","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.4e9343929.0.tgz","fileCount":38,"integrity":"sha512-NAvCak2ghgjN6BeEi24PhpCQ5IJZ834fRehDiPqhb/EJjZ/ybwKLFLVHo2hq6FvSkjt1mdkG6b8J53b8bi0Chg==","signatures":[{"sig":"MEUCIG2flGp/g91lp8FFMQW8iB/h6PofNMZdYNtz2t2R0iQNAiEA86X7pzyjQAZq44GNgFrz7HUYv3deNC6hvkH2pquoy5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8pmCRA9TVsSAnZWagAA7qMQAKAcAPJ97yr8cTWeedDY\nbtCOJftJ9S8SBV54HWo67ftlcrgnU5/wLwyzh6x1bMqu6CNUKeA7wPsb238h\nDN63xcxRFJJ8JqisBaVnAuq/WWDSyNZzzsOtiDy1N3qCI9FjtxJg1xQeGcjz\nWExOOchfqMjUuCjXeO53NWrNpLgBBzrRAXGHFSx9Xv855FZV0bep/vP8ZsUD\nscSJduBsUWZ+YVN8sz6OA8wbofHxa40auO6o49eIGuL2XXevwSBGNX70JCsZ\nypYS3iErSPJfTXJ4eIXQJVX0OjlD0yg/o4HIW3r5k6P1+f+WVkHpvaA4q0eL\nQDQRkqNt3B+zXRsMV1Pw8E3vHNyLhMBryXpLD0QUk8Yj2xVMv97JHdx77HLN\n+PMlBcRtNO7SMmFRLRZFv3pAOLb/HdnHR5a1WWgwiiDdSyHbvwAxlOPCstSS\nVofbFtmpHdL3OVNyTgQYzCFJpsVSZYmT4zhxiBwUuazxj8DBaFNU963e0RIw\nHYIcGCrjsqTOhIcIETYFVnsG090iO8+6Sdu0Rr4yDhrzx+/4GTiDwaKczLLE\nzElR5cjMIV3S5EDVZm/6/R6gVJokm3mIh34YChfBhO5Lq770kDHvas1afbUJ\nKQruHN+xNExvgCxN0Q7anNKhJIXVO7pv4o4XxGQRr1UglyFFEtOvYhqCD5Od\nb20r\r\n=bZpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e9343929.0","@material/rtl":"8.0.0-canary.4e9343929.0","@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/density":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.4e9343929.0_1600375398128_0.6264893921031849","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/switch","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d633c90d0b9348e08fdd5e93d395317a63e185cb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.4e5c350c2.0.tgz","fileCount":38,"integrity":"sha512-TZdsGyAPtgmt3QlCP1XdsQbdVmDmxDkQoJCRqnBH1p6p6dk02BmTa5hmHq2gCSRUPPhr2Rk8gHYS7kpFExK0Gg==","signatures":[{"sig":"MEUCIQCIovgjvDM6//eEkfkj4gO/w9+Q38yTM02vIci4x5HS9QIgJ4oLJgPw12P8s0F17p10pCP+11RDnSdr5Abr2HXXwLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaReqCRA9TVsSAnZWagAAdtkP/0HFvZYVLVDDpfpyzn9K\nZPmB6B6/o444ibogyzzsAZ9wqN3roUILQdGlslaf8GknEzZD2sW/OW9GmSs/\neAzMOk5Y3JQK09md5shczFd3LqDzgpd5PhWVSg8tIn893udi3t8OlPHjkR1Q\nJCnQ0DMDaoFXFno/yy3NTeJnWHU/vNtg8YRhrw+IZ6ODr6IORIklpyBHEhF+\niuWszeGFBWEv+sN8ldzQ1dsUS6+K9v2L5iFHjFRioD3nCHg9voc7wvPEpa2b\nN4BJgZb84MylWl0keSgDv4drvT7naWsrq05hW2hzpWnKVo6+xUPa74bBqH57\no9arGPyFTsh/LFIKDUbdxOzEdK8ny7A9eVEruNJVjavLB6avfDH+MxP7vYuQ\nmyLII361dA0C1cx+IfCFlVKj0jBradqHrXCjz5ulyd+lTlVtiKjQLEPoElb7\nu0HWrJUDeiisBlfEgKG70ZmbuYJPzQLQBAUGHUBA2/01/26xlodQ9Kw7itG4\n4B8Z7MRj2yUf/iDuavV7CEPck34i41Uk3wJR9SsdHMLHZdVFQ/a9APCkxcip\n3e2tE7TxomuC/I4KrWN5Dik2NAYYsjNhQja5pUm78UxTZnWcwXE9RnsQE6ja\nm2zIoaCE+D0ocHZD1sdFznP0N0TQATzbfY0oxVP6pH8pNUwmV1anMlCaFAUI\nC6+8\r\n=pQ7x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e5c350c2.0","@material/rtl":"8.0.0-canary.4e5c350c2.0","@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/density":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0-canary.4e5c350c2.0_1600722857918_0.8084522940842023","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/switch","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cc215c7ea27fd1b1360dc24fd2114196d2cea71","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.16c563ef7.0.tgz","fileCount":38,"integrity":"sha512-hhnmCFB+zO8rW0J2NtgtJda+knqiovGUfuJucA1EUQlCqlWhTKQmyKX+qiEK5UNhb4EsqDtcUZkjyqHsdYc9Kw==","signatures":[{"sig":"MEYCIQDA23MH13zw6T0LNtjgS8jiIIMGBB4tKNvXGptL2GUgIQIhAOWgjlel4Oh6w+D2e6VQ47ELASzEWstdP40jhCj3Qt8v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSTCRA9TVsSAnZWagAA9woQAJTd169z5L2me4T9G1A5\n78+mupDMQzPgOTAWtG6kBpPKZr9Vdz61WT3/dWMZ8OCe+7jZ8gkxN0GII9gI\n9eZDFSY814EGcGDsYdJxZd/lSKUQQHEvVFqZ+UIrj+o5Oap/oOKJRa/mRkPc\nMbHHMYvYAtHXVXtvg+uLfMIG25FVwCCNWDoI8HqbPiyHTxlnljd/CoysPQiQ\njrw4O+TpNG+/bFfIehfXQfB2+89X5CLquGOOiMZRd/VR7XUYwY7UYYflBeHH\nGY70cNuINgzEN8JnLnrTLsPCJxurutRWfHp3DHZbuUwSgq3loVxV21ishmHV\nngrauvIpawn8TF/WEZ0GB8bPsjVu01JRgVsX9iisimXcXxicmS4qMchLxRgI\nVnvmLmvnspd9WfjST0fs3MNCV5v2AJXk2YIToi0HiHdBirUwD8p04WGQcdUM\n5eJkt/qUGdWygvj9wCfSp7cSOLMXnULVD5dlj3YNKngmroziSIFp9qzeahGm\nNRekb5ko1+KuTYhzE0mRMXMneXPl+qE2Vt76JIqJM7LYj1rQc+qv8pBr3CqA\nKu43gfJqHY8HJM7zkQvJHshu7k0wMvAgQTDAQ7yavEE941It6zcDhe39xK0m\nuKbryKLdKaA0zDzUWZobab6RxuJq3UBPJkZW0i9GH2vXTOadsDoYhPQxLSwC\ne5j1\r\n=IAYq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.16c563ef7.0","@material/rtl":"8.0.0-canary.16c563ef7.0","@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/density":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/elevation":"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/switch_8.0.0-canary.16c563ef7.0_1600803986807_0.3242914869300344","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/switch","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4bc02773703439c71f235e20b3f91b1d57377a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.fd8af3d43.0.tgz","fileCount":38,"integrity":"sha512-sRpQQXplMhmcHWrSB1wZUg6rC9m1D+e9W0U5eFc7tmevyAtVugn8xPf/t8Sy5thJ9Efuxa2deylZs5DQHo2GtQ==","signatures":[{"sig":"MEQCIGoZI6zpFoIQQY2tIlnPzaddVk5DxLSfnUfX4bqfpNnVAiAexlV5n/Rt3LuDPwy3ewIHZoAHkL5xeK2zKRJfKSEdPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LKCRA9TVsSAnZWagAA1uYQAINMqgDGmUjuHknVQjrO\nd8UG4AtaVrdB5dj00pDEM3r8CXqXiclCZ39OQ2/0ZG5sMRzaf+0jhGINnDC0\nw3V/58gVLqW3UgPBuOYY5JAPcoVynHgWVW4vOPgSIZAdw5SnySoZSZTVQ5V8\niBXcdd0sH8I20RlsaeT4UROhj09wIpi6m0j3OElx4hBii9ko8WRanNaguCHd\nhSE9bpRCkEdIQh54EER4ZwGXiYCJxoD6kllrXUwxNMWSxHiKbw779mZAUhT1\na6UFWytKCKRVcYvq1Zd6XmyW2i1OiGvt0Zz+BN/BusQWclfpiBCgKW5JOBsD\nYns3efar5+AY/X+0cIC+12tMC5Gm3oxRhZYMw6SKqfMSM+8AK8HMstpvYc9I\nbqS/cx5kSCZNeeSJvjkhCrjqZyFPWvzb5qVCwp15DvuuqVSXg+JFkoSArj6y\n3EwS5WruxV+Yj5/0tgNeqmCe8ZbKREQ8sl9pdXKChVApuEtbK+9cZbkttb9Y\n7svImDkYpL0MHXO12y/W1V+gtiCIKziKheqg+V2jgVLkKWNuXEtmq1FCmUCn\nvRwb14WFu0nc+2Wx4wC768BpcH+eEnEHd55fGQqaAvItBMDMUngRCCArKRQZ\n5mVqetnkE4nT/sqJXoKjF15ipepy44AaQaS65tJRwWU1JtxE6gF4rXj6sqhg\nRe5A\r\n=sbtn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd8af3d43.0","@material/rtl":"8.0.0-canary.fd8af3d43.0","@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/density":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/elevation":"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/switch_8.0.0-canary.fd8af3d43.0_1600889545879_0.027745338981141954","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/switch","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c091a4dc57b76591fd05f4c5db78cbec7013019f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.d4cd83a85.0.tgz","fileCount":38,"integrity":"sha512-pxeKfiHfyH+/sLWRZDGmqjIXVlvfqiaxn70Zuxn5MR4MjsWjdyPCIFOaKswLTiEmQMvdJUf+A0QkZUtrXwUNnA==","signatures":[{"sig":"MEUCICn2h1PFcxIWAr+2si0BYA2z7Z1Oi3Dl/HLIgziXMMqFAiEAi6M/VlcIhCJc5w0Mz73Hm2luHc5tp0fgw9B8/5MC/80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtgCRA9TVsSAnZWagAAroQQAJaQFvaykZiunfoR43Yt\nRkon+19byXjRreYW8rv7HxEfHpLdItjpcdnUqtF1wXJZOesF2RwsZVhKJmDB\nWWqqnCK7MO0QBrI6SodDBqYZiKBvhZQbxFwr+idADd3k2GXj8M3Ksyid8zt4\nXgb5YHfZ0Ktn15B6S+SSHuBX7wCE+FxHpvudut1HXUU93zlmXjxaQyKJjYlD\n/ge8p3YoYOIWYQd0gOdww4jDEJkfRiHSFYiFZ77iTP0xZXT7oxB1KjDWv9/s\nRScP/aml1MO8I0NNYP3Ty8onrBd1hZp4CAIc1imRKLrLKu3qKap1G3JaMflP\nsnd8ZFPtRrCpRNldY5VplD0/nm/Kqd0ginDS2aO4SfhkO61rMkJpVYmBT3HY\nYPHy6kv+FKJHNK+TUC3e/+Pwnuf2aaj8c1qOlDRyf8Z0UgVQ7W/bLngoAwOk\nyofKGjfr7wyBEHWkxwmg3RCM4OnGI9um5hrsSerB9l1xz6Lu7WcJKKoHThW4\nDICJsy980xcrGrATPsgxQWj61cvLDcEP6GamyAI4fXKQJHynqozJ2yA+2Y63\n4cKHPP3w7poMXwbTmgOTc4l21ZwxSsx4IipyzP+4uB3i4ipkJgHU3Wnu7TVG\nCGOMyryygx3crm8lIx4AuV6jhV62R7Plzeueax4f1e0zdOFhXZYEju3xZ1RU\n/EzT\r\n=/pb4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4cd83a85.0","@material/rtl":"8.0.0-canary.d4cd83a85.0","@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/density":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/elevation":"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/switch_8.0.0-canary.d4cd83a85.0_1600994144246_0.5623591310702032","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/switch","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b56261aa1e9f257d622f8a3629af0d05547d88ff","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.199aecdfb.0.tgz","fileCount":38,"integrity":"sha512-pEpOu9C/9Ca1T1fZb07+Abk2Yx6/ZeOU7x4H5t+kUooh/57l6Iw+zWYn1O5E9fifKl6hQo4J+inEgqQp4b0Suw==","signatures":[{"sig":"MEQCIH5TSoh+/qs7mXznh0pSsRKMhZcUrgn+uIvjMAofDi8qAiB3SjmxK+dryQEnNOl6crJAvIPsYDk18rspP5Rv/sluag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhICCRA9TVsSAnZWagAARuMP/i6XTnolvY4LsbWHX4F2\ns+douiV7oN/zdQXskvMuyqmWMDDnFaMqE1/gizkcrMSGIcD5IxqWz+qtieAr\nqYt02LpQ0Vq48eR0ei7fk8ZH0rd0P2qTcEhfiMjmL99SflTOveBOPCmdywoh\niRMX19I6AB3emCXrRZF/TFGLNYBUxDec/zUnLIH3VOSKTOiiALHijRI6DF6v\nMRX92S66Xiaq6AkoMPFM/Cy6xPUkoRg4haG8hoGcPGF7QJuv39CyO3wlKNMP\nA49jnvpjvUzrjTKdfB/lMdUkkmV/DHCjKUPHlxzmJYfL4ovxvCnjg1MuxUN5\n6vFRits1UYV7GgK6VhxiPrjsXVdHhb8tRiWTUhJontDRtzuJc3VZVDjVTsql\nTdAvBP7zbMdkra53KWzr3Jqc1rnzxnsoiOOzbdhY9BQRh1ufDuXlTMSmnCZg\nzUr7qqCIz0Ur5C9J9A5oY+wgudkWkeYcJuW/7WhtWYa/LqX0hoePN7SH0eb9\nKm9bDo8e3egJPy995yhFisC6h0cJm5JDeJs1yJZsM7SMGHKtx/rV4+1VNRwX\n35zwf01yqPKiyVxOMC1VeV9wuXj+O4VHNJJUye513BPhUoJRxsrtCz3UIoVg\n7uhv2x54HewY6J7F5CsL2jHRmb94kxpW/Q743PN60+2dwIi9fmFbSv1eZFOL\nMeVa\r\n=8q8h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.199aecdfb.0","@material/rtl":"8.0.0-canary.199aecdfb.0","@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/density":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/elevation":"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/switch_8.0.0-canary.199aecdfb.0_1601049090274_0.8374659907512843","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/switch","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b80a0fa99112778be9b24c8a5305dfc4d63fa2e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.38ef4501f.0.tgz","fileCount":38,"integrity":"sha512-vblOoYsDgK20JfBDu5u2B9dWdq6aYeRFtfeKyPlwS1AvxtM8FCWn+sK24+cZEUfwb33hq3Oe3eLzNbMDfQ3DZw==","signatures":[{"sig":"MEUCIQD/vB8vnmhLpMUl//S4MbL7CFBjBHleu/gBWqvNNFbH3wIgIZ+okyhViiWofUDFfGDBRMflmBCUFcfxZmOYIj8Fxrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM1nCRA9TVsSAnZWagAAAeMP/0B+olFCYpawxAracpc2\nzz/P8lZ16rvxvrmZjg4h6MVG71D+KNDrn19c4/pArLpwetzWKSimt7B6K+A3\n5IriChaPi1Bp/QsfbI21xAvORpakxI1FWvNaLus+3xmcv866VDXUVhXW4Wxh\nH81gLraEarIysSCNJcGjCvUjWeg5zPOMv3LxxoUXZZf3M1FNdNMgUTV/drM9\nztPDOQpZpnsQ3SC/G1G9o3xzdbMOYoDf1ek9WOVshYyzrXVb6vToKF35ePpD\ng07ekeszWWARmaKK7SyLY5EHb+aJ2m7PGkGJ3tLf4zyj/jN5XRduDFfVM6ww\nLsm28Xk2jzQnlv/+odVHf3SKDTzcKMvi0/UzzHDicH2VYDOdOXSHxMd8ZcSC\nwoLrWpdu7dBsTFjb0nAPPW39/zx0r8ugSeGmW+eieVZ/E9/VkwhLNAOlrk8Q\nDOAU/xNnX7ZbOiBN1Vi1XHLjfU/0IVYZrWqjohEPvrJwxbImir/+3Q0IkC0w\nkO4RPGAUJMYtufr+i7JU1LHpCWqV0VB1B1PU8SDMv0bozZpL0meb8d0B2pjr\nvPuGLZI0QlqrmT8jq5UNeRhgGd+wU0R7bvKgmwugwBRgdL6hC9h4knGXIVy5\neLYcGg/wGIxeE9uNNyLXjBOpjmgUeDVacqHMb0JUnOWzUcjgk4xJg4n+776G\nU+cg\r\n=Gsc8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38ef4501f.0","@material/rtl":"8.0.0-canary.38ef4501f.0","@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/density":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/elevation":"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/switch_8.0.0-canary.38ef4501f.0_1601490279440_0.2929375792726827","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/switch","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4a9ec47bbdcd396559879bb624c208886aec13c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.774dcfc8e.0.tgz","fileCount":38,"integrity":"sha512-JvGbdBkSZ6g3YQX7qS2Qb7SkZp7Crs5cmiEKdLmMrzx6697ZKLIQgmLH1lB8Cjs025lmz4Vs+B0qjGUHFZYAGQ==","signatures":[{"sig":"MEUCIQD52evZmZDn82oTKP5ekzEbHcmzW4/qtYFVnHOx328ZQAIgKNr1vdUK7NfnNYfYzlAFBomhIwwC1XNJ+WJ/An/H80M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadMCRA9TVsSAnZWagAA7zYP/3Y2XH8jj3a92/zlyKmB\n4eKo9iIC8fzFk0rluaPpkhzcYIJUtgMADvXJER36QnxX+wl9PpfN1Ee392iT\nfuxH9hyH0dR0GMOhGPZg9bgCHW+JHlyetNPvpGrvdyCdKZ6ZsdUbSkWitV1s\nWHZWLcetIJz/08U34CmEP1jtZDNFV1K23gJZQ0ex6YbMXlmQthhx5v0F5T5V\nChHc1dMZ9N2t5uqONfdNRV5A5ZzMmeEOrU96zccTezV2j2Ka5jRZ0UavJDHI\nkkQRzTyUFtxaW1vUfcjrExWzFjqObBn291tGZFehB9BQQkaNP5Sg9R/FtGrh\nfiHJ/7DbLCgYXU+IsfMISyrjUiIpmMNkO3+tLdgXX5F0Yr8Ubs13vCevmFvc\nXyyqYESQ3W85rV+b+wSFgMleDMfike8wE46jNbwFCAQ8yrd4wcSXPfgiQ4Hi\nfEWBerZd0CWgx9a5VILc0x6qYzx2bs22hoI2wOjgN2nNBBfSSvKKasXZTQLn\njda6nhCHUHWSDh0pWcq2oOXXNim+qyrOBDm7QttYoHvqaNU98qlwog2kflV+\n/pn2Kt4KZI8mqyepElxgVxVD0B5A8buesQL5tBu6vRhcoLUYb3T4x3ldwa96\nTSujVa/EhOYWZuZX4gcO5mws8pzee5ucS86a59ic3H7oCswLeUJwm7Jl7EW0\nMxFP\r\n=x3Of\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.774dcfc8e.0","@material/rtl":"8.0.0-canary.774dcfc8e.0","@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/density":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/elevation":"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/switch_8.0.0-canary.774dcfc8e.0_1601546059730_0.48553542463167565","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/switch","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c236c598539494a565bc84d68e0a225349a15b79","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.0f60323a8.0.tgz","fileCount":38,"integrity":"sha512-D0okg43E2E5bHfMnb73NhV4u4sJ1utnPxiJwxps0P6LEB4sSiPhuCftvHw440QCgFZOpu5cvA+hGeRvwkgfFng==","signatures":[{"sig":"MEUCIQCSxkkm++TEJc60bPnf4I/rVZ7LKth/c+KRKLxwc7IwSQIgGK72bGW0Rqigq10AWfW5od+s5UPmcONqNF+QC7Qymqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4A1CRA9TVsSAnZWagAASqgQAIuY9gIevPh8nusd9/Cl\nmv+wi+fxjG9PivSQEGB/JAU9/h2AObBqSVywZLLOlMcm3cwV/Brik6d72M7j\nEJQdCvvWcev7npcDbgm5rGnjmgJnpu5DhV3R4lBhfO1i5/kT7ootTM5zMYrp\nj0wZAdbyHMt0D2tfWivBgGTkmWq22ih0tgrCXx/F7SMdMevzeSramV0qbi8F\ndw+uFl7uwqNIRPGrntRVHo8M+k8kF7/HbRqYmvoMBNQ9fSDS37aGEHvil6p+\nlHB9OAQgxQk85W1nC/rl6uJVYPY2XoeofB/DMYJwy0t94ZImQDfmoiBJ9rmw\nzgt1lNcndV93gR03x6TZOQBKfEfTG8KOVHMrw473nUn+KJ/PJRJIfWHYctBq\nM1tlbft9acur2T3RiaLu3D8UxF3j+2Hbr6CcbPfWTKjkjo9DpCedXGuIVVF5\nh7pLIx76HuL4OtmzfTTtYCrA4QG3gW5bC+A65WRztCOmBONImaEXzlOSYLM3\nxPYzhym83pl2EmV31REY+F8Wu9pam69Mv8fUx5/9AJksKCbxS3own3o+Je21\nUzOWeuYpAm1uhJzriHAy0RDeG9L8MV7/9VaFZT8P+Kot+m4+VkF8wFnKTv7r\nrnHPDBQt1qXGhIPj2cozS7u4Y8KeRyDPbH588quIB3Ppoutnjo8Sq1CXN1lc\naLJ3\r\n=2LQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0f60323a8.0","@material/rtl":"8.0.0-canary.0f60323a8.0","@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/density":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/elevation":"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/switch_8.0.0-canary.0f60323a8.0_1602191412943_0.4049696678283967","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/switch","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.d71622574.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c0a350facffff82ffeed5ee41cff20d73d8aae","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.d71622574.0.tgz","fileCount":38,"integrity":"sha512-LZ3OktkryQRRfZP7T008GhLA88tFgewAvqKFJEgSsF2+Z9sLGBKGx4kIT0n6T2B3rRLkqFBJYabbmobcELUOnQ==","signatures":[{"sig":"MEQCIAyPRxbNpQ0wlnCCrq/M0YMUTJ5IJfYfrDjvb80NzQeVAiAP0G+VKzwscnknyNGPUkrEp7N5iJqOushjQsWgG7EsYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJCBCRA9TVsSAnZWagAA6pMP/2UZZBjCGp1ZxL7gW6tC\nNyY/sDJ7v5ZQK70HMH1WeOGbKgw3BJGrhUTAJK5qMTJBWsDSPBNGjuG8rj/H\nLjxGrNWklBGjS1SLkFYGIojyY/0/m4UsAwmogKUIFzWnAYjskln/851yLAOm\n4xRJPZB9B1QKEZ9DvIJ1c6vNaUfRo3hgspPHJqvBFucDfor0nK5C3wFYM1Oy\nEMDmEWV017528fb5w+tCEC5QotB/Oy6kfQ1Rm6IFIi1Ke7+uI2XvASbAwsgm\nNgacUxoB1AlxsMmB/8cBR6Xr5EBr1Cz3TXp0aVHlkyO1A+1Pb6PBuNOWk3ih\n5RJt98qqGYMfQMhoo/M42Ap1XQS6J72qWlT/5e2NVEsdBthHxgi7ciGHCuNR\na3XeZe8TC6FL4d8nViZ5epHmZMehpju6wevzN+l7w9DCQVT7e1nN3T3X/Pmj\n9Pt5laekdQ7rd4Olmq7nhtfNbK3XHfZ9eMWqh37+i0giuBC+0PeHlPxp/voF\nnastMauCZI1uT5OQxeK6ALNKAZm4x4y9AwlrtpqAGMR6CewJtLe1SVFKcg63\nPeF8U8rztDWNPN9iIt6xbItDf3sg2zATSdgt3UbOP91bMgZzFe8KIm4O2XKm\nk7OB6TzM8xv8qa/YwHMn/eCBWYvjLc9wdNYq0JkrGuitRbYj33XdaTFHtoQf\nv3iH\r\n=9v9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d71622574.0","@material/rtl":"8.0.0-canary.d71622574.0","@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/density":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/elevation":"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/switch_8.0.0-canary.d71622574.0_1602261121155_0.642860705266382","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/switch","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71c2b71c25ff381cd4ad2e1d63f98bc1ec25ee8c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":38,"integrity":"sha512-5DqF/EJzquiZsfF6ERRfuXkaUIJRq0NeANa2ik7WekUYiW8K6awwk34tmE7XZXKpLe9jXaQ2B526TQ0P7eCqQA==","signatures":[{"sig":"MEUCIB2yb9WXx8VdqgBySljrbZg+1FpGM9ZDArO0YxUyUZlSAiEAyQRA49AH0XLhvKF7VG0Ef3zAv+JQSt1kP4K17+NeLp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoSCRA9TVsSAnZWagAAC6QP+QFg/QDivAJKv21iQHyz\nuCoQcywYj9MXC+RwD+Uwjt/nRk0s9XrWrZ3pJc1yQjt/Ez8ghZXxPeeq159X\nKHAf3CEott69TW3eU30gUjlAOaEKhjiFjLD6UMSMYr+WOk3ob+HvfDL5hc97\nEbf/DQMGjFEEU+fezXt+PtO6fvCNg/35qGl1GjgSaVSIBzxV37rmsRqEJFq9\nOOTe/zF2/TA12KxrVZuHXW2bQ4+iIOFh6P4rQQoSKtGoND7F5f1kAraU1lHM\nWmIRtv+wepKNn4mESxJb7xngb/eDJy4FIA4bWL7qEpMIwUbv/nNGVdjMisf0\nYScK4//gnUpJH7nY9J56HjVTmCvYJB0gLDm9eETxWzgvq2pwKxJ/njhALdLX\nzUhskLHvErVZTPRPeL5YLGlTRAdXruI6QCA3/548JbSspgIUsgVtihlsb7a9\nBHNXH/+TNXpF20f29w1smawyrp4NV2h83UU163sOLwq5frIpisVcSlVumZd/\nN9Q901mgf/UsUr8/gHuGHKLSt48f1s0H7UB9YEeNjiuej0/rpmZIn3fpc7vU\nrtg+sum+88/LRCmv9QJU0nsECamwVMX6TYbm4P9CLV+/05D8a5PvV0cQxRYS\nDpi24aZqDqJyESFRepEBUwV33Yfq0fvgCGzBUufvNe1bGqTJ7cBJNivo+L6P\n9Cwz\r\n=zg+u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@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/density":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"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/switch_8.0.0-canary.7a9afaf4b.0_1602284050489_0.8334206435983447","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/switch","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b7096fb748b814d853d5891bed7d8d85ed4d101","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.8a39352c8.0.tgz","fileCount":38,"integrity":"sha512-tBjf7pVaVfxOjbEFW1QCJitUEZQoIHKk/sGSRHybKth6PP38C7F6mxx61xPEhm8bv1X7GjtWB4OCPxuLm3cwhw==","signatures":[{"sig":"MEQCICnmiF7uX1JJ8Ci2BVa6w7Pdh6z4DxlqgbyqVxEYFMp9AiBhF6tp6FzN52yB66had/xKy/goxUuZs13z5NKNWBiE1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZ6CRA9TVsSAnZWagAAJ+kQAJbaGY4B7eAaHTic/0dW\nNIyQO62YQ11rgfK/Mu8Erx4vlZ6CvO2L48h08fjex4rSlA+mT7II8ydRYAgT\n4kNVi4138B9YkXfcDYP9YiRtNN6Z1tqaxWAOL5kubpu0THGr7MnlsO6zYkE6\nFB7qsqiTgjm13BHOb0Cr5c8jlJshPfjj0wT+V0tRDJylggYSsdY7Amdaq8eg\n4cceNElB7EHXmA/EcZIqHWmpNZy7RP5NeWPMxWx5rQPjMc/0hySJx8yJPgpy\nfVKdMOhUiGlJuhEajg80WyO8SFM1/CX/zqo7BpKpEkQVf4J+vPBoKSG+iQPM\nFYDYCoBxEL3hPB3GMx0zFavn4ctbnwaSgP/l2E/X9eTt8wFXEuttPQjAA6TO\nhlcdRJkuCoqjA8Wuc1DynQvBikmxEO7sWZx8+dvFeNB3RBVUR5GCuoTayAgL\nWNFbYphFtj/GGJW0zExK/abF6Sgu3RHH6yDgomZFaE+aw/Z5s0wDtUKydQyA\ngapsyqKGeSLpjXS/sCOf/LUJhFUtTzoEFTfFCHKhxT2bohxD54+GMn4Bf4JP\nH8Vrid5XWr6XMwzKkNH126CrdeqRlGhl7AF9aAHKEQ7g7zbBdyR980nmys1G\nai2vygGiRYpnxK+QddXN5JUBZsOMpGRF79BN2r5jxrL8WM401uF0Y/DV5d9j\nEYPA\r\n=whnS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8a39352c8.0","@material/rtl":"8.0.0-canary.8a39352c8.0","@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/density":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/elevation":"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/switch_8.0.0-canary.8a39352c8.0_1602524793739_0.36998204752299","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/switch","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2e7209063ec112aa39210034a431f20a11b2bbd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.790ca85fd.0.tgz","fileCount":38,"integrity":"sha512-orBodxWXyD4+NKy7AATGv+I/cSmHsrVatbv0AmfVG0hl3HeYtAq2kuw2SWlMIWIePrZ9IQhxtjHEns9bKSkptg==","signatures":[{"sig":"MEUCIQCcpWbNXcmEeKG58JdS9dpGpsJyfY7ConJHOhk5L3LU3wIgQQIa/UUfvBXjNzSuQDXoZuNffY6M2SBvh18UGOe4fsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNErCRA9TVsSAnZWagAA82sP/RlxPSadYIpCzITlGukN\nAoQgJemeJcogNRV4o/m09DGNtmJ96GW0faGHl/DGhczF4GX6pktULzy5Qa2x\nG8U428TrCzFxOyNRndH+ImHZ262n6VDfX2paHxvAFxnkx49AOZ2AZ7CI+/5X\nVy0cQ7EZ9zUFBoBeW81EtgdDN4o3MPIMVTo42irf3xOH3LwQII8+mFWmQDPc\nbsP5YwuxAWigzPmNczlBVXVRigmBweku+2/VSgjC409SKZXLHrHN6jYO2yXz\naLlCgbdL7cTsYgF+J24Mun698acUDwJMEjjzS30m/iRSNdzdlvYayvCj+VFd\nBftlivcpFrUZO1NDZ/t75glRf+qzLxyXmLY72ijWCuCQeRdjxXLSim7M08DX\nshiyD/5AEY2lx2ZkJ34yxUKJqnjlWedZQ3Om0MmW7E9JN1ziGdGGQpTegN+q\nDgn/xZoWsiVNip18AMvox03W8aXWqnhw3ELTnIYkWhMlqo0XqKGkYyo2dc2+\nmhqMYqDWKErzQcUM7CpPA9MC19YfWlB8ECpMRjbVr29tEEiHLGP2sxBnp9W5\n9b3D8Fu4FgN8A4aej6ycdeFmu3i4lsvdSffc6yN8CEAvc2goGzo2gr8oTSrR\n2tAjr7v4Vv3hZug2oL0mI9F+Hq9I7LL5QBiteXIL87JwUwqHu2EZeD1vGixj\n148N\r\n=+DEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.790ca85fd.0","@material/rtl":"8.0.0-canary.790ca85fd.0","@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/density":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/elevation":"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/switch_8.0.0-canary.790ca85fd.0_1602539818787_0.3419321404492617","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/switch","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.174c0becf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ddfd19b8ae6e77bc122a32a4ad3cbdae0a4ad55","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.174c0becf.0.tgz","fileCount":38,"integrity":"sha512-OPISLlXZyRUAchfnU7JrdgYc70o8CFG7ngahn2tVjYMghbWVrXst3IToFSyUZ2KOE1h+RucoMUMAeAeGfiSE7g==","signatures":[{"sig":"MEQCIGCTE91ncEQ1tdRyaFtMPlOQYJsDWAIMbZhrbgWo7q8PAiB2WDAorMIt1sO6U3CmHVuv/EpIZeTxfyIv2aVPuKm3qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9cCRA9TVsSAnZWagAAmOcP/2mQtbT07xOVZTYnMUTA\nun5MC9L/4WIz2vVn6L3+Glr80mW+w40PWHCJxLKciXyaztF7d0dmKuHH/FSw\nU0rP6ftdKQerT2klOD5P8p5yIcaOAP9j8kinUzGHJiCckpE1SB7MDIUvNnTg\niYMKunmBFr4xcoh1eQM1w0Nr+Xkr45SU+AJlyI4onHwOd0VlzCYy9ySlA93q\n93e4VNDFXWAENFVHjXViA4YJRVhfLy6wgrzoEvd+5hbm5akB3cR6dn5PSFLt\nI/rtLgCGruuJ4kBCqs7mP/08cYFAPbgtaMxqoDi4Zv9uO4ZmlB992hkCl6Jg\nN8NtlJAMSpU8T0ECatSZPlDT7U+5kBjBlqqP2OLhIO2nIiAJ6R+otfJvHjXy\nNUMvxh/bqIiacgK5/5ibHsjCAt2M4LWnemyc/x4Af0iaw4KI0/fCLWhJGswo\nlgeG5If+HKyUdJdj4plTfB6aKE0dCZdc2h48y8WbrgIXD45SPfphD9v5k9Or\nJdQBqCuf8Z/PWroZ9zBQEXUvhQitgulZmlPyHUBwrbOPX2iVRk15HSB3nzo4\nKcfvobqPclg16bsVwAeIkaIWtnxCC8GjeZa+HoxsoionSc2uCfwZC+GkAnl5\nnMqPmztdIvFXwKB23DtG/u7+6Kzoe4nzRUocNwzLQAJKEau8NoKcud47zcNA\nzc2Q\r\n=QZaU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.174c0becf.0","@material/rtl":"8.0.0-canary.174c0becf.0","@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/density":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/elevation":"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/switch_8.0.0-canary.174c0becf.0_1602641755346_0.8418771531148772","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/switch","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0271a720f569a00ec896581d633088685b141cf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.c71ebfa02.0.tgz","fileCount":38,"integrity":"sha512-OcOXRM9cXrC/fDeoamVAXO/8LyoCDZYtSzJvq96ODWtWp02F1KRD0UPwuFh+2R9ySS3sKjuc1L/LslPqosRXEA==","signatures":[{"sig":"MEYCIQD4fvvJk3HA4jJ1WePwjazKVPOQ4LlurjLOO1rXBCkSmgIhANV1rbKU6TnSC7rKLbqmJwkbGYvqXobv1etUN64hGQI/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvrCRA9TVsSAnZWagAAx8AQAJmm+H0OdUoF+shmQHM7\nFO8pHoeacztFJVWhqWPP6qc/qm4gUTwlYr1tUZP9BZOF4Dg2JVwzWXJAWpsw\nVI/8xM4323X8qP9gbdhAMb7NVzgNU8U/qXLxAs7ZZbGveYy/MfpEq6LjcZV0\ncOKxHJjcdIbfzJ6aBR6iJPu4m+IeXEuYX5XhPQGWMmZO/VAQDMZEotAe8eg1\nSMMINaYhc37COg8THqVqaCELJrAewmaVArLfe2q6CWM2NZAdQ2Pl4aVkpIxS\nN0VeG7zRhDP3Yy47lpWJ4yQStlMJkEaeySVXB5oXRSOPyYMbHoXHOLE+SY4c\nUp1NQrdXvF6GRlVKUqwpA4RObqq1WgYfSgDubtDrzzPvhyLyN0mGjF7pB7SW\nj4cbv67MGrvPcmWpCguIwxt1hPiL0Mpv6jPYwTTi68MiSlPbOLzu3ZakNEyK\nw8yDQ7XJq8xihQH6ZqHlsTT2spN7I7t3aK2VYjCCUSDZ0spKdsS27+fdpE7x\ncYZJ1SPjU9MwgN/q65eR1U9Vsk80taspxAEC22w80F5FIjoIpvyGWpewYGps\nd7IMg1GxwETinOicwSu6G+4edKdFLkMFOwYQvU+MNGOgjTfkVwg+js4nN01p\naV2w7KYxbbiLfCWE9uYuDgOThZ44MEJkbD7GUajtD3shuhYuz4IrUhnU6n1W\nZki7\r\n=ViIj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c71ebfa02.0","@material/rtl":"8.0.0-canary.c71ebfa02.0","@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/density":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/elevation":"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/switch_8.0.0-canary.c71ebfa02.0_1602649066580_0.9290406317301871","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/switch","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daf28deefe07737435c2a99c218ca0958fa524b6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.2ab716cbd.0.tgz","fileCount":38,"integrity":"sha512-tX2ZG6FyXDY47oPtWd/ZFvRZjQDiqJoy5oO2Chm4CBWYVGvnqeEa59yCUtgzKbqKQwVCmIGNJO6FSpNU2S7hzw==","signatures":[{"sig":"MEUCIDk87fCUBFLXU3f7uLN6FAmLSWhUv6Rj3JAtgQWQJa0/AiEAiYrOzHX5yBJ9WpUqZl6+ZwBiKGz3amqi4jLGmDl8T5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOQCRA9TVsSAnZWagAAVp0P/RURTj0bDriBfZiAq0MR\nSO3jEELmR9ddnGI473RVK13qEcdmRisDASd/wDddnGZgXbOahVRzByC2qU/+\nB5NcGaU7RpkkA3dhbiNqPnyY22N75iz9pNDXf2wQNHF+oE4VNiN0V4S02xOe\nj3RcuC5uhyjK5plLpR2C63OogpYZLmK+2Br+WuvLJQkYCU4x4Geo9KV+R9We\nI/odLW982eeNYg2ypqySfI2N7K7oIlOySANd3Lp8mystypWzkvGzAVkRq1Th\nEx3056Qz4W496Lu/BR365SSuciqATDsMafzq+wrwY5t61Ee1XThkIIB0DIGB\nj1ucu5n8pn/jKQ89FVX2szHGlhWydo8RSml2penBUkZBQy36b++bk4UkRvnr\nIn9phmsDNsUTVm4BKYxETcYpa/58u6w+mwAB6sETiP2DfaEeJ1IiPIGjXERC\n9BkWRRCwearpNxIvQovm5uYhgHltLxNrveSxzHHGHg5ti4sH8Ku36l0uCQOf\nJTyUKVafJQPGv/4FfYRI4plllaaNaWcFh313Tz23oyHwAncqcP86DR8uNcOZ\neXAg7KflpC+c/yBlvr6jP7oCKCDtABNZsHC2h+Khg4GSG7pSfa23fFJa6Spg\nLqxPMWKf8pJsV0b8sbEtTY6nq5DXphc3uVZtZNMXwOe0asCzF9nxdkZHGGLl\nCAto\r\n=UcrI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ab716cbd.0","@material/rtl":"8.0.0-canary.2ab716cbd.0","@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/density":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/elevation":"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/switch_8.0.0-canary.2ab716cbd.0_1602806671799_0.7514665541289869","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/switch","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2db1d7912db04ac45af2d53c78b3450298a1a8a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":38,"integrity":"sha512-PwsdKSU98F3PFy4IdwXD01u9LW4y3bwq+MLaJUJjzvmXm/Kw0Wt/4wlc3OMHqVRJFJsYSLiZBvYi3ROhoAQweQ==","signatures":[{"sig":"MEQCIGkI/XCFOJBTwzjDIbJYAX0EgsxSTSeklpCS9+DI//YNAiAtpRwlVE3IhzF2aOdiLN3OGRKCFWtJhYezgFn/0uCi1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3PCRA9TVsSAnZWagAA5OUP/imkyFKYKfjAomOCgXg3\no6WWaUxLCQIpRHEvSUFXZ6kfuvOqB7PpXySRPec3vA3/AWN2Cb2McZtwTDqn\n13WUbrtIv9439OC3D7ZAqyD3JbHLKxAxyxpOcdeKJbq8kdSMKzOY7Deb32ZW\nUkmdUhRqZMTQIzDBxWzciVEFekZZ3+ADfWj5PY7/BO0mNV5rgk/fHfNMH97U\nVaSPhi+A7vLM+xUUwlcZy4OzWctzno5RjLl1yUxf6AeP6LV7gYP/xhfl8+Ne\nTlnAdDooJL7Og65f0wQJ3iFKo/WeOO7R/O/2UOQopyV6k8M+6xzAgg510o0z\nRzRYNF6LjMcatKW8SzqV5/YP6d03IJs2ohOVR0I8SXIQKAnWTqiAroNBbcKO\nK9Dgk5VEi+QCIiKw9SzEpiDGooA5H+IAjlD6UO9IfG7qexNcE2SD8ZXBxV+7\nqq0aJUK2p/biVosXgptRTNvL7fBTkPj72zbfItwn8T/HnNHMTuUi6ubxamkg\n1Mp9Z8GKS6TKitTSFDxrww0HJnE1mOjVJHgLqp2U23DHQUQCXqYIkSlo9uEv\nyeT+xDgS3cZMFwxjwLAwc7sxVMtLFzqG2PMBVde3EGDh6XJTH8Dhgm4rL+RN\nrS2XCyIOZupUcgQBtIthsuCgHq7NALC76wmOudy4xQ7Yd1fspmuZ6I8wPoPv\n41G6\r\n=XFn9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@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/density":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"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/switch_8.0.0-canary.43c1c5e2f.0_1603116494520_0.6368140497360884","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/switch","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4037b837445e05135e3700811a3d4f5859bc073b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.ccc64eea3.0.tgz","fileCount":38,"integrity":"sha512-NSvYhVG8FPJfQuomzibeOnNdaiNg6S41n3U94mgovu5CVxThsIMn4ALXH49wpYMlFQN4ignxl4gpzVOWFryKMg==","signatures":[{"sig":"MEUCIQCy+E7uZ4HaquSe3GwjfRQLPiWVj1mYuf2F8P1B28rkkgIgUywM14Kr6pVl+kNbHvEXqNnnnmok6Vvi00T8iVyWXxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1MCCRA9TVsSAnZWagAAPssQAI2jXryJjLog3w7nVPhi\njC0cPshcvW+gMCwP+E2Kaw+9NTElYPJTS28OWJB8yc8Px8mdp5j03c+r/zgV\nypwbknGqMiD/cd0kmeQ/nCP9yESGgOyWSJbLzBP0ymTuyAOuJOgicgIn3xMF\n8TpFD/L4+pMTWh9UZI9rV8A8JxMn2NsHJEWP+DIgStRWssi3JlkmltUQURyF\n9+1N1fRewr5G5fk7a/w51wZR72WY77GP9X8gWYtGz496emu1Sxy6CYQTA8iW\nrJP+BvykVVl4nTWkN5usx6qPxOgnDSbpc/j9z+wMn2PG2Luz8zVMkP0Fm8DB\ngwlnWBdAmCG6s7mi313WOmcFEEJ/3HXwAQJJcjPlx+0TB4xsjvb6yqUVY4hW\n6ILYQ6r46yaWzLdvwQdF4O+F7BZ7Nm5OabC+VwKuF+KhgR/q2csjMGWXW0bL\nua573WGqtyYvo0boXuDLtxfhPBGeqdqr8Om5x1DJj02qbPXwH75RJ64jRzSl\nps7w9MFRgLaCUrgy5E+OMM44b0WRI2daSfLUyZsODKdc/+9NR5Fh1cBI7X5w\nlhIPaOoOGUJpP4wsT+O7Ud0kq3jghcvWKdRHbxDQbpCcVjINzY5pRwfWDPAW\nHGwt/oPoytw+HltWCpZHdJs3MWpXMkvfEMp2NRAT+ndYyImYWfKTZdi37H8G\nl515\r\n=CkKr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ccc64eea3.0","@material/rtl":"8.0.0-canary.ccc64eea3.0","@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/density":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/elevation":"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/switch_8.0.0-canary.ccc64eea3.0_1603752706070_0.5536690032364775","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/switch","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69c09ed0d8f1139b55703f564123edee0e8c4a8b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.a79cdd019.0.tgz","fileCount":38,"integrity":"sha512-er2jefWRRSI2hLX/r2aYQgf3Z8JWpFgUpyzW6nq96++rLDVng1xouMFZVyjDADwxsjMOgfGi5JD2KUE2tUzgJg==","signatures":[{"sig":"MEUCIQDMLq4Zodm5RJn4nvEA/+7LTNGR7wb92DFh1zE9zr+U3wIgHNmelE28eHtnXsxfUmD+bAGQhAOVxs5b6TtBdKlxvv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtdCRA9TVsSAnZWagAA9fkP/0YEZ9cx/4p4zbHFVopi\n1jD5sHdOSN8Ybf5oMMw9XZ52cAbMPcn1vZIZ8ReWSzZjI7kTnMRD3y+5IUpM\npSJzdtBAc1dC4wkLgrqmSWDhT4W5UnXp0okvASk9O4oBP91uGs00IjGTzMz5\n/Ep2RDumE+Zvk3jFkQYUpar4hlbU7Vp8jzm2xZA1Lgysf7zzFc2ski3CTrNq\nlMmB0RqeY2zCIDkWNjiSvrcD3zdqMbIUrwIn096RTf8u7Pz1ixv39JpUHLYp\nG75EUhzXuTmytAicfY2iynJC9Re2trVmWqRrtTQb0UvhMGdcAQVnJCe0wNmF\nHjDZ5CkRAKOz5/3IF0lEecVx0169WAdbFju0Yt1YNRgw4o96AjShcU8mTxnm\nfFomEZM+EZuw4Oht9WC/STiepuHBPg11RUfb2ZoDZ9VOwQmMuN8tqMSsVOGD\nPJM9BN41Jn6uXTUpkIQ0y8A0MloG4fPYHrqaDMYMbjtkEHvXZEn/CkTwMc4Q\nN37YXkpvAMhSHLkp41KmRFxzXn3onAJTGuQc+X1XzWyFspa9JJioWgrqGxU8\no6X89nvRu/T+oB0FtOMWU63wo7avhPvUA2Byt69CtJWsT8uuyq67ulutgirl\n12ZTWNTi2nlcYBJrBQvHGejk/Q6thsmn3qt7jdyfJuezYnnu1XCc/qPkY315\nlkYS\r\n=GzdA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a79cdd019.0","@material/rtl":"8.0.0-canary.a79cdd019.0","@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/density":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/elevation":"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/switch_8.0.0-canary.a79cdd019.0_1603816284833_0.9560158509007255","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/switch","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.596e98424.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"654129e45a86071bc4317d83804b0715e238ccad","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.596e98424.0.tgz","fileCount":38,"integrity":"sha512-fO1pNA+hgVuGR7YOEkVUAi0RRGyPp+6dR4+uzhkGZTQG7Kc5jM/BLY2c4AW9iAcJqjWGRO5l+hkfG95cI+WAEw==","signatures":[{"sig":"MEUCIQDqwvKf6sBRja49nJO8jh4bU8ciBnwyGXuINvr1fmijYwIgFyofcgD/G8zMTtNDPBeFAHVv0IC8n6DMmFKCspSuo48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZiCRA9TVsSAnZWagAAWMAP/iRY8Mqb96CApV82J93m\nit55fqCkzrOf9u8KssFJmVtLRzLYd90gjX5nNG+dfmdtq1jNJjQx9S7rY8r4\nbwYTiAVTc9jM57DM4zluEDAx0uQ7KeFWNCthstaqY04y50KtlMRyI+iWX0J2\nbc9IehiCaqNDF89IqCMWIi8OIJh3EEQk9KhbqxkquYWTuDxEUNcCzzZvzNz9\n1hWlP/UML/3Mdk6ubIQ2mQSvy6DEaz8i1EGEXziB74hqCKNt4SzmVHodZ7uj\n6rNFQ5ZYRFb9s9UX2n3IRo9IMUDkkwt9rmRTzoFpinESd4NQ1T1rCg3oGc/N\nQgZT8fIgj4G/xi/02FUOvRuSbgeVHy36qJ+SHkJ+ZfejTD1wp6r99N+gNCfK\n93vTfp6AQaCcaRyzIW65q6pbCZ3azJmB88ejiP0rAOZNAPEIL5uzFe+02Tmh\nBY93iOTx/mgNMnkgXhHiXbSVE/QRWqWWZuwYPw1rLzcRp8FQHUhfD2MXQZfD\nM6/K7GPrB31bg/lkzlcgE0srEsxTc+2ZwInyHrAE/QsDo5Ytl1C6JFfFEV8D\nH8SLE51UK+ltdJd33gTRnHZ827VSIU37aS8tfovJuNUgeeyk+GrMjKLA2y3T\nc1DRB9fztpqZC0PisIGiMEN92s5X+gYDF6JGr6fjurmpqsXOcg3q7vRpHd/N\nyme4\r\n=+77S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.596e98424.0","@material/rtl":"8.0.0-canary.596e98424.0","@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/density":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/elevation":"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/switch_8.0.0-canary.596e98424.0_1603901026410_0.11979674610723645","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/switch","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af41d7555058178c482109902acbc6690f579073","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.05d5facc2.0.tgz","fileCount":38,"integrity":"sha512-1OU6sKd1YBxrN3af5ZgdQ9prNhMwUj8rtjPTqQkxevkhmJhZzSxohVltO6LPl/gVoCQetfNp3F//HG70lsb3RA==","signatures":[{"sig":"MEYCIQD1/fhQh7+1CYNqXvEQRpw9f+FW3tuUB3YNXq9N+vb9wgIhANWD6x74KK9y/Ke4CKBb1sxAP3ASfThGK3kX3S+M5FOq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhiCRA9TVsSAnZWagAAT7AP/R1+ohSg55l2uCvvdNSJ\ntLIWCxhrXIUFZX381mqHOpthDFVgGrEB19LV/rM3n4r16/jMBWiFicaDbdHM\nJGYxGjZo6trDtcRV8BQl7TvOX4ogTqUUbp8B2Rc0tyZSbFk70M2WlT+D1wDB\nHYbMM3C8wG/L50RMWId1TItCaQGhV7QLEPKPkAtK546HgEqMnV4HtRlEbZ1Y\nXpI3SsnjG8XIagfa4JerlwJM8s5dXsagj9JHL9+oWl5O9GW82vusGceNzOy7\nmyv7EaNvFmbYlAetPCaQMPIF+ekNsxJJAFAXZBeqGfEBMy19kvRXwQtbE5qF\nQSEsdpLKroHvCiTYzhedLikhtEZzT10jsNvW6KytSXWbU9Fw6bdfdcDCLkMf\nUA9lBTFk3K6qm07zfTCTX83V6EvHsANu3oCquNzH1OxsVONjUfpAyFt2aEGP\nlQZlexzPeVX6Sx7pMeDwm66UjbEujl+g1bkQf/5GyzXdf+l0rFnOQa7fLeJq\neuBZSOckaSJGs92pbbAkzU+/NC1PjYGeoeq+VdAeSKtg0H0G9iOcxuYd6KHl\n93oXLT1DF2/s0yyEMqxJQmNwL8W/PH5QI5iPQ8MIqKlGi0sxDzavBAE2BAUT\nqIzmbOLCUm0eQtIUi8m9EL5mJfOxFxPwwU0RrSoCIp8IJ9RJrDFjSRyRZy/E\nTD9s\r\n=SVwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.05d5facc2.0","@material/rtl":"8.0.0-canary.05d5facc2.0","@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/density":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/elevation":"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/switch_8.0.0-canary.05d5facc2.0_1603901538297_0.617891647550197","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/switch","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.291b3553d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"926fe9440e69bd4881587424fc90475a84dcc329","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.291b3553d.0.tgz","fileCount":38,"integrity":"sha512-zlWs8Hb8oKygiEba5Gl/kGcC9tN0rnrYiLWDwx7M/5S/Mok/oOt8WWQvGkCFPryy2DDJvwwC/jaM8JxMFwkO2g==","signatures":[{"sig":"MEUCIQCG1LLQ7mxGFBn+rH0T20jiSi+mO/nWZrYP9/UhYrpTrgIgexg+WHYfwuRgKGvMjAqO0HmsSiIjh6vRf+6N0zY3NOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4pCRA9TVsSAnZWagAAK/kP/2NyJZiay+nBp0yG1GDX\nZBGWCgFjwi1yAVrtOzTrSi0cUZbTREWH9fC1m7RVjABU7j1B5VD9fzBu6j55\nUU9aZ2Uk59OPxrPoc9472vx6icqQEITGKz4jW5e0+6CFt/lipxlj7yG7mG6J\n/tG9hnHV8IusOB+W6wZWunRuoig+B7u1UzNagLufBz1bFkN3WXuaXMzoM5Un\nRsGAF4mLEVr5+jMjreVf8XbCYTDo2IDXFePLxY9DZc2BwoGfEo2DySFuK6HJ\nOxQbEQWNJgLpkbxooUlDZsG//fFf7P758O85QWWw8vXUYdpmk0sTwHCaDpVp\nxQ6jaCFPweH1Q6ZQ17cKt17FJosjDiBKdUTzC5k1v9rEVziFvJknJWj0fmNi\nRt2bvprtNrVCZ25s4H/kwjUhwKM9rE0z3wq1JJKJxl70OsDeqavhjfMX25Q3\nirP8cRWl0byNW6inlR8808rza4zWyn+/kXdoyyKrlnmYLzgfrxT0fPtA9BHB\n3RS3v32YeXVjwK4jvre6oBRrDiNLchATH0KTsuhucGvY1AQcyDvUR6zLz967\nGNQ5INt8WgcBKQueCGrA6s5aDQYzT7a/1czm4nMqBW/FzxMbRLX1wTC4PxS2\nBzaVwTOi74PansVg6g5We8iLTppitMgB7ORULXJmeCQGQCpBWUbbbePttMhP\nKw49\r\n=PdiM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.291b3553d.0","@material/rtl":"8.0.0-canary.291b3553d.0","@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/density":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/elevation":"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/switch_8.0.0-canary.291b3553d.0_1603907112722_0.36285567952452324","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/switch","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"219e168473c0c752df6999e61849850fee274c20","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.dbc449b09.0.tgz","fileCount":38,"integrity":"sha512-X5bG7hjBM4iVSHiJproBM7aTJx5FgsvYXFmjZyRT0ezwgUZBXb+UpirugL6M4dOOZNYibYSKprAr03s0JRRyzg==","signatures":[{"sig":"MEYCIQDehlJ8vgaif8SiV0CDQCAtjIVFaJB0R0o4K4zj907oUQIhAO9tqAM7tedJAjj0+B4e9fXDL5E1w7DgA5aUDohY5q8Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbSoCRA9TVsSAnZWagAAU1MP/i43nB2Q3yb8iN+qsTRW\nA+IiSZNaVyHMt7JfUoGr1FxxLlMYhsVBQBSWWff8SzIQ+plSIl9/U26sGQIk\nUTHLXy+QbgL2qACdbhYNMyuFqgDapQgea//ars35WouOVMTk0+b4f7J/OUw2\nhsIa8XFAGYLBWTBv5zkR857BopGowWHtU1xwz9fGSB5tDKtt7B70y6mZo0pp\nGH2224GrXoPGMOWcSqJIqvEDHy6cwJPeGmuqEUHGzP4SPQPZ4y0x8sCgplp+\nFkviZdskHfBrL6Zc/BpOD2Xa1Ivg+SiALlZ+4rII49q3ZlwJJ+rn7eTIR93O\n/arBOjkMIqAOLxgHhWSYs2RMSA513PuYjGlGysODvhnWkpj1MIInadC2GOIb\np4LrGRA8S773ni17E4HNsMXMogEmCykfzhDHcg1JyTOZVHoa2kStgBp7ixEA\nV6h6qWz2F72HAHitng6XrcNNPKnlojAOHdYChFrZO34jcP/tE+FNRNump4NK\nhPhve/TlaZdv0h1BW6U7P4r525OW4uaSJ+pYbjqEzrutUw2eHEry4iqpTM2q\ncV0jLAKRtIcIf9dWNEIOX6+5DaEcU3TBv9NJ8vRTOnGogeQ3pR0k/qIsO+P/\nIYZYMk4Ps7/6+CRqv9WDcEVgMUFN+q2DNS21Ca3EzZb1vUeIlJn5qJXBCsmx\nOCjB\r\n=0ibX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.dbc449b09.0","@material/rtl":"8.0.0-canary.dbc449b09.0","@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/density":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/elevation":"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/switch_8.0.0-canary.dbc449b09.0_1603908775933_0.8200925116502271","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/switch","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.4794b25da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d3ef6a4846874c0418c7a9449bde384921a2615","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.4794b25da.0.tgz","fileCount":38,"integrity":"sha512-nfmrbAxYzP6nL8DHRc4i9IPzmAJwZr5H01Pp4lKMuPfJZX79mjx/qA5ZBaIDmOq7DquCOR5VsnDI929TjFUsLA==","signatures":[{"sig":"MEQCIDwaiBpBX0Rt5NlgGiDxZnUg9qs8+niVCy2dHh7dKEKuAiAiTMRVVmVJg8hJbCAjFbWcpk0UVCDzWwvce0YEmZIxmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtWCRA9TVsSAnZWagAAgE8QAKNww+LceuKROtsZP9Zt\nbNa8zg19VWcDrtAM9RUw73oTUe85gYLKFS3RCQNi5ErSEzKXsmBtdLeWxZK8\njoeUInMWgJecIoH8g4LVfL4WSoArAUzhpr1QMk7MXPy8iN0/84//xk9cFEyH\nQJNUu4oSaOzjPTurwxJJqdEmoANyabIoekSIzh/ccb9qUjjk5agiauo2mKbK\nrQIHicukM8259ZdyZXG9r+jCcyrN2UncRHzB5qNullK+Rpd323x9tVucZjJR\nA4xB3GYxHBn2H2VZBsgQkzdt8p/sffD5Ls9g+pLNhhJLOuVr9LGoculZfmQK\nfIRpzyveKVtsBF9HQAtbTpa4cirzQKEbChW132WL7/p1umFMGlQWEtZtrFFV\nwQBKZGhU1CN/L1FjGXAypH/gUpnWHTC1eEHAFQ2iSr8MDoxWS+MiGW/NQCdc\nYeDljfQsIWt07WZBLLKKX/CTB9wIhcTYbq2b5Hh+RamysVuLF38KtnCeD01T\noWyOIbGFOFmqdDYjHKtWjq8ArmUbPQBr2TWL8VWEgI3vaBRUqFARsUV3rHG4\nAs0+A6dBopXkdb05fVtV/geaHwOUFAD/fv/G3aGHhUPE5FSwNdwsqF2oQ4vf\njWsbU+T1Dl7wQyb6i/ANsrxZlz1Is/ugyRnP2uKM7j6fLGfYP3NuU8gQ8QYu\nmrQe\r\n=uiM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4794b25da.0","@material/rtl":"8.0.0-canary.4794b25da.0","@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/density":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/elevation":"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/switch_8.0.0-canary.4794b25da.0_1603910486130_0.10522042784166352","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/switch","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b29c8f8a6686106fca91cdaa64f32ed00efdf51c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.c61db90a5.0.tgz","fileCount":38,"integrity":"sha512-BjV+SQbTvKcj4xHzXl0wV62sK+RdqrQxHIaEKJ1jzluY4DjwxuhdeRDWZU2wACwx90yZnlDOwMP6OVIy+/RX/A==","signatures":[{"sig":"MEYCIQCO+yDeutxtGGSppg5R+PrVZFeZ0fULQXOqyCtMOdfIEgIhAIaM+vTVR9zdVUQ1wxSZvRScZIVEMzOD1ILioyvxKU2u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+tCRA9TVsSAnZWagAACFoP/RhhmBNNm3pkLvGh4szo\n0b+WbfXvNJ2/jSJt1V9Bt3hV5wXQppudOVsngHXfpFPRCbCHBJi/sFJ7LNfP\nT3O68qWxz4LzZ3nntO7Djf8YKVz2fEBKf8IO1dyg5kvj/7QUBwL5Pk2FlCa0\nPSX+e6HKXB1BFQrTRFOtwgNP5sKWGXhPB/OXqJ2QuMoeGs3OmdSqjHzAXN4f\njinF2nRR4S2/WwjbDXkTDf/dNg/tfzFs5aRAa0nhIu9ZVYXOlOFMHTtGli8z\nr2+hheA0hvmc7X2xj9wIbGrpNtJPlfI1rM9AixRRUMQ5hvrLQh5NfTX2bYX1\nYfywsW9Dffd0PYjegZBKyauFzMLA2ha+++qtFtXb26m8rhZVNrFq9voXfclw\nd1a3igtSVChNqrsZcPx/79e2V48fq+2r5pRtkj75f6AmFJlA/2gtMSIbHH9k\nRZIH4YxdVqzhEoNz4+JQZx7d4FVc76W5KhoG83lI/ZJ+Jm+noSMh3sSzwIbL\ntgEyJONoVJcuBXm5wKGVtbV98Eq3jzdC/0k5TYJ6VYqfYdHBMKZjZbR4t8OF\ngyNGajmrDGAVMgmbTsrQGtvwxdwOelh4PQOB/Vr2C/fSX1l6OJSq2D4NBaT3\nED8d/srQsNUr8C1g6LjFnXeodQpE0OliyIPzI3ntqIYpnwIe7UBHIY71jnUZ\ndM09\r\n=/vWu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c61db90a5.0","@material/rtl":"8.0.0-canary.c61db90a5.0","@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/density":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/elevation":"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/switch_8.0.0-canary.c61db90a5.0_1603911596717_0.8243013320825205","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/switch","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a64f2aa0c170309d4a1456a53d115ed5bbab3da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.6d9648ab2.0.tgz","fileCount":38,"integrity":"sha512-CFXqtR/f6Yotci+CjPcaYASrMP1GNDSvztPtOuHdalSYKwzrGabwfD7TJB+aRoUvCbQKcEU5A8OkPiznCuDDsg==","signatures":[{"sig":"MEUCIGFDuhWMhiwOsgI7xtp2M2lCPQDt/bXlQfaJHC/ZK97GAiEA/BuHJmmmvnTrjulPGF8w3eXF+CeCkTp0LKqrqMLPXYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybnCRA9TVsSAnZWagAAD/MP/3w0r40TZpXWJCYKVvln\nQgxFfWbyrawseF5Yy5T/paB9mpkWxxjY3y7TpVd1Oskxi2g/IY1xDfE2cyI7\nzwYXrq4QBF9d6oZnTDOHkVvATJPzXuKIwSWsmQAvJ+CGActEP86AhQXOfwEE\n8A34G2elLlWamEbrkIi8PWpe8cJ+/FKa4hHCniB3TZeMu0FZva5jHIYLyRoz\n6kC7QQIpVp0TVIukqEwlFBRjq0Van8EzZwuovNLtsxCHnYAL1KGCb0vwrQh4\nNo2P3sziosg4utvqfmXEMj6/EL5Nxl0EgpsTkoa6tWkV8ysVBuJJzYrKeHuU\npXNcvPXK6pCP+JW/OT9NhXoiXdEjzR6wgxlFAEbtXCx2acaoSTvQkbyi2sLm\nS6CvUoEOMzWM4yFgcf/ZhrLYeuFwtlUwERLAM9cSqZIUfZBic8DIB5s8yEws\nf4GL4b+NICzNoD6oaOsD92WmiZQllWMpUorPM+yWm0wmHWTldyTBmEMKbb5j\n3YzFUDlKps5tco3OaGp0PhNyP1k+lpPD2r1DeRvukZ4+C94Ai29y0ETlcrTc\nY2d5wGvz7fYFUrJ48+FuWxifuBpvuqnmB5ONQ+XzQ/XLnYFnCSssse03rLHa\nI6Hp5dTPMiqNG3nMbVoHN3gPd62zrc+kraummYxfyemmXZI1+kA3FmvGFeLi\nTHap\r\n=VTzi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d9648ab2.0","@material/rtl":"8.0.0-canary.6d9648ab2.0","@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/density":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/elevation":"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/switch_8.0.0-canary.6d9648ab2.0_1604003559133_0.9924994490303751","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/switch","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.5511c5254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf2a63db5e1f4b3aaaac48dc8d56486d86dc088d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.5511c5254.0.tgz","fileCount":38,"integrity":"sha512-O58lJHYDCFn5q7StjSf5y6Jvrf2pBPC6x4GAWb0mYKkg+TccnwHtxeQMRfs6HS46il7DEYJIK2Oi937b2e0Swg==","signatures":[{"sig":"MEQCICKQNC8dS11y20iZ+xVgq72x84Cy9yMYphiRxoewYzNQAiBuY9thZmjKybMVGH1afxwqp/V9g6SbocHa2smt0vZeiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFS7CRA9TVsSAnZWagAAO8UP/2Yaok/mZ9FE80xXub90\nZ0UrvxJp3dE9FLq2olunStbf4wnvy8I/AQY/R9OQzFpFQ6bXoCR8Cz5xYC1p\n6jiRQTh74lLHyeaDQOtIMeTu339GgcMUO2ioTWdY+kIuiJVbf30JY65994Yo\n+f184IlaklNStJgRFpFQe4rB0Z/QxH3nP7SmdweURO3xXeMol5h+p/ry3Hut\naXKkY1Ev8ePQXAkL4KN+ZQ+DyEG3nab6meEhsXhY5+r3lFTZZvoUGeO6lqB4\nE1Iv6wkTaGx33tK0ZpVVfAsv6JWU+Ds9y62aH+aB716DDhZZbvzqTqvxcxBU\n9XyaLbth2LUgwpyY2HJKHH7r8YDwWf5wWdmrIx0pTxtiTiH7Lu5ODjMn41vw\nBzu/t2N83mlYlQj9xHJqKXSuMxEkqr3uzWezbMtkTXjAEYMkZ8eEkcvds4dd\nmeS5A33HXbzVixxQIyWK9mDlucSo3KRg07+sn0aYVZ4qg/+WFXObxmNbTvbE\niN7JlCWCpVFUnxbsyiTvT7JWnrloV3yNmShiV54Jv7lVp54KZhF1JKpY2r1B\nweoaLSRvOx1O0HI6AlEpEvUQjaWjF+ukaRGZ6gP821WG4Ty94bpMrGhA2q3C\nJlYh51rpu7Fsv8968LuJYljDzvw6znXJ7WgSxCI/Uqj1QwaPIXqRHMWZktcz\n0iI+\r\n=ujaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511c5254.0","@material/rtl":"8.0.0-canary.5511c5254.0","@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/density":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/elevation":"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/switch_8.0.0-canary.5511c5254.0_1604080826497_0.15434450292235868","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/switch","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1a7161a6f86000de2969b918042b8af5997022e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0-canary.bd6e302a4.0.tgz","fileCount":38,"integrity":"sha512-QTwYYzLaUOc51l7Tf6b9BjbWzJcaBrYgGLfbc0oUTnYXUNNzw3PrT/PUcKgLxBhZ34xig8+7VTDHtOYmnE8Dmw==","signatures":[{"sig":"MEYCIQCKzASzTGWTdl3Wqey3iE44++6uEWyirEk8ujQO+DUKTAIhAKWZUGSSuo3S9SFqS7PosHtFira8JA2dlhtag5RPqIKw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDxACRA9TVsSAnZWagAAGp0P/2ssDzNKgLjaaQb2LiAF\nj8E1mfVnwKEtSjFTfuyz69RNV5oKwqb7gtSX5sIwKvQK8goALXb+oGeAVBdG\nJC7Glp0qtPE+XrEyTPnOYJhJGXlyPWRDJVZlEXEkWkFD76jdZzJY31bQ2ErH\njdQYHr5R5THHkwGasD14A67zZGLAqDyj7iakU+gTMSKMUp3JujelkWYPxVGT\nqmpkuSqimiHHk0DpBhZDhd1s7PDiUUG9rudMSNcCaXdzEFrirca4GYvMLeYr\nNBj4NN7kt430P0S84r2RYVqAb72uLrmsPqf/325AiSajwWeBARXPcGEg9L2B\n/476yBryc1RMl/oWMZkfSLHUvFOMCsF8o7LoA1L32oKYbf/c3ugN/uX7meH/\n0MAaYwRLfVYvmEnj6UcjXKAQGKhdHLZeTi3/7gRVSlAJTAZEukQrE55AY1To\nP5xMHwQoF/dmVNrX6XN2QGgYD+zKfgm0h8CxJxkkOYIRKT8oL7rj0Vc0z/2O\nJ3aUc/+33UOr3Kb43HHU63OW1r5MQXDmqOcsK4AIgA64lTf2waQuqjdKcyUk\nAQMzafyd7Hnqun/s2QbjqRBHes3FXOdaOZ3QyzyT+C+aipiFBZrBRS4YtGIw\nYbcTm6eh9vB/YTcCks4eS51NC4jbI/JwS7/8Zb+eHu3T3MJJ8mnzpgxXl70Y\nfUgp\r\n=bYnJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd6e302a4.0","@material/rtl":"8.0.0-canary.bd6e302a4.0","@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/density":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/elevation":"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/switch_8.0.0-canary.bd6e302a4.0_1604336704108_0.7023285569965687","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/switch","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f51e4b8824b6699c5b4462addcc5b5a53dca8dc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.d6b5cd418.0.tgz","fileCount":38,"integrity":"sha512-1/s+QkfVx+FeFFUuvsv3c2OIJ6ej9yp2//rQtgSS5rQMFBHDSvKd+ASaH4REjuGsK6dEWP7xfxvz5OGla0fACA==","signatures":[{"sig":"MEQCIHVvVqducJAn2VypxDiONs8tuRY9BvToR5+I2/uFz4EgAiAQaEajWPe9jn7KVxiTVVokL/xXQ+gM0Ti1AxY0Z83PxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9FCRA9TVsSAnZWagAAQekP/jpsSFa28ih70NMOnqLQ\nm+p0kjwO0FQUrtHL+j6oUvbpF0aNxEqBfOOYcMJTm0rjumFxu3IZXRec4Ws7\ngfKOSQVJxuMFMXeQ1TeSR4VfoPWjXdmULdSYsHzLtP4mF0ijrlzlfehoAAfM\nknos1hIdZTvL2H2rBTYsB4kP+z8XHPtpgx1l4ienyK2Zw60wn+ednejq8XJo\nGNV+oKQ/w0nVNpbXEoRmpV86i2D0Z/spAlG2s/pGQrc+D3UbzoS4DuoIlhd5\nJimMf9rD8aTM0NHOHoBWHs+VGF+4a/fmtw9N+iETujRDO2hmlDa9shBry9NJ\n2jOUm1WNwoyGQR5MBSfX5jw18WwD5bLHGLYWB4SghfgkrzioB6rOHrL0TzWM\nyc7qJL78239dlt5OA1hYeJ+QEdxKGIVNLoBkRtKXV4d4f5Icv/jvVdYG8Hsy\nEoDq+H6yD31nnDEJDYa/uiJu6fPpGZI/fm+x/1MaP6Gdzt1FlwoO1a3yoFUa\nwc6UB5cQogsdkIEsCfa3pPvqos119kHS70gKVUKk558nBKsrGiNNq8x0prpw\nMeySfaIvAy5JdhIts8MlZ/tUVBK63zggn7CPDfe95E7dNPf/SCJWfJ7/eUIA\n+VdMT76YZdxV+Tzx5NSUlkJKQ2QnNSvGE3W5+m7uyCaBaKA4IFQbMUVT8J5Y\n65dD\r\n=2XfO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d6b5cd418.0","@material/rtl":"9.0.0-canary.d6b5cd418.0","@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/density":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/elevation":"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/switch_9.0.0-canary.d6b5cd418.0_1604357957203_0.8925281732139092","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/switch","version":"8.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@8.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46b8dbefd98897a13975629152ce1bc1e1441dda","tarball":"https://registry.npmjs.org/@material/switch/-/switch-8.0.0.tgz","fileCount":37,"integrity":"sha512-ayz8zrbbmQcHhrbiu7E7AXJnGl8gS9S2KjQRpFybnKxJca77jMxLuMBzVHu6eoXmMa3otwIrcJDQbQrKD+UPDA==","signatures":[{"sig":"MEYCIQCYCpoR6fuypSe+ii+t4X4/E20gTHB6IVmRq3gZM+fCzAIhAIUeIcVJnq7EZEBMm9sqbESdrScx1hzDRGcm4mi1+nbd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9hCRA9TVsSAnZWagAAUcQQAI5x8vB4TVf+F7KNhu6V\nexH9+AcC6NcX4e7P7gzSUMCGIcF+SV0tIS7sBlN0FnMVhDecy0XEFRCyJSFg\nMXQA1ZcNBarzHjhGeHuabjIygGHZBoCGYAMPHud0wimh0k8Pv9BaT3EicOAb\n4GI34+rtIx1ffI0RnhFn5pmlm3XxypWc6OWN/kJl8kwyuCfAfogRc1y+K4Ng\nW1YYUnu5Dvw3rM9lh3gE3GGs/HpC+UWZXxt1HygdNsMe0xaDahyjl08ZwWwM\nJ8VfGFhCbsMaIdrHS22uqt8iFjD17XNoKRUHZE3QmAPjIg6OaJN/JjE+IIdS\nFoQdPL9uZF1AYwm0ZJPQJ87rilte4DVH/PH1Hx8ZdjkuVbMILtgmhX3Z6h9C\n9lrL+xYM5rueDsdwcJr7J0WfydQuThX9gmD7lh1pKPkTImItddjLrl0LDWbR\nVfqEl2JRnuBmIt9xULzja4m7PYIggsNwr8aZGpemGybMXzwiOvppD69v1x2Y\nY/ER3z/QxBpKhfoolwUwBGUedirMkCUI5iQ8WnW8INvpVillxNFvl+yUMeD4\nk+Pw0hJahpIA3LqJSw2D775noi3s6N9W7ARFY9O8Rje0aR5Ni1PmBQHtgqFZ\nedBm42iC0jWsbOraPfiaVwELbzU/7JkJz3PuXUP3jON1ojbdGHUuGerDrrtn\nEkJp\r\n=aDBd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/density":"^8.0.0","@material/animation":"^8.0.0","@material/elevation":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_8.0.0_1604357984715_0.6730845053241521","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/switch","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49f14791857ddd2f4e29d51d1d1f5f96883cdfc5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.fdf9a2634.0.tgz","fileCount":38,"integrity":"sha512-tRQTXIgx9bkKCBtqid4DWq4fi9DGPooqgR3MvONIc1MJj4dLWmvIeLiPom2LCtXqoxP4I2SaYk0Vsv5eyrrh8Q==","signatures":[{"sig":"MEQCIBcJgWwgVLJAuUIhkaVWTza/avpeiZaoFyF1HHEDCesfAiBnXO1+PwrL6zowBaA3lF2gfpD8kcJ5nhrBy7pgrn3IJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYHCRA9TVsSAnZWagAAfnQP/R3cza6BzyKeh/sRoFC4\ntxah7bCcnzSkunedg9wCzlzTtRNz3Qv2TbPojqJyTpnR0yl9ixn6QR0YuabN\ndfLtlXx/4JcF4dIuuMPiYL2tTWsf4Q0bPR8KNXTrhd4ur77aoXp74nN88u/a\nHaswwQBmnpKpp/rqg4KiIqPV9LYFjq3n9gLzSM8bYuQy9Hq5gF4NolDH2uwS\nURFNBTzKCeKRafk8e4Zd90TUj/ooXm2tjSSIT5P+JPwlYX5GPB1jZ0XS0AJF\nmr5uipbC5AfhfRzBuj4XbNw/jME9wBURLJtDte2opBf35t4Qul29O1v8TfJY\nt1RZi4YivW4qIf1dkxVucNueNo5XsOPdqrK4uWSgdhIU6wPoAYMTh4O11atL\n/8KXYYxK2t0MekWWZQnrZw/J8Ws03NiW/S4U2XDlvLl7l4LohepgGmj0ajEk\n1mChKcvBczBgrd0JGASYZz5qDymZYsdFLQWgnHI3RU78hK5WPoFxSAA4zhK7\nxcoGyGr8mptI/vbAWVF+Ron3+Jv3HUNb7sokUU5WbsMTeq83CRhXtDdIhoP+\niAREMorD0A/GBdJwdP3ham4f7j5IRSmEUeRYKuJisAAghfkScZy4SghzrYcv\nO0Nnsk3TEQoaCBCyxyY9NhC5jqSM376sOl+xn5E4TbdcsdUbfuUJzP/gUdw9\nkMDO\r\n=QFZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fdf9a2634.0","@material/rtl":"9.0.0-canary.fdf9a2634.0","@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/density":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/elevation":"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/switch_9.0.0-canary.fdf9a2634.0_1604445702994_0.1785674196303766","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/switch","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a4c4576d92b4b8f18305cbdcd81e77d6be0a7c2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.4a86f30a0.0.tgz","fileCount":38,"integrity":"sha512-uB9T1L4ES36E7wi/LeHI4wEBzzrh08buQm+vOWGjK3IPDAOuoGPyd1TnMAmiVf6G7AmbqRF73WxbQ5F+Qtp0zQ==","signatures":[{"sig":"MEQCIEQspOJlbAiCn0F4lFc1DyIXP0gqBlL8RnkA7w13qMB2AiB5B2/a98XhqTQMHfVO4eVfCFywtBgr6d63o0gU0AFySA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeeICRA9TVsSAnZWagAAEnIP/R/9ZKi+cfIc/zMHcpsq\n+1adcv7a+dJHPI8NYfI/07reFuyI8HTZ3TiE5ySa/QSWDcUcfNqZVB3cBkSV\nL8rDRN4BL2x7K4htbCjVXyqEaI2pTSSzakoIJr0FJ0Gdzs2AeOaCip+F2LIA\nEwZMBp29jPAE1BbZMACPmcJDXsawkPywmpC57dX2KVJIoi/EzMUENB3vHV+W\nz45GPTYABEMrNez6Rp1fT6q/9U9foRNqks9FQyJrPAirbjguO+3pyawVDLm4\nq0rHDhIgtjfxImajmUe1g+wzoU3oR+tOGXIYCz95/0Kd4f32/SoE32AZpCjd\nMauXbfJebyqORtOAk70WM01cwd3JA22J/d167HdC7o8PoZMGf3az2K7BlKSZ\nW20lDxmSuHokhnbgE7Bh+aFJoIaxVnCEH4/ftN+1yWtaffjtjtuKGEVyKZt2\ncT6KIBEjfB0Dc9rODPxRuIgQgTcw6tE0AdfCXUfeczoKLnUqcvJ2eNn8Pdj3\nY8fz8r+9E8VZd1oz+yAiN3Zt7SOVbELmkhW5mqCU3xUH0TpVMHdg58GWiB4J\nDET/MrsL7NDGF00tHX41RyW4xHHxcKSUZv5FqztAb657yWk/KXgU0UfSggDm\nf38mQP7HU4q528HXiOGJue7Bv+/YAMikqueSv8zQ1baYUauLPYXLcZH7Mwq2\ngaY6\r\n=2x16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4a86f30a0.0","@material/rtl":"9.0.0-canary.4a86f30a0.0","@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/density":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/elevation":"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/switch_9.0.0-canary.4a86f30a0.0_1604446087373_0.8305459835940359","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/switch","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dac42d1065d538ed9f37b425bf67f5439b20ff16","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.fc8b045f1.0.tgz","fileCount":38,"integrity":"sha512-KJqp6kYSS5rSAKEKyePqMI4Zjz1BL6hSbSRtdxApJkub9h8xh6ZJFxb1L8xnwMVGE+gdheRKLDZPLaxel9xeAg==","signatures":[{"sig":"MEQCIBGXxiAS1zz6JQzl9ChhdZsZrdCtvOQ0TAu6RtY2CSKtAiA1pKjpyG/9ECU8RWm5eFL7+fw1ESeZXIrznSOgKauZOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoemyCRA9TVsSAnZWagAAvvEQAKSDvURfyfeFGZiA4XDq\nUtcg9PV9jY0LeSdxOwpmC9NKXpjeQU4Tf/GdYpIRMSrvZrS6NxCHRev0aDOI\neuxaGqTR2VQ+WdNI8QXtLWiKJsiJgJaelCSdfBoBo8hWs6tobz+zzFje2Ub7\nenwvsmQwmjNoSsX9iw1O8UN5/mrI0w3fESasRUTIvuhegnYnmLPzQSCZjCUv\nvNsDqTFfNuiCntq/jqtr2z0iaiMoAs0XGME5o2T7NdjvKaEo1YuVViXzBgmb\nXSrbEzxbvqx9kJ/vNl0QFX5MU9c4aUl1R8GvvrBSL73Pw7cm1zhB7iEAwath\n3SBp5akGrse1mpXx/S0u1dHrXL3e5hKPpabv2LL1uY7u+/iUkbN1bIoeMeLs\nnCDlgPiRdBiNvg7q7uqR36UsDA9rg7T/8xAxM8lpnoS32DHNqXtxALWvoNMX\nb5o1gCU9Qd076JxoItFKvCjDRI+7EnGPAlS02kWE0hrBqLO+05kbHrwH5Pfy\nseTiZcj99+Hbck+RUIPWBXXV3V3PMrjVXQKLdNhAx+LPIv544jHkTZglHn09\njzUqlS1rxYrjaZ6IeV4jiXAHMH2Dle8v8C02Ohg3RnXxLSW36ydGFLa88TgJ\noiZxJ3qZxjxjjjY31N0U2mOz9Eoo+9aKuiAWqIVDmTCppdQIVrBNDoViaiqX\ndZy4\r\n=cu2Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fc8b045f1.0","@material/rtl":"9.0.0-canary.fc8b045f1.0","@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/density":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/elevation":"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/switch_9.0.0-canary.fc8b045f1.0_1604446641485_0.216557104888482","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/switch","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa026c65f49838a330f37fae5ea2e354bc89dd0a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.a0b2db26b.0.tgz","fileCount":38,"integrity":"sha512-UjGZuSEBL1vMH6I0b07W2UW+lAsN21KJBZ+Fo4G0vFBysP1rpoqDCVp0Tvo2mWV8/B5dhMVQ10ha3a/W+u4hJw==","signatures":[{"sig":"MEQCIHakRvgRz0KI+IDk7Dvcs3dj2+exRC4tZVh5qtfIffQiAiAhWY5atIqtUCKZ825xe382ZDUhFa3ScZpNqG6ZdF3OrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofEvCRA9TVsSAnZWagAAwz8P/1UJVngYyRAfgE9O3Mbv\n1M0Y0EE202BzQSp1ZDM2Lj2k35/Fc2NasQSRu0nbzA+kLw9nN3NCDxbc16M8\nIRWpBSJPlqLK9Z2g4I4s2w+HqmYmFzPBc0QhqtQL9vdK9ldsLM5acp5EVGPf\nweTounOH5e5OeD76N5pXgahG97aIeIiuzDAYLB11sl+pguX+4vH6sWTAbMmY\nob1uMU32ZGWRiltGznOQoelFSgYbOGxUNJ5UUBC6zzVmV4ImuKVIrE7seFb3\n96te9LumtYkVZf8pLnW5D5KjgrBwmX+S8U3d2yoFW/ji1kyZXe43Bjs+Q3QN\niBq2zC3d2qNZH2uDnPb+9YlCrUO7cqMGt+30ALrWPsJJSk07xLpWoVkc9q+F\nodx3Z/C4iZuYL4u09AKzz961JTQbGP3PPH9wozGqyPtwPhbF9/qOh1+lEmXa\nzdJUBAKp7LohjRahWBioIvYiwI0oIqA4ZA2zgmlCMEA5JyjjZvhywMYmO5TG\nZiW8hVCdKugVFAzawzJXNt37x828418l1W5cvVKLOTRjMlvMrrVaK0rFbNba\nD2aKYfbu9cvHB7cChVurwGrLJSCVT6WzAoTiSLflZ3qwEkiPy+7xTzfjNq9q\nFNore/eYbLjp5Ekq7O+DA7EoJIv940R8uXDBRKRXYwyEYSCTSxbkjxN5w0F/\njzXw\r\n=xJGr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a0b2db26b.0","@material/rtl":"9.0.0-canary.a0b2db26b.0","@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/density":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/elevation":"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/switch_9.0.0-canary.a0b2db26b.0_1604448558871_0.411695758074724","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/switch","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.419e03572.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ae5e2eb891470fdc729555c56aba9a0631196b2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.419e03572.0.tgz","fileCount":38,"integrity":"sha512-Eg53PC+0BYbKD5vIbgPSoKAODIa90iPoc3AAnvM4ELpgVL+GC+ZfJjJiBYMwvS/tIzZEHfU6Kh4M85UrTpHfhg==","signatures":[{"sig":"MEUCIDQPh5z5ZiWygmM27A89/n3c410q7WqoO1PZHN6JmsI5AiEA7IQOI4bMig+WFH7p8lRuXs/I0HGknQG+5sptKFUEwfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTZCRA9TVsSAnZWagAADS4P/RH2a5FTxyG3HE32CmyQ\nWxaR07cmVp4TREezvy/iDOhsy+SNaKPKlz1Ajiys09d6IT9jbsws/X1aYJzQ\nqNoFR3z3cI4iz8s6jXY7U0/1LKufC8gBfCk1GBb/TK9MO04iK3AsfueQfvUf\nnxx4qboovAcwimhLnSg5DYxWNGtV6kzmj+hMFsQY+lGyrZ3o0woZzB3QT9pQ\nORvpAzLzhK8p+6HDfiU07QE67OgbpPRqc+Tz0ect1lnVAgjttYiT/HtH4YAS\nB2ZgaV9BmOf9Q6dXDhWQpiZ9Xp3oZqIlBepIx6+fX3zg5Ucwe6TELodSI3MK\nRwRWaBTHdCR0YXZ8jqpkNE7GtA3utKgcu0+iYOivkOjbH0WBi7RTZQ9KyTjT\nsWtg+W8o6e9m5ThhAKcQ0vg2BF51U/JUMdn91hEjBi9z+53+wk/sH6n8Ef/H\n1Cue6hiDliLFwEJPcT29wx1U7UOrXY8necKgkw6I1XjNntmWBx5EnkfYAaZy\nnQ7JvJR7GF6vhCXutuAAMGui6aN2vWVmOXEFuyIeLYQT+D+2TrwJpHsBIiQh\nQWYDRq6r4rkQ2hbp1ZbGTcc+G6gTQw6NC2YYsQ6GGQg42X1v90/UfYC32Vcb\nzbCwlu8IpSMf4aClFbWHA5HwazfDyM62GW7iehGqoFtLdv07OQA2Wi942dA9\nTfKa\r\n=BkZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.419e03572.0","@material/rtl":"9.0.0-canary.419e03572.0","@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/density":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/elevation":"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/switch_9.0.0-canary.419e03572.0_1604453593334_0.33502357629589197","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/switch","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.a432ad542.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"544251371ed3a531c09d1a1272600558b4de4093","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.a432ad542.0.tgz","fileCount":38,"integrity":"sha512-lCKuna//82x3/5TDQJ3g2990wUpStXKDJR4QdxGN7i+hzhHlMaLmtiqY+4V/szWti6yM0DUyd4uzt/MtSf//KQ==","signatures":[{"sig":"MEUCIQCOvAKRjOMGPLe08hFowdzlT5nqGG/CttSw7sX+Vt7/qwIgTKGILZpwrj/wPVu9ioqCOv/GD6pBuwoWBwfOu2cJtIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrcCRA9TVsSAnZWagAAL9sP/24pAA+D2/b0tDn+CV4K\nF7rStYhj0CkuyG3i6/m52wR64r5UYWA3nJEI1zaoxKCTz9iQQL9X4wsp5cYK\nGV+GxhZlgAzES/bDdiUz9lmRf80VW/PVDMS2qxcU0wBrOuYYuZdM84gSiG7R\nHxmds6C+x2RG//cqA0seTufd5UEJ03zqkk5obEBWHdhXsdd7kafMYGxytbZD\nN7Q9VBJk6PLBEzdrXV7UFKuDiLL9E7sL2x26TAzt5YdPpgwk7hakcVIURuM4\neE3QVRDYZsnm9G0rdq27Gvdc0fpfbg/chliAgKn9aaorTeRS9UVZg7o4F30s\nsCAJ/6bMxfg8PiiiGL6BcIL+qMqunWety6DmWst0IlcTXF6Grg+U/Mt9VH7I\neYedvdS8ALhO1FmpSTn9e2cX2Im8GkXLK7vDQ60cfgGx795Zsan97FCdsCq3\nuaELnlKmHoTF+emXzUNFiMg9ryAH4BIvyXxnhAvq8mJQNB9kwx/lEqpnnbkW\n+ThA8bPKkUAXmtBAa5/aEiROeWEs0ra5ZYFeFLoNwTiWsC0oCmPuytia1S08\nqMJXXYhMuRcklba3jObwTJxco2rVt4YN1tSKcmCqXJ+CBi8sEukAGQLgcCQs\nh5QC+8YLIq8EDM8InWsJrE2OK8KZrJAnKzvkWlrqtHBMsuXSEwrE+iM/TG2n\n7Oz9\r\n=nppP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a432ad542.0","@material/rtl":"9.0.0-canary.a432ad542.0","@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/density":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/elevation":"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/switch_9.0.0-canary.a432ad542.0_1604627164001_0.7129439413198193","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/switch","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c181919a84d8b9efe8e7cda71750489018b51d2c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":38,"integrity":"sha512-r9bis3+4ThAti5m66WCrQlRpyoG+oWPEsQ6msqxQ8/o5L1ACd3WLAcFWLc70GetWwDFh1Y/FIIYETq78grWDTg==","signatures":[{"sig":"MEQCIAW6GPN2Rb3v+PvBqG9Ax/obVmpbXMvAE0wDOwlU8/dfAiBdIi8L2vVyrEQjvDb15OV8ZoHq1rqSIO1/YRmK9W8/RQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK9sCRA9TVsSAnZWagAAVk4QAKQGw77amKzlQUASHIkv\neY1i1eYY9bSMuSFNcKub89GbKfsaPfqai+BtSS/gFzM2D8oqzMGbQA+bkKdP\nJ/mcQC009I9em/HGnFHz3hpL1cdzv+41/kQbh+fEBcwRBZEhj0r5g7z4TlP3\nwAJH4de55CzIZHg43bkW5RCMnbfuF1nJSQzs7ZA2l0KrQFTbkzNjMuGzPXSr\nWuIq2P0FHXh0KEYr+kF7QPzL2f7uIwyHM02WNW6Mbw/6dww9v+F2WYKU1aBq\nyvRJKknBG5ygtHFuGPnQZJdGRbtRo39Rf6uVYtA0nIlt6P+wPEHBqWMx8W2a\nixfEBwrhQ7jMqocxVxk7hH+biK0FqTmcxA4CHx+T7DoIy3RVgCe5zcpvKV0q\nRo1/X7ZHSXJueGfqP7HetKG8is5T92T3xbupI1NP3SvvsyhE7gOM6jlf2q9Z\nfOgoC6UMbFDqcHxtOWUPn7fEWMX/JtKV65fe7rXPeEjl5t99px2hTI0V4/wJ\nBGRnGt4qRzJSz8D36yrOAyIUMjGdGOK1WJ+BclLGmAGSrCt3PeJZSfo4tKVC\nlzoHXZN4afSGqcjAr/jog3oSOtxgM8WE4uwRWtOtBJAyGTFrtnDNAmI+PAt5\nEpvveRdB96+8YaW90EL4Z78CCaDNXo3j/NFCK3EllDHJFMjcVgpPchGSScnr\nzqAV\r\n=0bb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@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/density":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"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/switch_9.0.0-canary.e2e8aef1e.0_1604628331984_0.5721176310053575","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/switch","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd7b65c8d8e407f35a412b787dbcb4e785dd3d60","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.ec6b68b34.0.tgz","fileCount":38,"integrity":"sha512-QaEe46+yrbaQH6LhKel1PC/5zIoAGIi7iQFmndQRUBJs+XOQEq7+m86S/OzBEbHqM2vJX3I+rfpq4rZrkkfd/Q==","signatures":[{"sig":"MEUCIQCGSiScC2tnvrjdlUZRwj3SeI746No8QbaeMT1pESw1OQIgQ2LxC6rXIOcuzpQ3whqWVUaRFNdaD++C502ctXefCek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZxvCRA9TVsSAnZWagAA4vQP/3REdRzQR4ko7aEDYkpx\nrhH8KGwD80Hb5nmN3Z0VMwHKSklAPMrcD0koo3A9/24jP46wKHd6iBRpjpqE\nxi/mCzhyZXdjtHFwYiaPLeNDH/qODQq8g3f7QH0TpW16XL6VBEWPBsLzi6NF\n02Lx+QCBx4LdVRBnylj5xc1NYNlo67H+6D0Y8+icLM88SJbYHpKMIzCuhXBr\ngwe46dBOwOUTEnwrqjeHHsfGHrWtmoyV8eenyiEmEKnChRmImKuQz0vZpNUl\nCBTeASV1coesUXWNOIW5Wf+dkku1hNBLgT9GxQBJ08fCf+SKx6Hf7UUnh2MR\nFimwEQ487CStP+DrZ7rnfoHL0SvRFqS4oVH7N2uP2+qpJu2zVjUjqbPudRSt\nLVrS2hhGyl22P6QrKaCLMOkxve4N5NY7BLavTo66CKL7g1WpwMNZgUgLvrCt\ndLb6pUvdc8HoDi5uxQrq1jnxaQeAltqEZHCDKgoQ5lzUyBBzs8ynLSqByi9b\noxYRxuSwhLzx907LT31VBxH745yEi8q2LBzC0nGJNsXX6UUzEGquvwG4Jo3M\nmkPxUs9J2SS4dU4uGAoWzc+d+XGhmi/2sfD5UpUGuOtkDA8DsuTUq1CF1FIL\nc/hvpAzJ2+zAEgfpGJD+s1WZFU+A1gt1r0P5cZWQqRu3X1G/4vQQOZMt18ed\ndbfO\r\n=NZyT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ec6b68b34.0","@material/rtl":"9.0.0-canary.ec6b68b34.0","@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/density":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/elevation":"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/switch_9.0.0-canary.ec6b68b34.0_1604689006435_0.15960287861447608","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/switch","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.b39094d14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5991f407045276baab81ab77d954f07eef04ba9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.b39094d14.0.tgz","fileCount":38,"integrity":"sha512-YvKK2TNz9Wf0xOTNgE6a+g+dv71aNoUoADbPCvQ3F/9JFrvA2oRMLfEij63Y9yE6v6J+WeUIf6kS6y3ETRiEPA==","signatures":[{"sig":"MEQCIDjTCCObgdGNuuWb1goCk7Jhu/P9Iy7ToTKrx2g6+hCpAiBgYaDPO70L0gTrrjNrCFFk29wC6kLzVDw2dLl4mp8LDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0dCRA9TVsSAnZWagAA0DEQAJrBhkSQuxiBGfGJmN9C\nVZtAPDXnSYvrOkE0cKqGd+CRjVnOx3AkmChhkIUfWbzuPvPZ+XmKDi1CWg30\naOT3LZlWe+rl46aZq49c8OClYuCpOR6gAs1XfNPGIqRefsnxdUt0Iqgi/CTL\nd15n1Hr5ZvGS/eRZuZRx9Jw49Aii+gjIFvhUYOlrCG3AbxHml8qwuVDAgCxs\nb+XWju/XRl1ose8Fsg8OTL2rxknKPkqlLHwhCmtRN19953QVrZRwVhdRKZDw\nxFm06kxoquRyOFBVHwthMSg2c3zATUOo02VpMpcHtJeDeIeWQkQBLSycm1hS\nMKLj3hwSIe3tRCWlFN/OcN9VKdcwKaEQLmoqjAgj83Hb32FFmZPA1+kc2AQE\nzT/W3xIB/b407HVjNVE7fWiDH45g712bE4laFb5FCDvKykwzgXLW5aDDojSv\n3La73d8UjYk8e7O/XTrvZK7Sn2ITZibSExGhz6Yd0w2VSochiupaLx5ykJ3u\nzndEHTZXArvUAGJVP6GbMiBKD47FnrSMylAmfigpisydTWriuz8b+VnoTZVM\nDHCBaD/SKKB259b8HUrXQ2u1pHiYCBK7CPjbuNHK62x5Ms1XruIFbQM2SCBe\nOH85O4uBVtGvor1dYY2ZsjeQEn3rln8EnI4qr2c3gNKx+cJRb/qlQkHFTk8m\nPZWv\r\n=BPmD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b39094d14.0","@material/rtl":"9.0.0-canary.b39094d14.0","@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/density":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/elevation":"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/switch_9.0.0-canary.b39094d14.0_1604697372748_0.6428508881837094","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/switch","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.8648b8258.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b7997e5b1a5f4a72297c43d33cddb7a62d46837","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.8648b8258.0.tgz","fileCount":38,"integrity":"sha512-aNeD1lqwhzA9dHi6j/hOyEo2NJVjiV6liKcZdFDSOOqVK0fUK/3COsKeV9PvJSRTh914EL4s5UteO1FJbNebmg==","signatures":[{"sig":"MEQCIHYwfeCHXwvv4Ei+8C31CrYJQkCFr3xKUbWcgM/QVT0wAiBzAdWylf++/JH/3vTcExKlNcxqQQF2/zelKiGyfLkudw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRIgCRA9TVsSAnZWagAAcGEP/2BZw+NVLwGsWn0Rcmov\ni8ir37rLVQRRR5bEckO0U61IxydqypJ6MeSmFqIgKLhX8vNfoh+ou9u657IC\nrnNZ1cW/yDG5WAAzwsN1LqcWjJki/zxiflbZ+WX8Iw3wXPZZUKjeluMHP1iL\n58Q9z36NBi9Y47bkcMsvEYsGqyH4mDQ6ongJeBeGN0RJz2QTaO8+EopF5owz\nWdw62vlpRCjKO4jYR27y9wDAXRgN47COEwzHKoSP9eOWwiSRQZ8tR4bJkOlq\nTPWkdwvnqNgsnHOOZ4zV8dNaXDNPsS1w3zV4ESwNEFE+fQFqe2JYN5EYYZXg\nIZtpkvvJHk+hG2JaIbvXhdcreHK+1x9rvAaTEvemy8caS5OyAPwBKn8pMawI\np6Xledn53VSFTnbgu2ZDTacObWEnaztzsfYMIl2jeAbFn1JIcToDhY7IXzT0\nzIyO2OQNe7seaxE61EPnLGwUDov7xGUSU7KXPrXqjocQWicQn4pmNLWPIa6H\n0WkJfNDw48JROZ0CcttweCRTCZlj16MpZ8/fpp8zm0esc/rQy9xwHvn4TNXP\nLlf8ECPtSQ1e9Bt/MwW4rgj76sgW0FCty3hRanhTozojOzNCqhkXwOrcIqMb\n8Vsrjx9idxEhCH+8EgDRSybqQjnfjmnWHF4Qbfy3mN8X6+SVZ3mtX95EsPoa\nFQD5\r\n=x+uN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8648b8258.0","@material/rtl":"9.0.0-canary.8648b8258.0","@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/density":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/elevation":"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/switch_9.0.0-canary.8648b8258.0_1605177888019_0.0942113477791946","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/switch","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03821229da4c3a8dba9105c0619b4007ed85e679","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.240c5f74f.0.tgz","fileCount":38,"integrity":"sha512-TyujEbmkGSP86igNlnZpXQzRNts6jB2YSu5q+8EyAI+5wma1mccqghTsdJmiZCTlnsKBcEQzQnmG+3+xRyq63Q==","signatures":[{"sig":"MEYCIQDc4zqqQk4FNr0YSdhMYufdKHtmDqCOIQTxldBVL9J8AQIhAMf6SnyshEGpkiH47XJYIelKNFfbc7b3Ibx5ijGAwU8Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZklCRA9TVsSAnZWagAANKQP/0ZHmMvHsNoOOZT20+sO\nT16ged2iYQqs8be+JQnqS7TyRaHj/ga2zP8lYyS3AXc9rjmfUE9vhL5j3vdT\nKXCvfDZybbCZQaahy0f06CGCNhpsdpdTvc6hJlmBSokb+ctMR4Ztpn3FOY5p\nKVoh/OFKfTq+E7PpSKLzMvD7TYs6b6yHAJn1CMtrrtLQTHe965a55nY2NFYy\nqJHDExiFDisLwQUxrDgrItXioDnXwSjAY9WqrPBuTLaLwAvLeDZQRvBB1ytI\nT+JNr3u/Rk4sFRpcMK54jh3esZmkr3kzkRHxL02GIDxD/8U7UCmJ0AepJCTN\nblCX4cCYtRKTEilqEldRx+Y5mjsKC9sQeUrsKMEovSH+YPb+GlEblyROpnSR\naVEso73NngGv7XT5IH5ksxJus8POJ9jpMi2/ykPTP97GI6VPhFBmcvuJiyZo\nRCyHs3eBKzbtDrd7+Iy6VRROdmiVhIa/WAVscR4I2N/jQYtcShiGuhlM2Ybl\nsBKN37LJvh0KUirIitC/4QUVxq2jFRwQBridBax85HBvsgRCYd6QC9hobWrq\nFDhGV2bpbGtBV0d+3KhthekksaabKrQBwQaDXx4hXeBZGGMosrNuS8tjMQYH\ng/VMqSt2tb1Dg+K80v5Ek7fNX1ef7hVvziKsVsotzI7zZ9oocWr2BGBbQErX\no/70\r\n=PNYE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.240c5f74f.0","@material/rtl":"9.0.0-canary.240c5f74f.0","@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/density":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/elevation":"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/switch_9.0.0-canary.240c5f74f.0_1605212452514_0.9020883176182286","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/switch","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bc4be3762b7f1d885094930c356e25c40090b9c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":38,"integrity":"sha512-PxIL+oT7ADQ8Pid7MH/zQcGrSpJpSogfHznTNSEVDqcqvxDyvhf+HW1j8bYWiEQqZ4btthz3iUjJPBpMoa/PLQ==","signatures":[{"sig":"MEUCIQDgfoeeRCRAq1zQyZLupyrqEWoTI5tjDxTwJdgkRN4kTQIgYq9kkgxmvmqpwdqJjJVqwEMvr434SKAv4xpj80NEows=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssniCRA9TVsSAnZWagAAe9EP/RNfrZznjfSdOK+tWle+\n2S2e07JjTXZSS1uwOxLY6+uAOm2gaNt/37BjVd+k0YgkkvuzOYFau3BKDy01\nBHDAMNnlJSyg2W298nojoZk8Hfnl4AY3cWQXXk29d4n1N5hWOmhp6pwliBIc\nvvfiTVBPGtZPryRwYvjuvY3IzGdblgK6MY/GeXIBJtF0dCfIfPpmoMHN56oq\nSQAzW77NjTZA7XptYAvHBKzUCNrygJ6ZEkSAxYuOw8tll3RIGkQsmHTS7gHS\ncpwy1QGglEpQx0BgKcqNNZmiHP19JG3Zs23LRb53/zh/lN9iEkp7WdUzaqLt\nr/lD6eY31rSmO7L/8bHyMrJjh2ybDzKuChDOVt9lwCci7NSXgO6rFXlfTx/1\n/OJS68WkdSDJPadRs3g7+RKAr4wjm4gYM9dV3fxTmMcih94YEwAvDnS+Uj0M\n9vHoARqYFiErBXG34alsKed8I7a2fgja/hNTIUnmm9JIl8EWkcFNVa7gFERN\n/KnN2RNP1NAeXcp3+pXEM6JFZhF9ZaONI32ZIwoXcepTr0GNJJ+Qy8iR6PzD\nuV6UunlWEGSYubsjicN1+sKH3F19NeI2ZiKNFfu3qIeJRGn0V40Ros+1Jt7N\nsw7YHdUMKqkqGcV7KZ0SbUWRGQTApQZNniGP+JvA/VAVLzsGtZhoAhxOPmCj\n6+3/\r\n=nLzu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@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/density":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"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/switch_9.0.0-canary.6cf6ba4f4.0_1605552610010_0.9317204174997586","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/switch","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9d9caa6396425980ad26f0d6c09c08e0d71b553","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.07f3e01b7.0.tgz","fileCount":38,"integrity":"sha512-AfWnG0CLp2tJsbDnGnIgnevF1AHzOiZHyNiVD5qYJEFbtcc5VkGYD7XJgqRkKPm1pi1lEx1PmqHuyZbsNQAsmQ==","signatures":[{"sig":"MEUCIQC6v2zPMxWvyr4blb8gS5RHMXFkQqTJ4qpZEs6iaNTxJwIgOd9/YylWp387HQvU2d78dWTR4pST1m7efVwmWY4oa9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMWCRA9TVsSAnZWagAAkYkP+QHhgAEzdy/qHMq2GYTe\nMqboVig02O+0dKefiZZ35MeGktgPiyiABd9/imoH0DcSEfi02fmPo/D8riT4\nGFleChH76ZOELj4xDo9e5ShEGaHCyf6eogEdisJKQ+hqfSL49VUaKriwXxzn\nGgfmZA1vUsdGy+EIdP8PYYqY7YPDykEeiec6l/1dPXRqYqGb/NhgEcrL4tmc\ndnicKmvfmcmpWYAVfbi776kkWoOnWBtSW/Ql19ERCfWnIP2r1etPNHj7Jo86\nZbtb8DCanC2gUTGQzgwFZDlJngLE5xmSCkB4N5RbTExfhRsXYogYSTfV+sAh\nfJmOvckLRsXFeYzpyLEZTzHg1Af9wgaxYC/rfyagnjwbOrA3CwooYGYenZHc\nr8wY+CLCqorE7DeXzM1Gl8Eanz6d3kEj85jurg3qBNm8hA5PdXGkRmJ+JKu7\nX+ztOj+62FeXElkTnqLcYR21jj3GwvgxrnhpX+QfH85Ot3OtVwfOq//xl1Xc\nfn6GeSvBJnHCSLJfF7i0J+cc0b8R2lvVbtB3wQy0gnsSo/rozUGCNHw8bn+p\nvuzHFmYwoQe7uy5wO6gQMGCkdfPTAKd4wyDNP8YCn6lB6+AUN2seaqiGowbF\nn3YptmW0S+HxRUOY9CHJP4kTh9Q9T0kdnRagfuPqHO9q3XTOuBKLTJFghOcz\nhHfH\r\n=V72c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.07f3e01b7.0","@material/rtl":"9.0.0-canary.07f3e01b7.0","@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/density":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/elevation":"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/switch_9.0.0-canary.07f3e01b7.0_1605563157885_0.502302084043573","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/switch","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.23491cf85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8512c0d34b4e9f996dbf0edaebb45e040ccf4849","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.23491cf85.0.tgz","fileCount":38,"integrity":"sha512-zIQ+jVrM7tPP/ROig0umqNTOJPY8fIIEVFSMTo4tC3s5EfI4u9M5wzXxHxcdWlVVrwaw1RpidM48OR1tcpxBAQ==","signatures":[{"sig":"MEYCIQCTlEG6KoikBRLCNi4KxJY5YWrilLoz5Cf4CoG0ttHpJAIhAKydwc19VYOza7j9OHXg4ZNyEV5m7KL5obyHmTx+5wCp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxaWCRA9TVsSAnZWagAAQ4MP+wf92Pwbw+6H0NsZYUR+\n2ShZwmsXmhJEPWN93xf4opODpdLDbszvSsFs3KhF3zVS7qVBiv3D8aSerK31\nFAyoZwzHG0Rtph3xMdEYv0UBe1Sq+I3JUv2uHKTP9+GmKTTuxwRwc2ImIoOE\nIH3+oTERBpylV970vMJnZQZ1ssnktruhsf9WVcIMrwKvl+1/YMoJk2QkNsQJ\nB3HsOX4Twux9SdbZ8ED5y9h9sHe94TICl2suiNc1KVAOAlzAZOEbs3LxBJIp\nLIxsOlJqyXTQsKwe62HdyG25S7Q+wswXVoMQbFEM1E/rbEscKHBGTOOzpsTC\nsDJPbKGkUiUdtRH+qRScVORbbPeRvaLhZYI3FnV67zwaIhgTx61cC4cZqOBL\nzd37DlFeXKujfsTFNEePncNWqkHKtVCEgB7WrZSJIbgZgOLN792/87zGSobw\n4iZRuPocC323Pn5UGML7Jf2tlrVJroiVyXeQ8gpUnDvvXfHVUEBqknuRY5t9\n7FHkihpnbgNvfdwL5lUafwb/E8u1g9Z8P72bF/7+duVgoJLE850w8UUs2cPV\nxSd51HP9KwlB4jB1VlQCnYRwPR4HvuxaUsMoMnwNeRTJNQXXITsoCjBRN/6m\n3/j6bSJAe3sTuwta3BWfLIhcIPt8jF0o0PcqUkbK9P720Zil8VT3FxO9Xo6T\nC3Jh\r\n=Z4Kt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.23491cf85.0","@material/rtl":"9.0.0-canary.23491cf85.0","@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/density":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/elevation":"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/switch_9.0.0-canary.23491cf85.0_1605572246034_0.8873267524301252","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/switch","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae1795228b6f96c31b7d8b064a457df27855dec6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.b659d4fc3.0.tgz","fileCount":38,"integrity":"sha512-xI+R8mR3AxBRbtfvNVRBqoPW+teWyqTlguVKYvtVyg5SGa4+GqPsvWJX3mLCSHs3uH3X1XL3JR0x5/U2gXVsXw==","signatures":[{"sig":"MEUCIQDkAtbPUasWsfzH/G1UyRgU5XWTjkHFDPbWnJK8enuGmwIgO+OjaC2XtEg+h3UMgHrWelrvXab0HYEe6NaCKfhz50g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxhwCRA9TVsSAnZWagAAkC8P/AutaL3JaoacGkx34BKt\n7iq+LqJdUQqzlHYzaZLAoAN9Pxu4rav/kPNMg5xhpkJMPMc1Jxqe0zr073TV\nbsG7rk5Jd4rTVKmpkFzyfrt9liYPC9WqAL7aqJu3eN43p/+FSIjQnVb128kc\nJPrShduZwrWoJ2Seki37Lg59R8ICRnH8WoikhoRd9p7iyIkGOYn0HZLbZ52+\nkUX6WVest8L8rCF8ZjmARAtuCKNnRNA2xhUCE3p+WCd+RYm6vq9TPUsJ9uft\nZco2dH4CDwDFYyzBbI4w8CeMVxFd6PvbZCI3Ns+YPs1WcujfQYd+C5hrnzVg\nit8T+ZmszhUeu5Ckw1ClN8EPPwSGhv/2yH6wH0uSHl8PbCKB+BpBzbqd1edr\nwL+tTsEx8wR6qD13/2t13jLzdmU6IHmcok6rFcHlDGdyZJaCp6i4F2wXdTVG\nFeW4GZrKZA0Ne4ey9Ly6thpj+SrUgYR0YgI8Y7mY4+MNvwwrHeXlktyraIqh\nHbtZGTBnKTKQ8b58K71/b/SCVIv2LGMGn6EESaXbZ0WuGGwf6n0KQQMyQI4t\nsvv2vB+zDC4Dl73XfAspSoaHjErdc/OKVE/mG7NzMRydSMT4Xnxd245Gfhms\nEMMsUfeaXB5CcJs4FCedO7qzH635muYLz/jH4+ayLK4xXQR9E4yRJVQGxvDs\nw/tN\r\n=Tm38\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b659d4fc3.0","@material/rtl":"9.0.0-canary.b659d4fc3.0","@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/density":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/elevation":"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/switch_9.0.0-canary.b659d4fc3.0_1605572720185_0.56152333872061","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/switch","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e09f523cc79e0f013122a00afbcc07eefb161a0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.d8a3aed67.0.tgz","fileCount":38,"integrity":"sha512-qwdhZ4LSbMz81HLZzPZqYTDmNq5Fj/MDkpaODpbEPvCOorOj6qeJ89E2XeiNHgCKi9eF7XSMWz2BfxrSZJoUQQ==","signatures":[{"sig":"MEUCICsvpgydSqU49rIwie6/WO+D2qeLDYRjAQsiNzN6hbUGAiEA9+btF8HR9N5fdOUL4OeZfbbYec5ov9bIkxLHbaR11Bg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+vxCRA9TVsSAnZWagAA07IP/1D1LH9TuqTqOdf59I51\n08djV0XaJQHnlKgDeinK5hIUCUfMkkb1LFPUO2Jw/NadmbBO8IUudoPJtNcc\nhzmN4/6DiDJN375q41BrDRNpDFBE3WKP3R0rFbwdXnQMJwa+fj+Uy3HHv9Ba\nbRjpPqWSsgEPRPj0tZjJ6hcWCoeCXyTHBVu7On04bIcdHfCnWuVxnEJB6/x+\ncYDLa509Nvmd6d4/rCBDlrSAjU7LEiQv4H5LBjjUWfksUHevHkkNQjj/tZDH\nSWuA8Fk5a66cGWc/ZQENikTQqss0klbU7en+MiE9lS8qrFt4wPdzsKs2ehYQ\nt/If2ucsZ08rjBMxlaY+UyO/kR5qZECSEGqfsUzsTgU8TCMmCzrxANOSk679\nTmVm8gpTqgbFtjsnqW1fDoKJ0e05n/aIuBJsNuGUxrLFSo31ln/3UU0+tt4A\no2TIn+x2L1dPqjfr9E0FVJuRv2LI2T0V+yqMkVZV+0T2EHwbIX1JYpF7Wcvw\n9yaCR4rIOkmvUjlivJVPSXLzoBErAitm8JtPVdTRJugDG3HTOQ3SGDwhqoq8\nkH6hPW6AvuTjdkRA/EN7ZoCTRrSaayTj6psdYAR623aKFyqzrcpTl8ep7xiX\nXFn2qouY4LwrnTyUeDw1MLSdITL3Hw7XLrcVDh5wgdmh1COlPSV7JZVofeZg\nOGNs\r\n=qU3t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d8a3aed67.0","@material/rtl":"9.0.0-canary.d8a3aed67.0","@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/density":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/elevation":"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/switch_9.0.0-canary.d8a3aed67.0_1605626865343_0.06617899630111324","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/switch","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.482ff9091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"743cfe23266cf3e5d975382730d439492cc09e13","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.482ff9091.0.tgz","fileCount":38,"integrity":"sha512-aHAFnZf7CjvK431SrzBsCUXzzZwBm/uy5WTy7zlV6ZRzuqSMfDygIuPDPV8dHYErGvUpnmjLgVXxxSPNBe/w8Q==","signatures":[{"sig":"MEUCIBPmy2alE7oeCDj7I8UIb1VlotZjKKMc2PAspUXKNOp5AiEAvmh6DseBnoUufp0+HOVQq3UL09UbH7hbdqnKyIeNHBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA84CRA9TVsSAnZWagAARkkP/0syYi5i2lV6WMqSk/gm\ndOHnuHDM45wzznKssv4aPOcC22HMitmEHZjtrozglWOBhtsyJ3ITjyD6G8AI\nwQel6DKyrmkbMLETb64/iR5Fave2FK2O/Chti1l7HnV3T5J3FPrH3KHa/E9l\nqW5OPSJRnTnFkuiS3AfUSkULb/LBCkomj1UW741mBjDqu2Y9VNppBcmrBiwS\nS8ve4oZCHZheaa4q6NovY/Gammx/lOALw9Lat7A6CJbvvno0Q73wVOqyiw7F\nbcAP0t45arrpr/iORwrKnAXY2fVqw9C+3DP5VktbTRVIQav1+YCD++/O2G24\njPITm5KLBsVKIpCTsgfFSEOfIPnBatdSxmdu2ACqWDGox8YzDe76f3o4oEdk\nJakuAQg+TJIKkHg96V1PPnRjfxk4yg2Waiq+edN0tCwv3fTTqvjEnCWjFNh0\n2kKbHo8ImpflutyWBR0/3GdCllKsAIM2htuwTmTG0Z6l9YLTWkLNFkoZhRiW\nQai4zNPfwh/q8OXFqQpNYKP7mbh9yec62dkamDmrCUuXlAfqxmRSjLBG7LLp\n9freTDtq5unXyBlA+TAxnCdHDmuUafvJWM8+Q9VGKVv/phSgG4Ta8+t9c75L\nwdFbE1GILxRo4kNcnFqyHfrhpp8Kb5pA56Kt28yU8Q//gePG3+X99zXOYzy5\ndEhn\r\n=coj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.482ff9091.0","@material/rtl":"9.0.0-canary.482ff9091.0","@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/density":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/elevation":"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/switch_9.0.0-canary.482ff9091.0_1605635896394_0.17752545119976526","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/switch","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"428467192c3c4e0820325bc2a1f8555cacfa3bd1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":38,"integrity":"sha512-TkiFYm04lyAZ5nbeFcEOkAOxrPjYwEhsG+MpnKqbINAeph4cIY/PLNWJA5yq0e0vx5kkplLL2sg8o0Zrk+k+Xw==","signatures":[{"sig":"MEQCIFEe9nqWBGdhX6P317mYws1YOOPtQqHQrwKpvKO6EdOpAiAewSr6sfJXlriTZRaSDuk/NWC9lZM1fSgHQz/H4tVBhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWt2CRA9TVsSAnZWagAAagMP+waK3vaJo+n77/5bPGkO\nhdQULCtD95sHxRCNPb2/YI1QSKkBNbjDZpAaTtqFxg8ZK2X8dyKjx8gK3747\nwnSwnkYA3xVSGT+OH1entKVgXyynDv9H8dCbdFrVB9KRmM8Ug/H5pfCbCAeR\nRpMp5XbCOCs+gB6UyqORUkWA5qajW2bBQszOR3itoZO604kyc23nzjYfAJD6\n5mf9Rqb6//ggS79IeSj1Crbs6XEWyKbRzNZosDj/3+dNZVKEc/Yn5sqs+kP0\newjCN/6E6gQrcjC3lkDH80egp/w9fZeoZzoU/2EtKZq8OasIdnhx5eIDLKzC\ndP6cyE9khumeLaxezyfn6GVYfZlYafhb7YdSy5bMJMJd0cTfeo45+ZkaYJV7\ndIMslazo/wIAtES7Gcrr8OMbmLIxgUgE94wjDQ76eRRch0NJ/4GMU6QxSRsc\n6anlvUlx68gkkoyTeqXkJ+ymmgyxKgtRiFblsEQuvjvpYLAaxj4q4hdtukud\nFUM+669Kv6XRk+06aB6rw/BxhBAZOBzN5Qaebdxi0Qt19yMD5u5bcAWagGIw\nWJXbTb6nq62vHY9vWmkIrmJfEz8zQXPpCjUNMnKzHUVpr+DB0OrkfY1Ee2IM\nNkpypc5zcf0jC3CAC3+7MGaf5bGMKdbpV9cUgcex4o2oEt7tbvF+elxfGzMt\nBpZB\r\n=K0sK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@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/density":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"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/switch_9.0.0-canary.99cfb6bd5.0_1605725045791_0.9816532843205383","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/switch","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b53bfeb4fb57ad13d66d36a4e6267a62444c83e2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.b98d15d90.0.tgz","fileCount":38,"integrity":"sha512-4+IlftCpLwP2r0wwVgWTZ7xf4735AqzX4pnC84gZz4eqcInL6PKefcTA4h2e93VAhoi+3x6R/yDglSFIbLTWLA==","signatures":[{"sig":"MEUCIAZ5yGg8OXXGQxUyVBwvaOqogmXMKd+1BYO2c6FArakxAiEAzR9VzVrAd3AlFEVC6214scDF0BnHFhbtD6/Gk/GXcpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGVCRA9TVsSAnZWagAA/TcQAIc0r5qL9LCNEB87TsFJ\nSsrMgADYALI3agcIlNdiBXsCh3iQGPzE8vMoBTG8Pnqd5aSzE8CbL7xjt651\nWZUE3o7YSEvGSg4WXBrRGDQ480cBQmaICOLJGHvyifxvg0Ak5GOI6tHnrn1x\nLvauWBYtrs5Ag3wTqdJ0KmR16lVGhjtbW3taKK9CEq1SI9bRX3GdxLwUdCWb\n+/axAfkT+LBNqCIuE7dKaXB9UG0BBNp872N6Uj86lLfqJ+G/Akt6xVQ0H9GW\n8EWd47QXTltmoXLIne+p5u6Zdxoki8JeuGVASF9rfNR+jSsP85RVYR1JrLoN\nbcW9CzN0a0kbXw2rgj7SY4rE4Vy2mcxDO5h8g31cwKMPVbRMJRrZ0RdK2Em0\nj+vTJqHLHC3lZsVo+355ZKq4XG5iQKGE8puNkDg2buAPzREQW2Tis+D3mkPt\n+4Pu4cRKDPrV32dLFOkFgtSL2Kji+392etH+bkIvvEoibqu/Vjb9afL/OoQk\ncIc9N5SnMPpx6jZtVXZb+kFSpPnkxDtBMtVn29sHqqHBPyw7xgCX2cnGXh3o\nWHVInb5/+xYE+aO4aikz6ct8qWHt89QDocgGoxZvN3kld4r32Zu+TtabsFEt\ndz1aioHWWKvQi19f26QepHdO6BB2Yr/Q2XMJD9gp+oz0o3NQyUTnvCiSw63m\nc6Vy\r\n=3EdI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b98d15d90.0","@material/rtl":"9.0.0-canary.b98d15d90.0","@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/density":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/elevation":"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/switch_9.0.0-canary.b98d15d90.0_1605738901185_0.461032593197197","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/switch","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02f91f0bbbe3870deb264f64492f063cd75d1c61","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.30c11bfc2.0.tgz","fileCount":38,"integrity":"sha512-iGw1cdMouOoL6TIRmtJfKkeevbYktSsOZhB6rMpKcqrmOWBmpdW/iKgPujP77BKORn3sPNuqesZFfSqc2gqPqg==","signatures":[{"sig":"MEUCIEvFq1kKExz8E7tABtUFR9Hib/q5UDP7dPxkHH5yLGS1AiEAvBp3rP0YY2muN1FQp/5iAo0IXypRKKFok2XDjMy+YCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmyCRA9TVsSAnZWagAAjJ4P/jPhot69L40FSSi+c+FU\nWsQgzr8rhCuFThPvIx7+GMFvYHogdKvoXMSf7ya+ofKObNeAsp6KOG4TMb6V\ngzRNc+CUHt8rGG6+SsoOiaHHYmXPRmgp7EoJoOQwirdK0RGG3jBGuJlf6WVZ\nufH3XtsFz/SrPlKF/HFOoo6AupnoyOT+uJmqIGfiCb0JfOF12AmFXbHVonH7\nJf05yo+78H/gcs2+YC6pvB1glrX592hna1XomOFeJ8QDXNVrdez9K1CAXFtM\nG0VUGVJDiO/xkZiiLFx1wtwOJcRThW1K4H5vt0NHHFaRqjZAzh2fIuf/HvfN\natH5G04/e22XAf3zgFRHvPuzIVj2e+/z/90w9NxPMuWDyh+kJtSPN+HydAoF\nzRGPSH70M+/EUdY9kAbwOyzwtmgKgPkXR6WWynE4J0FkztdRPzGj3YtXxXRH\nLNpXANvjW4Vn0Cb1VaA10iEcqPyEOHskUROoTIBOSyVWElQz3CTyy4Q9/2QO\n5xH4qYnpxs3fV9Mie4FFMVLaiEKKS2Ur/gn+kjmI1yoyaBIS11OWBI+1Pxt8\nEa5ApRQI8tRqT/E1y9e3vWCTvwKRKrtfTtM0wUe0LS60B1osh83hb784HSgY\nsiUWKorctD0932kqTTdtXjY7bQcy/3zAN3f8d2BD9eMR7WQKkJuudegKEK60\nPDbQ\r\n=c7dj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30c11bfc2.0","@material/rtl":"9.0.0-canary.30c11bfc2.0","@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/density":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/elevation":"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/switch_9.0.0-canary.30c11bfc2.0_1605749170507_0.351568247840341","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/switch","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7c01faccd18a69cf81a823b353f14a9893ad423","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.1b731d51b.0.tgz","fileCount":38,"integrity":"sha512-0gbUHYG6OULawDjZzcZhBf4PIvqJBC84ON0vxycGM/Qdj14hr6fbBGcV0qJniDGcSl0x9Qj8s5IDTfcXkf63fQ==","signatures":[{"sig":"MEUCIQCrJholg36CyNDqMfpqqGEIyQjeThox0mK9IcLZ3Idq2wIgEjBlXWTpTewK3t7UUXYO4EJBSZ9jwzxMFV2KM8clH7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr71CRA9TVsSAnZWagAAHUQQAJBNStZU/5Y63e5+UKj3\nYAMm/YHERLn/soubSH4wQTCNn19apbcp3YG+pcVS5k9rIYxuxeOApY9mRlh6\nrv6+TZCgXqzM8iLpii87zVv6588uZrMiRCHwv0bKL4TxgIZ4pshYmgv+aRir\n8YCuB2j97HBiTdq3KwfQfoyO7W/TV4T4QU4BlKuHQ+6IUbTOwOAb7zcn63+g\nMQ/TOeFompuA8n2c1nOcwvtgYUVkSxa1qpkjkx/UFO/4dIFnqBoTqjAFX8hW\nRGAwCI2HikQ0R7MazmOxgoEpxPLNANZAtkas0x3qALjmbZZRqnkMItc3CHMM\nL104yf/FaasbJgCk8JKtYYP9Z9hBT3tCnajCIw56Di4PjzdYqqTSX0cMhT4y\n4r9dMzd79Qz0kjZDhKweAhAglSEGN3KGsyaXQRRYMmf7jIQvS+zbPhYMTTRR\nALrgQh2dPBvtkZ4i90CZgRN6zHfzHcnpcHgiB/67SUXH+BV7dpdUkYhcPu5N\niIbBbn8AALVCNFMu6JNIAu26SZakD0+51T/YJJbMyjcLmnyCMqCV6Be378Rl\nR7PMoKTBoSnywKHQk5JWyxlFP9MiYeFkMrRo9kkpLXGJCKV/wS5DiYghWpV1\nEB9CjgN+7VpAz64C6MlG/7MBThfK1D8SmPGP0aMBbTBcNExIRLVmXn2amUDb\nY0dp\r\n=Fjsg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1b731d51b.0","@material/rtl":"9.0.0-canary.1b731d51b.0","@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/density":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/elevation":"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/switch_9.0.0-canary.1b731d51b.0_1605811956546_0.35694303943970196","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/switch","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27243160006bae349d192ffbfca631375f054b30","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.4ae94ff78.0.tgz","fileCount":38,"integrity":"sha512-W3JiZtunjoY+40qmfLAtkDJ7yd588VSDgRlRvHa59S3njNf/4oM66acRJ5t6d7OMsInRFOxDjI+0A+T5uwRFSQ==","signatures":[{"sig":"MEYCIQDAwTpMX+7TfdGPlifRVZnupwYYH4Sjgmi4stY1kTOLogIhAPA1bX4nKJV0AtVpkWUxPdzMZVFDma4uqbFAo1K+NrXY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+eCRA9TVsSAnZWagAA2OkP/jhDuYVsE00EPuc26SVL\nlR+GCHyPzhTb3oAoYZyhyUt9JghCeJdLcRsxxJxM+gTPsNlyiRPq0TvNZCUB\n2e2vF5HQKctphfwTE6KWW5BATCongKyB1aL5/3FaWP8Sh4oKB6nq/nwEeZ4/\nwFGAJ6a5mWQGZ+AAgNH3qQqs8NmoTfE25wz53XD7U2WjGPltrNZsnKpbR4gF\nExcBhYK4ftpOG20nPKNMuLf2VRTvLQVRkNV+VZ4t6+WQNpODinR3O+0TYq10\n0eqhzvyaBuDSVjdphdZkpoCl0IuA/UFa8ogzw4gvTHW6C6cliDOumH2odrk5\n/wy8FndZGYoF66zUYLLo3EU9e9757R7mHEGL/Jqb0tx5Y0P8Jz4ARgyo9ceN\n8MF44uWxa18+7cV9as318IT3kBG3ptxEfGOyYuolXBh2ugIL6xT/fsKBapk5\naA4PNkrBcpXYBgTMKxukq5JkWO6TgF8h0D5Yae/4apa1rTQqhTsW0pZAqcw5\ng9HPBLFqtENK1TFGbodW6tkvP2Q2fB+OTbTPCchtq6gRhXa+DaBvRm5gGOMq\nI2xrpKcNp9Ows3caaXjnON0u3Py8RmjF9fcnaHBhIblzpaQsx+f3S+ugpwGf\nwbQ4Gf4BFBuYhEHsXmgLOf3EilR0GFy3QPCvhJM9TxFyeWv2sKEJQf43tOWT\nzjWT\r\n=3vIq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ae94ff78.0","@material/rtl":"9.0.0-canary.4ae94ff78.0","@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/density":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/elevation":"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/switch_9.0.0-canary.4ae94ff78.0_1605812126472_0.8247992074694694","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/switch","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce06877f0bceb9df0dda59ec332887117f20f633","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.7ad038e1d.0.tgz","fileCount":38,"integrity":"sha512-DKiD/bx2jlmQo8wihhLO2tt5Qys7zkHW/BP4WQfrX38L/TNm31qZPMUzsGNx82tQZOYWdjC/jM2gPtA1HeqLhQ==","signatures":[{"sig":"MEQCIBdiL4JvTBzVivT0B9TLu05G7hxkkY/+W8mH0xIk7k2nAiAjqKFbjf35NHpLvdkCBjCsvWop/Dzg9MN1klfYxjSWnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsULCRA9TVsSAnZWagAA+X0P/0W60LPjd0TVjjxqa38l\nNNk23NBH5ZyD0gZkXpET4BsJk3l2ekgOaOStX/MP8QTTFO3LoTEwpNXCNjeH\n4HfMS5ogtQeU7mOIOw7r2rBkl57Ck4z7cgTBH+M2SUR2/HvzwtDH3gKxZIW8\nsaPoILI1ePwYZLJyHT6oZ5VQc9Wt9ARJnxJ8pUW/rVY4+wkftWG3esUeXfZq\nYittANeGxcAr9bI9dqJyBnaPg+/n16nFr4p28i7Jpf/VNK3vwl4uzsaUghM/\n3+b3jiKiiHY05GbRSiQkpNYTO2RM+kbfXsNItqmjOjlp90Uzp02iX8+35Gr3\napHGzjurIW0W0SSXQyyFa1OTo06vJvvcZpFE4PClWz3VGimJlHiKEgTR19Ru\nljDJheh6TOKF0HrLwxx9hhT2pMT+AzAwlosc0uZe3fsnutWzYEtELqbYY84e\nq0F9JGnF/LHdwCdjUxdzxfCRZuOr7YwsdeQYxvTsUjB98UBxrDzFFOcJ/6Wz\nUyLwA/sUIVYGU+dQmC7jXZ7TNIiArginvQUZ+DgH4ql/xQGjCvmUsSNdspxO\nTzhYmc6VCX/JwnvQxEkGlsm6ZCydSeINV6cdeVP0aMKVTxat6VIK+TnE8EMm\ndpMPoLj0vWC5MJDg3ntnGk8/yD6ZKHow3uFu0WiL+tKw4tPTe1a2wbK0v54L\n8TYm\r\n=YtOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7ad038e1d.0","@material/rtl":"9.0.0-canary.7ad038e1d.0","@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/density":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/elevation":"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/switch_9.0.0-canary.7ad038e1d.0_1605813515018_0.5918228668038743","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/switch","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.a41527604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb3b247b69aa3141aada1967aeb887a985ed30fb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.a41527604.0.tgz","fileCount":38,"integrity":"sha512-Udb1szgvPxA5JmRNeWs6LtO+SlUGeO9z4svR63zyqR2hbRS+wYlL5LC1Q6iTAt5DATft2zmF5Hp0O19LK7H5qA==","signatures":[{"sig":"MEUCIQCM9UIa+lskCjgRuJeAFfJeMS2CYIqc/VUPJYYSP1TUDQIgXdBu4Idu4clrvVZNy1O4WMjcDEqEZ4/eVY2HPEfZBWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7WCRA9TVsSAnZWagAAelkP+gNuqa+ZvpDhjIftXAWP\nzZIm+DJgd+D3f8c7jXJTpTxfkcGDyTIPAX3wadQmTQWAO+YH2uHC/TS4KOsI\nTf4qCyk2FcsRykdlmcNTtcmL+kiFBeFhcz7DVQLVQTNhJ+q0nFSMDPAHJ1zJ\n58sngHdf5RiExE8g4HegwnCZTI6+09PEG9Sesg0TffsmzHLcl+rbslT23Ruy\nepKhqEAzbfCbURZo1nVNWCC53wvxV59KVIjR4xHPG+ggJTld4Ob5U9Mh4S+b\nzt62vVSzYWHaHbqlGXaJE2e2qGWeR9OJA4GvL6XhEUq3Bk/z5GwoNVQlSCTr\nQTB/7jot8T0W2dRJAZBeDBk0QRhNIxcvgz/z3udxb3eo62/HotbNy/5jDMQ4\nzGuWBvcPj+zoa49ztGyxtqn1PHz1MDTxYwLCV1dbKcKpV2YkUEl1+5rwKkmO\nDeVKalXnrTzyonx7ICrOarENi2wtGTXw08gSLDHv1gUdQ5r/KKlAis15XLHS\nYd+hrCD9OzOkEHYxQQS1P9kp9Ls/ezGE9w8NN8YH0aTlT94LFrp0COYNCHt0\nb94s4O4dE8tI7haK6ViDHNadnlrXg9SqDSwUwuHt/4sDCk9cPCaCWpIdn0V5\nWMh4D0oo6Gu8TkczudrBA2LgbDKFMwB1RmNTccLCVouQymgdNcA73ZSIFnya\n3Bhp\r\n=kYQU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a41527604.0","@material/rtl":"9.0.0-canary.a41527604.0","@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/density":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/elevation":"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/switch_9.0.0-canary.a41527604.0_1605816021959_0.7118528377755877","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/switch","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04659b96c90b222dcf4186b90936d07acc195f9e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.7b0e2b377.0.tgz","fileCount":38,"integrity":"sha512-rW5f6hjktxmOLfs9hbuQG/fpDg+fZrkDfd42/ZLDd1TshegNN1c5rnBMzNO4yfUAYCNoyLAzgVGw9TmL52t+Lw==","signatures":[{"sig":"MEQCIB+E9fXnoue48E7RmW1aJ/mD4m+TraGV8+UiVoG4A1nqAiBRAf3joOVIXsIOUufhbJlBzFQkwi2yQi4/Yixpomlfug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEl7CRA9TVsSAnZWagAAEHAP/2mL7Y1xb570SdnIlhbR\ncRkjcQM7VO73Q7P6Z11FhK0sf2o7vI4D+pAkhXI0Xi7od60NPD3PZV9rqmK/\nMLlTcneGHbvPCADkwueOkCq+ZaxiIpPlxwRlUExO9j3/FV3Oulh48GNhf7h7\nSBZth4nESpTllNRp/KZOIwpBeVA/kbokHjr/pgSvrhiP0pndzTk+BDadslUt\nIbkCJ9HKL4CuZjZFGPQbvA7/tXpkyrJMSXr0KrNMbhDQaLXFsGPAz5QWERFY\nNwdYSK0Hl4YJHvW/zzqM+RYAjiKZqxFuB7wBSobP2tXy/BM7J0TNKjsd/iAB\nEelCYaqcSm1heHCoNnIlB8MilTIUmGSWpuOD3f9MubtC/0ZrEdBg+6V2iIZb\nNOQWONq4vf+euFNrL8qF7HQLxKjblB8w7s7fEiCDorBvxyd4wCnlcyPbIHIq\nCuF8cJdzodIcw6S91R5wpwu8CiriY7DUav2bffqL21mF9hNRcDKnZsGxPjOs\nIPyFJRogxI3tp3BQfNF+jYdV2oDpxKoJSLXHT1Vd1HL2YtY66v6wSVH3G00d\nU78iNPn5E9I70N+A8Fn752fAHEfU12nO3EXz4XzO4iiVxqZXfr3S49l/ovap\n0SBS7H62J+2TPYq7xW9oqgyLob3WKnRz5oX35z7Ks97JtoyhPkqRby4+toZQ\n/zPT\r\n=odpj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7b0e2b377.0","@material/rtl":"9.0.0-canary.7b0e2b377.0","@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/density":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/elevation":"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/switch_9.0.0-canary.7b0e2b377.0_1605912954574_0.9185542423315629","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/switch","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e3dd85352a326f1eb276f30a95972587b5fed39","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.c927a5d05.0.tgz","fileCount":38,"integrity":"sha512-CzlgwoqItMIKvUxhXy/peDCV8hrZtnsY3DBdhuG2LzwwdT5GMyPU1Q/mFlOdXPZmmnl2B/Uug8pMp3ziZF48sw==","signatures":[{"sig":"MEYCIQDyMScAbdcwUhkBA+yqx7RP9xQSh+0GN6/uRFxHG1qHzQIhANxjcqy96CF2HYhQGcirVDc76JcUi+GI4QlQAV2vxu3z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHaCRA9TVsSAnZWagAA+UMQAIyDwfrYLObTjZIL5DYP\nH7gAft95wIBpEuLyB93ZYfhpp2DlTu65N3jnVVP4lqg9xSc924xiP7num2ts\n/D5POC5KB494CCENpN4Rt5fLydRX6CmEKK4DfIegq2C2m+9X/hxl7nBj0B/y\nOFlg1rwhQjgPIIIA8R4Lfq1TmIcUsuAHl62+gnAdj0LxSivp4m7lM6zare/b\nIuAiKlARcdJGkRFZ5ZCHrahIveUnAaz2xW0erRHmWM3SFOTwymfxZmDYx7Nl\n+ilZFFSrhYT8EFWfgvP0mp0QL5IwCiVRvhN0yii40Ut0AHFOvBczDiRMmevR\nVuONSTjxPFH8w1OIu+4lcpOHtr1fc/Yf4eHl/QDPgA3/xyN2HPh9lCnqSquS\nFuNchbnaehhdz3vyJsXoWAN6ZaMV4qatCAwLess6rJth+TCDg4rJxmSjI3Ww\nJ22CsCxL8bRbBvaiQpQOVZgvh5NNadlfSWsX0JPXr+DMgoJukbElGOX2BnAo\nfqBJl5dWiuqCaAvcSg3esC88UoZiocPhOyfxDBW7yH+46o5cAr8Ff/RVJQvD\nuKTnV4uRa8gyKCXOG1t5oPtyMafLpkhcyaKHCSs2aWJHKoW1gA9V6cxc+bt2\nRRp/ogMs6lG5wjJDyY/Hmu726uMEOY8l7QvAf1WmXyb05hojYM4KBVUyZue/\nMPyK\r\n=BFhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c927a5d05.0","@material/rtl":"9.0.0-canary.c927a5d05.0","@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/density":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/elevation":"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/switch_9.0.0-canary.c927a5d05.0_1606160857968_0.8490433577444054","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/switch","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.b349b5185.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88ab86779a7c2ec0bf393777a51baedad5895b4f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.b349b5185.0.tgz","fileCount":38,"integrity":"sha512-cUx99C+2LGMdAQuR+nNcAUMkuvD41dH5PpuTnoz5Hi1/q1zhcoQvNjRk1TPq8YnUPD+KUFNA2s1Y4fbHRSe2oQ==","signatures":[{"sig":"MEUCIQClpfpLOgSTaGMunBCFAcNh2pox1XhzMsPYsY+V4+uQQQIgEs72jhLwodT0zua/YCfeqBTfhbt57m89cY8K7Ypoohc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT4sCRA9TVsSAnZWagAADzgQAJaW2h8744gGk3xy65ar\nc1r35Wk653L9MBNyKr5Axlara3yedYucq9OIPim8GxSKSYtibjoormiP6sjv\nxwg4OHRcQ8V3IfdR1r5cGgxHQqn373y4rFFvIow+1SR3FLgMQfW162MvjPr6\n8juKq2wbD1Skr/VwywX7BsZYPWVYTN8Nm2E+0BK0A201Udpaz95ykmZdslOA\nG8Sef1t26J8J4EyT5vjcnc8hDewbHaNS8qqAq3vlCdvU3kAuLFDl2rUXFTRk\nqgQW/uOkx1uDzDq9fGm9I8FLDDhi6MTVwZufpE6gEriVEud/1uGvULNJF6Em\nhYdY7hbjZaYECpHO2VzptqdKL34JcfRdOBr6ZgW/PeBCSGaQtGN6IuVr04lc\nt9932xs1HwsdHOcOTs9J64mHnBjoReXAxHjhFPt2TciJaBZjiaJMfL2NKR4z\nyVJgMEKREeIRjrKOE1MA/PCpqrXQ4yGG/DYq/jRBQ4aWMBo3L48AeusQD6Ky\nFc37OVCt2KU6QIkhZZtFeYPkoyTFVLnMQvJM3j9ZKOuLMrDbDtwWLdpdYm14\nQ0sQ+95m9zlupTMK+1b3D3oCZesZC7lv5O+kBihnOQTOOj7y44/qu4nV+PRZ\n6FK2wBegBB3Poq0muLSmWkDwHGAFavh8SMVZBQFvZuZtJEX3H6xGEcyEw9Jn\nF0BB\r\n=ccIe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b349b5185.0","@material/rtl":"9.0.0-canary.b349b5185.0","@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/density":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/elevation":"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/switch_9.0.0-canary.b349b5185.0_1606237739733_0.28136692905811334","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/switch","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3befb643e31b992fe44982fc3ab6d9d3da22f14c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.9083b7d61.0.tgz","fileCount":38,"integrity":"sha512-G6L7njZxYMIgvN9XGMSWWB4eF6Jn/zigFqAh/vBa3CIEk0zO5BlIoNvGK65kyBoiHpmv8RSeU2KywqtMktMR6g==","signatures":[{"sig":"MEUCIDzz4jqiOTKRvziuQ5anFgMM6SmM4i84Bfh4uFG7H8B0AiEA3mhFJ8WUfKwn5Bq9HrIJFPMVLqCyK/QE2Nhr99WSDzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXgBCRA9TVsSAnZWagAApOsP/1jkA1edX9nnwxd1JTHE\n+HRDu9qavMA/01sKMzKEJTRtlb6skR4ad5VK93hapIkKO19f57aBDi6Kq+Qo\nR871erD8e63/HBOe1TBcc7Sc50ZToSzMy4vTEbrlCU8LjusgTh51aDDvcVnp\noMs5NG5xJx01THAxDxfmwO6eD6v2+JsbZCotR21lu5KMWrQw4vpSS0FHMgnO\nzCqVNT4R7xhyIQjI1UJ+8bLqkRFmLodGdWowTbAXSgxncaczriBUe1gX2+c/\nLleOrJsJiNWusCgQbkjdlDuEJ8pwIvvzUr+wK6jmXSGsHysRqwsgs+CAzAuQ\nc7lEVTT0xYLNF2yr2xoNTofQRGIwxKSzW+VINzPCUG1ABuB3VBMKkEFn2W0I\nZVaRSn7rrq/h6p/mSCX6mXlIqiJwJmnWk4LJRZC5sXhb49+g3yh/+hxKH9s0\nLF5QnBtKlAmRC35HLg1MOBDTis/CzQGtD0mz7AVRnj3yc3BbUArARrjjNmNM\nuMQu+WaecQPtwVGX/nTiyQWpmIP6if/R+V2fqKRacmvJzDKWYIwEla4Skqwz\nDCn4bDGENyG/KeWCpRV4OQU3Nb6CwZR+ZcuZmYvQ7UJvm9cQDju1aw6DOB+Q\n+I40kZhzIm7J3fXc/Y9O14N/DXJ8yLsst58CcjXhugdjU4UuUpkdMHaewUzF\ntxq8\r\n=LTwT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9083b7d61.0","@material/rtl":"9.0.0-canary.9083b7d61.0","@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/density":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/elevation":"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/switch_9.0.0-canary.9083b7d61.0_1606252545025_0.88648017022451","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/switch","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a5799108084af44fcb8afa373c0a94c5698d3b9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.eff7b46ac.0.tgz","fileCount":38,"integrity":"sha512-o1hoyL2S09nEP5LKrsO8ULOEWenk1c11NVHiaikHdX0Co2U1LJHMDFxZdW5mpJLX8Ty99SEHc1VkxHWP+p9qpA==","signatures":[{"sig":"MEUCIH8kX33IC2UvpBdebTPeRcPybvSEiGpzL01PJn6gXNfoAiEA/zFFfmyCeCGO7pwLlfAue+O1kjjFVJn378TMSn5AKyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZe/CRA9TVsSAnZWagAAiDIQAJBOwADpjHjAtnoSJDyz\nDohEwKTn98yvLap9/E3Up4Vgaw+zLe2uvTvz+ioaWygu7ZQGbFHZOyR2wkN6\nZ8+WERFQ9Sg5HXOSSetkWjRvHDDID3ks+O40hQmiwcBEqyeH6aY7UVaU3OT5\nCD9moqlsk8VGKMZV6S6AqcW+lyoynVcnhthprhRTSu8fPCy5Np413xfvysod\n7MEfaXp23RsYMnV8qO71g/YIhTH5u3WsM+rqlHbJ2IiDu2FyqEPlol3sCc+z\nX4ba4augyIXNb0DVNw0mVlLOIC2Lhd3Wdsoxvyl4ZjHoxB+3i5zLdXGp4avS\nS/7WzUFd3ADe6MOKVM+E5aq4USjlb4npi0ZMeLU3VtYvi3Tkx6Fcmym1wlKo\n4Pgl3l8WRQkRL4O/iEUvmiLWC7fB+ptX/ptMCJUgNM7Y6ZndLvsq1JbL2Eyz\nyMG7npDgjx4EIXBeRdvsPu7CB0uohI7Ah+dcIddIyvcRvBtl3aLOTitbGESv\n4Pm2zUzywLwbsCW3CABf6IhtPpae4o4Q0MOvnUySsrh5afB6Wl2lc5e0bFBR\n0pC0flXEZzB7dvCFhss23KTPPMoanMaCBTalXkjqCeL65ayYeCcyAo2gBP7W\nw6AL0NhmxxZ+Humtq23byjMg1nEOCA3LkuZO+Ounv2wtYpvzAAdGmCZLgV/+\nmE7V\r\n=75vG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eff7b46ac.0","@material/rtl":"9.0.0-canary.eff7b46ac.0","@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/density":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/elevation":"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/switch_9.0.0-canary.eff7b46ac.0_1606260671164_0.8164933095535787","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/switch","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e118640d45699eb80f4da8bcd1885b7afc80248","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.ae27b44b0.0.tgz","fileCount":38,"integrity":"sha512-R9YzIMCkdkBeTI2TKWsLkd4TN+Yp5aiLjmOzAdtA2z6l7hqLNLeHjkNbVwQQB+S28t58uBrei9VRn/w8YAazTg==","signatures":[{"sig":"MEQCIDUnnFNPlFLz/i9bzeuLCRoExenHPYyHNd35BfdFrAmrAiAOLsnhquzinSamzzZ0N48MV3d19QelMA2YKw3HZuHCRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnkxCRA9TVsSAnZWagAAwjQQAJsnwP9JRsStzLLR0wDP\nNNuQPWXYI3qLOaBLdcf7g+m+WPgRQB2igUWj6mbofG1uXc/nple5jdQVXDIj\nudo0j0ywkSYSFg97bTy9h+dbbgaLQk5Shz9ovexl3N5jieN4HBDK8t24Ml4+\nL0KoxHz/Mb08eK8Qq5XEAPdLMxj5G5LyjGa9HeXgvM7oH/1vtlPFuzcpbVXd\nLg8ZaJ0YP0INuT6mlSf1QNHgx9wotWwEoIdGjwRmGpTeuVUEygPImSDrhIhI\nq7il6ZQjRDX5drgOmzun4lDl0EsQ0fLH7Q5fypJJ0JAhVAsIEZ1SmovQpc97\nCz6gdqemgzohEv5gKOuuR1NT8Q23OepDKYo6xgKIMKla2hWARxclISegEnxv\n2H60koAaOotxds31dRcVmmtqrkQDdnCBk0pfH2d6TU4ajPzxRrUynD1Ry9sn\nVz+zzKAiXRzD0P9IcgIgvHOU8qwtMRJUZ4WhBK0YMVJceeCZRYS9REQZpoPY\n0iTZvQCf5f7brD0BweQSIxKPJIMv24mmozryW3dhB5ibOY1dpsg/OlZXBBAb\nphwzahYb6bdoSpViHrMfb/Hr13zN7BkL1EZUMp2NrKi2ymkqJOTkvNOFix8H\nDXBTW5busViYDhyovCimlEUU+QBkAHjUbrXFnFnEb7PxSdzcjyo2fJnQdCmQ\nyD23\r\n=E8Xv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ae27b44b0.0","@material/rtl":"9.0.0-canary.ae27b44b0.0","@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/density":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/elevation":"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/switch_9.0.0-canary.ae27b44b0.0_1606318385312_0.6605696969588042","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/switch","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef1d575ac271525fb398c961a6b87c17e9a7d85e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.2fbba2554.0.tgz","fileCount":38,"integrity":"sha512-mWIXM3N/sYLO3MRtiq8MZH2mIAMN6xY/5YAV1KOMlbxk0miiOeTG+DASmn/hhcUpOc/lzzE/EYf0N1YfjRvh7A==","signatures":[{"sig":"MEQCIEFoPDOHyyB7EjkDwEjifMMyJ6blmmGsKjckDnEE9R/3AiBG1BjouSWXeWhCYqG8UglhnrvbnkO4WB+DheKIDOQTsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6NCRA9TVsSAnZWagAA8W0P/iuZUCJYB3sfplLmTGq2\nbWspyRN8nM45nKTG0VhZNa5v2PGjMt27SCVBBt5RIg06Fm6B3BSBDrA5sfP8\nnWU3uo5UAlazwL1sfA1yNgabPeaFu1Hmeshxgw7H+zEcnCTujW2ylL3bvvSL\nMG0BUIZiq/vqax2AJao7+Xo2PQeWzm0YZzZdLWFzaiQj/v10NgYL1C91vet+\nhMS4R9K/Lux000D34ofHZvUJroSEl28yU+7vGRq/At+jhoBn0Ki7fzTWLiqt\ntOcOe5oB9dvFaE26RA3vkJWF6ZfagM+Nwy8qzbbn0PybTAExq5Ck3Pf5zMqA\nHOXtEoUjoPcSSPvq+m4ZQ2Z30y6lZ6yQVT5VGiDeEvGxiJr5+Xsj2TmmZR35\n9rgZ4a3DVi5clrwmp4u7txwn0/I8CPDtvtjmewb5jCVZj8rNCv87QH4oKFDn\nSvn6OuFC3Pc9swr1dChzBAQlmfNH/8vM7jFdFwG+eHg7yGJyoxGL5KAMJnE0\nVrTiH1NyDsWGZoM6LGnMPZfCATyV4pWO8czgUDDU+FJ38Fkq0B2FaR2Qbzxy\nptIwecqjz1lOHp7iKvNDhXwNSP0xM+HhAUpB7+52Yo8qk/SR92+XVkBhpFSE\n4LYRkXXlRjMMGDKoQZT7SHvkSSNB8UbHYpe1kzwcIuyIcjMFDRJBoglMnmnU\nO+uW\r\n=6Y8l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2fbba2554.0","@material/rtl":"9.0.0-canary.2fbba2554.0","@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/density":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/elevation":"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/switch_9.0.0-canary.2fbba2554.0_1606758029341_0.46643920237866254","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/switch","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10cd8ff4ae3e8ebd22e3204b81a1aba5e33b1491","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.6d8574fe1.0.tgz","fileCount":38,"integrity":"sha512-6aue5k4pZYaMjVb4FhsaIqaFZPSgKIce1zro+90nsvmEZRrfNg8nTfkarhB3vmmKYvckgpBEtanscHn1NqGAlw==","signatures":[{"sig":"MEUCIBS4a8/0EP2H7UlQKQaph0IVQsXCHeSeB/BIYPld7B0jAiEAm656obY+kET25BTCZ6fIA7XnS6zrB3GSj4CpL66qV1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTEjCRA9TVsSAnZWagAAjRkP/ib6ezKow3C5zY6Bwg3A\nI7v68eaCRFZl5qp/0YXCEyBMwSwvEHxKObmTUg9sqYPDp7GscahMfjExQCIl\nJNuFK2fGJjTOPKoBKDpaSx/Nhu8KrxHqJCiQjWqPii33Otok+DJcP3LYtKHq\nW/PfJnAbc7DRXNMKTYvPAem0vkY/MYGrM+UTXQZAJ6F3KSckbjRrLuirr4DX\nEqTNQHBfezNUAnT6DIElH2EjcFHDy99m+FW2Z3ylAApOb5pmI5ZAMTc07nzx\ncbn5sfLY0dtwdAxC8E9fEqpXHmLLLiMaGgOC0SN+duY3ZwI3tzrzTcHYKWeX\nmXXA1k1fOYoD3/FsaHJT3dqGqlaqC7/yLH8EJFP0voyhiI+/V263Udj/eRg6\n3zGD3KfE9p1AbdtQTpxhHpoi3u7sByRn2caOSK9OMBxj2crCpLLEoWG7FJ9c\n84x0qJviH3pidLkbE7iyLOIBBoXAGdbN7G5GsiEW6/mpOQuJWy+fmh4GzF2o\np+G7E0qGtFwnyK7ZeDMopZ5ZiGaZEWIK1F60rEouAA3GrmyOZmVfJib1axiS\nf5j1wZvD/87kjHaIT/Oo4l/YE1e3znNBMk1Hz6O5g7l0Ds2HH5bxR1tlf0if\n0r+u/6XIYj1gX/TgMcJxOSgf+PG2OH538sXI2WybvwZyAlG/ODlkoWme02Vx\nqDZN\r\n=fL8W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6d8574fe1.0","@material/rtl":"9.0.0-canary.6d8574fe1.0","@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/density":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/elevation":"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/switch_9.0.0-canary.6d8574fe1.0_1606758690761_0.9135655475575317","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/switch","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac390d067e930580bef4849304b395e63c456d6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.fd22355f7.0.tgz","fileCount":38,"integrity":"sha512-bAfqhWe0KySs+T1+Es1KcZntLDAECqTo/tOVpCgogN4K2eVdC+BbxH69+yVFozQdTyToWrOV0NSyuDRrwdKj9Q==","signatures":[{"sig":"MEYCIQDgLQJLQH4flHo3g4HqxjDjERVkk9Y/QGIH/lQiQ5NlJwIhAJKIT4178Mr3YYaRHdhg/Ie3wRlaz/gIozZsGE6p0Fuo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXldCRA9TVsSAnZWagAAIsIP/0bfFanwh4hNYpbSfLp5\nfE3lidjcgNNa4+p8x88jZWZ90Qk/NqjBA9e5lIwE8SUoNe3xg300zZB57hSF\nUIaO+CdRxXyaqMdr4vmbhmYStuJP7WRJjcc4kkBEeZlHaAU7iNnMJC5Htn6L\nmuVYqXiQrd4gT8k8v/EIZ+RpBbSDI+WZGYjK7BMzvqIbZJYALFjoa6NfaYbz\nDXkkMpmBN5SYbZJZ0yfNQHAU2XwsHKxNizVGP6VRyla3h5E5938P7bfbyeCB\n1AgcpOFKMD+SV0C9ht3OcZUQuGB3vhcezKK2cCsG3jKcJLpSV5n/BAx+Fu8w\nbgOaZviMX02zbRNOfjF6Cq2BNz7kn/A/cM6fBUaCBmkgUVGg6GLY3ugGBm6u\n/uJhai6U8u0LMAxRvXiqwD9AjnU+oefSpGAWKoCkEPLPXtnNDBf/EdJnD2zz\nQx4ZgvYQvHJ2SBbL9UJHnpviezGDH2VvvEUAD8IlR5Hdzfkzr36C9VehCFrL\nazrZ4Uv9zWjASDvKM+A5gSsxHNV4P5hkengfeXiehu24gaKVCmXqLeW5Of3B\nmDAxq/HN1ItRB8TcKckoo0O3cK5/cG31+rtvIrudyusBCBx8JZavpks7fd4b\nTUB4Izk03cF5hUdxxQouBO4OzjKPU42GjtPPofqAWmEf5zbADLjzjCOjK5rC\nHkOO\r\n=bZyg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd22355f7.0","@material/rtl":"9.0.0-canary.fd22355f7.0","@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/density":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/elevation":"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/switch_9.0.0-canary.fd22355f7.0_1606777181337_0.22357148118362402","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/switch","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54b2ad6ad193ccbcdb5a10c290a136fdaec28ca7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.c4ab98722.0.tgz","fileCount":38,"integrity":"sha512-QcsmEsNwoxS+MqRohq1yvSP8Y395Q4zjqLpaSCbDBAtb4JSi+SJe50urIx68UYjWg0/WOSVi2pJOkWHQFqLvGA==","signatures":[{"sig":"MEUCIGLhsX4Vg1JSPk+w73oAIG/w8Wj8JStFwIFshnoaKS4/AiEAk5McZbEmFLYLHLkGUBrWmMJwKE7/VG9ug6vA2I/HFrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZOCRA9TVsSAnZWagAATD8P/0hDhn3ZhMTsYomuKpj5\nd7nDClAGjQiwIXffCcgSo2ptYzkf9JZtjvi11wnOEtJ/Rp3HDTg5iXupV+ya\nbHlrsBQpH9xMdUSn6n2Z+lHfIElCcIsI4+e7xaoYWSZNKV+dRTZQvMzxrTHr\niwIIEekLzi/iEEV51qyEhZ7cX60jc2heHquHvPfrJau3j8oI0N3JB2Nj1/Kz\nszdR9z0HqQFs6grQkV8gg/c1v/fWjfXlzf4uf9OZvZZpTbo+8wc7CvpnRVRk\nffi9iM5/mGJbCdVAdeNIAt21pqwOguuCZUEn16swLT/BxV6FQA+SGufiNVRv\nhPzClExYM8IPGw34Nnfu21CCQ7T8iM+z/xRTa0ygV9h8GrM4aKn/Q5YEy2b+\nfLGfWzhjIEgBn/QAIEcrPp43wSaBjmlrOjR7FRvtN5yTLCJnKdVgOr3r312G\nwSg7AAFbL7aP260FVa+O11DiOzDdD/fYqB9JLlom5jMLeDWmSzdAPl2ld7qo\nGGj+8xf0VeThJJUQnmAv0+PQyevC3MhIBf8mG8HBo0YRLJaQ1DXIPZ+OtncM\neY7b7pHeqeZ2VmDNSRZu9wKMYphsc+22VfWcL0G6rM/7s3wpN1oPVFZ34gRR\nBKlzRUSZ/Q5FNlw/rhq1HZ9cMZm3Tv0yRgst3ZbBuvV+Ez7X/O4epcoJe+lt\ntoK2\r\n=wAZw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c4ab98722.0","@material/rtl":"9.0.0-canary.c4ab98722.0","@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/density":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/elevation":"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/switch_9.0.0-canary.c4ab98722.0_1606870605811_0.5942825743109224","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/switch","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.977585650.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d3368a8dcef4891bc81bffacf09bccd3e51d0a6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.977585650.0.tgz","fileCount":38,"integrity":"sha512-AxMdcqW2JSH6uYPmPeoFAceLWhn7ptsv/4llBpvdbzqKiqFvfJlfvAaWIsyvWiRik61z/Sn/K2jQLO/DBrOFHA==","signatures":[{"sig":"MEQCIEtUKsz7BpfBH73REwH0Z0deqXm1hxOh+T8wtXoMggS0AiA2liLawv1TZ4aY6sszZ/FjhL4BgkqkIDKl02XURInomw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6fDCRA9TVsSAnZWagAArw8P/iWcmM9Lev/RPCyh1rD+\nJ03X0z2wx9fgHgEfK6W9l/ZhQ6RBliwggGJhwsSFFPeNsuo+gCPy6FtCz530\n0zJW8+XqfmQdk0e62BJTxxz34iKEHIXF7livbzBSwVpssDxPw3LNgZiHK9dT\nTTdXRSk52nzWFDcEEeijsXuy6iCT23QbP9tVaiNtCM/oCgW2UgX6198mSNOw\nS7itgYMsoZ7/yWkU/gAYZucTgV6uxbTfLbCeSHaaAb3wZqeA9lEAN2yrmmUR\nEWwTlupjzodHUCbw3wfna2J4HhksOF7MF+HgjJjsUcrJdVbQxfdYAUkmE9Vv\nwc5KZk+FNjomtk3heqeud4uT9YiUGcS7Wbu1WHUAYCBNiDvQu8CPqDwVqjXH\nZ1bJYEQqb3UnWcLq1QZl/W9EgtmtDxlr6+lIgswyHB/G9E2JCFb4Nrpjk8vd\ns88FXVLzaxL3CGlNLOREEC9g7FP8XVBg5i8xy4Iri7fMkXMtI8BW1x6GJzJv\ntIumyifk1E9FvDqa0N/ncHUcMwu0B1OHHORN0UTZ0TBEVII2jscBTJtiH2f4\nRS1fUWuSPorPkpEfufNdCtQ7xqnCZbRL+6fo2lmW2edb3umv34GumI8iIhgh\nAZ3/433kwLHButQwJTg8xC5f75CPM9BBQN5vPEdEoX7Sa5z1DbamwDtlcCOA\nmQ9e\r\n=Hzlo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.977585650.0","@material/rtl":"9.0.0-canary.977585650.0","@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/density":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/elevation":"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/switch_9.0.0-canary.977585650.0_1606920130589_0.5186678101068929","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/switch","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9916d42375bfd48bb90bb6e42a3bae96bb7f9514","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":38,"integrity":"sha512-pelNbiFKEP1448Urya9jcNh7G0kJ0eVBsMFsOsalcuFqS0S62MJ/BycuDkrBCwsBSvvhvjcwobP5tWjaBJpBRA==","signatures":[{"sig":"MEUCIQCHw23t1nMRP2isZm2fJEq/yie2KsXFlY/D+9P1YRcmBgIgHr+2HiiU7v34NK6WvzUXtyNqJdutJZWXGxGsMvQjGSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mMCRA9TVsSAnZWagAA31MP/2gT3aijzO1F6mqS6XLz\nIIb1xPvAY9oltfTtzkq8dY9pLzxLQacqz4ZtU6vxusJ9sjoKdAzAY/FuaCvm\nXp8uqV0Xj/qbUej2v5lP4Ut48p3eknAwywYrMbGSHRN7ySUKFWs2+KhUFK9P\nY8e10+BOya4ITF/SV/1hEBMGtDQpxBqMAwRnPIhq/gkGOL+pYL5h8AluFN/r\nUdJMVYiuPdMsCwrSX+AjNj3lHEpgMK5RQre3WwhF3BQoVxe+balB1VFp8iVC\npQJR2SgzSCmsLuGIpIN5iQn8wyxsb566FBo0C+Qvti1H3zYPAc9juQkmvgl/\n81P0sMjPZPpnnTUazZB5GCYaDOXcQwthZo0yW9b24BLWfJs69gRS97JwrHzJ\nk/sntKDr6BEdYWfoLzHwWYyBmZMspcwFel3nlOQzkCIpgoByylyU0YX1nVwI\nFCtfogLZrzTTyy9Xu0xCkwxDgU3R52ZWVnxeacmHXg+LczlbiWC7hacoXlfX\n4SUwFXTpzBk54OJ1tjfOUeEfEiPwTbd+iIxsKoYEBMLMG9XmKHed3f437EZP\nEzcNTWpImpIwxFuKyp5NUOKwp9nTerjvqplO9AHUx6zMsslIhfj+LL5Dgr5N\n2qT+4hd2UqX80txsCDjGdUCR1GN50YrfWRLyONIYhykQXYb7iXOE/esMPtUe\nJcXF\r\n=qBeW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@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/density":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"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/switch_9.0.0-canary.c7edfc7b6.0_1606920588164_0.16275479158794215","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/switch","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.4f3347306.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d173f0da13d6457c2e271c4f42951d8883ae5ea7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.4f3347306.0.tgz","fileCount":38,"integrity":"sha512-DHnzqnvAaVyw40WF6ob59MnPlgKYXJMbiPPeJKHRo47vPbUlBymJmccyPdIICUYKm8DvXYgQblrti0fzIujZwg==","signatures":[{"sig":"MEQCIFTSfRguBjwq/0QeAQc59tmEJ0j66/zceaG+t5pihNUUAiBOMQwjoe8fTOpshB3uiX1t2S0RNcSNfHYSGUJODPMLFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx629CRA9TVsSAnZWagAAUkYP/0rmpUndmtaVIPkzirUu\nD8hxEOPJrdwdV+SH+LXOmBoeyJpId9BPotbgCSee4hMOXoyrUEHhom7K7FiI\nXUse0jT4QmGvO7fuH91Ilv7zqe/Mqc0dCuD9L+FAz8x0qJoC5+dWhhJ625wn\nXtvazzVoAJ9jAsmAiEsNkVQWzigiCaHUNSiQwYh7e1D56v9uw/IwxpQmRDQz\nw3QrPwfzHH0vwcxTm4TLZG0IR/PxGgmsE1NI4kA9JAqnJrR2D6d0NFPUbl9x\nA42wnwV1XDcL9rKerbJzxJ/dc+2YfdGTsUfN5n+B3W/mIs+KM4ytVGZG4/tM\nxQJjnXAOEgEw/lzv5BIqDt4EUSke3TclTLYRidhlUOmO5Ot95Gl7NiUZNJK/\ntBFmRn4n9KyeRrA08ORvcIUqiti+6k8hG6qTNGqK1m8BVYhlvHAjEQVnHMGO\nGJaogOBD+2JYtZyvvWVBeUHWlkxeECBljrZTx1FnpOlliXWctXV9S72bgRbm\nGUi+fVnoGx8SqyRtWWiRRZBTaoYUbvfVXKLdivF0m9Dv0WKj2dfuyIcxIsZ9\nLO32KYjCY3pXkUAzhVfV3qGXFc0qUoKZ5gmM8NZ4tnk9UJ/cGFrPpXVash6r\nMfr24UDjWd6KOoAkTvUwatSjU6FBe5A9LO+0MidDTHCxEHnh3TKRTqM6bCJF\nq06D\r\n=DdO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4f3347306.0","@material/rtl":"9.0.0-canary.4f3347306.0","@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/density":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/elevation":"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/switch_9.0.0-canary.4f3347306.0_1606921661288_0.20957440148013018","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/switch","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef9e294bc0121ce376b07e8304edd25b22fb966e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.37fbae10d.0.tgz","fileCount":38,"integrity":"sha512-mEdhJp18/nyOff1/g5Rnu+Y+BTDbdP/lpRJIz4sFxNC6qLvqs7nXQ0bVyPQLiH6iQXOyZl8TqveE8TR4GB/Itw==","signatures":[{"sig":"MEUCIQD3bczfsbruWlOmgHNTSmHMfWoE1xipgUG0BMpV6D5H6gIgHee9N/rWlIqE0jnFEbEbVLiBrtCHT8DFzW0aQdhadgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9oCCRA9TVsSAnZWagAAVEIP/0LfyJcEXzXdQu6Q4VOe\n1Su0ftQNBoy/1tK175zPWJtxOqzVYW9WvT9bSDcdoGmRJdpAagulTywqSxZK\neq9a/1gc7p9AzpVfBHEoAIfyMeDNS1FEIE3l/RAhDGIjE/Uvy2dfY3oHkU8H\nILwKJR2KpEJa8HtDYELOThNG2rT/AxBeQ8Wc493IFsTqMAFF25Ek3jQUuJ6q\nNJnIdjsB/BxB6QtmYuIiX7kXna+7UoHM8cigNiHhGWnL/NJXvGKz+afEGCY8\n0TMpoRqm/YaDPFMpr4RI2mGMT7J06D8M5rDz3WPZwOY/PjwcPcu2Ljm2LCIA\nCqw61SIT54B+nZLr/yoD/pKSDyvK6sd+PaTW9szAQpJBbC4yV/7gYRD7LCfz\n8VeO/paoTsWxAwLRo4Po3QY+bnY/1lcZncw3qdl9bPKofrSSwo+eFRvW87Hm\nQSnj/ajTKmrXYBWqueZdZZUskBgxDg17oWV7WYZKsPOOgFnlpK1FnMaYtS2+\ncG+PXwlAhhB1789602NWJYoqqBGIgOFWmMFN2YA/RifseqmPpXjFOavpxAak\ns4c5f1K9FGAfFPj6T3cXWb/8GtywWluk/SB5RRaDvxR/27kMAkQ/IEpwKtk7\nhj96XQO7txSjlvugGWcQQuwveZxEsHAqFI4qoDKbGiiQ4HQzv/tdgahNEZqA\n7hHr\r\n=4tnC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.37fbae10d.0","@material/rtl":"9.0.0-canary.37fbae10d.0","@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/density":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/elevation":"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/switch_9.0.0-canary.37fbae10d.0_1606932993871_0.08818979880561839","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/switch","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76228ea548f178b972df47188345bf246ae132df","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.11da3c0db.0.tgz","fileCount":38,"integrity":"sha512-lQuKyqligpV7Y23zFbmdjj++T/6VL2Wk/Dtf4aB1WmV7lTHtSHlJcZjr9tkXZF9ajeNfpMixuYVeUDZVWeufwA==","signatures":[{"sig":"MEUCIByXeJC/L0+mPLUDMiU5l+dW+Z7Cl0YkFG+y+tme+Y5wAiEA/DLd1ruQHnBCCDBR3BwFX9Vlr5tsqoUCd4CwJxNrJDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/eMCRA9TVsSAnZWagAAZzkP/2vQP3PscTjKS/P9zDOn\nR8XiKSlAgRiF1AA+aTfFpMg3lHEmaYIryhkEiGEyhWr1xdwt9sswOy7x4V70\nD74BwL68D5ZgUMmpDwjDqP83FhlBChBbvhahsOgOkfylC01jwVmlP1cVseh2\nmbcwxFoh0Zo1dSCHklygMlPqJar9rAtfT5KKGKscvtxnETHAMJsIRbtVIaL+\nG6YN3mTx2QRMJ/KCHneiKsy95g8vSnTKKwny/7FxVGpBa87rYZVvAUBVpam6\n3MjglRGRn1l9mIE0M+NS2rgO4VdWvTfpNfyQA53Nm9ivbO3IdJjVxkp5stJA\nhKQgguhiyPsSZYiDT976wW+vWpo7/vU9LIV4xUS1/Q2mS2RrtI8rCtpzJJTU\nz4f8juHg+sU88quQBAZeRb+ZEnuM7RrIhVrZS0sro9LrNSZ1YmHQXQmleCrQ\nrAK1/xYP4jUd64sQBF+PaXbJ49iILmc+krw/PvGBwA5o0mL65PZpHqj1rh7Q\nQW3J0Jx238HZLKYLiKsMmnUkGn1KQq0vxx1OuH27i3tdlCkcN/rL2u0KPOQA\n6R1FtX1c1KZ+erS9y/iF9BnYicSdDA7y2X/ZhFqD7Y1zVaKolzdurSHc/dqs\n7u+0L2l2aelfiI5Ycs+mBKBvHo7eftpiLOr4wveJ1uQzej2IWMub5yADV28W\n0add\r\n=Z5fY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.11da3c0db.0","@material/rtl":"9.0.0-canary.11da3c0db.0","@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/density":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/elevation":"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/switch_9.0.0-canary.11da3c0db.0_1606940555892_0.19821815844094903","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/switch","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.489d4c219.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9131e2be3e9e9d7ef8d217b4601215d7c1b8899","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.489d4c219.0.tgz","fileCount":38,"integrity":"sha512-G+O6t5LxCJCOZjIR8ZRy/T+r7+tjT76C01Jd2E4N+7AmHqQgvRO2QlY2ZU/0xKXSDsrexroxGlXq2trpQ0ks5g==","signatures":[{"sig":"MEUCIHZJ6xWTUTOJey184b3yFXnVkfcb0+42uat1uSfVp3rCAiEAlxqK8ljf0Cn0Ku4CklrmhTT5e1S3dyeT7yZQnMpn5qY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRrCRA9TVsSAnZWagAAbO8P/3wpMsxlne/olXw66E+l\nYMBZiXQoyyKv9iWAsubhjcwc7vPlLiTdV1ztCAV8XQQWF1AFd6pOA46Yjq0Y\nHslAdxYF6XwaUXAwMfCISrX/AQj+4gnfT2KAUMEVAHngyOJjzqJ7ht7N+gwL\nStVy023WdXT3rycICutZsrOUhmI2wYpdrmiiP88QaRkldyML1PPYUPLqk++C\n0w1mgxPy0aL1b2I9cWEBjllXAzyy2Zqe95CBXeYi4XDC9TM6iD8cnHxP+kH8\nfRDPh3B5fF56eJe2+mZtZ2yf6s6PYyvx/0K2sVLyuvqGPMi6Z0T/QemzKoJu\nJUSFntJg8MOoV31Z0XIMuJcuYKAwpsEubcP4IYgGUujHh5Bxzc/L143GefLx\npok5iosJFYQmXN75A5Tf8L2RwlKBSMEWlgxl2cA5GzZHt+en86kkNFJ3Qs7v\nTHQyAfQE6loz0iVCosX0DhahDYXbvM+qF3aFnetH+m89+W3kph870TXRKwys\nLBUF7xr8VwZkQTTPMgd4afsi37wJ688CIwvHEXgH3ofWrOeb7Dt1Pht9aT5g\n14MDKHL9iQQEdh4X7i3/+ggnQuDtAm4GxKgBaqZPwhQa9aSe69L3hPDPr6TY\nvrI+LNBW+/ANe4To2BaVdQ8j+uu4XnarqIq87roP9bDiRHB9goyTT/qW/jN/\nF5ZE\r\n=0+SP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.489d4c219.0","@material/rtl":"9.0.0-canary.489d4c219.0","@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/density":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/elevation":"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/switch_9.0.0-canary.489d4c219.0_1607009387076_0.9841663074506795","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/switch","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64830417be11f6ebf8de8ade2018f255f52a1d67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.6557a69d9.0.tgz","fileCount":38,"integrity":"sha512-mTsZmm89cLB9CBGuv0oN3nCXGCL5VQH+619qLHp6JQrDVabwyQEhBeoErDI1UvTV4/iDl9/TERn/s/YhBfGe8w==","signatures":[{"sig":"MEQCIBFg8M9ZRMj8kRpiR7ZgERtDOhfvAxgFbmQDfq42Q9gJAiBt/lKmYzqG8ZwddIVB6lfKwCjqIFZMHOBO/aMQTMqVWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQcyCRA9TVsSAnZWagAAcdUP/2p39sC9e4FY3JpUsGSF\nmtETulsWJmo7ESGLaZTy6pzGeRyDf5KdI0Pmt6fBCQN2e+CA5Mawhcaw49Nk\neQxX04RlbKLsU2L5pSAkoTfpZ5sBzxJCrjOwzihXQBEGU9f9Rk5dOXpFC1cW\nlsY4VVo3nZ4PZYqxvGrBfJlI4y9Yvf4Kv6RH2swSW6PkGpdGxoL7uD95H8/d\n9aIkoD69SVEAwiMd2rw9enoHiBtj6QRTq1NJl6hu1EWaocCI+gl+C5E+BHRf\nQgNQz6039efbllRLBmsZagPR0d/ESoQIhymmrIHygliOoni7A3EDDPZ2Stt8\n9nOH5chSL8KMHXdF4jD72CAfgbA74X+sr6M/VbdT0H9GqKvm49JniK48I1EV\nfruyNvi80xgfIcnY1uelrJBHsdWPFhwMsNxW3w8fYLXFddpePJ6hxocv7rB9\ngOaOreiRdV9asFizMzKDaXM4XhsJnbqHxcr7sIFs1R7PC1qG8vkkaZf/w2aC\ntSXM2gM4vc+qoGER5gKqxh7GA6idYIxrQpe5TckQUEilb88UV4LxrnRiwvYr\n3b8bh115iSRMA5eENizy3BaJpIXBxuYBbHQnImLnT7164Vhpf3plXyFYfRi5\nvMDYJzAdS3VHwsghGhRGx2x0dqlDNCS1eeIooy1YilA32Tks46gJlSTIRHgU\nX0vq\r\n=4/W3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6557a69d9.0","@material/rtl":"9.0.0-canary.6557a69d9.0","@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/density":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/elevation":"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/switch_9.0.0-canary.6557a69d9.0_1607010098060_0.1075788055902469","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/switch","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7345f9bac6f6206efebb8f50fa8f84338bb5c08","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":38,"integrity":"sha512-SAGYg3rdkBQ/JYakDZ8zWfn7WTWw6ofX6DG9qLGDTehoOtoISDFv3n+HRAu5FTOuOBhB5/hefMEl5HmgboALYg==","signatures":[{"sig":"MEUCIQDVAhNyhR7+itu3D473/yQZRhXw0JBOEFK3zLJvwiJYBAIgFASurfwHtDn6jISzFZkVEKGQK+bbOkSCELT93l8k9s8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQseCRA9TVsSAnZWagAAW5wP/3Ffb+78CRjkQVaNfByL\nSDeqSHZAKjWCkCwuXCNid7Y+yIRVxRSFeicq6BoLeU4/h4NzWyQ8d7Eg24GA\nsWJyuV6De6TwG5to25+c06I6SIDaKQWNBDQjRKn4J4SzeU+3I8bTRGk64O5Y\nLIlojOHvpCmSuH0aZxSrLkblmdUzjf7XIICuePNuvEdPrDJl8FLMRIrABwjS\nBtxBpCQEDHyTl6fTSRj+y+EMYJhAeHfzFfiNW86pgPAyD+1KcVx+yy3o6/yc\n1baotps/5HYXVyGQKpdyDvy+6YNnTPRbSZGnRdJJsuO2dNo+iExQ8yrFPXDi\n0svgVV6/cV2bjrtgKwMVkZAIPWxvO7RYUEnvLdE3RieJG7ebb+yFWmYdQ6oc\nOAI/bN5bS24U2GeiukILCvTij1y92ez4KlbBgneWZ/nuZmugeWVKGDdKP4TT\nYdzSEOpciHEIeeEVfndySD5LkGv6fOi+KpPfstkJ0mM+1bVCJra5o+1mdjQx\neHfmSatDxHpt74BNfNj6b1SBc0WFyBYe1YhDyarkKiWS96EAWOOITRBreEeD\nJgdn8WdowhdZReXy8BHK15G2k4DYL7TOHVyiebTHrMbmq319lob69nZjbOIz\nVKdIze2/m8HnDRbwv1IS0WKzCtocz1lEKzVALgTaSvQKzOjj2rnNdkB8nZqi\nrDsc\r\n=8Alq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@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/density":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"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/switch_9.0.0-canary.4ea1b7c69.0_1607011101517_0.7861464130032669","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/switch","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd6f623a4722e4cc75e42ec1b06d831f1d1d85ec","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":38,"integrity":"sha512-9adRaFBOTIi0v4il+q9RzIc+M8GjxB6JX/61XbZiNOEURwvQaVAG+NfUd+EBB3DxSTs1wdJlFpnL3euLMlr5rw==","signatures":[{"sig":"MEYCIQCGOljb2edIy5OflZf+gCZOZWpoYr0JyLCxzobUU4W7XwIhALV0LfqEdONoMqG96ftZThiWsCXOTMcmM2h0ndVV7ZmJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRnxCRA9TVsSAnZWagAAbfgP/ij/QprFOy4IqQIexZI7\nx5HOxngkLENW3lkwSJxYoXL+keapPNw/fE7JV5pt72L+Ga+zCEIN3PDvXvVx\nhwccqlrkqlm1jh4rTIqZ26y7O/AhvdED8l1FMBWwGRXwVl9dpVsUJc9kGxhA\n0ZKdxfQlnY9deNcp934rLpb9lPSy11YFfkWSqeMxIEGIEZhIPLPdawGJ/KQ9\n2bbI74AjbCr7UoF0JJs23MAd26Vrvawp+yQFlotD++GNXp+5ZbJIy7R08Tux\nJQa/On1bYPETN5/qPgNSBjJ2jNDmtKxX7TyRwNlOTiqB/1BnCe9gOCBJkmup\nRSG31nHZbJM4JD4Oh0HhcnGeifvpLWRAqLwh3gTF9aUZUOH5TiPtH/7xT0uo\nj/N/By6PxBL8IKIXsusN3gob9uzxE6wP0MHROMs2tBRuN2OE5JFksyXEERHN\n6VJ1ZT4UuPfeJr+dceDOJcGAW82+2IXJtTIAhUPERv7ipcy4UUCWdLh7zBWs\n8+aHjYB4DHjXB8Amm/BpMJSTHqNVdP610LExW3nVo1+DucCs90kgzqbqUf4A\nu2dp5uoJ1TRCa+WVtXzD2vSOivEQWcnPLz4R0jA3sx5UNZ4JnA+waKmw5/la\nirYgT/Qz2Fm40VD6JwlXfwRBp2EiuFeVfL+FAFpPhWDlWpB4mltYUjaoJIIb\n42tH\r\n=SLDC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n## Contents\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@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/density":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"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/switch_9.0.0-canary.eaeb78ce3.0_1607014896445_0.23249986053275773","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/switch","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e76b4ec213a7fc449a82534289f016ae60002465","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.1c156d69d.0.tgz","fileCount":38,"integrity":"sha512-jGMtsI+IdPORkiEKG56XdiN8/8G9JcIdDKExov3BwGn/d6fO+IXQnMbV6XY9aRq/+eI0eI2XXT+ggiyk1Jy0AQ==","signatures":[{"sig":"MEUCIHRTLfuJAGBzGr1PGcLwSiBcXDJGzZGWbkxnxvzkSCtfAiEAm5goT+N3r+pCp561SupDqKzjJu+5YUe5CuQcYBLaFFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU5YCRA9TVsSAnZWagAAX04QAKQAFBFFA5tC4/feKtSU\nHO7K6+JhfG/g/DLryd9nND8FKyUHd9acy42mZR5bbe823o8KXgUjr9ED42i1\nkSCGyYLZY/sStKDQpfmnKoSFfMIoncQCrqLxI/v8AxvBI6wRWht4hbB2X0/C\naN4S52m4IWCOm7t+VDdAchWcJN+/YVbLa9U5nY79vMKy6t2JWFoGbCLI96IR\nXGKDYRKfCd8e596Ls3n9fsrymEF97IA6MVllLCXHWM9/plyFRDrB19k0pRmQ\nX0SiUAwU1oxS/E3hmuczUbvxApn2VWqTcN5V4RELZX7BIwagXM9luJ81yJT8\nPz5QkImtkIzZGy82ns5FyrC1RP2uMBS19rUJuivpeE7bwS550Xm7StusZ+3e\nWdTSFxMnONV+Sz7ewqjLWgFxFFjpdS9v4L20Qz2m6WdrMZgmE1XtD9T8AXN6\n8hRIuufAjM+b/8CqdB+p26JA8s0Vx5bpU7ytKPPRW+dcnb2akY4wxAKm+309\nWayOPHBhSJVOUTRE1gjYZzdjtR3IPch6pbhpZTPRIjVRJhoemmhuiuC9hUfe\nhZgv0447/WDP0K9ZKG1g9d/zCoKigY9Pr6unL4Q4y+qLcJdp3b150l6+D+CA\nwXN3ELzL6pwrVzH+DPPK77ozvjwupH5wbO9QkBkXkJ92rbAoFq8Y8gGW7m65\nHuJb\r\n=tjNL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1c156d69d.0","@material/rtl":"9.0.0-canary.1c156d69d.0","@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/density":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/elevation":"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/switch_9.0.0-canary.1c156d69d.0_1607028304258_0.9976067282396652","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/switch","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.832668d33.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca7764f0f37a9f6a453590ef37b6d4ba8cf93d7c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.832668d33.0.tgz","fileCount":38,"integrity":"sha512-4aM6a/PWpMlV3g1cyMcm7Zo8+eQC23FjMIrJU4GRWKY8iygHHw+nH2FWb3hcDHIANduwDp/YhX08cNOdJZ5iIg==","signatures":[{"sig":"MEQCIHG5xUFupHoOvHJdbvxRMsY7MSJNRf3XxE6fOtg362+FAiAC68kFve9R0F5GOq2+XRbUCGwts6AXrVa8Q3oXGI2yJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqMCRA9TVsSAnZWagAA4lsQAJiqA5tVwSuM71sElWpP\nnZU7+uUVqh6fcLuFlXv+tPxu6OUIDNKUac5BGLWAifikhWzKOqx+NqUg+cDm\n6yJBtQucP5hBihd5c35UGEoFY4uF+6hNaL2PqnUDHIbd8ZMzQkUcKTbMNo7O\n++N6ZDJ1IwAk8lTA0hpeAzWrlp2o8X7yBjdWAbVOiqCzYHclIAKOhADmlykd\nkL7OjcL5eiWdlOz4C2qu6KqHRc3athnly+p3b8X8y4YV5Q7PdChc3Poq+YXR\nUFNkIyzTo7dJcUxV2mnLYCn3As48KXxayRnbRzEXjOI+7QpIsuakTyqMYlJq\nGMKb2NLLKh6n5FuM5tO67oZ6wVMI1aaHCHQbAMK/qbRS32kBnpdyBNYyVXbM\neS0Ph+OL/KEUVDZK4BC2SA958mO5f7Y8DXFmEuAYcvJxqzvgqVj9CaFo69EX\nye7W2yg7LNRNJOgtbWJo60iEnPS8u5Ha7+U7s6ZGp3atHvNbmfar8zKm4+mm\nnWC3SU9g2di1rJwzZkhoJCcrGybUsCiq18nOF/ga0R1uxOxP2505PdmbBR/B\njqFKrnf15n4d67i2LHhQMSwO/xgQp0++BiMnIb4lr+gccY1z99teV3HtNAIN\nltZpgYPgsmtMJOrdnLIo0Z23lUSh5m8AjmqaJRAr/keWGVYthAkAU9SaGcLS\nifX3\r\n=aP8n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.832668d33.0","@material/rtl":"9.0.0-canary.832668d33.0","@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/density":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/elevation":"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/switch_9.0.0-canary.832668d33.0_1607105163479_0.9041218093816208","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/switch","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.4321323e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c413dd1676d705c0295ae2d847ceb7b205225917","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.4321323e4.0.tgz","fileCount":38,"integrity":"sha512-jrCO5QeBGpCmzbn1S8H3NQDkZxxFqJiP1gwQm5F7A4+wQji405kZEfRAjAlF8h4dGoOovfwdWoj2Sqm89re5mw==","signatures":[{"sig":"MEUCIHjdXd3PTZIBGw6BfpPPia2h9wrGYdHPgLIwF6UTS+0qAiEAuRdbyWMacrPgM5So1efAwzGcIt6wcFG3IQpb/6hxQFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhIECRA9TVsSAnZWagAAj9EP/2ZHEiTzZDRgMcXsAB0d\nAOTXy6XCLOBu74zltTUA63LAezILOqQ4hTYnkmrnEUlxeBRQL0d+Aa8fzipO\ndRKCpOwMYcrZWKg2yMdkC7Mjw8Wetimn7YKfIXgypvqKF+xv9LzT1/kYZ2iP\nXsr1OkbmiGADLo1bNiwgYpzU5tte2PQeqgUqvWPZdpskmqC6vG6XA3I5N+A4\nCBPQUooN2X6G4uWAo4L+bYNw3PvMAbtZH1UpzI0U7Aw9Sh61GS89JAGOvFFC\nyk7ANUlIiCmYFkW+auGigjXSuEwxFbe5WZXweslVr5jxjGPwOHM1DRAi+xjQ\nOKEAEyW8XdxT24iaCbdnqljI4Y0LCOGmsG10esDsvddsrMSftVDoui4AFHRP\n+q30QOanLFyM97scHO2zCBf5enZHce1c8ZbQMEb4FyilagdBtEzUr7uxuvBA\nLqs0FLbsEMpYcgPonD4L+cXlWZNBVOqz1/IP4SGlzvqE2djMgs3TX9yfkuKM\njG2R+vJxwL3d7GlLG1Sl3v6jedVrzwR/cpfkeh5Hbbm729oU13fNBCzUAPBk\nHl/JEhg5jkt52Q6MnikqlueCgQxKhDKCTQO0oxvhUyKVwqiiVBsy/dtO+wHh\nHP43QvB/lVJ76XmsfOMRzg8Ad3E8iHLQ21XuL/qecfx3tQEMsbI7vuKSdmks\n3vvH\r\n=Zqyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4321323e4.0","@material/rtl":"9.0.0-canary.4321323e4.0","@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/density":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/elevation":"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/switch_9.0.0-canary.4321323e4.0_1607340548174_0.4875342438788377","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/switch","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"495a96c1c9b287988ac615e13cd627e16562a38a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.2d5f32d41.0.tgz","fileCount":38,"integrity":"sha512-QCnTxJgJirlNSdIxDc9p8u5VXRuMxAIu7rMYVjjPjjroF4wkDNZ40ccvYl+2ZPnMeo4nCnBuwUN9Fi7sK1GShg==","signatures":[{"sig":"MEYCIQD5IMVw5ioLXS8knDrNcxfczarpTUwrwTRAlD6AYGvGswIhAIoTYqzgnwpDLOLCV7mVXmj0Uq/6Cxx9AwuoTpHGwTbX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltdCRA9TVsSAnZWagAAnaAP/3lUD3J/SkYry5rbBnrA\nVUEIwZxDTUVOj9HeP2fh3a+0k0JnGQ6QWLfWjor2y5NPwxqSPqjhM2Uin5LH\nGQyjz+sPz0bBYXyyptzQr3i4+njQM8aV/P51OARCRSz9RHSWQS/lZxP/Zv/h\ntoYgVSMdq2WotEXDtzwMOtf4qRTycxCrqsQgX1bPclclr/3sGHvRTfv7JQp3\n0c4gEKFBVCk/jFZ7LSI1rmIf95IbCG/5KfwjDoiuqM8HA2itYaHCfajGOwq4\nlDljfIfSW9BWFJ2ZV6eN4ORYvWc4Wo1v5rwORRfETT/UQ3l/3KF6j+60WBj7\nOa6DxKwCMPIBDNtgMF31sqMOIWnlxbcEPkosNGIk2S1ZwvLMnpdvQiNWblkc\nGHV/Ro/CkivL3ftCvjAdzUUjEzMRZWtdhFlxaSmllgmiGwcqFNqd8xAnKSlr\nXbDTUBQ2RXm9RDWoBXKjQn980sexPJrvOz73dG4HQDRlbGyosnyF+kauNsT/\npjkXB6rav6KE7jb4KvTymwzNR1H2v31PqT1Ycoco1XGe/btopzGJlEG8qAdq\nNWoOfQBVbux0rb7n6mYlXeVbTWiU+2nU+fapvR++NjtaM7Og23LiwGg6Des6\neeNN3Fr/W1LmH4gtQnb69LzNvSrZJonaxRkrIFe8lU4FCuSjy8Ai/tF4doxk\nHZrd\r\n=oWko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2d5f32d41.0","@material/rtl":"9.0.0-canary.2d5f32d41.0","@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/density":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/elevation":"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/switch_9.0.0-canary.2d5f32d41.0_1607359325413_0.36356786598791513","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/switch","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.8239afc64.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d086e5e7cf7bbec66f519ad3fb703f6da34c1fc7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.8239afc64.0.tgz","fileCount":38,"integrity":"sha512-J3rJMf00ae85r/jr+J+SmDu5aOwltRUFNGsIi0IHi5BG1D/CfhfHj/TK/5FiAQ1uIrLaIMb0HUdWCettqCEmqg==","signatures":[{"sig":"MEQCIH7RH1mHNvakSE/fCSJK0DwY9D2vtTbqDYVNKioOqxEYAiA9alhqq16F9Stev9lTB5/JWTnCl6JdJR1k8K1K4GqF8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodUCRA9TVsSAnZWagAAAHgP/1TdRlVOaosubyXDY+QK\nehG//cQkkXkInuYUtA9AeCMJ9Df5sFaspVZPkoHdyGy+P42k/t0ca1SAcx94\ndJEINoyHr0z9nUEd+CGDXl1OT/RxsfYTlGwl1IQYaFwm8okO6y99/IN021jh\n4DLGmzzFvi880L/+y8IMY7sRklYbq13ML+ZalvdHTeRD0lS3pPDSmnJHHTGG\neKodITrYEHeOCSv9odMTP1P6e4QUA0aF5/sJDgU0dR+s10C0AMY2Bi2Hcxtz\nQatGfcICvgIihPNwyy2XeJo5l7DQjHIcrvBgLPZOh0QCVuPG54Zu3TkDD3n8\nJCgecJQNfFakESuZMED3+e++v/eZW8ZA68fObq69m8dGS41/c+IPzSWTnmu0\nBysWvwreF5nF+q3m+rGBh0wlSHeCHmBfxLz+qO3gqbIqfawr6TQlPl23q2DN\nhMKqE3HjOdOlBdP7LEy+neysXwMPYTMV5Ptb+cDKFcyjtFgXItje92N4n6sR\ntMGL8HQ2VF67Wwjdchifxxws5XRvKQP8XkUtrb5MW0UUfLxxdKzhuD16PE1d\n5OzXgTjBUQqOgfyfO7hpf87A7CMhcRIC8l5cGWvIvcWhKmOkXsuE6PsTrykp\nM4LXrjFviub7ces8LIsAk1Z6UBrtVtJwGWYMFR6QP1bTmQUtn59QgNtf6HIm\nXANp\r\n=7Pue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8239afc64.0","@material/rtl":"9.0.0-canary.8239afc64.0","@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/density":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/elevation":"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/switch_9.0.0-canary.8239afc64.0_1607370579432_0.3032410792992086","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/switch","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.6871336f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"664c5fc8e8dbdc36a15500883c41901c9dc9f8ef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.6871336f1.0.tgz","fileCount":38,"integrity":"sha512-7Qfg8oNXjLW55/VWv9jTmANA9Lw49SIpkmWS0hJIXw/EbsZnf+Pd6qt2aRkCFN4WLmsBfxPfoIhk5ybJDUYatA==","signatures":[{"sig":"MEUCICXXG5a409sYDN5gUXVHQChwx1s90CYUWlgJ2uSdwhM3AiEA3fEiz6oUfE2+jMHWT9lPV+UE1KWrPoHNQI7uipxwBC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NhCRA9TVsSAnZWagAAIQIP/2ynKktatzv3JFmBHwy9\nWHXNwc3F3REyyhyKDRqOWavfeJuAXenV8g+EQFhjmywbypNegewD4bXEySvD\nn/MoSfLxOmfvoxyOek0Rd/r/BKQJDWWoCHZB7DzX43/tYFtcD97DqHBI7N66\ncVAn3GbRH9z+7nMpSTT3FB0RfEWy3OCBMAeXKlfJSui8GXWpnvf/b2rTKoEC\nNEbrypLJPh/9+iPlFajfaG89pEKY1E/wJrkkhWG3zU5DL8HhhI2VuCDVfoFm\nF1wBNwQjog9KfZXT84CK2al1/tAKsv04zza15HbK4mcvVyxy45jraUZmOTt0\nzZN4cmGfsOHmxav/V8TNfPqcuNhPC4oEKptEpGFsIXj8u5zBMck8TmfEJt/P\nEjESHYkm6TWoeF9s8vsWH5LPGcR/zAwpRlWSUnBJtBk3LMR7EcEwsxmsvFrh\n67WkvyCdj16ra17ivaw2+VZgp/+u44JnQe4pbfHbyPhS1xqzttdNrZKupn9K\nwbNLE4trywARDcCndqRxIqah5H7ge9gO+/1G0S+OOLoXAlf2un5Yr98KLhag\nzKAwH7DWCTQdKUeDzvwbPaIaJZ9rFy+WYHEZyeJ5CpvnzIohs5245ZRb9CDG\nM72kxjbcb2cwjKhZEqm6SlusopQL4aIdyP7HWz73Ct0V6Wfb3vul4lV9K7Ap\n0o/t\r\n=+slJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6871336f1.0","@material/rtl":"9.0.0-canary.6871336f1.0","@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/density":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/elevation":"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/switch_9.0.0-canary.6871336f1.0_1607443296800_0.7765211588897989","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/switch","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.9f718da94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dfbbe6ad1436cb66726b0d543c82c97e21180ff","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.9f718da94.0.tgz","fileCount":38,"integrity":"sha512-Z3P5gsBpEUl3bsByc4wSKWXRh2cqCK0lDB3HRBazNGjoJFAprtoyIkDNcaWT0PzDNNJz58O5qh47u7jX8Jn73g==","signatures":[{"sig":"MEYCIQDKgAA/AlA+tSNI1savNMcynXLtDeT26gnYhPFg5oudTAIhAM1B05wJyyghSQvcoucEpyn3S/FzpAePJX9fTWALXbKM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YkCRA9TVsSAnZWagAAZZcQAI0bqITKxor52NChVWlQ\nlFO+x7iAkgbB+J4D5GSnZropSexJzVSFd9KKjWgLkrznBOdfhhkeiou9kK20\nrXiXkKrDtVnV9GONRhODYidyT/36Qk7XDJgHBQQziZ0tBI+9ixtnddHJlONA\nP9yJoiexFST96eaXjvCRmYlvBUe0iGFrVed1rfn2h3ls/zzyMFHBIcsCd2/K\nhfmH9W2kIg/NNTgJ0U0m5hJzM0/vJuPV0QCqwBJRZaMlIuOPdY+jJkTnkRJz\nUvqjliuDFJRjgVmsOZA0w9veF9H0R5U/LIcDh/7xFluTgfwrIlZnigZ+k+ZG\n8sFlC76zUle0LZZyOkfqRBwh5nletc++MnP6zAQy05VFCRElI9ykXoCw66Oj\nLnMTXqvL24nxKw+cY7QPG9PvAtCuvjWRJ/a3w6KPKQJmCQIHAChgU+U59tS/\neyT5sT8yj5McII1atEwKZOF1l4EPSD/JLXGt8PXm6SzTFZYcf7/DQtNLMMf3\n3hmseqaj7awuerPEg85Mao+ZN9nYDNrXT2kfN59b4XwAq4QDirT1uaUSkIri\nxLVrZz1Uo9mwCVMinL2ufL+zEx56nWfSml3qFk6cwI+2nq0V+Uwv5QRXouMh\niLw2q0SNKn9LTdIiTwE0M+n3A3uaJKpZOdTtqzBix5DAU3h4BxafLqq8O44e\n+Ap5\r\n=d+7C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9f718da94.0","@material/rtl":"9.0.0-canary.9f718da94.0","@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/density":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/elevation":"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/switch_9.0.0-canary.9f718da94.0_1607444003337_0.5125859123617698","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/switch","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"495f01098374e85edb8847d001d9f33597f94a17","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.1fccb1418.0.tgz","fileCount":38,"integrity":"sha512-ECXS6VLqoI0BqBBostc54wy5L1lyhq+uJUNbS5Xe1UtXsN659K6dVoJAdfSMNxegsiZ1WmiK7v7jWn50ogoDOw==","signatures":[{"sig":"MEUCIDEH0o+uC3/n6fl4zA8l+5VLvnmMfrDlSayfAh1vpGbeAiEA0Rv2uWzU/qir3ECZC65lzo2NPzFe63MGOUV+i3Q4Btw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mrCRA9TVsSAnZWagAA6egP/0f1flr4kll0bbdDHAVQ\n3Q38CJkYjyqwu878wdEKqIZ0xBNkHXiKnCb/cTqcVtqkx+0Opx1cqKoKV/gU\n/1GNStq/K0Q84Eg03Wju90y/KRFGLN+CyKS4o9kl+DWRo35Orq6sEPDkXysO\n3bXkDXgrztzXUOHwQBMAXYHaoXZ7D1Ipf7KMblxCjE8TXNJZHmAAKRsmZzbi\nuZPu+7jFc9lgrNYPtx4mb7slw4BPV14eOQOkE6ET/c0+QH3jzDYMEUF1RNkC\nug06ZBybUxWizkDTwQ4BQ0yEvOSKBTpozIVCCHCJGaZ6LfrNc5nth2oaH4ld\n58yO8Q6osPVSgEt5x7SSGJO1b75jRiMAgnyYbYMi0EMKVZO7Lc8Vk4b8nib/\nKnayiirfpGNcD3iB9yBK4qclSdKOQv1Dwh7gYsqWhoEZeHJwTu8b0l6Zm7qt\n2z5PxR/LCZJWfKKbfGuKQSzJcnQZWFFI2fuzCzH4sFaWIGf3662T3Wu0kRNu\n9zRnhH/DMOW1SyTlnm8HlcL1GMkOKZtJ11/EfQJFw2BwnVgB2sZmaaZpyKn5\ni8qirOvit9bxFGdpzaZgLi5JXDYZ8/2UCdzgrCLJTY03bSAW1FwGvl3UIzdm\nwjiIxqynHsDa69VKvtnxEf0iqrKtFOAPUhktpXBhLOecRwaW1oVlaoa3LQpj\nyN1i\r\n=ehUT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1fccb1418.0","@material/rtl":"9.0.0-canary.1fccb1418.0","@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/density":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/elevation":"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/switch_9.0.0-canary.1fccb1418.0_1607444907001_0.8509012035478942","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/switch","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.afb68894e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb340ff2bc5b25f535e71c09742f7a74e17dfdc7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.afb68894e.0.tgz","fileCount":38,"integrity":"sha512-9tjZiYo4p951sCGo58SsCiSawQUO1mgLUJC+7UpjnX0wFm7ZV9m2FC3N/qm4Pm7+NQPQZKvm8ETVkptKnSls2w==","signatures":[{"sig":"MEYCIQCocOYJ0nEzBzFK9IIGaHmVz4xwTjjel8H6DL1+h+oMwQIhANCVWsbUzfVmrpnq8Iz3s2pEgcinUE4SK0/VLAT1GVkm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qaCRA9TVsSAnZWagAAW1wP/jTIMqAU5+Z9j3tsp6Ey\nIVx5yrEJfwVtq8eDKpZ7ClTgJHM8oU9i2nIRBwJbajdnNdgZ2HJsagkzY5P6\nX3eaO/OSp7wy6sXHdf8HhuiWxWze3wr2ya1Fl1CUN8EUaYQu0+wpwYEncOMv\nrn+aRFkRaCxoLDUG+zjF5Wyui+s/eNAZrH/A9sHOvuqY5uqEqFYKvfzKRWGb\nofEydM6OQfHGisjSHKTMP+oo3BrQtiK8HcE6yuTskrCL3C6gXTLRPAK8J48E\nlJufWokt3LjzkVWBmaS5P987Eo+sJ10ceDv49b+7vT2YqLdlcb4gLZiBMjlx\nROm3ZSzK3qT9EoOIs8Tzmxn9bdQoF8b8VAhP3M6o4+BAgiUqsJnGVyy8Ybj0\nI0FlnUMKACIWFL4GzIfAUQqgrOjehSR9R8T3fwiXmlfSUJMSj8tC7uYVBf+r\nXQUiMShV2d7sTBQ7na50FAVVEQWxi8VLp5TpUUpIFV6Ytv5ZcKglR192ArjA\npR5kR3CxZvT0VPJ0Ta2vDdIeBbbQsbskIz53DZP2+IyzJRkNGr965SMb65Gx\noyMObFyBFB+oBlbirQgCpQTo+RlcS1pL0nsulgk9L9xAzse5r9F/WyDsyTPk\n8nX1FFmJv1NTGkfd59p9Q/Bri0QtlaEzfSsmyPEovHSsXOrTV7rw4gyfphCK\n0AA4\r\n=tKPl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.afb68894e.0","@material/rtl":"9.0.0-canary.afb68894e.0","@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/density":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/elevation":"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/switch_9.0.0-canary.afb68894e.0_1607445146358_0.8523050733559909","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/switch","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"beafa25c0b602760619fda93d12920d990107dfc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.fd88d40c2.0.tgz","fileCount":38,"integrity":"sha512-tPnkEcyXyuBZDwgKHiRr1cWOk3+rcJZaaBO+qJN/yl7RXccrI7pGD7xigRAe5/J2ujXKxZUJw7tr2eoNZCuD6A==","signatures":[{"sig":"MEQCIBjm2Pcrg1kScIiF144x3YE8dDrcMRsbVDgwDEIlr8iZAiA1JTjEibn9x+OSva8KuDkcGpPAduhAZvc8zyq8WFmYPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz626CRA9TVsSAnZWagAApkIQAI4oYmVKor594yUZX0YH\npPzuvbu/bBHrAJb3bB/OiU1mIQ0urdBj5fa3OqCgCbRLlVH4zCVBJjNH3v4f\n2ZtEndTaaLJkGe3C1eIa3L+9hKb2UvsnT8x+YZGPig2Et5Ygm1nt+6BUySk6\n5sJW9yQYQs3RzHLcMoi+mQdgsADsjbpgvJRyCugErkjmvjYYHU2HkRD98SLv\ncnRcBM951gejNddU3NLf3Ts2oJ03Q5bFjpgM8Mjo9zbUEAQZad1dy8N4kkHh\nIMU7CBHp6RfGttRbgfbBzgVCqqKm98oqePWam4ricJ+J/15ZyF20+7OlMZ9a\n/xTRg9Frj+bd6BJnJDFo8fqGQiC30e/DRIVLai60x80CKA23hvtfS3JOH74s\n9fOiqXvVXewGxXJfK2A6yeUEFXZgW0mxEOjdoI5L/4KiK+oWbYopkIGHJeI7\nzU64DX/3dQQJ9ipkN/sRxp19TmoNPNi7ui49xi7+3pE7jwuxeYCLc27Wmfek\naKlQrhqBNXJTeYXgfbKCiR5D+RK8fFASY8PUy5bffKk2qTAQVmg/ke/mJMJe\nu3uBjXhjSH2IPrJKfT4KUADEuZQBz5441qkuF+F5qjKHIk059lrt3MxntMUZ\nC5p7me+QAs8+vozkKl+OeXE/QwcBLUPaZbQvbUKBJvajtZyf8KMpuNOUeFrQ\nFXIN\r\n=O5qQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd88d40c2.0","@material/rtl":"9.0.0-canary.fd88d40c2.0","@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/density":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/elevation":"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/switch_9.0.0-canary.fd88d40c2.0_1607445945803_0.8359980529065012","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/switch","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777d86949c4736c1e470553e301f1a74258071b8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.ba9e3109c.0.tgz","fileCount":38,"integrity":"sha512-WbEUDu5TGWOQ6H9VGkmqIZRk8uLlRRJJ67w0J2If3f/YR6CTrl+vR+5hoBCGmOvMY/+qEHoFvy4XLVTzklXILw==","signatures":[{"sig":"MEUCIQDqHMgXxtB9Wz5Hu3XGp5uTOJzEWRrM+KrcN0xojathfgIgaTpPL9SAoSQV5Oox6qiJoIfxqwrNp0y1DZz0wkyiLzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz852CRA9TVsSAnZWagAAkREP/1og61+OxwL8Zn9lKMbU\nsdr+SN1iCTS5NghgqlZ0+TxU6PGwoPknXUQtqJJrHItvz54KUBbfL4r08wZU\nAefdikSoMSVIrJTcATfDH/zaaSBloN3TwB3z2FZNlupbC9NtX04O8G/7kFS9\nSRLEI8afNWY93x2pbAboekgRY9SreJQjj8rNvbh2jydcbcQWpaB4Ph2Xgsa3\nChkcAKdUWvNLu9Hc4lfhZVv8MM9xaA+G7vNyeiMB79s5R9cUn1bQbjJfT2AU\n/7R+QpCkJ6+cUIN8hJOEUPjO+sW+7YjTbLjHsf403WqLbaIGQFsq1D6/d0Ho\n6ZeCVg4euIe+u2fdWbbakMgs/EnFX4z1kJPWh3clG2k0TD7YCZW1rMOuJL6g\nk7Uc92htu7mW+gSKkAC9ntTqbJ0ujUF1PSU1qfZwppuD6ITJQJpmtl3vuRjy\nMOUtskuPMxyBxDmPy23YDD00WXcLquI7t7qgUjSh+OiEIt/F51300ae34eY1\nrkvX8iUcj/BKCV4UOty3W03DE12RWgBaPe5+8vsGyK+blGMiqPHXb6MPZdJA\nJ9JJxIBlRo9UcbdCTV5m+oqslnvmvfrwVy8VCP0n2IwuOg6kIim1eQHGGdWm\ng/4Jc7mUzk0hLNYJ+XfBaoAf4/dBjVdhAakR9kYBRg87Py3xTsfoO90Aqv/y\nl/OR\r\n=lT+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ba9e3109c.0","@material/rtl":"9.0.0-canary.ba9e3109c.0","@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/density":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/elevation":"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/switch_9.0.0-canary.ba9e3109c.0_1607454326385_0.9392186798758089","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/switch","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f08634a7e8b7e54af51a9dde21cc88b29e338c4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.1085c3b2d.0.tgz","fileCount":38,"integrity":"sha512-0sDtaU76NkmjpoTaCL4LiaBKBGu80+BwFuagdbj59RzR5IXZhNyfJAcJikcJJ6mHOmBofLe3v7OQbRAmyTIFdg==","signatures":[{"sig":"MEYCIQCUyG2CnBsGyHSeKiH7tdNlLO3QHOBrbHcDjbCFH0uGewIhAKCheX6tQ+9QMYzzFTcaoLIqS9GT0cqol7Hjd8XrQjcm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFPCRA9TVsSAnZWagAAYiMP/2zVQCtyvn9ysvtD8DCB\n7eJSkJINE/paSOuvOh00f3j0epkY/tct751PZZaUc8fNe3Syx3PPHHwKrV7Z\nKkgVOOnAxVZYzhWQpWG9OY95mpZMwMWBO8uqeiBmEFtubQAwe2uixbM2w3DT\nMo/lkXJ6E8tYJtSDUhQhNxFmxSoBr6ostbOzkMb56GBupgWmVLKiJ/9BShvm\n75XmDCtoGsfRm83L2f4Q34pKJBE+tfNO5wyWL1y9+yZqX6lYScY67HevqbNZ\nipFAg2xdYNF0PCckJATQHjSIKew5tHuIfX7QQLvEf68UWIuXzMpiR/EPGbXr\ndx6ynazAjGE1ZeMderiPeM5YbvsYRJIy2utdfqShnb22OwwCR57kxv3MFGnV\nkFnfXXYkrenkNZeUX+GDU91KEyfgRjSidJa/zS5d0iFGEOlUmYAvZYEnLpAr\nZfGHZhXNhGLiCrfwhDsj6jLvoyDF4SNNVnYLyU358iFsdedH9paNLBxp6DX1\ngqqojyBYlf8XbSXdzdTSG33ekZx1/U/8GlJvojoMY4pS2SXlXalGm6pqSBY1\n6Cnb8Qoi4YEMe+mP5Lzmq7d25cJny8Jro0ukAdTsy6YiW8vWtr/lOUhIifZ6\nV7M92lwMWNXTjtFA+yO19UMYdnebRufRqPSCNRxFSYtPmQc+6HvaEN4jQdDk\njYdG\r\n=QjKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1085c3b2d.0","@material/rtl":"9.0.0-canary.1085c3b2d.0","@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/density":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/elevation":"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/switch_9.0.0-canary.1085c3b2d.0_1607541070070_0.08543893965185445","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/switch","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bdad3560a8f46001dbc353f4cc0e077eeed211d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.c5dda809d.0.tgz","fileCount":38,"integrity":"sha512-ZVVpFrTv6YsEjrRjUznX0Fz1h1Prv0lgaAzUS5PqchPnE9wratM3kgvMBiwFW0nXpxXIJQEVr/Sew0ieeve5gw==","signatures":[{"sig":"MEYCIQDBJmH4EnbW4bMEpxFMKCSxyn1op+89RCfe5341zyKtxgIhANYRzBmC2c0/iAnBIqgeqlMERW12IUOI/kinxPdEowDl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0Th3CRA9TVsSAnZWagAAfAIP/2n09rxmzSMwUjC/UmAJ\nizStHEK3bB5c6VojGLN5uO1n12nddpVQP8pfuoDZDpfeMVlLEbLw1YtiuUFh\nK9OBWpAha0IkQxmsqipaXYdzoq6vGKeXKs0XAzczRr67vitD78OTNyxZRfmz\nfTbAAmSYvQ4Z97peBI11uS8A7pBaHnF1jg9PxY0fZcb10cPB2EAZ/EghSBTx\nKkyb8pCGL+ei60HmRDYDah/xTpoUE7o4HNZet/v8NX5E5DoMSEmIVWCWsFyk\noul/lRFCuTF9ZP8R9dYidpvAnIb6RG0UAqlbQYJEOciEfF3aT+wq9rCAYYPz\nQe41QJ0JqSgbvow2YrfpyWkzT54OHn5SzgqjwfnofkcUjp6F0uj2dEdvBRyg\nekEc+tAcUFIQ4p8L2jCzYPSEthGb6G7JjQ9V5MLCjbFnSnHGs6QcxnkVwED9\noVGjBimCgmkpZ6DM/ZGgLAR+XYD3R9GX/UOgUXDWD1uXid8ED9sxevsD1ijH\nSIN4TqiliMa/yaabxcta2KKGgtzp19ywSMJNILMBSh4eoltKh/8mKkOWydRw\nn/+vau/gD3iIaNIWUzgSarp1iCmWJhY0UMj7XibbLY6+RgbAYynaapwwEjH/\nNtA1IK38nug4EH34Tl7tTUwEIiAJbWbTtaJkuF6tLQsOen67yQDDj4YkVTt7\n3aFg\r\n=K8OA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c5dda809d.0","@material/rtl":"9.0.0-canary.c5dda809d.0","@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/density":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/elevation":"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/switch_9.0.0-canary.c5dda809d.0_1607546999032_0.5070433585478686","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/switch","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"928c17f8f442b13784b4d19ec71b118042980400","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":38,"integrity":"sha512-j0e1VR+XGFVlr0PkctnO9J5S6bM6YZMpFe+qQF2A4YHNNlXLpsU7y9Ma+DyMbES3wKIlPSoNC7fbO2RVzWrPYQ==","signatures":[{"sig":"MEUCIGJ+Si2EvRgs/enK7I1m+0+PV+P3uJ5e4XpjJAXsPhDcAiEAlOJtFEErX7WPCLA1HpjeQoNXrrpGiEqFT4LZj7AuOKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TzZCRA9TVsSAnZWagAAnL4P/1qedQCUrW53J1hbBzQA\nkcHTsuO4DhrO2LyARk9dtJfPvHdzjSw+jlOxAdSwTvjwHjNe7MIqtwxtzrLt\nHpM99LK/zpehDkcyTvOc7e4Nl/FySBVUMu7MgGF05Thd+dDsZskn9T6HoVOT\n4aWxKlj1CpoIIZKpTgIMQ/WUkT8FTrjAHYGtG9xPfONU+SQ5ccHto7WAGLfO\nCeXw4QBH43W/WJSqbXryaQxxVhM7P/l1pNxkkskViNuomq6lhLb/tnT/8w+F\nu6xYx7Gw+Pa+hImG31pL51iASQKxmaXyxvnP9bY3kVURhrc5Syjs8x/80zQg\nRAP6WaYyTr6nRoI3A9MQIe0h6+PyzGgAVznqEtdeip2lFazMyPDywkDT8GiU\nbozh1FouQTZO79bRYiZtQTDmGaTH28Sl7ENTuhTLfOW/0ruM/rXzR7JgttgM\nHHkJbaq7WRsZi2aQTgI1kcqhAljyRuhzasWZHd4uwDU15270zgDMVnw+j4M9\np4Fa6tCgulFRNYd6mAEMQQFkCMT1TVos7kGm/vsRBOYYMRYqLoXSQkJempOj\nD5w+0G6T01ERr+0DjVaiqJP/+3FzXNlRq17lkXKF/uTU+J6lROkSVYziXu7L\nEFqqbrXYmY2p4uIjk2ILlxDa7hDYi3/pSpelUJ+lS+IVV7/KlHQUc5WOlFXk\nDMKK\r\n=u07P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@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/density":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"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/switch_9.0.0-canary.f5f1bd86a.0_1607548120948_0.9471138908989234","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/switch","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.00f38200f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe21e6c0afa741d8ccaf626584ef1baa1e627505","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.00f38200f.0.tgz","fileCount":38,"integrity":"sha512-GOswEx/heyOae+XMYv7DivHTgSY1x2iwAB+zT2LtWhFktmWO7naxZmSvTiNSnX7FqXV/hHQYSozrM+P5sz64pg==","signatures":[{"sig":"MEUCIQCza874PxCZY8F11b6nld9O87IbG2smk4rXYYCw4w+l4gIgJ9dGKFD8MhUJFS0ei4fP1SN1dONX6sSmhsO3s8YQqGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05QECRA9TVsSAnZWagAAEH8QAJuL0UqHj6pcaTk7tK1H\nam1H1FUCzGqsad6Twp5qS8AKzwZC83jzC2iMa/xdrnB+Okv7PgDsIPnQTLqv\nJJrcb7/7vPdQ8uHc10+aIK+KUsfGeZmLS+KtpkO+3DBgwp5t/L4y/vaPovh8\nWdKYJOIzwlSlwecAwc0OL8rWlK3MomHKrl/SWg/F1BdFffPhz9n4LRUXOdB/\nXY2thpfHeD6vj7PEvhqVKtf8Chel7O8ZjDDzRkF/sX2oGnwuR0A+BQrA97n/\nsYroJOFWFM+BUquLRuuZmHnqeZzeWS6Q66Ew/iti82tx9SqDcBoNByAWL3gl\nr8wmIMKYAlbqcjCr01+SSH9rjrQzDfByTsUoQ2F8GFwp36tbbRoKeoIMXnHF\n6l0QVWEcSZoGJsKFxhKk4c+UN2PWCldG4frN3qQBdu89zwpLmS58zmbJOJir\nusay6id8/XtyK0ydqWR/9Xf8i5sXrGfxXElh0cqSPY2xgprkWz8BcHilkycn\nunMNlxLm0F8Yjgo2j6sGdIN5bknfcWOoh28ddS8W0orKp9qgub5WnuZXaa9y\nQwbODAGSQvgD3VHVFAlD/kiD4YwIx5o1u3ofeltANEQtn7aNiOAPL8LsFgCk\nlAhksgJXcPhY8MEMZJ5VGp/Xf4dG46Wcy1ppAMvJTaG4sMzgwpiGo9JhT8YH\nU1Qt\r\n=c2cT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.00f38200f.0","@material/rtl":"9.0.0-canary.00f38200f.0","@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/density":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/elevation":"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/switch_9.0.0-canary.00f38200f.0_1607701507709_0.6869908513507332","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/switch","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5111884ab4818f64363e0f13000e4346807a2e4a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.ac41a5729.0.tgz","fileCount":38,"integrity":"sha512-I9CeWvrlZQbzx4J0xAES+p8+C6ZyVCvyzxwwEuIpw17Lfq1c/4SGCgEWx+xfn9licmMO50jJsPcyfKusxZ394w==","signatures":[{"sig":"MEQCIEucyHuGPxeLYvc4QH+h8rbitpqiQYF1ul9Pp5vNtnymAiBhI6tsnnqIHqzplrebNr3tMWKYTZQUW7AV1cHwK1tlwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054gCRA9TVsSAnZWagAAbCIP/0XgGWXRKLvnzfXUJwEO\nSPnZsylIzhOE0Mu+j1wDx8u+Cjfw6UCCzaMJJ9apyx9lceTDISQbBjtVrXQc\nKgbgFfhAH3wVLCvE9Nt471GnJk3jAYEczMYVj9r8fUXeVGIZI0DM4nnO9m80\nASjHF6Zudh920hYp7O9Yyfwnrk7+h+jvGXgLqH8LfeSItcj9I7UJm1xE5F0e\n5Y3O42LaEwpPFai7e08PxQr24Xn+jUCDCB+huvcytqOUEd3ynCOc04vN+Kq2\n/K2FJ2KEqpgIH4BA1/N6vji1PVBvV3nggrEVZwBOCvuIU86fVtZ0Q0BBDIX8\n9GjC7GuYYzn5AwEyVcNTkNoZXnNrUWupNVjhr8P3RDFni7A1MONJt70qfKa7\nfwf8I+C+WeL4B3RB0phtIuyh2KH9EjLwzuqL/YhGZ6xIFdqWQ+EThdVt93lo\nMuyutFd06ptKrJQtJpnYLTZoqGkHBSLG8dlOJUX77LxDlaBOqYjOB9nvpBoa\nbbcRVcgQMQ1b+UYnvN6nieOU/DVPxnhF59nGxcv7b4iyQ9rmp0s4u94JP2PD\nvIlRdEsam67KEZRBGtIwbZTk1W1v/OyqgUlQ4pUsPnsyel5myqDPYLXlYksk\nadTV3T3k1FMJOTJlgEr/uvkO8Llzo0j2lB/TuhIdBV1ytMhv52o0TloWiGB+\niZ9O\r\n=RdNH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ac41a5729.0","@material/rtl":"9.0.0-canary.ac41a5729.0","@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/density":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/elevation":"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/switch_9.0.0-canary.ac41a5729.0_1607704096514_0.8725982122052685","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/switch","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"111581d8553e95ad2c3bb172e59d9d244ad529a3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":38,"integrity":"sha512-zc3RFH4HFerpyburoSZEow+W/KOVNZTmxEWXLPQqdjG22G6FubLggS6GmysrFzZvpCxx5jNh5LCL/IJtXMmHHw==","signatures":[{"sig":"MEQCIE0YCAb81mn3F3mUhJ9goDxO7Q8WB6Lo43eUPeRDTN9YAiAIetmb48QgddwotRN9p1inFmYg6/Rb4dl0mRIdA/aCqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06bhCRA9TVsSAnZWagAAcjEP/0lqchE4mC3U582DnRNw\n/h3yX9aT0DzdLbfSDZ05RkHRbxknmXdqfvI1isy37smXApxNMbwaOLfso6mT\nb/ZBSAYosOX0o0jKOGI1apt4ckl60iFRVMsFArucoyk5eJZlm3ZX9KWeu+7q\nt8dh/v1bACDMUXFsPG/7DSXZgUHdTGQL19tdjWqN0P37nmkQNMwp6RqwzAil\nlBOHiaYIGs48Ubj6WKCkPUTzOp49mOv5f3pT6aRCKkLB+6WNfsY8jOPKo/WR\nXAspEuSQENktv202Z4Z44+VlhspMV6cxo+RRKzvpcNPX+sMzCaKmR+y3tBUJ\n9zV+GgOkY8+zD3pdhiAjRNdU8EY34Ya//mDZvcQ+1TWVYWtcJ5K65MgmswzY\nezO03J7EJ+EA2RR5vntSAkRK/55Dh590kjrjmeWLDk7NX0qmE8appXrIO+uj\nxOIqHBVYBi9eiDjxhlzl+4CzvxJd/hyN8oq2nH1OG5jyRNJU6GDZdpsIbUSw\nbVqmaLATDYcbbZzfcmnH2P0zDqUFhTeB0J2GWnIFLQtdJydX5QKviq0ZbJIw\nnRldLpk8ZNoIOOlvCxj6+Fee1bjHQQYHCCw1rIJ8hMxuhW0Un9iED/iyLElS\nNT0FcoCdidBttuZbNNLj7VxWb4Kpt5aVqe6Xxvm2rULAU9hIcyb+xIQZOQsf\nZLzB\r\n=Pg6W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@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/density":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"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/switch_9.0.0-canary.7fe0e4f05.0_1607706337139_0.2547762586810136","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/switch","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.9244508bd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fda8aecba383a1502c80e1bd255d7ae1b90b17da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.9244508bd.0.tgz","fileCount":38,"integrity":"sha512-U3/oDVsGfBuuYg5nDHkCiqLRL0wJrvKhtQmNtvQ1saondgytevLeDSH5oNPCy7lC2xpxQk3MntQZ4iCgjRqBzg==","signatures":[{"sig":"MEUCIQDTwA0AEEKaD3rxIvOp44XWOcwnC/iNWIxQREloytwQPwIgYfU3I7b7KxMvLe29psHT7xR+p/N0TmsvG2PyAVOMg48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08NyCRA9TVsSAnZWagAAqKEP/i5coD+poz83ReymZ/iP\nPxau0VyuiSJ5Xc6jkQbFa4o20UzoKgf7729UmuPDsYmmp4lXUuPc1c7+HCsZ\ni9tq48TjxbEnXvoaYPcu+scfuOg/F5T/at/nMjQdNDnPgiOqFcffakw67jom\njxwum8EuoN3E0+qOCIiTSwtEDf4V0B9OdXWJuKwMARNXaMmhUoqAJo/GEwMo\nJO8a6XGtGq8OrAUA3nsb20OadBBobzP0EFDuMlyHp0YR7PiWsMBvjN4njzvA\no96uffZN5NBBIVNmEK4ozUDll2gAU4pwVmlxDmqTb9j8aaOAnEfSKpRcu2Ai\n4vZ/OTIyW9q8eomuh7fUHcfaCCv8SoxULfSqFNs0yiVNTwc529JfRrQb2dZr\nJe5i+UTET5P+1QRsFw1gRurA9Fr+v/vBLBRMHeJ6immd/CytlEO4QyVE4u5I\nnxdtMcDQkyyj1Gw0k1Mcfgfu/P/rJ1B+UNoIEfqYSa/Ne1qsoiBHURpd+v2N\nAogJex3P5fJJlGStq/c34eZB0J9ZkdMHGREiuxcypcbGIxA50YK4ICLFPnC5\n+Xhs2PjlMEcgBETvtQi14C3X8+jPGMn39Vb7oOTdF37999HIaSySVj7wMfbm\nKtrSZTlD+S3NHr5xC6H3ClB6X9BDAVScCHo9NxmjiQadJOvNtL9iMeb+FJYF\nENNq\r\n=xd0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9244508bd.0","@material/rtl":"9.0.0-canary.9244508bd.0","@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/density":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/elevation":"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/switch_9.0.0-canary.9244508bd.0_1607713649784_0.2620421062576277","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/switch","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e805008095b0eac01eeeb66869ae74d130793422","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.384a8eeb1.0.tgz","fileCount":38,"integrity":"sha512-HT8ZlN5FBt++fxZvBSRoCdUHoYR/kzrgHK4L4UgVci20axqwsNz+h0wbZT3MZfQrpjIFn+5UUootzwo+GWT64A==","signatures":[{"sig":"MEUCIAc7O2a3z5U8wi5crbzS0u77v09JVC+7XZhJ14xE85TFAiEAuHQbzTSOYfpnNFZSR9llG78uKtyYbCrj2EDZ8D8IFVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j2ECRA9TVsSAnZWagAAirEP/jt7QdfIVrsLxDKLl3Q5\nWPOstGXN+qxAZXycd/I3KSfNNYURAB2vuVdluFIw5W9ADz3smOOD40USUDs0\nccYqziG0Eu8yAh52qz339oihpLZf3o8UjacrWqaPq2Q06hC5i2gNZ1/qWD3d\nJ4Y8clj9avu6ZFR3Ig6CzURZRXem6d09nEXCpolgmfaYJ+nSPZk9+012x7l/\njMan6/vHkWbIqFRZkPUSQ7+a7hhNzLzIutxdWU/6DXBKBMyqXR7G2xIEK6G3\n0hb8Mld38jYOPmtb76oo7zEnpuwXJeP3UC6zglAsgXm4/5ST+WzBQdr9EgBK\n8GxxsDM/yekh8e1oWUP67qXXO0h/p3mZSM0+qG7Z9XkUcARyX4p9aD+p3lQ1\nYIed0DB4chLwPa+iAyHIM2/W9PdizwcLAvFQ3O72Fu86cSONfVNWd9GiKwOZ\nY4E8Uf4lMkgOwzzLNKOciqfEealng9vhMk4DbZYg3HbGTnX3+H+fThC/BnLL\nhPWBRK0LUJlahJJ62kAaQFKkYvvL90oIwsw9MjCRrcNLXr1RzvwFAbLg3v9l\nC2sW2hhVUoeW/hmAf3zHFvqkDjdqTJ8YKileVN8G+tzK0JjuJ/Wau7xwforz\nGyfDf5nKnS80gJXTA8WbPq/EkeHV1b2/JB83m0mcMAEIwACjFuXYw490FmM/\nejVz\r\n=Vvrb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.384a8eeb1.0","@material/rtl":"9.0.0-canary.384a8eeb1.0","@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/density":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/elevation":"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/switch_9.0.0-canary.384a8eeb1.0_1608138116406_0.009335338630521717","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/switch","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72bad3194a61d444f70d4eb37da47ca3c658f662","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":38,"integrity":"sha512-r3KoARx8lkyrLBVWTl7GzoyeubVX97pR91fqxHRxkP0HGAZ4epeJkb08rDEqY3BFYnAB0OYyLbvTSldNmjHXgw==","signatures":[{"sig":"MEUCIQCEdVXmF7bsgYwEpKNWQT9uPP5U+dofFFMx1OYdu/ljQwIgLeXHVg0drhtvw13leTc9xpNpU8pgsaJpjwUKhsvIw9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGgCRA9TVsSAnZWagAAjO8P/0YhXIt7OYtkBLZ1kES/\nt0IkoQ/lTQ2GtXjZh3PvzhIqKT1AQNYvKDXS054Btzvg4YblNPcwPH16SprZ\nxo6IuyfliO13TNzLmLDYFYQ21ATo4+MaZSQSKgKtFDqbZnuDAQ0q5QTmnTpX\nTOyQtechycTuyYbPNXg6/xKrMZhOm1q3wv+kCzvE8hEfj6yY4/vgrqFjte+w\nMQMy5PSYz3gpdzCZyx53iXtQIMcETv7z2dxxXqmHWDFepOgcs2hDSFzXyq3x\nnrwY3ouHTgxIS2InN8iGQlq7RJssHm7uUOFwlSHu0429Jx2Pk4Yil4ufCHUB\nvNZGD+eU5NTDzM/wEk6ZYC2LQyJjbfXYj4/YVnKRerhH+QciMJVbhAqqKLVV\nJBTy+Z9s4SnOPEYoY2i6pNgrVGJeU2vCGqUHMJljS1TH6wfnA1NqnzN6ZJI9\nW6F2Iw1AaXj/JBnOiJN4+xOwOsBmVDoH3bdbJUd2fG1t7+JhYo+6QMuz0P+W\nI65KEhXmwD6LVz81e1snrK18yiBuwQjQRzweOL1g1L5AMelkMh5d8/BvTxqZ\nmWfsA9oExsnBjJKbewmHEtKpAP1a1CmBZSY/1mmWmvDKtHzkeWHoAFeV1YMv\n+hzVa/cs6TnkwwKUbycGxisUGPcXtpnLsRmdTkH5vISA3sdOumK5g+ljHha3\nd7M9\r\n=M/J7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@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/density":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"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/switch_9.0.0-canary.eabf9d5c2.0_1608143264341_0.6837750464198844","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/switch","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e83f6689640a92e6afbf697316642037b26910a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.30fdfd06e.0.tgz","fileCount":38,"integrity":"sha512-g6i2pwxMVlWEnaVBcetJ35JXgZ8DBHCShrdvt31Je/UnkOYu2zgrhSpQKimMfoyNQtxZbzEQMWP9ZlWylZ0apw==","signatures":[{"sig":"MEUCIA7zxH49MZPiPb/Q6pr3wyAMtI9QDCPvhZmcAFIoouU/AiEA45tY3pcb0btaorBQzPQmPqsoJTu0XrIXD1GbyYVWkOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lr3CRA9TVsSAnZWagAAcckP/ilYBqSp3yzzyQF8uiMd\njWZKsmos1f0xnKcNu5qAU6akbdmYQv8R8o0PZOUNycpk3jnnyU052yl7+Ukj\nLN9RBFW/CUGemStMDVBeW9MCvrvp6uvq1/qeEt/o2L23fVS06Bs6fSl7dAno\nwgckkU5WfJWJDjllx51zgh9OHbDVfp0IiGu7wJreg3o0O2AVRnN6wOanHK+H\npxk4RDJDHw/RMhoG7p5pK8QY5QxDXVL2SbOJt3u+c9uquBFS3VJELFReVrp6\nYKCXtzfHhRImCvAYdiI0Si8JLmXC6SO2vfGOsghQ1YjHP9shl9ExPDMd2lhX\njbMQTeCjDgcBRwbLge5NxwPdrIVvIxyyB1S5X+/g6ri6ZD6iH7aDTQ1D3JYG\n9vl4TrUkm1X+cCloVkd/KnVRt1dGboHABxNnDQqdrF+lsir/hp3Snz/YC5sq\nF67eHRjmAyZMmQfGGOxbfNv+4fbZg3PqFu4EfvV+yap7ewjbIo2g6v7jKeea\nckRIu+ZXTE9sO83KOzB/sze7UKQORoRpI+iLPBgO09sOD7IX/hAFEXO/nd3I\n3KNHhs3v3kdS1ySeivV2Oh8qCjMO7ozPgIFBpXJtMwpvryGw59nDSwsuZdx6\nWQegT/U1IGVnkHHOjX1gnP9aE/2Fmf/xj88P8QyAspSPd8dJxYLGiTtTcvxz\nI7/w\r\n=6Kvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30fdfd06e.0","@material/rtl":"9.0.0-canary.30fdfd06e.0","@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/density":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/elevation":"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/switch_9.0.0-canary.30fdfd06e.0_1608145655305_0.0963468773521785","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/switch","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44b390c6b1b4f458dab83ffedda244424de6d48e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.9590a8f90.0.tgz","fileCount":38,"integrity":"sha512-5sX7xqYJRLWgyTdPiA7pI3yP5hytgLGvkJDe64Hbp/KRurOi0nGnKmiIEu96NVXtlRq3QSyznDgp1Jc0buwfFg==","signatures":[{"sig":"MEQCIC+viwYafTORgItCqiN4oEqUgO+ZHV3TjXPBlR9S+mh5AiA2Pr3fO7lQa8m6OPeEYYgDXG4e/JruFEITe5XTLPUHaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/tCRA9TVsSAnZWagAA3O4P/2xEoipdS8+zoEKZfQai\nrbLzLqXKmSxGG36McycdlfpaVRMAYejJJHXHExcl7cSBz6T5ULLG4aSO6Ar0\nBHS1/LnseNT3SFaFzGHx2w/RudQ2E+o0hTyUqzWvajtQISHGciLDz/z/JUZQ\ngzCeRPQxhOwXQwig/0/FSOobjeKHOOz6Bdu0pjsVs5JFhuBDf1KORmLB3lSB\nNcQqK/8Hyb+EfbtLdzYfD3asDhxaFKY2ro3VGAf4EwlyTA9Sf9hLlkVzB0tJ\nDHPiVDMdFieCj0pzafRMpeQFYq/aJDb7x93u3a8xiTqnBA3eV7rTliY9VF4/\nQQge9FedRw5Rpx9cBX4CT8bEYhr1OO5h0J5Jl27iTz79DI1euLl9vGDrgqqv\nvmhW2JMREm/jk2LXzWtYBb/80YYJHCt4FKP2JKfU8RfZSInZDTcWLsQbWHly\nEgsRQj/Yj2qz26J3GZlZvVEKi2hkEPU4xagCaVEhQK8D8bO/eoTCb3mjMPO6\n1JCUJ5yPWswgt7OKwQQalxV38AOBAzNLzdFAZLPm7q8rsuCwoDMBAnfsRaD6\n1+0TK225r9SKpXJLhzMj7Ifdwtd67pOpqGxdZWEsmIcYCF2COAudjK2dnF+r\nhaQmqNCNvimOB9ZVlvD9fEne3B6r33cppl75C/QIod1MxFgEgXWVar2+r7PK\nl1mv\r\n=0z15\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9590a8f90.0","@material/rtl":"9.0.0-canary.9590a8f90.0","@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/density":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/elevation":"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/switch_9.0.0-canary.9590a8f90.0_1608658924574_0.9424597017560392","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/switch","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f13258ae2f716356a20e28e824a4b936c0ff004e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":38,"integrity":"sha512-FSxza2GzhI5c3lESxyfRE93CBBOKFk++825YsX45KCtVmJ0eHpjYviJRwnuWhyhyXCefrqspGwgZyHIOUWumtA==","signatures":[{"sig":"MEQCIAqRDwvefbAGzFXfy6vxgj9MwzqzshNKY7YzOjI+I2MnAiBDvpdIdFl+O1rC2a2KDxIRO0OPicxWRtjt8U/++KHceQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nunCRA9TVsSAnZWagAA4TwP/jepMgqcOtUDJgUm0blf\n+E1Pdh2niwASZJ8RYybLTB165UD2w1FFY8GLw47grwftpUZuF/+IgFIVXF9H\nPsvfd474UnfE5r5sDrBpoOXVyn59fMN9xof6DCcwZkTu6miWqBwk3YXGm/3s\nDR2ri9QLQmoryZsmBXPFhq5RIUHnVTKP0vkHeglPCfQEyBtNRbQEsp50iMfX\n0nvgoDLmzplKxpL35IaSx35nTZETx4i/KiQsIxf+UvMmO5IttkzID0xbvjz3\nETash+hw579UkJCYqbeIw29KsT6odOBaekIjdOOKuqXR1Eo4yr1/lFRQipqX\nAwnDgAwh+UdUv6RHkw0Mc/1GJzBu1576cPhBt9iMWL12vKophSMNhCX/U5PY\nZ2KF6nnJB0s/FX0G752RGC9Fvjc4XVRTMymkxOVrQQMKBsiIPSr8M5tNdKRT\ntdl1w/mlWXlKXAAPodqyqYFIyIzRSqaWqQx4k0Z7aE9YPP5WRp3m5fsh+bzy\nc7L45CvqYexpYnnHag5KtylRnfLrbbpHlMWGX5PUoiQAhBhyw3s7n5SfxENB\nvau0j4N/p4V6uktlyXnE1Bz6G6Gq0l9LUd4dXbcP3WcX70gS6CLCk/BMw9z0\nAbl4KvASHRYr5Wghrhzem/WCVZidFF5i32utC2tsgX7zRGETLsVW8oyjeKtH\nIjyo\r\n=wl+D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@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/density":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"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/switch_9.0.0-canary.f89d8b8f2.0_1608678310549_0.5583921802424578","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/switch","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"434d55a038d875046c802f2fb8d5ac5c64f8e7da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.fb194dd35.0.tgz","fileCount":38,"integrity":"sha512-dqaZUcfUCHdPySKq+jU3QY4Fl/1zictE9FQTQmNO49TPes3Jrk3nOaEr109J0Sdh5VYWUauEUMKxRnpQgskLoA==","signatures":[{"sig":"MEQCIHDjJV3XLQnZizhF6YqqoQymbcXxjnRa2C/xcqHbm6yOAiB3NTuPk3IcweDTjVGA/xXG+LeR0UD62KNt+UVwpsyT+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kP5CRA9TVsSAnZWagAAoggP/iAmSjiXRL0aCwqEfIYd\nQU7Q3xEIoG34+KsTxuUTnmQJOqFXFPmvLf1IDieaKRtYGv9ShfNTV0Xe9MQA\naZBQZcdnqqtVKmZazEN2mebhf/LJ9grUiveiDRIh/KP3p2UzPu3TvfiPFp7I\nkEFsOZ+YaJdB/nIXVMmiZVqXVkAsEyjSHpvkjM/NCEGMcT7r8abghP6trjUl\ni3bKVbtedUvULRIHcg26bOI8W6geVcINwdatgyQK2yCmf7xaOtRoRNVTukfj\nVBTOwBgkg7prHtSUI92/V5U526dMG+piNM8xyMx242wAnrzBySJaeRw1u7gA\nmm6prhTBREBM1cq7ihNT9TvRy/dvtGXxLJBp5jylh/fXx5j1maKXRRD7cTXI\nH7IE+sg/cN/icpBnnu0zJy7HcjmrJafyO8Z1znjqjDs3pE+7/jPBsO8UpuxW\n2YozhVlrByLsPMESqfqQlsWMjnitRz9Xx+0e6d5iN1fiaw+PLFj1LzNqvpbj\npiaSU8hnHY/7oKmIF/114QHZg4BgffgSruF5DF4B2gVHTsI4BbPsEzSK43TR\ngnkAMDxE0NQPYyWyRpnGRUFtTcwJbMZNNGF/RT1oVcN+avFcdMD6DuuIOWrn\nFXx+EKMbldwE+OUTYveibbkfece1BC6XYrSDl1gNGUSkpUFhBRAFq8YkHB4R\nTCKX\r\n=QCDb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fb194dd35.0","@material/rtl":"9.0.0-canary.fb194dd35.0","@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/density":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/elevation":"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/switch_9.0.0-canary.fb194dd35.0_1609188344764_0.06616080071814001","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/switch","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.64f36e287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a759ebbe5693323221eb4a3b09673e617c299ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.64f36e287.0.tgz","fileCount":38,"integrity":"sha512-WjvckYMNxIOeYZj6oSSOltie+CbxnsYIKgBd1nhe8zA/TRUQYSVQZK0nT9IYV4ypJbmDwuRjBPT0JTU0sqHU9w==","signatures":[{"sig":"MEYCIQDF1z6wIm52BIxHLBK/pg97tnbm1afMCHAQVXNtMpliXAIhAMWeoqloBcZ2L8L28lHYp5MnudallwkxrNa260Rw1r3J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klWCRA9TVsSAnZWagAA+RMP/A0SoS7UW7aeoPns5tJD\nH7N7TN0qKU/XBBYMbnFcac4fnkNu/ZUh/7rWAcGjz7ArDqoWq2TU+iIFus2p\nDgfmIwJkugKBIiDU+k5ZBsR2Yj1KMk3+EFKtAdAVTVlecN0UBaW/KUgJ6/7l\nA57DXjg9Hm15tDPnqnnUYYjYl20XNq5e9+2SZKaVgKnJs+qi6b1xEOUrg6F1\n5npvcbWVv1+oQfachSFpDqLEjGt9O3sajYv2CORjhxsfNmhTOyDc66aFw7mn\nf24W8zfrsW89ENEA0yYBJfXoYCS9UoqFxO1COx6TSIL/1YNb9B2YyTONA8K1\nsnKD4zbau3ypcVKSH0l+IYNatDMaUqfWOLT3sm6tx1KsbyE+KRaRnychSpCz\nAh3jDV/WDtKDsdHkPEvlPMwTUV7+VIqk/81rAmTUO4I0gzbCv7nciIdVsvI9\nGcpC2OydUxSG5j5mmNIpDdkmxjBPi5KHLgLEyYQ2EbYUh1qQEzM53+6suGpN\nM98Jf+EpKn+HIA1BV/3QSaHkLGwpi5PSaSHzcoY/HybBg9lOK07BslEv4ESq\n4puQjALFypgwv49l1W+mfuGaO4xhodXqs5l6y111iF8UYV0NbVAMQFS45JZq\ne0FRWSKR19NfXNKCP1IyrN4Brh/cq9vA4ZiScUhMW7msmozi1/WduLSzDurH\nEZJj\r\n=MP1q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.64f36e287.0","@material/rtl":"9.0.0-canary.64f36e287.0","@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/density":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/elevation":"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/switch_9.0.0-canary.64f36e287.0_1609189717845_0.9067828826664832","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/switch","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d32e84988b263e565d1b302a4568e4595dbb1b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0-canary.b7bbe7022.0.tgz","fileCount":38,"integrity":"sha512-TJcLFg+rv6br3yLVoQhiCcVb8gCLlkp6Bbn2thdwotitrUHNXgWDbj0Dmbr8JYMqt8YZcq9DI1eZBkgbVSFBrw==","signatures":[{"sig":"MEUCIQDF91goYyT29trN7BhoOEwoGXr+Qe7lborCedllghQS4wIgLcI5SFSCbhxgtcE/xUkFauV3lltq73C464SkWt9KfSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63nnCRA9TVsSAnZWagAAIugQAJaqvj3jMbX23iW7Jo7c\no88WNxaP5WA3l9QtEPpvIwBIj0SzJs3701Px+ZZDDQiGywNDuolg5Wspa7lu\nO4hh3N202NCsvTP1y0V5TdKhoXWmQAdJ7OHzOv0BdGayCtrPGiGA8jyyQZnu\nzm5hGpdLgHvKpJpg1jTAYyCiHbp9AesJXUQjhZ0ZXfgZ2qe9VWDTwwDMPTRw\nWxZ5ZK8Q1/HM+ZBTJbAJLXPJTS3hNMiWifXs3BISKRwCWZ79YBOu1QhUWOnH\nd7qR79qkPDuE84emvCd4h8HC0TrKGT70Mwcd7TzIYLgjO9gOTfSBOxJsdJvK\ne8gk+jCHZ7WmhRP7Vza/ev5uKvAjapCtjIttDjwRvMxiyZZ1FmhrLrm+q83K\nsuV7eFnesrYCwRTpv5LmTewvMFJM7LtGXvdPAY/Idb2kHPWQ4bzFP7ILnaJ5\nxiKDgDViRov0AQUAahuoeRVUYd/P9pINkdmbaUh0OusH2UmO6V6l2W0AYLz0\nZxeQ+x3mwXQiRgloYQ/Mnwm6o0e6jFwiYANssID0Vvsaf6BS8UEmiw6XjUZk\n2mxahbVYMDNLdl25shZgizUfDmq2wfodvtgAfGozeXEHqewfimCN8VdfCOl6\nBVkFjFeftB+Y20hi+6of1CwJ14HVs8noQuDefy9tqUajeHqMmglk11oRjX9H\nqo0J\r\n=ehKE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b7bbe7022.0","@material/rtl":"9.0.0-canary.b7bbe7022.0","@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/density":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/elevation":"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/switch_9.0.0-canary.b7bbe7022.0_1609267687110_0.6722935907214038","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/switch","version":"9.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@9.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b4edf0f06ea9ff90345f8e10eef851ba9fe4486","tarball":"https://registry.npmjs.org/@material/switch/-/switch-9.0.0.tgz","fileCount":37,"integrity":"sha512-ym1erZw7JdqlyiJ0O17KfH+HH8wiF1jXWaEvDQ/ETJ+/eNqBneRTWNODAOPx9/D2j4FKJxSJlZqn0OCMOJdxGg==","signatures":[{"sig":"MEUCIBhF5b7ppH0hNWuTKP5DeA5jc5K29lDcJR1TPeQ0Tw/zAiEAqJraWtPnTlRlDeSkUYtAMwpzabOsg+fKK8NFEOX+ZpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64eFCRA9TVsSAnZWagAAHUIP/1sanoTAnC+mtm0EU7yX\nhsc2HOpS962+XSlrf9BfrhSoo2I3OKW/64FKukVqwVoBFS7F0K+/xVq3p+j5\n+s6L/TNJKSGgWYesupzVyEVF422OprnIAVqR7fsRIagsbJWPeBnOlnqg535Z\nVlRBxRSdDOGKIZUyG5Q51HY3XwH8Dr8WwMGdXY+RyXHcOCHGQlMf8rozBlL1\ndOXE0YrTiT90DakDh9Zyj+H3BG878fqH/AHZ07tTRXAPwn/J6AgnlbBcG9RO\nUx2evy75G1dnuWLV86C2hqBo1qhEhmQ09JVAddbLMZqZiv37/OYNkM7u5O1P\nyxOhoOBlS4mMNuqagcKCY9clh6aaVov7k75HlvCAspHpoFOLF2DKdV/M1dNN\nsFimVzrYXZp7WjNTqBk4pYHqavk+hcqmUbK8GaN0fH7mHo6G1yK5sPJCpTPp\ng+zxsJOGbFCUzb0TTXGDqNorMNMxnYCthoOCmSWvZH/ZwiqmHA7dkRslWFna\n8OLz4SEHjwgE/9F6Zc+FMVenG2i8DTLdag+Rn0mA+xTMJJ2Tl569J74PgQ+7\nVHGpXknFDEQvDivH46/w1HV5UVaiJtlDGQBQVkF12vdGNV31/kIsF1tKyPly\n4aoBl+yfG7KyS0j/6WnCNpQUPUi8odtzlrEAx8gU+aX0KcFaqzKID1wOJgKS\nHHIG\r\n=rhqL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/density":"^9.0.0","@material/animation":"^9.0.0","@material/elevation":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_9.0.0_1609271172567_0.4484838983731996","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/switch","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.776c18681.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aba59f957cc2b51a75a74dc1fdb12e8d991a396","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.776c18681.0.tgz","fileCount":38,"integrity":"sha512-EYnlKQxVr0nS1wPyy9xaJdarG392ask0q8zc2T9ywML1fDD/24hizyBlcGJTpSXuXjRiC9UWzt7ipMR4nme1eg==","signatures":[{"sig":"MEUCIFKavbNDNDr1OrJTlBN3DdZOSxdbRsT+XsXETyqHhOs7AiEAqLf2LFZIG2Bf8elb6Br9KdKNuc8l9uWCyvdiaHi3VoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68xvCRA9TVsSAnZWagAA0OMP/10/xGzDcoVDudabxYjW\nSRW5gZC4j3gawhGQeMReoUWCHWskK/oi6r0aLjB2qA1fL4w75aalv0coVtli\nVcetgwNpzBvg76X/gSdPvZ/IxLCLNrS4P+eywUE4r/YvWp+431JD3s633Ir3\n/sqn25Admwx+lUMmcz//mfhnprHJ5jBCic7fl2odn1O88DKdKvmH/6iQeHRb\nnteX/7XPkbzgtEtu4J8XPaG1sYwb7tDdloWsEljQq9mFEayHslpI9r87Saf+\n/kTZsUd4mUseF1mbF5MtvpL4pRa6J1hkKOZYUUyOgYnlqO8x2bSCMIzBD614\nTevE1hNkB8Uk8rBIerqmhD1SqIdb9QsVyMbga4hLpBUWkg6EsIGVMp+GW2Be\nNSH1pWmAhkCdnmIbj9Fg2Qkjf+tWMmypKA1+4br54xiHhJbc00qw14u6WH75\ntZ//q99L26+mf9JDUYt/ufDRKw4VilgfrPyZ9qjLpmmDOxSDrDRFmEH9npo+\n6XTJG5DRRlRKA3bKJneQ/1EqgMiISHUf6oFASKcgPksz4XVX/+Z+oYL0ufWD\nactV3xEoDCcqYX7JmaW400QFEmRDn4UXuCKhFr03rf11avPjwZtB0cUAIkKL\nmrR1lohGSi8MSFs2x/23d6WLLsCvNyFNuxJ17RR+yarcikafW4srWU4K1wo6\nRFsz\r\n=F33Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.776c18681.0","@material/rtl":"10.0.0-canary.776c18681.0","@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/density":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/elevation":"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/switch_10.0.0-canary.776c18681.0_1609288815203_0.7886227430802741","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/switch","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.671d72d95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"529f12b82ca63d32eaa0a4038ed219699f35196e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.671d72d95.0.tgz","fileCount":38,"integrity":"sha512-iO5tkJlfleWItel/hfuPiVvQ6eQKYkGmu60MrgsSZxjyBlid1a2BTSuGS3lM+e6D48HhkVaYFz8U6pymEihDYg==","signatures":[{"sig":"MEYCIQDzHceWs3VYNarOhLKk5lZ38dOmdvusVjXw9YEbTusTHwIhAIO0DtozIQgLxTOyxGikNpuBW1Mc2uaF1LpaS/CciGn+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8PCRA9TVsSAnZWagAAU4wP/18ETUQNeig0v5RfRemE\nyvAVVnuB4rviTrX7dSKj9aN3UMFy65jQGW16OGN8J8Nu8l7zw5eBEhSHHqCa\nmslzy1hAkCox5F0TeggC8AzqQDxHdqUrNFgUTR4p880o6BYfgxC2/UbciFjU\nVlADFglgSYJHHRfCYl9XknCoSCuIV3nZ6OKw0eOBmKofY51jYe5PshsEuRNe\nWggBQ/rQwLgjnT/0kiegJH4/cLyOQndqr1cNYGT0dnWBRMClimGc1UWiIR2L\nw7pnznwmz2WZ8E+HA6fE0IjzdhMopjmrsiix6Lx8+CpzEmf0oBd451LqRS7f\n/UU/HeY/avD6wae/3RPHyl1/pavxjn+xEvNgaqdYxX+iuUciQcat5DUuwAO/\nZ//AxZjKt3E2QWrERxrdJPms/F2TWvdsnBhkPas3SJT4mygN+LSq9R9MiIib\noIz16nHQ7rT34tCTEwLpvS9Tf+urm49DDqYWtghMLN4HeCVgZYxEayIZqZrB\nXJj8WbUE7a9fwilPfA2CsCOvtkPArdikJ6JgceILo96YFg6fVXfUlSf0+RRV\n1hLoVX3wlWxKPmJhBtlkDG3w2xcVjrwlmodJYMfPeH3oJL5dujPdy+xeTf6/\nxEgCUwUEm/1jWoGS7DSiFMhKRHFtPKQoAj53qI6NwFm6SCU2MxeoXSvtp/Gl\npYJw\r\n=c+yT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.671d72d95.0","@material/rtl":"10.0.0-canary.671d72d95.0","@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/density":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/elevation":"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/switch_10.0.0-canary.671d72d95.0_1609359118595_0.3168833474288837","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/switch","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a68edec20263245e5b60237f4685ac722614ec1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":38,"integrity":"sha512-7N66HGfOydYuNiyjSaEUqCLxltcZbFrGEE1lvvpDT3ndKB7ZwxiJGTPnztTjMVcqWa3TKsny9K8GQzADTKqOgQ==","signatures":[{"sig":"MEUCIFkAGZYHlhWzj/ho0FNTfKL+uEgd375PvBspnBivsSQdAiEAqFr5KXoH2VB9T6YDKp1TvZb2Gor2cIUZCj5NWyl7DpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PU6CRA9TVsSAnZWagAA0MAP/io3F0qLu7yOa4y9g5tc\nNybG08VIdt8Y3Zeu+5TnbDKUJ/nrr2NCAYun7wXgwGk51JiC+74Ez4BPxOmC\n0lR4vb0dMceyzrjhZpWL6RGuBs2KD1RtfrijtCo2bXbkjydsP5nE30wz1v6e\nY5awn2D6Ob1Ot7TtrDGnwK8lamYtUbu/GGeBSo3FJgJpqF4oN+ILMF3OeJAw\neAeZcj2/qAgWPqpjBCn48RdFJ8KYvrQfPyaHnh/DWFq9pS26dOCQtO8dF05b\n0lkBjhItsdRTxCSB1159gcPVc5E/tWgJ+zDVl/QXDI7viL/4zlKJanLARA6b\njV8hsg9GJMtsdVy0ZsXh9w1R+y4Le73+W/HYIa8jy9/R8DmVz9BOEmNv1f+Z\nUbqjJldmrXbQd0pktfQkgiU668fM6PoACFseEPPxr1Tw0nufiBHSpRzdfzFY\njhbHiHZd8vZzMMMIkU2kwQD4DX20JCtqOGIS6Q7MOPGkdvD8eW4rlJc8HGgA\nvQXl/AoNT4drX6mJ15ZEwV0ZXqs4fMT6IaVKKqlNCt+Z873L6eFAWTuatmWn\nnwPAX1ZnYZgetI9Twdro4I489hR680J7ju8r/bk4Dy8Mqf0CDNsjbLSOstiM\nDuvSJHJsHzWbrkZKdZKP+m7wHSBN6GLZBvGoyb995MIbVw1SjE7ouUJYF9HH\nch5g\r\n=NsYR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@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/density":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"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/switch_10.0.0-canary.b4f5a1c9e.0_1609364793789_0.5926049456691713","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/switch","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be9f9431a0c929a718902c9ed55557e945eab30e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.a94bd8deb.0.tgz","fileCount":38,"integrity":"sha512-95hwgF8BCyqnv6l/+Y2Lm54x/bIvOrN+Q/m8oly24wS5L3if/QGaecePA08coPE5wZiChVkYTgYi8FOH8CsSag==","signatures":[{"sig":"MEUCIDNbZdBtT2MSqE2fMfVlOoTFkP91wjyazzFTFHKr7eurAiEAuNoNh3JP4LhtKaCwDRur2XAh3hVl+8EcsHoEBJ0/dZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PlmCRA9TVsSAnZWagAALEoP/jvZqMxBx3lQOV79tmoI\nP6uW3qKyphDBLX9fZBa4RAEQ1BsazHnHeZpIovw/vLZovgd08OkzxR+bmzbT\nNgnAK0oit3OGX0mf1G97dfF/CPRbRD0rQhmBs3c/FBLqs17ox+EQ0Cqa2xIl\n/Nb/Sam4iqhcA9THHRjnmgxgGqaH2kvw2WZ6O/S2LQIem2l5CDcekImc9C1P\nA/zhszNQ3ZKueW2P33MIS3As3WV5WRuS6ATbGvbc/xtqTZ/+/GskCebcpvM/\nZjudKBN/posxJj0GSZM3oV8BrzTT0yd5fOfoSJYJrdSg2SSGVWBGpOnOCVxE\ngAieh8GifIh6np1ulWgYsKPnYtxuMU/3feqsQC2gnMU6+fU76Xuxe8jbWetx\nZs9DDdkEU/XsUxmbAjbU571f3+bty2iVmNdMyygdF+mS0K7fCV/sl3w6pbpN\nDEXcpgPjHm1isrQ+IuxcTrU3Xvxc7mMYVMtKfBZb476optOdxjb2CFWs1jOW\n5+2MZ0VDUAvtCogeK+n0uaFZqjALwhF6IcMxXpyqOVExTgZ/GpQVtEqYtANz\nJkmS4K0IOIPsIugHU25dsVSOK87yYF5YXbop1Q2BKtDTTlbzcBmupv82nEvg\nZmv5NFlK9g2LQCg2BZNt2rM5KsrCCfaYJ/S+CN+Rxkcw1UvHOfpszmR2dFFa\nDJou\r\n=04qu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a94bd8deb.0","@material/rtl":"10.0.0-canary.a94bd8deb.0","@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/density":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/elevation":"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/switch_10.0.0-canary.a94bd8deb.0_1609365862182_0.15409453553773056","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/switch","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.5d128511b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"139800659ce15ca132b346820371a9149fe30639","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.5d128511b.0.tgz","fileCount":38,"integrity":"sha512-Ig9Lkhe+QdNUxY+MYGhuTNOqzSUjbYU7bhCu6jJPI5P2joR2aQM1A18pP8+yF5TWb0/JZchzN99a9YP/KQ50WA==","signatures":[{"sig":"MEUCIQD9GZeavyjje1L9sCA2FcgHpLjBuLJ49uhyDOAo8HLvbAIgfLqL56wwSpV//uE+ogLxztoXfXJIpMRIUzxO0raHSl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PqtCRA9TVsSAnZWagAAqnYP/iIWFagd/GDtuiDJz3rY\nD0FmB+nHqQiCNsok9nXxYPhzI0z6M+bNQvgHmTwImAArkMR5JKQEENj+cGWW\n7VESrJyepH8cncptI/Rw5GOP9NlUF79uYMyoMQ23o772+0D2pAaOEzFvgpku\n1Qei8pEoYvZnAu1/0ey11Op1YkXZPSQpZOviyjqzgmATtkKKAGaBKzp4Cm+q\nrWp8u4Utl1mv7CJuvW7fTKgGdjNb9U7C4EiwGtVpeHETyiMwqCGj7Q2k+34v\nyeQXUC88j+3C+x1gwv+LcCok0oB8cCCkkkISOM3RB0TMGt+DfPEwoWN/N8fG\npZGTR2WVyHbGgalULLNQ4sEePGEH6KneCWgFhYMO4KLsumaQwB0xi8clCcq1\n4hFpKh+nbGwWcPQcnDndHzCDEifenpJwrwXRT4w1M//F3Q+ze0ZMHkSSlVQ5\nAT4Uri8vsD/YTyutuo4CjsdcUma1K+fDBsyXytySiYBQI9ZrDHYFMNJwQVHP\nhz6UJhAZgetML5FtoCVo4Dt5mKNzwt0BdqcUJtt1XvtXHAINWEJE5RSacKz9\n8lA6fqMDHUstSqbCxPNeL2IFc6tXbNI7XZx/B83v2egX00zZkg5p/ES8fws/\nAWxlNRggFiOvW+tN3/EDGS6Mj0ZXi8aJ7qmNxV2BMq4DjjVFufJiOEIvNRM3\niEpT\r\n=hvYs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5d128511b.0","@material/rtl":"10.0.0-canary.5d128511b.0","@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/density":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/elevation":"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/switch_10.0.0-canary.5d128511b.0_1609366189493_0.2715322100351787","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/switch","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.365c69360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80006554c474e71c98aa5837616e2b482505e112","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.365c69360.0.tgz","fileCount":38,"integrity":"sha512-iCFP/yHF15/hqz9ccJlHYEkKoKTzu5J0sNKklT/cPEqzlJun81QD3TQLm/OWYHQKqqiNtAjTuusOkx7s5rXS1g==","signatures":[{"sig":"MEUCIQDISIxRZtuC1f6AlTEWTo7C7njPhkR1wq2PqiSmRw2EKQIgMaFVHGBdDDfjIqj0S2H8L7wjsQc2G6KrsCV8sjqvDWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZkCRA9TVsSAnZWagAA71QP/2rKSFFbZrdOzGWkXP6I\nuPY0qvWDNqbtBD6pe4Wsn1ol7LfBTigzSj2NR2ghh7qyvVc4DZV0QYGtpN19\nNpzwUN4/y3EPitZexNH3HpMWbvETspkOPWnBDSSaagG52w7DewXIWGmdoThx\nKrn/p62bNfV6291wp75XPyuj/mgAFZVs7Wrx6BJ3vNL0CO7f1zVpMBLq0XVx\nka5UhlIJZ0sgpnoVK/ZW0dpy9e2zL4k7FFXm0HTfCrk+kmOVQWZwooOmBTxz\nYc4Ej3kfABbPpJuHiw5r7F2uDhZ2a0tjKp+HtrwJOAzIaF8O3PX/cCDPHuZF\nErDyAa61RNAKnuy/R5JssDfelwtxbLT8e/fIUz0fswS5RX3ljuLWea5HHd4y\n/V2o/gwkocdLJbXeOMyNganoZNhLMZC/QJ9zGkplbYpBELil76G92ZfFjDBU\nzcijWQjRHcNblZzJUj6HP810dBMeDdnix3DwwxPh6vT+NfNPEbbT+TlQZL40\njJvr1VjCxGoNsf2N1/dpInKnzj+ffmvrRX8aSEDYM1+Kos67GeWjTFcjh+XK\nstMgyYTu4eB+ETlVCjmxc8M9hf94dCeTVbKFRb1b5jI2cNE7zCcmpjDBGfZj\nxNpXgu9yE7c650q9RttcMxe6+PVn7fz0tCQU2P3VCCHxHmMZbOon5Q7sPVY9\nxg3C\r\n=+BMc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.365c69360.0","@material/rtl":"10.0.0-canary.365c69360.0","@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/density":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/elevation":"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/switch_10.0.0-canary.365c69360.0_1609868900396_0.3439417576518151","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/switch","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.700a8261a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"109d9e845faae256a8109ab3000b909582743df2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.700a8261a.0.tgz","fileCount":38,"integrity":"sha512-tC48P/GjHXXtOUvwbfTYVtWKXINAkOrANCybiCfW8zEratmizTgB2E1ZqzP6+yMFhO0Gjf5gP7jEw5bjmB+K9Q==","signatures":[{"sig":"MEYCIQDvNd69+CHsJD2o1BpZizWRQ+pqBK9pyTCCc13dmSuNswIhAJaafaYz7aPvozUxzlUinZw2f+4quhKTsq1lTqNyydfC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NN1CRA9TVsSAnZWagAAh98P/3zd4kOny3GZBmfqenDJ\nLsk2Q1G9iRMCnS4bn2i5O+BCUWtuiQKJfenEA5Y1SNX8qAS9S6XO0vyUBO9b\n/2eavsrS6t0+wwoHo5F5GwV8AJvJSKeQyotXDi7vpJMEyRgwBQRUNX85/18K\nN76bfOZbGAwT6s73QAJU8m+ahRllAL3wdtD6pJeJmDHiBpihVkZoAbzwWVT8\npbg0qHJK4oCPhItG7Sv9v0c7GcS6dfEKMd0YkUEgLuJNx24fxeDrw4ICxCBr\nnVuf+XWhg0rf8pZ+8bFNc3p2Se+q0Y7wgaqi/m14duqSNKVQSxHojykLarVI\nVoGlCJ7E3hRThVn5b8Nvj791aK/gkvXHarck+Zk4E5Da8U/VygzXikvrU7dZ\nw6HDqjkgvEvxT0dGHDiGNidivAZ5V7liLZ/zXzmeOwzU/o7lTDGJE9VYeBTR\niNi4C569nsnc6W3Kvgoh2joDrGO7aOB34euha/QAVERyZnVtYMrrl03ZcM1x\nHIAj91fLviobzSPVeWFUevz5QqF+7Fa58Rcn30/Ya0KbfKTbtviLqbdv5TdQ\ngQS/wHANqtxVRoAVj80JTJPmoDND9S1sn5C/5R4CWkD4y+Ph9enNo2dUhGD3\nddkpe/Rka73YNlaD0fF8CoblUVUMYKrx87AebDWx4cdMUHK/7TRwcsISsU3L\nxcJA\r\n=kpCT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.700a8261a.0","@material/rtl":"10.0.0-canary.700a8261a.0","@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/density":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/elevation":"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/switch_10.0.0-canary.700a8261a.0_1609880437358_0.9682945908878247","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/switch","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.766981c15.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd6015fa2add5cd59bad5f5b33555ff6dd322935","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.766981c15.0.tgz","fileCount":38,"integrity":"sha512-r51Dnaax1eJbOHBPoSDD4E0/uCk4zi4ExBD5R1wvdFJP91N+BrTKZLNSkaXd7zTumNrsOiGUIIMSDaUnEYiq/g==","signatures":[{"sig":"MEUCIQCgqhsNJ484qHka+eUHJdPsMbZvLXwvuC1mnDPENr6K6wIgFKjgZbhBjwLetHfU1jr8uoOpS62YO9NM0XOKup1ZIJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OrZCRA9TVsSAnZWagAAZtMP/2NZRq67k/RwreeBhhm6\nMNCw0mUvjsbrR3k51FauVeaG+MeKdbQ5x1RSRYtpGV6an5KJytv1aj1YfEom\nOhXtcOzTwrXdaHECm/op6EZmT+jKiYmg+drnBXA1nA9qMI/598TMZHiksBwU\nbk0k4GPh0PVXPxpv2t4jCE/hj/OWHucTUKU06TMVFt1IzA3Z4QrXnRUriX6Y\nVEkwIlxGap8knafp53I0nMldRu5vxCLSwMYgZnqs3SLnZvXpolOTi8YwqFOy\nJ/0DtGfAb17maCHhXF583p7p2EYjnRhZT6E9WoJvRPu5ql+8CtwJBsVFFRbs\n/BtlGabejdGM9IrYijfupskbUoV6Nc+aXTfHoCtKH6x+YPHdU5n+q16rcXb/\nGyD1yh3RM+0q1mE/8zLNvaDqhBFrkovJVPpvvE68LPhcvmbHMuy9JRKsprRd\nOD9nbPciQkY05rlqd8ovGl/QhxhlKYe6n6V8LCPLrrp0pWxno8MfcWpgz6f3\nYgIit/hsnavoEAjc+Yyi4aw6FJy/72kLgbU15MtORBv/1lby+7rEDj1zBhm5\nuZdOb+30wrmeycobgq/9+Avt9NmaOaKg/xE7Y++L7ej6Z7JBfx4jv4BVYk+7\n0/VqzaaYv7sIJXqco37SwJzIXmW8C02Gfa1R1e6UaOmcmboNNLEjBJedn8Ao\nO3jm\r\n=J9cp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.766981c15.0","@material/rtl":"10.0.0-canary.766981c15.0","@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/density":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/elevation":"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/switch_10.0.0-canary.766981c15.0_1609886424629_0.4098704011284924","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/switch","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcf4ce32ef9c536c9d37b6b1bb34d774168cea4d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.b28c576d9.0.tgz","fileCount":38,"integrity":"sha512-9VsNGxHL6uJsvECQtbk7FJKCpjebmev+kswq0erKfwz+66IiB1vknREc0q4+5vomWVW+tB9EY60ZZ2fwZ7S3Fg==","signatures":[{"sig":"MEQCIChjUCln0XMiHZFFBy+FG3XC2aILqc1FRLqEM/4laLO3AiAa7M/iEkcA/iRQsf5TGp+A+Sw+XAnJ5eTDajtXcQWeqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0eCRA9TVsSAnZWagAAV2wP/3E9C6/RFPNwuS0SAI1H\nOVy4diKDZSfIncX9Z9ShdisqgR/FvpnHMyZA3L+6z7zA3Ai2mRoGL4jU+IwQ\nM3iWbLYnPoX4Y4Z6oIldzjWyyH1BlCtTxG+vHwzi3/+3f7llzRGnEKf/fiFe\n2Hbe1Zur3UL3fvGECvBIlc3hY/HByp6xhs6nO1yZaB2dF08sp9BGXv1HYXjG\n2/2HNvzsQI91LHS+Ar02AOWBy2wIDcQN/3xBbV7Dml4bB1dpjwz/1aDj4+go\nSGhWKHxydyzmnmXnKo6CFgqjdxDMmGSnlFFZzB087/9mm75FeZq46FQH1f3e\nyhwMbgjmFvro1MpjsVUqm2k85WLZETbNQK1QiVhpXwuKUgsUV3XQXY42ees9\nvZOShxloPeb8OcUt/K07Rg+KukCe9K0Wn+24DlshMouhxDov0EkXcvCP7nnh\nE8ZHoaK8pF7bjMXu7O2W6xWrqe9k9P3UD+3hzO42TnhHkAx4jdKlQKzOFxHJ\nwo6SJZjgYmdoEjfxSPdK0GMIWGuxMdP0XA77D6cWGj2uzCdEbm1geRgbvCO5\nY2O6yUEOffH1xTRIZNdKeXDWTvM476NCbKUh5SwrqMejIxKOGZ5qhCdzmSab\nMoei6NcpW4CCaAKbk37vmJQQFFNrrD11iC86ajxiePfUPIohA1OmIFeuLUob\nls/m\r\n=xchG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b28c576d9.0","@material/rtl":"10.0.0-canary.b28c576d9.0","@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/density":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/elevation":"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/switch_10.0.0-canary.b28c576d9.0_1609887005632_0.9338167981325529","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/switch","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.968735356.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48e4bc6c1a3093db8f353a55b713d516828cc8cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.968735356.0.tgz","fileCount":38,"integrity":"sha512-06KzMmpWCch/CJAKXgcmJ0Df0mPuiOedhphst7iMdJ5yUehzmy2LTNaRo8japwPbeB6GxjqicWk3nStHfD6imQ==","signatures":[{"sig":"MEUCIGGFTr2F2Mo9blSDNyPHpnRwQ4+1bYqO5XLZLN2VtNcCAiEArlB5dpfX3X/SbjDVZOIM86KQvW4e4kvcIIKI6ZXwItg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxgCRA9TVsSAnZWagAAZHwQAJvhad0k2qK7WVm6E24q\nHjNarMJDzVBWR51DUtGgydCeAsb5ypk7h0/1LHeTbfDH+MdeYtdzkdvG1zG0\nBhZwKL1k4/LK5AGSA18+2Zlypf+oppd69WfMzQKp/Wwt218vIwAc+7pzTdrq\nghnbyp/t/tSX+RQovKg3Z76K+XigQsxa2WjGZpYJvh0FLhvTYy7X08rKR6CV\nnXNAIBvR4aH1/gtJj2COgHAYrT4kkOaWpU69sRXEtb93owi7HOejGEKz+g77\noiKfsldsUt4u8Huhxp9X/EXCXzh63ZT2SehnOg+3Wk8hQofKn3IofQxBEMJw\nigbQexXjvNEQXVD6WtRiXSN3b1UqxnNiGFNomeNY0pGgwMpll7lVIWsKI3Qs\nvnoHiJ23cKjpFNdEVVkQxIdN+SN56f/Ic26m40tXSjhLY1jP35SjJ/Jz53q8\nEv12L78owzwhkoDUkOsrlNYgqjHVslZrkjI11lhAG++tCXCCome4CjT5Ngmx\nXEyKmFURsO9KN4+zQWpbttMJ8Q2t6Fagt+FH2No1icIqXX4Hj4922JiR3u3k\novXlRtXI8dnnhq98PCYUo6htm2a3/dGAq9xWmH3nRq0FxAb0jwF4dRL6kVfR\njxfvO0uCRoXiOCKbKvKx0HK/E69lZJmHdaunBLhYWmkm68a7iteWEP2u0dkg\n2ZPE\r\n=GcFj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.968735356.0","@material/rtl":"10.0.0-canary.968735356.0","@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/density":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/elevation":"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/switch_10.0.0-canary.968735356.0_1609948255559_0.12123307832739538","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/switch","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"001956ec96856331231cfc5665c892a34d35171a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.c5e18b020.0.tgz","fileCount":38,"integrity":"sha512-IkUn0d5hHKjbxLT6DQ3TUBogH+7tS+JNL0Nhbo3EPEOyZxWu6VuGzkHwvVAO3MVnc98vd4JQiWCwmkdFHG5Ugg==","signatures":[{"sig":"MEUCIE0gHaBEtROVUz78t39gkE92QAUS//1fbNuiV80aZRKiAiEAt9pcOA6OIuS0JfXSosqxeeHq+R+dH9UyLdxev0e8vak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMXCRA9TVsSAnZWagAAfWcP/R5e400kauoD9BPyx7/R\nh8gvQpnqKTTz4wv1jmu4P/MA1kYUw6zQUiVO2657dbnQR8Ip7fCE3IFLJueg\n6GWf6K9z0NZ5FFX9f1osyvgGSGxKQX7WC8rAiooUJz+GhgyuRTgHDBqFgsjW\nqD589mjWoPOBfvQs89Lcl97gMmLIU2QXmsodT7C18id4J9m4u6EQep6YjQsb\nBV+8l+ksUhaHjvRLMnVv+dv1tXwlvgTRdvoziMZk6phQTAispt4thYkOYDcv\nKUSLYWwNr26p/EQETgzhF+1CIxNYicfHpYkeMlrwQmxOTBQtAkBM7owTGZBj\nlr4xa0qzxB4I3D7jYBHGS6H8Emt3NLNOcmzziXUz5MuTBj4eaCO0aeBEYSy/\nl1gwfbwtbfdnKtEVzPnZzbjtXzxw6BhQw4+kAMlr9xgi8iyxld5o1N8xt5KQ\njvOjqLtVZ+5k5t1bPxZUO1Oozi1Ob+dFsqBOiVumr1sKr8M2bYvZlFsBrwgV\nE0nNRgJVPxHLSnvoyWRnY5KaF0DNlypc2Z1cF3CAlAwwlRml6rl9wXaHJSK8\n36W9lRPyAGJO1Ue4DKTDPO5HsCDX1kRKpPK3HvClJ8OCN/rqeRHO+J5cfrQD\nKpjXAp5ualOGHWlmfqB6Ik+ZgtSccNDNSQpJFLSBG6CNgTX0qG9q20mKBv0Q\nzmRj\r\n=uNi2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c5e18b020.0","@material/rtl":"10.0.0-canary.c5e18b020.0","@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/density":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/elevation":"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/switch_10.0.0-canary.c5e18b020.0_1609962262645_0.9209631961453526","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/switch","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5856fe240a18ecd67e3a956338e7542faf60f04c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.bcff8a66a.0.tgz","fileCount":38,"integrity":"sha512-z5kLsOJRnFLKEL9srsiTTwRC9x6j+68tHl1fc3jRNc+gGmofWICLjLzZfq9m0qvUtfACIn6skkNmam4qMSraiQ==","signatures":[{"sig":"MEUCIEf31euV8pMxgB+SN3K2k9/TcGYb0YjRmz7U2i1V2Bs+AiEA3l8X76M7kTWZwxeehNnN0tlMa5j5Xgryx0AXlnJakkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hz/CRA9TVsSAnZWagAAiN4P+wWpUN0MDF0JweS9IL4g\n8KR6eNemCDmWPx4a4zI6XzwBzBVgbFyZjP/EYWFB6SKf6qlhY7GoYpz7TIka\n3X/BfbhWdp7Wa5i78LyjbpQRRX/Akz9nWxucOcoUz1Fry+bLDuJJl4qU3vwR\n1DphY/TF3RzIQmp7m2OGdLq/QkCWhrkbAdhAL5tJJKKYXtv0L7CIRG0IZioL\njF7bJ6jRdjISzdaCAQstMcZRNY0wnczZLGJmsXtfVukJkzialsT2d6ORz0/4\nKbtc7MtGDqs8Jfe/Vc6Lj++3Rq/rC63y0Re10hoczK2NjULkiw+Q+utQEZBR\n/XfRZUgTXTsJypZFaPg2gEhexT3Tj5CIP2G+RUKc4OepAbdMQa6DVytBTD46\nliLcUrAttxd6Q+MaXT1dC1EB/Y/p7rKxMnQi74nkiTPxRYAZeHU1i7287QeA\nvpCyfSg7h1kyxRVKWzh2VjApMUKeIXiwZF8k2Vr2MuyLSLFuTLNjMgv4CCeJ\nHaphH0j1PGwnKu6G6yiJzUe543dHBKI+vGBGPwDO+juYuVStGsYZpqI9AIkw\nhSO1E25epw2Cyt8SFYzXQr4UQHtAsvPAvRXZiKCbnZYcumoYGyYqGiqFjzvA\nlz3bDg0dMbMI84fxf0nc7FqD7wTZM+Q+s8aTX/CdukO/KtIPF61rn0/aESya\n+m3w\r\n=a6wN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.bcff8a66a.0","@material/rtl":"10.0.0-canary.bcff8a66a.0","@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/density":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/elevation":"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/switch_10.0.0-canary.bcff8a66a.0_1609964798628_0.34761333296572117","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/switch","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f08f3f6e3a0a26a67b47bc95ea8f6060f73f89c2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.79328c9ff.0.tgz","fileCount":38,"integrity":"sha512-Rhehd3hY9RYHGLJivSRve56e76mjjtjM9wjG8LPeZw8ZjUQj+/Mcd7MtezpEluDYqlk5BGelbZ5BC2U9SKrQcQ==","signatures":[{"sig":"MEYCIQDnaQaRyJb1L66+2WIPIP6G40h/4s/x0cRHzWTJRf0regIhAKS1Ub5KajuWNtzlvJjGB544R3ZKLVgM7wbDffWy6Grb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMrCRA9TVsSAnZWagAAMb0P+wQvgUgWqCdLsd78AwG0\nNAbI+r4JshiIMhNE9w+c9TTqwHC8lA/fJhKOAzF7od0ECnQ57/a7Ye4Ux78L\nR9XIPLTR6TNwebVxYYHQJpU0pXc29DC5NcoTUxUA1tkmG5VNJLwvpWSIuzxP\nks1v+hdh/jqZTnbEaFknNj14WEod7i7p7+RtjkuOlkzK3AZBVaISlSJyFMeP\nA7vQXckG1ejUfJScTSjvuuXEV1nzqnSOK2yXQUYWgY85lDGHOuLBp18ytFst\nuYzy3TTc7tBjXwBr5IWzsrm8gjb5+n5nx1t3jVUtjetKmvbkjW3rnXNHV8cx\nvVsi0g8mie7Ih8Z6M1r9l2aIo4V1frz8hXZ1Cs568tGd3t17uXfQ+c9e7aTD\nTQmA1kb5T8KLxmLPqkBEiqOZgm2HnGMiMkBhan9u7tDBEzrOwaGSG30dtWmW\nTH3DuBy7rCoUTaNoFfGVHq0yl8ZoBc65yOqup3Fu3s66ji6hEbMqgdUnivMF\nFLxvbn32f2ptVI1mTl0+L3kd98Q7qMeKa9GEXHNHb8Na7HQKxahySXBhlvxk\nhFiq+DhZ9lPj6H0EdrqbHCrWX70d5R+UkMMKmgD8jBLuwxSsDbokEk5KEY2f\n40K3S/4PJ27HorHmS7B1QNw0LBsZdLYoCKq9d6hrZsLVySJRUBZboLL0RyQG\nYtNz\r\n=qZbE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.79328c9ff.0","@material/rtl":"10.0.0-canary.79328c9ff.0","@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/density":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/elevation":"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/switch_10.0.0-canary.79328c9ff.0_1609986858537_0.43540421579044897","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/switch","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.121e1f303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a887469276b3552f6b1694181b498cbe4e1c6d86","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.121e1f303.0.tgz","fileCount":38,"integrity":"sha512-KiBraKRZTz2j+cC3pZ3Cbb71MQqLk4st3DYXM3BM2qGa0WdwAPtSVbqkdoMTg8z0bwzdW3xcHSQdem3S936LVw==","signatures":[{"sig":"MEUCIQDktM2VYUrJ4+fqfpTFeueWoE63KZOjrUI1ozgu1veOJQIgZyZRGRhg8BaQmqsD1NaqkQypZLvs8gbOZiCrzDZwFjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95ccCRA9TVsSAnZWagAAcPMP/1SkXGE41iVxqL3ykVdL\nlPQZa2DHyLI3Dd5UmAL9DLxAbtoxEdFYNt8DEWvLgDWLEh85jsA9GSdiviO9\nZRdd7lk9Sqj09SqJwVAOf4vb5kUyHWLnPvFP3oOv41qADjw5cil6IfoupL2v\nBWuvI1YQVYiC6t6kSOaRwHo2AHZqC7R207ed1PiLZpMKOwXVVMs6KRW/1Z8e\nvyyS37gs+QaELkps9VhzreQm8D+EuSGBTMJjpSr+jbussFY5u07avcuuof5Y\nb0FLU6RnNDSuYqIsVkJth5cXfsSmwCcfGFPMaTMACPBSPDv2yy8sSQqtFXfM\nWofzNzlTjX1ZdR24OcG7jyuGtMi6eFCnphNVoEsuqQpxphlAnd4yNeHEYKUd\n+bbZGE+60pwwucaxluVXxwP4WpN/bJkc592Sc74uTMIW5vdMB2KsktZzNgAv\nwonslmr15QfErQhfw6mbYKN4ESYbeame65821793tlODkqTn9eZtJjlRjOuQ\nx1m743dAHhrGUV4xAanJHUwcROhEDuE3xSzvlxdESEOzYUMFM4P0ZL1yBrUX\nKhEyghKXFEgSDdARZQOITCn4xSXhTephVtYLzv5xmnbtl6Bt3IJdikdgaIhB\ngK+p88wFcbPuDN0QZcMxJxQWKSZ589EKWBSW8Z+DhkDRtslkhLuqgYE/KOoK\nQCTN\r\n=l8P5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.121e1f303.0","@material/rtl":"10.0.0-canary.121e1f303.0","@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/density":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/elevation":"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/switch_10.0.0-canary.121e1f303.0_1610061595813_0.6405922043571946","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/switch","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.abdd10065.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0fd79fa0f29ae7c98eb6ffe374f631b62d9dc89","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.abdd10065.0.tgz","fileCount":38,"integrity":"sha512-15UIwIcxgVzQDc7Tq0iQL5aI0FRYq1wbeQ01NWeU/VZo2Hu80tJtJALgUB/8WzNzxyMi293mbulQLPaK1RvM4w==","signatures":[{"sig":"MEUCIG9sgr/Zw3oXXyu9FgRcdb6v1V9/L1X9H6meGv/y/3QAAiEAnycj5Hex+dCSAbFr+ZtQBsYeJQhy8wRgQvJQk5FhNgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JulCRA9TVsSAnZWagAAKOwP/0S5DktyZ7Xfj/2dqGhR\nMgKCUBfAMpnlTHtoNNWfc3CKZKXI5RsY3yh9kaffmlHdwcuZGT0w2FsltK9y\nARX6JU5gRydpZdfTzBUxFVsEEHITZ5ReMsQaOgcyyZCFQHrX7+XmLjT4WmTZ\n+jesIKE+r7copv78HMvVaeaPBk122WiPI8ujKvTJ6fUATkGbARnJHBr4Wpww\nZkmoi18R02F3tVR4JI0e0Dk6jzfd8O9IdJv/YfEJ8TfkVZrHo0rCz6aLwofz\n8sEkwV4sDYexHGh7Gpr9O23ECQ0IwVH+0QaBuH+erVrOdCxAUcVNaedTtDaF\nCw30z80XSBcflgo86RN/5ogJekuvYrxnv/WdUU0abFGq+a1ChqJvv1tPyIGf\nAnx6KZi7a02B393A4AEqHvLqxpBC3fcBGFmCkTia9X0eY1PoadqfCSC9dpTE\neRfssE/ecTUg+HKnqDjCJz3I6q7TmlWzG5yaIBhZTz5t/LM1y4fLShF98dJB\nPhlTGtR4zzw2mbc4Ra96wfjqEfIYlZICnwmFGCiMvSbztJt/cQno37lHyJdw\nSUF3E7XWprmn77eESLDa0X7adLXslATxdJUDDYLiG6uDwePxaOcmMKT4xKhg\nAGTRYMUvkH2P01ifYnU6dh3hEKQhGmBdkKK3X3u0aa2CTifISQYhh890VJXV\no2X4\r\n=KtNO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.abdd10065.0","@material/rtl":"10.0.0-canary.abdd10065.0","@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/density":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/elevation":"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/switch_10.0.0-canary.abdd10065.0_1610128293167_0.8751909325275515","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/switch","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.089de519c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1621a789894b035f60d49cf15ed71358ca7fc49","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.089de519c.0.tgz","fileCount":38,"integrity":"sha512-6Qs5RP09peD3Z8dHRaej3TV7ZQ0zIagblO9fVsuK792DuNQqrg2eQAMCKrF1tXHKZyuUQkqR9Z731kE8edxrqA==","signatures":[{"sig":"MEUCIHOjXf2fVIY0ycIenJKLwcPycslA+hj6jN5gYtEA6qUKAiEAu7thyPhTRYpYqmeSKvTRkaKxK+FVQen1fzDocTksu7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Nq9CRA9TVsSAnZWagAAx94P/285KnUYvCBxfq3tywqa\nZXTngt/Kv7OJ7MO6gFj7ElwwdbiPEhpfh+OuHUr54406iK5YkFlI2d9ozyl5\nlMpAS9NwPefRFq6Y9Dk3WUncm63p/I9d/wYqK4UQlcbc0NIFl2/+KQZK5piF\nQSeLLwl4FR3VqxX1WvKQT7RV780L7olnJWQY8ugkDnlYY9zvvSuNjT5PvHgq\ncPIQgcUTjb6DCZputeX8XsJ/T0Rxt9CQt616fX33TgaQ+CkHXsPVHzualwj1\nOgXruXlJLJSn96lWaZGu7Edud0ZiHvAVkb0udpfaJnfA+/R6v5AhniFnwU2J\nW80gsUemklJ6Y0MTmzxfN0WaNCBxhBjga+VvMsMqb/PMpRgndhnuWLwRWW19\nrX5HkTqaaj67dzB3PQUDeitMP3CPzF54jFBxj1x9+s2TS77ZNddoiUxDmspp\ne/JQ5SkAZAqFCd+IVJklXX5EkSKNzLTszLJn3l2FIO+LUqCSj7wgw+lBgJS1\nLnc00QXL9+/1YuVcaBUplk4/ugyiMF00269aGaR6evWMGOGSbmgPvqQ4cNwW\np5b1xbyUHikAm6zbT9/bAdA3rNTMLkN19/vFhC6zYCMKCJWJAMIe6o3iWCqa\ndiQDnKcTMRmq3NkFE12sU3rHQfD4DYf1zyKlsyLBEHYMwDK1QpT+Ye7c9r5J\n4sh1\r\n=sYQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.089de519c.0","@material/rtl":"10.0.0-canary.089de519c.0","@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/density":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/elevation":"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/switch_10.0.0-canary.089de519c.0_1610144444576_0.2287503296387614","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/switch","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.163119837.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"151c8a28d4388294fcb97b28618681514ea14dc5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.163119837.0.tgz","fileCount":38,"integrity":"sha512-ZMIjR2nJRU2lclSq9v6NDR4+b77s9bnMICQTQdx4kxMyiamoWbtLh3N5OLllRniaTCiI0885Kils/hGbPJWR8g==","signatures":[{"sig":"MEYCIQCK9RdzwZcSIk1IIh3MOWgX//6V6ejPoyueLy88KXvclgIhANMkyNrxIn8ANM8fSevJ3ENtaco58/m9ttkx5R1alV5/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6VCRA9TVsSAnZWagAAoqwP/j8a/CNyXpjjy6dbxuwr\nLFdTa/C8EbAwVmD28PJIGPoyD5lNdnVMznrEbuLxuPm4u6iCcZx6nINR2YWL\nlJL7KOIryzinhN+pNEdx64Og/xi0boQMaW9xGhVTN957vyRAFWksW5OYFvaA\n6WKciRNlU2TJx8qC9XbKAtw2/e9nZLhVhvqsRKNOkgV3CiD7JiDPucSSYmrg\n6Kn0k/11P6g8bFWsh2zmYR59UnF0KlMdseV1o7G3cW7q8notH6OtYHSScVAK\nbI3Xklf6AjzmNH8Pr/7YSISXOt7sfNFJEhKoFmNXBlHqrMKUyhZPuOAhWJrm\nE071+visq+jmJ+Bur5vbLvV6fUMb8NplsxSTog7hvdZXuZV/6QpLDdb1jeya\nCkGd7tWpuQzjfM8AiBqCe9SauN7nRJ616o+0Ztw54fenc2bR5andMEIUd+h2\nfElvYbC4u+/n+/JcPi3Kf6C2uUhHF6LAVq70J2gNDMbPGSQFhZxA74BCS5FK\nTZYELMnaZjWgXdz+SkJNc1qkUemlss5bmBX27/vDXlyuYlcp2zJby4uUhoiU\nuGwemtg7e+88yckpheArIU5hKhTAYxGtwhwKAQihrKg80BuMxa9i6fkwBkr8\n4BZmB4+/To1WdIeu0Vqwii9TIZdw9NTkNLBULCn+ioF05VYZeoIydN2im/ws\nnIQv\r\n=y1X/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.163119837.0","@material/rtl":"10.0.0-canary.163119837.0","@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/density":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/elevation":"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/switch_10.0.0-canary.163119837.0_1610149524546_0.8594992533914612","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/switch","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"390169c312a30d4e30b853db55c3c91e9cb744d9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":38,"integrity":"sha512-fSL4i8RPFMZSldZ5BrY9+jNlm66Y9Y1HXb6bXAwPtzr2vsJco9YThdT20Z+2gU5MyNjbWgoR3LopZN/J1W6s0A==","signatures":[{"sig":"MEYCIQCHgmZJ8o5bGpYkcIgG9mBvz75Z7TmQJPgExO7wzZEI3wIhANE+vudme+fXds1yWWL33TkYepxx7RHnfeOobvlX9YRL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HvBCRA9TVsSAnZWagAAGooQAJkBKMTUPVC0hNfTS3Qd\ndKlGO09UfSu1lmwr9XWSiGUgAPkyzG+Ejxu5c4AAXFN9KhINaKS2aWbTdvvY\nwpIdGJAhFFJEGq9n3fcTqhNh5OAjPtFPpvxPeFlZWR1U5EwOJZuQf8d1VhGD\nAB8zA+jWFMxZljIyi1am03Z62nJ0uLTBAYhegyS2cC/dH/p7/TB8BImXfWjz\n8Boitk15/8hbWBpwis2ndqjInsLDVxDK1ba3NbByoWjbcKSQiqFGvEpyCSSD\n8FL49dn3EWQPqcPF8mn8yImjzX5PKax1aOyJ412FvOdCyFnJkcwSwNkHneCW\nvu/Xp2Ct+6pRpUySlgEAu4jozoKSnXQ223PLic9jk0cylu7N2LCnHru5RaWt\nWsxXMKCAUHftOZYNhaR5V80/+IGTJzQXFtgGq1sV3tufuRZEaxm660Z6H37x\n719ME1GrTv4SN1Bhb+oCCPaLEOsvpMX1MoCbrIZKxxEkw3qQJ4eU9Hg2xgP+\nfFLCksl7bWRKrjs1//mwIXn4KuReBviAq4k/tZNnLVTzLccdAAsH0G6IDv5t\nSNqX4xnt7NzqgGrZIsXa2596Fi6WkrdCItCB2ITia6kqCKoDFQMHtmCdjGc8\nO0ZHZaYOcey4hIh9qPpHWGrPUwGaq0XsV0SohRt8JzNgkYE8lgdFvLCxuNEZ\nT93s\r\n=lqhQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@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/density":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"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/switch_10.0.0-canary.b8a1a58e4.0_1610382273112_0.8271331580321923","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/switch","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.7584267ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e1aabec4c99c7d3dca597a51f1809910a40d4cd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.7584267ff.0.tgz","fileCount":38,"integrity":"sha512-+tTany3SWeOOjev4lh2kyL0rj5w7LO/moccN2diS5NWRr8fubZs28gdX00ubC4QWx3zxrNHx1XG9zC7MH7uw/Q==","signatures":[{"sig":"MEYCIQCrupLlNJgXHaPgyCgqHLCV5YDm3IoyB2qVBc4Hsnc5UQIhAINulXQJa6ESqU2HMj+ddAdo1aE9QGhiiJblsKcjctRZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Pd4CRA9TVsSAnZWagAA0+MP/2/OjLEwN6ab4TjdfrxH\ngixWzSSoTi90nKpRyQ73QZpkRtrW0GLfM5tcUwbu9Y9xBXAnbro80TgsyUvI\n1Mrsr6st0rDzJZCR8veOAO2ZVgebJjGxBg+FcuKT4fjwUD5rZBSfVV2NkVdt\n21SL0BPP1JIM53bVQXE/QcFmHTDGDLmcYmO5/kOw+yrq/PXF5Fd/RS7BNrLG\nBCA10QPt6BwQUVLwAXlxDLcBn76657v46HzRxOp0MWm4lI9rpgFWxyNXOQ00\nL35Q3ySThCWxraO4XogZifBu3K2uvjj44dxI8KOqpNKriCks54+XpDNRPbhf\ndlLfOueS2rvKh/6wJglAZ0hTUi7xKxqoCvSCmu6mBrgb1BKe+AW7h3qFgwQ3\nOJHT6HqG+N/nxCH53Xq197dSmVARreLruhySF1foomLz0Y8nRoyLpfgpCsmE\n1iVrOUowr/+tasRHAF2sV67HcJCfEtvz9xcCZHMpE3M3g0R3aTAeyJgRas3r\nuQ+IlOfopz80QCLVxx4DXJezf9XezD7z0hdNW5RFKzf342ODFptEQvvE4Ese\n9S3ktFq792t3oswDccrbQeEEHuURcbFTlj1vzeKzRBDTDmDRAI2eOEAg2HBq\nmcdFo/ZibCOjqpA0+vrYEYScsgoJxDeZHkUGdHdWz3C9py+u0en/oaT4wFYX\niGPf\r\n=bYLX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7584267ff.0","@material/rtl":"10.0.0-canary.7584267ff.0","@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/density":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/elevation":"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/switch_10.0.0-canary.7584267ff.0_1610413943524_0.27063876746284143","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/switch","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7461bc57428fee3b77564cc0a19124d5f2317cb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.251ac04c0.0.tgz","fileCount":38,"integrity":"sha512-CVo5Oa0BbZnGSpWnYlIxqOfqyEXd46qYOwa4alusbzH9hlmNjsIiMQRlTd7qQbRdvHOoauBikfxGEtrooNpLiA==","signatures":[{"sig":"MEUCIFKmQw71kQfZkNQRaMzEPrp/GiDk1fssTlT4q52InboGAiEA2cn+zUcLPIGoHCt+xMOGn1yjnxwr5Y7MDzzfS6CCB7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6iCRA9TVsSAnZWagAAJroP/j+TAwO9oBUWxUYkztTP\nAq7UGJb7msD8ESQuMgD3aCM2viM4CvlvFBbQRR58FhUDTs/C6P58UOVx4UIM\ng+gsSDpUH2hpwDc0ZYPuDpMgZHS3lLEfkVfXzMhUU/ro2VfKS5QDeSvYo4hv\ngZ07c+lRMlKF8C+XLega2bYrQ7FA6wwCkHF0Gu1R3RZT8QMaDErfVXqxPhJE\nzugZlsLEBZ4bSXKUMOfnMC81/0yATEH2IWWXu8y270F2ZEphEkSsGO+5+EdD\nunTlONtH92U8tNwPpt+mWcjwgGiaPYY86IrkR08K3wyxnml6fHIJOldh/jbp\nX1oRp1ZgVR6OZuo7EBBOvyS1qRXKkXAr+UsM7M208pylf3guNpLQYVnIalst\n8LO92D4r7tqKgy5mmLHdV6HdtWBpPML1f54DJoRUlH+zXCuuVw+BzDJk9bdS\nFGCj71rF5E1cgbhfqtcjDcya5e/Us78g3cOmSu9gtcnjKM4uAJpQXyfO/Z4Z\n/+nXLFKSjjYtqlQy5dqBIILtK/3XoOwEo8VrSjcv709SU6WsHi3a4n9xVHci\nUU+ChVZ9jJW6nNEUHtZ9u8KAe+HMwfvTl9GJWIPTw1uG4UyEWSD97n6EIpPj\nHX5UX1vt1s4A1xQIPAP9MB3BPb3/Z2ZO1MrRIjEQ2Mi1VLelTba2gBPZ0NnI\nMCQv\r\n=Kioo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.251ac04c0.0","@material/rtl":"10.0.0-canary.251ac04c0.0","@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/density":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/elevation":"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/switch_10.0.0-canary.251ac04c0.0_1610481314413_0.18238391936206244","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/switch","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.772cc1068.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f692ed8dbc5da42cc609e206e361d8f30bc2dd6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.772cc1068.0.tgz","fileCount":38,"integrity":"sha512-EOCpLw46PrxI3JVuk58DuwlM1W9aj0NnKLwBVZ8ZZ2zKHjjxnCZRYQikk7hdy1s6ykB2lYyipruCijH49IL7Sw==","signatures":[{"sig":"MEQCIFkbbeQwKfrkgISHlGwc57ctZexlHjM+BKd9c/wCWAr0AiB9GOjx8Cd6CAa/09uGFi1TRxzhnNSweJZ6z+NlQl2T/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4soCRA9TVsSAnZWagAAjloQAJUPtQVkKhQhlPaQKNoN\nnYeHuk7+Y6gjoR9fBiHd2rb7ctoFmth8WXFNSBgI9JWj2jJIpIkC8GeqN8w0\nd2hW20d8E+yOG19vJ01AHAvXmzBH1ossvL+lvyVgzZw11u7Uj2ke162QeF+F\nT1CjYYi41ozKzODg3nNUxajfSxbSGWPSvfM0VQ07cOd7WVP+J6FVbsggEMxN\nIEu8fsmuCzPFhRWEzRXR5jAtAbS5M5Kq8Q7ytZo9DXuKGQTwFBpPXJ7jIVit\no1FQWot7umRStaDX7wR9s5ZHZ2a1l1EmLd+3iC1L5fDQkFSjmtdyn6mJ3Qbg\nNCafLpgJQFfLlcRgtOY54R2D1RGk48oF1TZ0lzdXtalRPwOs+LOgtDhVfo9v\nWuI33osw+nTaRpH85r16K63B74X/mt6lu/D1rdSeh3RzqZ3aSrVxuXpu6meC\n2bhxeO8lswWsPfi0gLFGl5Tx9F8MGG3gOFlS/vDR3ujA+2kYreUll/03rRY+\nrX8yoir4XnYjGumaS29FHgFEMz3S/UZn5SR98N3us5NFu+bulxK6guffI/0w\n9RZ8fYb5miyTfEKvpwOfsDXeho1ng37ZIM0Lw3BQmRkXGu2t+uVi2WQDjOSv\nqS1vUwGAel1gTXnVt8C2oEZRNMG35A0CEQrYE/Qjx2KVcjstH6oDvHD+zV5n\ntIiH\r\n=mnbU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.772cc1068.0","@material/rtl":"10.0.0-canary.772cc1068.0","@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/density":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/elevation":"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/switch_10.0.0-canary.772cc1068.0_1610582823372_0.5559936424503613","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/switch","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2768a0243c375587a9c81c9e6befe34035b74ada","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.fe13dd130.0.tgz","fileCount":38,"integrity":"sha512-ogGT5j7xTKP372DtUzEofc+QDaJ0lGLmfQECIAbhplgV/TRpqdIU/w4rn30v6+mv5Y665Mcm1XsjePy48mAgtA==","signatures":[{"sig":"MEQCIAaAFS20wBfbYdKQvkx4ySkvbZDIB5jwHAdLzaPJ+aUeAiBIzXa/XBDxgOxzaMauwrD1B92v6mRrPr5CMVj3Ybz1zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5oACRA9TVsSAnZWagAAVPYP/1pzZ1Q6Qr7cTViEmTVj\nMvdr+4HK60DLEwQBhopC6IwLd2R+8hE5DIa2C3wkmKzD54J/+DX6wXqsceKS\nV/3ShslmUj6dmhGvzGp+GW3K1dZiXqj5yn/Y2WIMsxAzoQW7dgeWb1q5Qp8B\nWe1oHH3SehmCLqyoyWU2BNdpUsYbrU+VGsCS69O7Ek0s1pYZeQkXOdiJRZvy\nQpRctbf3OJTYLxSvvj8pyhjzOf4V4KhWVFSP5iaEhqfR5pLcXFDJgmBsoRin\nyJFsGv8lzPh46gkiKZ1TcUdfdgubr+Zn3RnxdASysf6Dfbgo10bw1tOQvdte\nG81DxmOBq1WNnSE5vp+jKFwlgahOrO9W252Whr97ElrNKRkPdlVMQWkCLl/P\nmBkbSZQO5f3tj2rlTkoPZdDp6MNpv8jf73VGMM4ksUkO/SnD6CVRftDNnPBp\nPYSc+MzngtPXQHZhlEjFRvAFeBaXFfNE7Sv0Vz2lMjvgw0vgDcT/Rw1caZgU\n9HX8UCItvdyq4ze9st6FSs9aH+Kc4U03yLuY7HJNvUpDWaEH7knyeQLgRWDH\nnDLiQ8wLUgw1RCX0QjO9+hxgOWzKa0qquUoLfmrmetB/ldVHjQBEXSJVaNc2\ndq+M4EUFPzOY0ZYF4tHHx2hOyjDTyYIu032+LveBongxedD+fcCaNt3PhWFa\nkOPZ\r\n=B/1o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fe13dd130.0","@material/rtl":"10.0.0-canary.fe13dd130.0","@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/density":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/elevation":"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/switch_10.0.0-canary.fe13dd130.0_1610586624488_0.9387166236148157","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/switch","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f4490d719b3f90b10b06f6bf229622753638ab3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.c7c5da28f.0.tgz","fileCount":38,"integrity":"sha512-cZwNvwMUEG4UQSqDwtotMymDcLYhM4PsphClXyxaQwhBJbjRDgXFPSI/QeJnqDA/IkorHQ3rNqaxLd2Xs75YMg==","signatures":[{"sig":"MEUCIQCRzUpqBuEqSxF/yZB5NUYjJxVGAMw6TM7d7blNVQ5CkQIgIuwWoeHSE4uAtp+8Anx80uAcRH3oCvVfLh8rn4eqjcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+SCRA9TVsSAnZWagAA6qUP/2fUBBLkxB95ew4a4lDa\ndUL0bUUq51MNK4X81CwbdsSna20uhOa/IXPn4m4miodOqqit72jltgdC41yU\nkv0ZN2Vq/fru3jI3xriDoKjRiT3au1oQrv8dNPeZm4pjrQqw5RKWxxNGqckZ\nQ9CwHLJ6tRXKOT+JtINZE++c/WFsgITnlSwcEWg5/HqB/dEc3EodEPZBcCOe\nxFe9LgxX5tklGXCIYGxxaZRJidKRxQ0Qb3z4Pwenh5dO4puYZASoEuwR4c9l\nzQkQyoaQ2x7GkMf6pXhFcX+5e4cZ67Bf0g0yhMORa4xxioHmMMF68057QaZv\n4p5+VLdY8GWixwmgx/A7wIhqltc4hyZM0NKnICzm/4fyJ2ZpmmsWeMeNTIN8\n8Z4AIBjpJS6BhiTqmQKOm0h10CjX75p23vmWVj8AJtjZqcF2aiycHOjfmTrt\nMlZVVF+rKvMEu5uN2wcpSKgGCOHmcgoJ+BeErhG1c7bNsrZc+904IDLFRyzq\n3O9cCi7fOBfAZXfa2AnPuRY/BECJv1+H1JRZxBqiB16m4NqS03kfraGkfhkl\n+WB+e7FyU9PvHzZHEa0ZNcud7P/aKNbfltJJoZzZIv4IkweoF1xiPIO/1Ghl\nlFdLDWS+X3rgutqYgzJBF8O97WrO+R53nwKYKDZB1aMtFxgYV85GoVvIG4zI\nOovB\r\n=kFnZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c7c5da28f.0","@material/rtl":"10.0.0-canary.c7c5da28f.0","@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/density":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/elevation":"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/switch_10.0.0-canary.c7c5da28f.0_1610588049806_0.4130534492553206","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/switch","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4afab33bfc21ccd3ac231bd04c2458f60609619a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.b2faa116a.0.tgz","fileCount":38,"integrity":"sha512-T9Wo1NvYzTeZQ6G0fLTY9P1PtPq4paSHChmKAQtN4L4Y8kZnGlnqDXb2MphwGYcIjA7p/cuabyNjg0SJ6TZOHQ==","signatures":[{"sig":"MEYCIQCayC32UpK15sttPZUE/+HsliwoGOQxJaIhYkINHUEkFwIhANUIUBUibhwhV/7GeHAqLXOnxuQ5FAYeH31MHmb6TdNX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJzCRA9TVsSAnZWagAApUIP/R3nmF8b7vMejB8Pvu9b\ngCVWFj2f10eQWeVB0TRYNDZiGp53CT8ASjAc3JoS4T0YGPSNwu86gCtteGkf\nfyX0JK/2R9EFpbCx9gk0Dt56SODjEJvhXGSd2LawXrSkhmL40TPxrQDHzKsd\nKTZ9C35/RZTfjBTbumOBs00YG3ISz1egOqKheKgaeKeKwsojfvWTn0Fm3XQC\ngBolZEDicbzq85Q5AC3EnAE6PDRYAQzrTshpCseJ7P5E3r59Zcob6y0oLibH\nwJJHHGhvS3iFXfBYAT6IEy6Z/FMEbyPGdsZyIGM5YQUrFvOC+9D0ze6TugkQ\ncySF3rQPC0Xpic1PrzC0IjMSQmnTrss0k+X9gkjMqCvTDxqw8nTh9mpRPEP9\nKy0J66BFKHDs+V6Jpe6uFy4cg0HFjbVFMi7DyFZbUYolg4GvxWxs/9oHFXkT\nE9HQ4Tl9lMJKYkcwsukXPkkKCgiAEJsswHYWByTh1Quvf8AixCy8KToH6TAf\nPwR96BwAOgM6n67OV7EJSWGfrwv6r1TkLDzDvzfoXPxQyxdjGYvKq40yYNZu\np0xF1wpnMn4UNRGywZVygqWxt6ylPFHAzqT9me2xtu2nbi68XN0ERcq4Ch5y\nZ21sRA17z7ReWHo5rSKxxOQjFgyugLvahQse7V1T3j3G4D0ysL7wg+VlfzKX\nw5mA\r\n=gs31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b2faa116a.0","@material/rtl":"10.0.0-canary.b2faa116a.0","@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/density":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/elevation":"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/switch_10.0.0-canary.b2faa116a.0_1611084403207_0.6523361702908201","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/switch","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da0aebf56d0b71023e62d9a7be70f6a616d9118c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":38,"integrity":"sha512-d+7X3qEAOJll0vcJ5FG0vtT/TkShoWMxPT5i+XBgsLNh+9x2CjLWzHhHxcDUA2EYUlzhmZlfSyuElzo652X3gQ==","signatures":[{"sig":"MEQCIBtSAlPGFO1KJOYEKhWileHyk8QlqjqFhyMrJWAaxiiGAiA2mJ0qFeU5wE2rsc17PEaPEGFTTUx23H4fubywaGpr1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2MECRA9TVsSAnZWagAA7ysQAJ2pyibrHrqiFQfw0kdO\nUlfYhXyA3dCmVyv9yoK94Z3+TRdUxycFq6ijBV3OHB01u46HfyMuVzTUXeYS\n2lONdC12xj3C/4C0er/psFjJ11fKSKRpu59X94hrfAjABD/QemN2NR0vnkJH\nih6mK/k/wLA+H433lfGk4HCfn1y/oehvaT2HJlmpHJtPXTbsq3Jb+6JodX+Y\neVny9vdXmgSjVaI95CfrNc06cr+b/aIG33yTirfX3IDHQnHLqOhYGfn2Lsgm\nZflQ+95Vl8x1RwvPRnFeO6WzHWTsY4EHFMBn2RYtj4jvlvAECPsWjJ9J9J+U\na+S9Tht8Z5DhHdIEk5p98ocJn5MgplaQOn4jO0QncosNoBsTPbqkFMNxEy/S\nqIEmS15N+of+LgbGLj3v+FKF6jx7ruVKLLDh0yRpTYjTRGuVhO+WUowsVAWm\nq4fsZMGsd0IawrDDKGb6TcPhoNzeeV7vAuWWNpJEXBF0QO7TkFKpSVZ8Q/Zp\noby0DXtsMO6ecpjTd5rdpT7kHtIYiVRg0b9PeEL0Ke4fiDZ+2nLC8XrU8nAp\n6kJtY1+WMrpyMZTLcbjR/jnlUr9Sp0mUxA6eoN4Z3U7o4xhMxwJ2OJROxpUQ\n6fBpPp5R8siym11Kdc+UnAFKbOnW6mqcIdN0ACNTVIXK5kSmtOk4wJz0lTzN\n3qXl\r\n=rPZn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@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/density":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"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/switch_10.0.0-canary.0c95c9f7b.0_1611096836355_0.9936490763233781","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/switch","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.5268222c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9af93f62092ce87306803fdb5aef94eece2961e6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.5268222c4.0.tgz","fileCount":38,"integrity":"sha512-tD7j6fsR4usFuJkeyCvE8i9B+OnCiZOLeqpdAgkDUG4VkMd1XMsweJBDIiMD08vf/CJ4fxElVYsF0782H+xtqw==","signatures":[{"sig":"MEUCIQDKviVKlhFC78imDmPgeipVbO5ytUbHoxknPjFY3sdNUAIgAMUUFGp5eqTnO+E75EFkHzky2W7qV4XhD0n8GK+P3us=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIIuCRA9TVsSAnZWagAAFr4QAI45Coo/SUD2puzZyAPQ\nOVLj7C+MaWRy718tfe9zxe9WE6t852hKh/4BaqR0Ea42usQSPNuuNQxRErQ9\n77LhBc3ihpJk00+vL40EfYuMN6Q6YuSQMG0fTJalAdbn7FxKPgQLmFWi/0bw\nfz2vPsEPNhSDhcBHonAqbts5YUtb57lVGYywK38P7wGMplwIDbjItjf8FB+s\nvoXdc2+xJPeY7X5s6KWtmtloRiS0lNDxBOdQ25+gSaVeMaV1fmUmh4t5qYEd\nu4CX2+1lB++TsCMozSL17E3GB25BdZsJM3dahKHkIR+soGDrEBHItKX6GOmM\n7MyUqDRrJmMWtIUrH1By/AXaGOvSjlNWHC8rX/pYnU8jThMvMA/2fhFTjYC4\nNM0c83pVnqr99esVY62iV0Dzhm60l1b2Mp0Y17vMJMqfXhkzvfbgs727LC6o\nofjGaQlrJWoIUtjPD68CgHlt5gjbNDWpx+K9Y9NCGP5z+sOKIxjf8x1Le6a6\nb4LMkV3+zGqDH9TshfK9pZ1kHkCF/acmJeFePYI/J8xhnQ8cHxtm84RD6lho\n9qiqhJpMtpXhXBioI8vehGdYVz5rzNrr73M83uNwaniuqs/kynO8qUCozwYz\nkhjGbufuCG+ZKSIAXvdKf4I/aWxXa1Pv9TZxSPyEig4YMHDo7sC/TEzUm3Q3\nMidg\r\n=zr/J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5268222c4.0","@material/rtl":"10.0.0-canary.5268222c4.0","@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/density":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/elevation":"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/switch_10.0.0-canary.5268222c4.0_1611170350280_0.31250428233350314","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/switch","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20950818cde23f2d19a9273d792aaabf031c1c7c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.2ed2d829b.0.tgz","fileCount":38,"integrity":"sha512-yefoEueKUyBwpaFFSiEAg4RMMDdGhwS2AuC6tqcxgDgBza7kUsMOI33RK1tHb6BDAfaCAcu2kdJMPWoEEQM5YQ==","signatures":[{"sig":"MEUCIFa2A2OVNWoqPkinp6+sHsgWjiEHs9N7xr/BW4Gu91+aAiEAy7mcw3TOXFc5eRP82NXuWX781DJrT5llVlByboCNOZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfYCRA9TVsSAnZWagAA0y8P/2qLTXQ0lGLDW/tk3Xo+\nzkSdzyt8WlJpTdtew1gABffQtEoQHYbbRtsXxTfGuKmG3CiowxqB9cyPMtP1\nvT+yFrKBfIAlwt6755tCU7pZUjwOVlZ+74Fb4rQLC4za8xk5w90EyFOD+hy/\nH8LcZ4Hfw5jzWTysjppJG0izfFhphGEJDsYvxtp8PRfcLxCzxIpA8SpXTbbt\nRdTBJa/Kk+CokqHCnrbPmhJ7xW2Wen+Wm4ABHaocbL1D1lX9sTUWjAq2Rh79\n5y6CGjFbbt1lcgFfBqyCP6gGxgOYMyJ273oE3JSwXZORzSovJ0FZTpyEHLOk\nx148bYv2cnhpKVJPyhtyWx0XERqeGSHh2Mji0jqieVU+wr+4+Ud1Uxt6615z\n8T8DqdHlPBVXFSkz4fG00BUL3w+9d2TZdhFfrrMerQFcHrjmuS1bhYI91a4t\n2meQi6T2vTVHNtQUmsVzk7ZTkAZjgBI62Lv4e956h6lX1/PrUMolF/mkK1pi\n2ORkwzz4Cx96aqSHd92R/YtU1FKnF2aCj5X6cfouZmOz16uBgbUT8L2gCS7u\nrGpWhAr5TSwoG3Rkw/jEgyiplIr8t6hEKSe0GyavV9jCDikyDL/cvqPD/WnQ\nyeU7W//02T26nL21X4tY5lBglGUmm6L5bp+nUbvmxju4auI51uVM8VZ9AGt8\nvqNa\r\n=Tc5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2ed2d829b.0","@material/rtl":"10.0.0-canary.2ed2d829b.0","@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/density":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/elevation":"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/switch_10.0.0-canary.2ed2d829b.0_1611184088025_0.2720818458379648","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/switch","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8914777775670e5a3eeffa721a7ced03054ed426","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.df00c2b30.0.tgz","fileCount":38,"integrity":"sha512-AX4dOW7PwdvkIMoa6DO4HscGz10j30x6N3YcLlwrOIlxg1x+gUrSvPJWkC9IoZp6i96xbFh7ITqwmidPcjP1uQ==","signatures":[{"sig":"MEUCIQC6dHJjYpE+P/OV2JGAqM/IgGv+36AGeCoTi7ygOduSlwIgM86Nzq0a6yQtDBVKBKwR9cGZVsvxPBmBcfPOchx9XI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdwZCRA9TVsSAnZWagAAo7YP/A61ZMRDRLfi6kAIzDwZ\nTgZsCbf0thAscODuvotn+qlom6jpK6830wEDTRrFmhVJXAaVVOYb1hfc+PCm\nXqSEVKkJAMeTb94wz41dR3NjyB3aHhq6jmNjpBk9U+LIdeM5+sMVqb3Y+3oR\nT6xdQJrAvnth+of3fVPDQBbaD903tyWUnGwllAWl/UoSHS1195/3r/lYZAZ+\nhHuCBZFH46eBV2Xxg3nypr/RVjJ1LaD72Zd6R4ddhaT5QQYNwXF/YI+WCRBy\nJyKasGoltHsWrmrJSaqQ+yuoh2iKOVE7EbmEvM8pZQdYqlvN/1yh25DpL89V\nPgqtyWBuorSUE3+k7E0tT0NE+toE71r7YBSdgiljgn+j5upgzto/Mn2SLkRw\nXuTWARY+AyEO/NR6QYNFdoBkv0lfJZKeF7KHuXeUIxanZPhf3yB/r+IjOUK8\nYzK3p+3QrAhGQdursuGO3bCBxu6vaKI0OIW6kOTw8hTTCezOeSdfF4p5zW/a\njkHAzaMGwySX16h5/jG69h3X5pOdwqVsRTQXN73AoduRgPNp1B4WlDAwjzeY\nrW9i0Gn2BPzfzNuZnbA22kTXp2ycFqI8he3brna2SDO1zMnbJs7oO1Nw7cBm\nEeR+ZpJaU4cMZqtZgYVLjRlu4dC0i670r+w2xb2lYG/8iqeduFCpzLn4RGDZ\nOSzB\r\n=u+w7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.df00c2b30.0","@material/rtl":"10.0.0-canary.df00c2b30.0","@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/density":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/elevation":"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/switch_10.0.0-canary.df00c2b30.0_1611258905170_0.4706132546469115","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/switch","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcf8236179e72d1998e43f457b1be4878b9bdf58","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.fd61b0476.0.tgz","fileCount":38,"integrity":"sha512-NmfuJ0Hi6Wi/0uiVSwVk930PPrGDhJPDSyQFVrTELLO7Vm5QyJNfABlZZT2h0UQ+vbAGUnH+kfqF9jrhRYJ5iA==","signatures":[{"sig":"MEQCIAjLklqzOuOJHE6QnPSgtfKVhzW/sH/TlfK+/WQziBuSAiB04QbGbe5IWQLLmXNH5YpWcF+u1cIhPDupDtiLHMIjIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+GCRA9TVsSAnZWagAAji4P/jFtAwX6w/GLi967D82v\nV+YAMtxXT0/r5ZEGJ7joo0PIZgyH7tpcqzhrfTrBNTNaXrL9UfiD50Ns7jKw\ngZYzq9xRW255Jzi8B4e0RFNIxy6yw/SiQJ7cZBWdqYVWeOWZ3xKIqxaAt4OD\nKWqt8B3EPitRGSlq+rccnMB3iYkrD9iFTLkmpVnVMhU3pAUk3gxkk3JeOrNr\nWApQGOyi854MEhxFXWcohgWY3D9Z23ay5GEd/4K2KV8NEz6kjmYwcrMMlYbL\nl5tm3XJenB1QJxvtAcT726jbfl2SVz2glkpK0I+f24kO/UUz/Xu4ANHHXztt\nyxoue1lCQXphoq3Eo/1CPQpCLia+rTalR1BZgR79bDPjfUgEhHeYzllXDY0R\nWguulZXbCBRlZhtXt2MaLw88dlDtxzP122c1cXnCeoZKbeUi/pAwOE/cDvyX\nQwpzuDdjzyPVuSsRZSt19vkVoIKQojFrI4zvcyldxzqQ4agch4p9PlhOpTHr\niZF6Tf/bI1qYrUdfHQlxfy6iM6x/zARR0F/u5QXu2moJINrzhCZ/J1O9WrQW\n4qyL6usmFJot0A5jkx4Ue48jKiPsyofDd1fmpb4CqjfykTlkWP25J8KtKDiB\npZCgVIU7cU9FWxmyzRy5QsYB+svFoVl4ln7sG4lYaO1YdKRZfq4mEsRG0vgz\nEaKp\r\n=m7Bp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fd61b0476.0","@material/rtl":"10.0.0-canary.fd61b0476.0","@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/density":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/elevation":"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/switch_10.0.0-canary.fd61b0476.0_1611259782087_0.684495480113146","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/switch","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89eed5e274ecda34bd8ff56f474c3c5007aad40","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.3fb3a0265.0.tgz","fileCount":38,"integrity":"sha512-J6IZcamxG6YpeDL0rul5074uT97kUQv/Hg/ycvrhYWWnkDfcdcyPJ4/MjANA1TG86+ljoT3yis3t4P08cYTIgw==","signatures":[{"sig":"MEYCIQCYkzqM474RJCxXX/FmMIUGHGRfghfRj9mnJU7SSYTtWgIhAPWbVRP4IIUtqW3405d4ukOxrpTtlmwb7lOCpM/Fu0Vu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChamCRA9TVsSAnZWagAAXUwP/jt8Ld/fntSkDVip4Mce\nA1YkXfHtyeJxaZZaIDYflxHu9cwVvOwrC5ZFgzDsw7Rz5IG/EDDf/rUmVSSK\ndEpJ6XJQ6tQjeBmESyj7d1+TtGzhgiInEyBE8rEOGLWOoApzrpcbPQTBMhPV\nSjM0+uvp1+2TU7z8HA1wMqRSq1hchz+tZV8vPxF8Woo36J5ZKBjrYpVJvnpp\nnFORjJCBuCp4T01ld0pxUfJGBtYSJG98oQ4LxI+/iJhUR9LBWMzuy0jrVQ6l\npcxv9lj5abt65uxnAUhCqb05gKateLt3eBNNscZe1YpklEVhy0YadVTbI/6R\ndplJUmTx0Y1V5+XZFcU6uR4xgMwBPwwo0/w/9Q4J9oBJRnett3j5V/zu7OH7\nWNd3aMiqwYMt/zvP+zliMSm9ApRANeM2a0fr6oGKKEdFph2FfqH4pjeEXDcB\ncXuEmwY7LiJie/hWPygbv1EBBi9uRWSAsjlkvquFaBgPDSxRvssKMngTi3jS\nhoxNNP4VWgbW30+uE/sN4sqYrmFtu2VyZLeg2zmsjOUilo5+dnNREll/Feee\nZNlMJSGsrDPj+5CGbzvNUxS4keWV8+Wjp7ewlJZGl1A9B0yKh2ceahnJMs6o\nhfb0nhw5pRX4EHv2D1zIgvzl8Fk3ZdVOLFjRIS43ywTlEhryy4JrqbiG885I\nDIeE\r\n=FJCH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3fb3a0265.0","@material/rtl":"10.0.0-canary.3fb3a0265.0","@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/density":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/elevation":"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/switch_10.0.0-canary.3fb3a0265.0_1611273894209_0.6786905778175987","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/switch","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.07deaec27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"650f06b4995cd76b8fddb8ca60a61ee704bbf714","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.07deaec27.0.tgz","fileCount":38,"integrity":"sha512-ZxJBU1LXkROiebc3Q1bx651L7apB2pJ6nAhB6p6wCcJXM5z0d1LIwIlC4j734uGRCM0sy9N3TTjX5cTzMpvH+g==","signatures":[{"sig":"MEUCIQDUxsEenZmoyQiWQq9qiadhhzZ13ZQXycoxG1+pLguE/gIgEZfEsIA9gaPOQF73EH9lPgeEAZcTMXWUK8+5La0Bdco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwO9CRA9TVsSAnZWagAAbWUQAIiFic/ElPjr82TObNVL\nXVC6gbj716ifHvTtGU5CQPcSpWg0Q0kDOXvBZmR3f6m5J2O160nek9Ad629c\n+Z/0vJgQC2Y+mhofhTZQJZDvK8PFieWuv1X2WprD+nsKHSYEsj2je07n3NwM\nNprZWqGnvSR0GB2m5IUirH8rmntvs0gtX6WKyN3cDn3WENlasVBCEyInlkVy\nqY0RGzKKGrz0ja32McAulRcPvzum8gZC6ROozEUO+AvJ13IPWxn2Rc05VQfi\nVpuzHH8kLw18gRaiOFeOxNQ5UqLiW8EKEywy0f+gPyW8ne9+jheZvouAlDT2\nqIKi6iUGgWqBxRfKXc1I3Ti6GB+MrFgm9h7Zj2cVM/oLX13O7U9lyvNk25oE\nmJZ8XspJ12uyQIz0v6RUbs6hM+mJ+UABWffvNA2eKri7QK2tnvsPDeR3sFiq\n2xtBfXiZ/Xan1JydLzohb504UsX0LA/vepTxtRE0OBC0vbtMWnoeTQ5lj/yd\n+MBs2Sm4BWHIy6jgAEoG2292AxXykFdkL+R5WKCC+ObUZzi94ZKutBowgpnc\nF1OzpSrMIb2/dL0mQKvzZELnz7YEzMqEL0FPzpdVnhQ3MiJ/jFbQrL8JMYaH\nvQ3/aaWPZf4EWvOO6RquUbvikZIvLxdr3wX1RkTIEWWgjubNPyqQFkDesCx5\nQALi\r\n=wtWN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.07deaec27.0","@material/rtl":"10.0.0-canary.07deaec27.0","@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/density":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/elevation":"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/switch_10.0.0-canary.07deaec27.0_1611334589291_0.9789391540242931","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/switch","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be604a2d5185a678f8a3528913a5216e9fa86cb4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.d2959b16c.0.tgz","fileCount":38,"integrity":"sha512-IhRm15dlbBClbsn9GQTIyKuVNaAxPXrQnryAhsULRNzmQOsnGRPQaEMLs4rmNDxoJhjKVH43qpPK3BryFgwq8A==","signatures":[{"sig":"MEUCIQDnK8LpUklTrATmG427fdq6sGIQp3qII89al5qiA99BwAIgD3k1fkPfrQXTPndOOSZxSxaq2eWd7AF1ujFPEnhQ6fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7hCRA9TVsSAnZWagAAJlMP/2f+5zy2EQeryDpj8e0l\ndMX1tAoxye1d/KFacSvgySDUJNbNTAdtAi7VBuWrGrUbKNm89gQKawab7+Sw\nwlMRiqwEg0UUF8zNTFe/HddYGv41QQgJIiXx1B/82GtXBclQiO2OCMkizHr2\nAaojtF88yrxk4irreliiR4+wEIbsYiaWvvt3hY9Ng20Fmvr0hgNqoaCY9vHv\nht7CJ2rjXJwMtv083K+xN/+12veo/YPXIx85D7M2FECWll5/uhIf1ApLLPay\neuq2hfqqJMKk1hMur/BCok97cRt5h9FrObswo/62j+wJEQ0yvCTtG9yhWx5f\n74rSIf00vlPRRt1xNODiRKxHQTdo9LTMRf+C8Li5HXZOjmdhOz0o9XhVFcjr\nk+QPM4geyuomy9xKMYtzETtwEiP9Id2rT0vnS0t+qvI3E41R5rnhGKFNHSjf\ncmMfZLre1h/ilmTDd+42ojaL+tqCujni2SSU7WS2FmzWUN3wBDoI89QkYiVj\nWJWCg7N6NeMHbj2KGQvaFP+ocHf/Ud4xA04PqZ8DNlLfZw2p4MdVf6X1mU7K\nBpb7mkozNlAmkniLtpsB4IjQieyG0+UQO//DjbtAR0ePuNXg+6LLcJf4mNWf\npaU+zdMseJEVmCBXg+O6Tedva2P2/OiVY3M0dHmn39MVw67OrJUmGGl3Cqhs\nPR7a\r\n=5ZbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d2959b16c.0","@material/rtl":"10.0.0-canary.d2959b16c.0","@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/density":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/elevation":"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/switch_10.0.0-canary.d2959b16c.0_1611341536717_0.8117766339148742","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/switch","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e35b222500e8cc61ec00d725ae38146f540f24e1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":38,"integrity":"sha512-0deubA2dcrvbUGZpIc8Oimt7J/X+1zNMxM8dDCFvJkvWvaCzqXH2d4nnByxEB9HGCN/HBmxmnCmeekPvP8cBVg==","signatures":[{"sig":"MEQCIEYTSqzDvLBQpZ1wnYskYrQIvWbO4gj4gs0s0fo/7JAiAiAcKWWip1+/Uq2BB5S0Umkm0HuK18fdRN6KgTwzOuaITA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1b5CRA9TVsSAnZWagAAU4oP/0En3qE9lkTqQ4DgxlEf\nMlOwLORzfgNiLnyBKu3WgP05mBMVMZQ14t0XpheNgw5E3h6LD/SbVBKJv0PM\n2GNLelC/PU/Sisd4v8MNxOdTh02Y8xmeZv7eFDM943Pa7bPFzUDJ1rqwoLPk\nXVkvFk66gsVWNxLJr302frKVQgCOpRGuMzLW/GgTvfXfjd9eIcvi6RzK1iZJ\nx1ZZQLhQLpMONo0VWnjIeBPv1PwY83lom3igLMKefylKoLovL+t+VTpdWX82\nQlc9Ts2EUY2cLL6T5S82qgjKtzdcTARuO7Yk7Bgb9bcFrYTPRPikDLRfc82s\nxpRf/HnAToX+uf6kzkuku1bDjEYaa7x6OGuYT7vmreE8FZ2MJKSwDm8UKQ/1\nrzQnl97NGSsd3o7AXQCkR8Gj//4j+vOmpMxFcSRrXDThJsM+pm4F0a0UWV/t\npfWRF6KLi+gtVY1kWSDfW04hrjyEIRlWlupVuaKiQLtiBNxs9seqNY2SzFfU\niVARrvBEQAUUSaVfbcSetvLNGaymtsE3iayWZnMsml3HYXCoGTcMbichkK/e\n2y79yBaHo3rkBt9QDuxseCpUeytyZRuiP4SQ81fyIvLf52UmmT6f/62LBbrx\nxtfXowBAFSBzqBfwC9BNZoDW+9X0OrTlIMbv4wTp/o/kG7Nl/Vc/p7SpdFoe\nNX20\r\n=dgSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@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/density":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"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/switch_10.0.0-canary.75f3bfe7c.0_1611355896585_0.7409718054991938","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/switch","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cd8308b1fc3bc5d86652a0404a2cfa46fdc15db","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":38,"integrity":"sha512-StYJ7yb8/9nsbkfHX/JbIgFj5DkHGukMRprdGRh5BJE6mRAVudGE5kOr8nV11Yie7SK/D5rI6RbZDgrclTvrGA==","signatures":[{"sig":"MEQCIHVKY2mGKih/N2vEArCWBrkvLyExdu1BvkrkR+5HBqIIAiAfr0oddMtocVVHlcBwgWplRdy7Du79lLLPb9OyklKcQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2FSCRA9TVsSAnZWagAA7ZQP/2EdgiUwELN+Oj+K756D\n+T5Xc+VQ1Awr9CwUqQuSrvjyfbKFPfTm6aJXDIKYF7AL7OXq3nXyimOHOE6i\nFPptYVFoPOfEJEJqmzhzQmzDZrlAzKAM91okkyAyjpShTmS2RYbXnlHg+U9H\nhvHdNDaQEWZfSGcPqHDjYlHC7smCo7uUC7+leIDfIaLP/FFsU7xKeAKz/wiT\nBJyZruSd3GxumOYCboMvsQBRChTgtHuyWf0divFcmZMSXscVKx+FOrgIuzY/\nddCQIFhupK0go5jSmRta19KwRIZzBHDqwAf3XIiECVfwZIHK3BchQKAApZ4o\nCiy6zBgeZW+z+ah0LlqGPYJFDLpgyulROsjvIOMwoSOvLuyUMptSSvzfimSJ\nyChdwJxmHvWOPqjwUKpuDX+3mG1LfJJeGQz2U8308tvBln2fxFR9kfoH6fBS\nOFwxDToVuIkmAw6o3kOaT6SWfpK5nLPdMh5yJ7pBjbiD+vhpe/kWCk47htpu\n/YNkln07W/yV0yeAw1SOFRS5B/Iju/bk2n+b51QMvizgC9YfWBHTsYyTyyK4\nqq6fbZIVKGD6ezyWzVziPKxpM6S9n9FwK1JuU87QfrD7FInLs/q7DLS8hGN8\n7uUMvmEiBR1pPLjov9+yPpMdqpWZL5tRRwcxGgj4Q67pHrNJyApUxC/GnXKy\n/nZB\r\n=JeJA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@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/density":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"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/switch_10.0.0-canary.b9adb7a0f.0_1611358545719_0.9319839683264577","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/switch","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28fade770f86c313c748e64d479ff19ac4f4608e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.d29ec2862.0.tgz","fileCount":38,"integrity":"sha512-brPc6zT5sVROH0NbuRNx/MkgNBYj7jDagpsELrVQeyxZQM92B5GqQmQ2sZIuyKTt5ri8os5xr8DaS0djSe0xRQ==","signatures":[{"sig":"MEYCIQCZI0jfW4XgGt/3Tjvac6pjynGHWvBSz6qqRl2y6RDsYgIhAMHcG/jnwa+KsHl9oBRmI6TBIOipNO/kb6nn+hjcw8pV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvCdCRA9TVsSAnZWagAAvGwP/0kGXaS9NSgWTLSY4Q3c\nLTTuG14IxtNXUty7ubfbkP97VR2eIDoergHh/Z3sSNaElAMc6dtRiXodMaOr\nESV6E58pYq6F2/53oZiVtuXmdbLzF1sNw34TW6QxBINlA8Zh3EcRQqVvv7Yv\nlUGECetMtNPVY/b4yBSDo6RymTUpaYXTobZYxkVMoIOFBMYp4mtPzF0MhPn2\n7cbO25sBugeC+icNO6GYh3pAyL+3Y/mLm1Mf9EDH5SHBLM5FrEOP8QUFar9i\n/oV/4h881GKVWcY5QH+HLqvRT9gf8pPTE9Dt557sQE2vAinRr2riuGUwbpkh\nTSWXXe1isjaYFGcbcWoMPI+/93mb7TCBIP+4AO+AzrIofc6UumqqPgXvsOBo\nPx6rkUaLP9hY+1p+iwv5OL3YbxdSoGqiDe4sPVVcOj1Rj7uf5kbKd8iq5osv\n6plQBht/OZu0Y84uanl2CCRb+xp09wkf4MZiyuqZ9jW1SCeQWWfS5FbwW/N3\nvW8BcUsC/KOQ+3qwD+l2SBaFt++U2ZEEWNPiSdPkv53Obql/+43opHPaZ1M3\nWMsiMoo9hJ3JFGzXvqLFfEsao962C9J7xBrJA4/RGDKgciPBJdR51OrPs+eL\nbpUh4zAyfDxD3sy27b3Icvw9rQGwOAOPyvdK0s+b6yw1okB6XjozZrl4hWxY\n1ILX\r\n=V/o3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d29ec2862.0","@material/rtl":"10.0.0-canary.d29ec2862.0","@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/density":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/elevation":"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/switch_10.0.0-canary.d29ec2862.0_1611591837011_0.7896664244412102","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/switch","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.96be07c68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"515de99f1cac9a772eb1b08f33514411ae86d66e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.96be07c68.0.tgz","fileCount":38,"integrity":"sha512-1+dPRUbRgWOQnnVI0+4LgBRR4OQfz7Q0gj6Cf407LZOhbYOM8CTee2hMdsV9hHn9VO4k6OOpYpZufZ872xcRjg==","signatures":[{"sig":"MEYCIQDFgcTHzPds/Y5RyAF621YHTnstAbK6DjoeEsdCmPT0wgIhAM77u+kWUVdZNJF0+uZSiByRu7g3rgPxYShYyl0QABd0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD13kCRA9TVsSAnZWagAADTIP+gIV12jJOhL8JIPlKpGn\nfgmAavA4nKq517qVllbV5nXV/n624wOfOfDNtfMFXFRKKe/D6IjS2xFMHKow\nWt1m70OIR6gLbhHa97F3ZxIg4vj9TxkAo6WHdgUgYBzwT9n9KtcqO1Hu9uwZ\n8MR26KIcg4wrgubRV5kdczxC8iJbA9h+AtF14TlidbFdWLAE68/bK7XBkhRB\nMWYyBPUrD5jb/p5lplMD+5487F14a9bY2zMuk/P/gWR/P/UGeryhAJXXBBco\nYIdMZi0yt0nHFGugAjg+Pqe4DjHgZ94KqkbovWEA8U0tUB0EcGEWk20SsKfW\nG6Sq3zJwUiElcCEI0LB5YV0xt/m95ffhneNb1ErfF7Hh5lQss2rnlC28oNhc\nb1oYDFyVZ7V2oZUiSPinDvhRCdBzoIGlGP0CaVJbADoYSD1yJEYStkYZvlZB\nhlCbpTMBe0QdCaV6uCpr6rgoS21eKNVeMypZnvV8+KYX1rh4jcvKZqJhmvx2\nGrq8LXTI14RWZP0hmgUeVosezfPliZ70SRjRtsfdHjbSJLlCpff4JiIu2QFa\nsngmxfx+LV5sOaq99MlO+muHjBheslffB5ZHJBh0OxsD/cfjj+tJzYuuuQl5\nqx+VyuJQLjyI7g6YcnOyPPVj/YhO1SvUPPgfuy6zq1BdIFUZRe8sprzDs7Wz\ng3De\r\n=FZrv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96be07c68.0","@material/rtl":"10.0.0-canary.96be07c68.0","@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/density":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/elevation":"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/switch_10.0.0-canary.96be07c68.0_1611619811933_0.008807525092183965","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/switch","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.e383944e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7358db72df9a5befb69c79534639f7692f5c155","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.e383944e9.0.tgz","fileCount":38,"integrity":"sha512-dg1UYjZYBGJC+DMBRr7DdT+ghXl8d5MQCCV0ABRIera3SvrjRD9QKO7OAXp1/dXibw74i6DmIZ8l3YqiX809hg==","signatures":[{"sig":"MEQCIF8yT6kZWb3cBfbWmbtffyG62ht3/9cl6DGn7ZmKuat9AiA9gGTLxsTNn4YV1VC6MlFMLL8BB4fqcO5oENJC3FgP2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QgCRA9TVsSAnZWagAA4b8P/2tasxQs5V8B9J8qWBMW\nkebdXGG9hRXue/RyGa8gOrzzsxNMzXYO07HCKZTDduIb5psl4QpQP0HVDasO\nT1vzqntH8aRx+ZV40u0SsVg/83jPhKwixupuBBOUk+bD2vb+VccSrMCQ26Fg\niaC8HyCvN87xNU1R7QG8zRzQishrLA9eg7hBHPmDseYM0Tl65mf3HK9rXX/E\nMdDGTi8YQmRzMV1YbbQqT6zaIeSVRon4S/3jVWichZjmMFDUUYg8bzqwzkZT\nyGdo98Oy/I0RcyQABg3YBKZW1c20UzAr/o4ssIAOtL2SQhUYZhkHTqRKRhcB\n0NYtM93Zf53osNS4ToHNP5WLuBETo4tOk/HsFrd5uA5C/tVctYNUk1bmi/g6\nYEE2ZJ2PLI+XAjwK0wd4g9jp559fEbPDDR3YmGVa59GQOOE8l2R7v97gCvp3\nLrHnhG/y/ZQmvnE4Jo4BRznoxdmYuYuSkGoAMYOxVZ+xIKxsoGzfFIzH19K8\nR0CURMJHJc7ft+XrLikuqdPE63AxleRBHsM8X3+hLacKD/ASUUC9jIDzKBP7\nDRYRcq2X4iOQWuPwJnGllqJl4nHdh8684c+ENdSiM/6dGzM3uxRYQGorp9cn\ngBKoY2f7c/JZnAWQ2lMYDE0A/lm0WDfxY/EZ+qg8dPR23sD6IW9VKkouOEzP\nNRd0\r\n=rsf8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e383944e9.0","@material/rtl":"10.0.0-canary.e383944e9.0","@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/density":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/elevation":"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/switch_10.0.0-canary.e383944e9.0_1611625504478_0.9905707054401796","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/switch","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.623af861e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a275224b4c27ff5221ac2f4b53fcd5b5d6e622a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.623af861e.0.tgz","fileCount":38,"integrity":"sha512-a4ElbMaDZN2KtpSVsEKekRbEp/6xw4+xyP63fFFlwGssxJO4fLGNZcIIlrcUKEPSakJXtyYsH0k5S6G8nsRCnw==","signatures":[{"sig":"MEUCIHg+futToKwsYiYZx7HLwyfbqA9MCvbIy02o7GQ4YbGqAiEAvKZAiPjR6etazUnU3sDmpBub/4wdsKaThycbEOY/7+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BRCRA9TVsSAnZWagAAgWUP/0YWG9G5erb49SeKxYVZ\nSXExv6GGuHiTcX+p5jDeEV0cBGGImIezHtgeF0jIKNBVopPLborisH/Ykrxm\nr3XE6tp070elmcOSDpZU3QXbKolD9+LC+qqsSI/ep/ViYgLvllT69hwVbobH\nxD/PRF0uoMVlTf1L3C6iA/ALnvBvD5Prn4rwEQFP1SN5JKj5l6oJVKdsFdTU\nLRuU+uUW7KPBwTbj7d9KFxrMIQriyDlhcBDnMbkUW4twemNdK9tV3WO+1mmL\nhZ9adMvVPk4IJ2M1KzzsS6vmi9vpYCIeeCLtsqCkXtdSfvldrfyBo/t6vxZv\nrSpWwBsoDuzaj1epqUaZe1iFcojuWPg3hhVgQPRMB9QYsObALy6m58zeigEh\nJIx+mSDIe0KLUEWjoMZ1AGMJP+etlY04jI2i45Unk6q/Hi/IuPJQxXVgJHD/\nKuYGgy8Zt0GxlQxfteg+biC9F1p17Ai2ImGMSbzgrM/a+klMRutGNrMNr2FX\nsKfLloS3IPfDZQRYUNRlVCnPDEmAl4j3BGLBB8vlmSyB9Q2fpiDfyafXmIal\nfK5rbfHVNbaA4uF9arEoe8pbdIZmybs8Wr/p+MeB7zJO85fn8YREAp1ug2+v\nMi1N2nrJ4tWqX74VW7DU72ys4NJhFZb1lt/LfYLwYFzqf7UM57teMvqT3Ql+\n9U3Z\r\n=HjOn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.623af861e.0","@material/rtl":"10.0.0-canary.623af861e.0","@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/density":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/elevation":"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/switch_10.0.0-canary.623af861e.0_1611632720417_0.8318167153369735","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/switch","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d395d547aec1f484e005444c984f65d44af6f20c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.6863fd43a.0.tgz","fileCount":38,"integrity":"sha512-1EOUtiXOXd1A+5KF0MBnGQs9MEWIUDfi3B/yk/ebVaP3LKO9fP5kfHLPQPfDJegSKwoqcnEUaKyUAbLWOpaSkQ==","signatures":[{"sig":"MEUCIQCyOXMbU2lQrrc9zo+88ChBE0UJdMAOjcUBCly6TReMvgIgYwV6864mgNtyN8koLGdnEyIcyyBKELyb9HHT9S3ekF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIqSCRA9TVsSAnZWagAAvbIP/jQrLBWBGp2ZsI7sWTso\nT2/tjCGxldGhb1MUjS2qUFOwQof0WaF8sgJnYfv+7AGM6BEtjgMrLNaOmyDP\nHq8u84AzlTHAt015MR+zx2t9Ed31jXTAD7boNWJvhAOs28xpuv62jC/NToHe\n5zLSc0vb1Yk0Yyv/dqFELsrAJvnqepNkX3iQnXCyWvgyiKl9NC5Wy4sDJ4HM\nx/PR+AYCip1/YH5KdJMMNEJeIkKB3AOMmZ9MCM9W/mhMU7vEoGg6jt2a9eWS\n1sc3WFcDDxykAb+50yb8yYKiE4czCotiCwt+ovp+dBc1dYTxmkJmGoRaxWUC\nOlaAmTEppyx9GL218ehXsJUjVC3yAGHE+fm7hizi8Qf4/xVKnXKgoxTA1Gvg\nxkYsMcJPcRY1Mg7wM3PXBTZsVo9d3xnSzpj3LpRwQQKC0MJ+OyyQnBPWJ8Zs\nxGJGn9CG4W3g6TR28pjD/fbqh3Ti6wXc4D+Bu9lNJSEfuuQdfAlWitPujlM/\nCi0xAp4QzwMBkXkc8Adb2eu+IZpOAB17OsUq5k4jWjdZVvyOblvj9QdbCmpt\n8Ua/sVr+NquxzoTI1lqrI8ThNTznvQ1JE0OC8UF163tKjlgy+5kILoK+lVJo\nNSk6LE0FSwHs9KxBhDpVvyKrUPwyA1KmGLamI44X2TYKNeGY7nQocN0KHyW7\n+q3f\r\n=qRTd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6863fd43a.0","@material/rtl":"10.0.0-canary.6863fd43a.0","@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/density":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/elevation":"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/switch_10.0.0-canary.6863fd43a.0_1611696786205_0.787942175960386","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/switch","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f7b525d54b21677c3cd9f0a889420622c01c371","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.ea55b87ca.0.tgz","fileCount":38,"integrity":"sha512-5F7mfX5pM4h5kYUEuv77XbirPqX2spnXqMWwKrrxfbs7m0D8WiDwhDHYHcca8+vlzQHTHExfNdSIogJe61Cc9A==","signatures":[{"sig":"MEQCIHWRUDSypGoyYzGqBPVT3nb7BOhGEGN8i27bMZjjAaRIAiAolMwOx2pXoiOfG4sNiSoIyqRIwCKYzgLnIImgRfLtPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKm4CRA9TVsSAnZWagAASvwQAIxwIrhubieIWD+5/Ojt\nKqhdaEJ5gElGsbd1Ho/kOmSkBd8ZyFnaUaCTG4Ehs5Yqks296qKVfYHGTHwx\nUvPAuc67jcmCv4kxquyqNzkZDs6eFNBBIbYjgr+5yKZlo2XtvIEKlVhouM+y\nI0WwAN75YNYs5glxCsyex9gkA35q5XA6v5LVfiqlt/hPzsp97kilT8xc/mfc\nEM8S6+l4s5Rx/4j8wLB/mq8WMAy2qunm1OF+/HoJnYcj0N7bqvRcRqs+Y7sv\nu20VzLEym5d0ZE0PXP6vaY+3R8rSeqIdTjMsOB7/DGORkHC+11AqXrEfyZQd\nesJQ4LXUQB5ltg8YohMFBqscp37p7prrN64gOAbZIEKQOk8ej9d54Mm1PRKs\n6R3q/0jrdLoJJre9JddnUtXoGcAVoH3mu9Ab2vkBZb/G6dkmoAHIHPT/M8NX\n0PBw+7CkN9vTuNMzuV3jleY+0B2vAebj9uldtNZgC0KgDjnwDs6DQ5dnZ0SA\nfq/JJv3LIcIElT4LzdpS7HHssLcDBJ84iuknVAZ7dz+ujAFKXb9H+5COMOKr\n4ZepKsE7flyd3E/UKci40+D7V7TgeYk3wqDuOmgouEY90/BV1Lhv4gRib+tB\n4KdwCDMF362YmYJxBUqR250L6ouv6k6Fme7gfWw82V5JHbV9YoVhmejX84PU\n1VYt\r\n=rafd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.ea55b87ca.0","@material/rtl":"10.0.0-canary.ea55b87ca.0","@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/density":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/elevation":"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/switch_10.0.0-canary.ea55b87ca.0_1611704760033_0.3630187767613957","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/switch","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1d49fb721a1c0c422049bd6c212c21d4c894e5f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.e902ff05f.0.tgz","fileCount":38,"integrity":"sha512-O4exIOOrVHG9ZiChTrH6O8JTETRFkJG6QlSDwUnO7n9IWqlLWcTiep2OrFPKOon8nZ4skaLlEUnfVKeRmYRnzw==","signatures":[{"sig":"MEUCIG3RW4DDPCpr3B2Y3awomyS+QGjvMl2JvS8aIwadSzxrAiEAzR/larhIQolEkmblRtxMcbBhKzEv50jifn7JDQL3pAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK36CRA9TVsSAnZWagAAtUUP+wXZ7vDuFxmz5S2soa0y\nrsgBr3v4vAJLqot+4D/FAX7Zr/A00S+8TbqLBAQbJYAIvu8TN9uO2JoP3KWE\niLaAwq+twSQR5iFOSBlMme+8prOotHjoMJOYVWNNFdFrrAUVrCrI4cZLVY+1\nkfKegBVUK/3+FIiIFU7CChLPpC3TmV4MDSav9VTKzk6oooVmPE9I2g/QDZJL\nO5NHrZaDXgDotw9uKzs3kgSB/+E9cnL+R4W2ZuOVkWqRH4OdBnY44Hd2jGGQ\no7bszW7YRYtQnanfaKSt+VrqtNq9AASInkCo7Ky0nhFGYP0Mpzpwrg7KSeaE\nsNS86dtJXtyTZiFRWgHSkLD9NbY/qyB4PwqB2b4c9hTypGopf+KBOR1ATSb+\nLbVcpYb4t6zirUm/9x+uBDWrEkdpSvRuFxdZjivrs+/HV/eeZ0JNqIvGSM3H\n0ieXqdlsEWVD7W/r4V1fx6etffNgcu/6yX0POiRWcsiTO4GagOuaemENpPcM\nliZBk7vHTS5VNXxJ8ZZvXSvloWxTXZtoh3FEZb5/G9pVvZ4c0Z5a70JCwg3C\n1yzbfO3MSkZFauBnkJXnMfRhBoQoyWQK/turi3tjSs9lOAC7Iap5oWv0eXqT\nO4jcmVL6rKKNpQipwFVAj+kTqGl0FyYJY0YbGLMtFyzPBzQBtN9L+4AzBqh8\n6asV\r\n=0chZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e902ff05f.0","@material/rtl":"10.0.0-canary.e902ff05f.0","@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/density":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/elevation":"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/switch_10.0.0-canary.e902ff05f.0_1611705849610_0.7519212265576003","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/switch","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1919cb6ff758b72030061b815f2a50479466712","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.2c9fc538a.0.tgz","fileCount":38,"integrity":"sha512-PQpw4GoIrohtmanvUueQ4elpWIIOO+u4lxJBu5oOWRF56IUP0oanoyRGyYdhbUhjZ7BNEJ2emUEpEafKaL3zTQ==","signatures":[{"sig":"MEYCIQDFO/z+mTwFDP/2sXRuOLk87hmko1BfMycy0UKCzzrSqgIhAOMGvkrDD3P7P5reL9rg1PO4C+DK+j+/eaHGoPJH8y8c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNlCRA9TVsSAnZWagAADv8P/RK+eC7gN35Xs/SwD3Ve\n+hqLWBWSD3t0Lcb81MJciAV/+l4HANuDYTQnwF6mRgOUUo5PDai5idd9cBFF\nm5t9ZZA6WnsfOJrXJKkvq3L7RpWw9msSycRMOuBGOtJINpsmv9u03R7NpqmZ\nGT1276CpkeO47l3ayA5wKegxNOIYP7i1VwJwBluLQxA4fzNhK/CX5m+7+NlX\nqpZKQAffNoJjBfGYhRwYMM/TyMFOUybAqV9HPRpB+lt2sZjqWjJ3z1TzpTl3\n+iGgtIZz7cwUon68OvkoOBAYGEckvIcZEM1onkpfFErYxhya/2l9BbcQb5Y2\nVqk67VokmR/epn2yM7/6Lkc2pusvHO0hK5xTLt6kxuXXnwpwedXt0wUqQjVo\nULi0I1TWNPomSc8FwB5kvpDHWL0px9kDxyhwQub7Tiq734MkIC3X61PD9MxS\nLwRRaIUps5vhp5UE7Q5/E8BhUzgfayoEeohTVMg3z+lK+oTVRsPpfO62f1lx\n/QCDc0bnYCd+J283Jim5+Vj2/FiOmbR8RpGMJMw4vMdEHQ/RXN2HCM2sZXyr\nb2rUbajk+BTFS1hDbkgLYDBSoQaiQAs7egUY0Q6C5GYDyNMFCmgrCtzSr+CL\nYtBbRF6CUCiJl311XOIsGJkjTQVt08uOVEoZ0QtId16FANuGMU32RyF+R6pK\nPdjm\r\n=7TLP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2c9fc538a.0","@material/rtl":"10.0.0-canary.2c9fc538a.0","@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/density":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/elevation":"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/switch_10.0.0-canary.2c9fc538a.0_1611707237376_0.35124663426025227","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/switch","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6af2332a1aeada26c7338ae25d9f7e3acc6f0598","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":38,"integrity":"sha512-JP3cwo9sVCGAPueqeaSVpfolGjTW+jNaohGgBHzZSlUK018t335LM45nl4iNjc5nNXQaIg9TO/IsrxJICxK6dA==","signatures":[{"sig":"MEYCIQDevKXZ6z3OOhYMo8xxsw2la9qDLFmEJrYOmB11EB15SQIhAPprKi3azsuEPel+hWMMgTA/0nP0V+OXCgGgKHtHSIVZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL/NCRA9TVsSAnZWagAArIEQAJxTwMTdctKG8nSvikNc\nhW15WL2OEZY9lWOj3tCMTNBGLueBjaivCeDN2ahcGBJSKZpZQ4BM2Cr9oc/U\nfpBV6bdbr+0sWNoBX1zeCj1H7C429+2nu3PhFEEV9XR16UIL7cXb9ZZF/Dmr\nw+wn6DRoThO1buKNDW4yRXwNafkLDBOX3a6AKzjKMT102rYUAf7IqZCPLxfd\n8wW74g10zfFP7JyhsTWKWG+FUaQ6K8BHfdClvE8aW+drGQNAEdusCz4MW+Bo\nG1RtOzGzhGQ22T0tjau5B0OpQ9m3rsSrVZLg78LiCdmr2kXst4QJ+igTTG7B\nG5mQhxZQo617r6YstJfvUkzCuhEqiOrcOiXGAFxxx8kUvjzVbeuzC+yg482e\nPiF6uAhiElMih02evNxmg1LWCAPZZbsGslsncu8gZfK0wm8pgRbmBlXviMOe\n3HmL1x5o3gPw406Z/Y7k3zEAqenpmJdOS1A4FFG/fEurMp944VbMBWNNTp8n\n8HU6qWd296JKp289Pb78JKiV9QNBg742jsf6qVHxwr19jr9RgEaXmx7dXymn\n6n5n7I2h6SdTBh/GiRwtysv0iLin4pkYCNjMcZEhUWXmn6yvCb9/2XeJ9iHx\n3EPPgjPd9xxhxOdjluOTv3D2WR0CbU/0+Z++iQ+cZXv46P+l4uV6JIEqgSiK\nlGYj\r\n=Cj03\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@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/density":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"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/switch_10.0.0-canary.6bf56aaa4.0_1611710412929_0.6759281353796975","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/switch","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.994873795.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7740197779e0d3a1853e9cf485d4b3d12dc8fab3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.994873795.0.tgz","fileCount":38,"integrity":"sha512-3VIEe6R3uTh8Yq2O3DEWbnv5hfQzVAkfHbEVYra9mBOjpZOw3G5I1doVIzM8yF3yiteawAxO8YKePg3k+Jn5uQ==","signatures":[{"sig":"MEUCIA+8OmIO/LtYw74VmJUVEYPvoOboHXbU5T5dl9o5ofYvAiEAoc0Q6XF/mme+PnBCkHvCamflsAbcBJSwDLj3RmXBgms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3eCRA9TVsSAnZWagAAZIwP/01bFmhCK++6PY3fEFPO\nGuCq/QO84iFHnel4V/3tYm1pU60e5YMM30m4XWcfhkx6f7Qh7MSJ7ASZz3hC\nJXBDiq89eIPiYo3AX9kY98Ksl7t4Xy9wsSHAsEPgcEPKss7Pr0uIaYmck79L\nDkHFMtRHtv/aK5JqLJMqpZ0oZNfkbs/D1Pw8/Nt/gDTEGqXIj2aUsQv2uF2r\nhFL9pdahZ77ARf/jmDKOOGyhFLy1O0RL/UZN0laQShYZTQcbHAz33+4hcymk\nbzhHVmaILFnROsQsNwejKXYNiUzmHulU9jHEJFW1zjyNwKc0v3npxwQgB8w+\nOge7/a123iZXkSgk/QCYHOD7J9KCRi9Fb+5Ifoe+XPcDkis5WIw9q24OEiYX\n5H21cMAJRT2Nm1jxoSsWLUdSV7ElHfrhfUrcrUXfPg3Vh16vq8RUaV9yYhRn\nmQLGJb3y7rmut/FwBBgvEbzBvo7JaBFj6btdSTgD0qkINg8IxA+kvbQ8TvlX\ngGIRycXyBAzH8kUYJGzfMBFs/B8vheyl8P2DBY+dJSDsuQl68JWahuprGsWq\nMqXndNBFDm6wB1YJwhChSVEra1Ba/NIkvE+k+Leir3V1SuguddDL5RXzo51x\nc/t2bJzHNNrAlDoFi5dgjmuYHXCd8s9vb6CK2ZFI3EWhLFkNWfOsdQeSzDyp\nl74R\r\n=sqd7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.994873795.0","@material/rtl":"10.0.0-canary.994873795.0","@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/density":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/elevation":"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/switch_10.0.0-canary.994873795.0_1611759070230_0.9941738844344159","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/switch","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02390094cc5b76160e044e9444c11133a975a5f8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.96878e1d0.0.tgz","fileCount":38,"integrity":"sha512-IovUX9w0BtpnlkL2Fc11n/m3wt/hl/RtWoOr0PsrD4M3aFsOH3fgwe+MdJIYn/BufF5Y8KhkYN0Ra+lEWutFpg==","signatures":[{"sig":"MEQCIB2a4zEBfE75vjoT99jljqsOtG5FaAgZdvkSedq05UPcAiACJ7k2xxGZp/r1y3xuLUDdstXhYcxCO0iyNtPhSGuIRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaqsCRA9TVsSAnZWagAA5wgP/j8kN4ftKCZk66SV/4k7\nN6llpv+nWtGkwvLAp/pNwRpOz7pt7Ka2KZYXHI1M/aACoMaRJucY5dlOqthl\nCg95WQaBZo2D8jj4nC0TGoRnpu2X1oILIVPqaPSX/VLevaOiurlA5A3+8fwX\n/eQK3/GCKJYIvnzeMeYrRV21kRsF5kgbQrj/hzXHZc8v09VIMRHDAj/cyosN\nfz+WLVjXeq2B4OVxeDbt5axGCU8Ka4M/VXhRZSxz8kDbkX1kgAQV1C7Yfltk\nLA0WKXGtCVOuezCgwt84/B0/w+/OjCC1Fj/ClvnNCU0H488yFRBx5CITJsHi\nRwYGm3E/k488bPqM1eKOloMzk2uw8F6qOGCQE6Y+OMCO9XzX85a4cABoD/yX\nUdKGCrO/jtipaBzfJDMUMWZjQh7VdToJIywuc6us7oNGfvZvM4kG2fIgnL1s\nIZ+s+Jav2QUatgF+R6z8FI4+CRnglURMajjrKoSW0UjUkQCxQpKBfjyjn1k4\nlZjEr28Dr4aWC92ySad1Ji87sECWbHbvnLA92Nqa0vRBfj9Y3BCRpCi7e7m0\nSX+Skh8VOAhmB1wL2nDG9TvdMz9ZpvwI2ZvYWBSgvCCnXH0Vb56ZAJOWR+2U\nGhTZj3LhCLEDEc78QOE6l7rU99eI0+niQsgc9GTD5BAx3cz8CAP638CsVdWB\nPdfX\r\n=4yO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96878e1d0.0","@material/rtl":"10.0.0-canary.96878e1d0.0","@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/density":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/elevation":"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/switch_10.0.0-canary.96878e1d0.0_1611770540111_0.3786059676083","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/switch","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27dfb44b16fab11b45c93d8b6ae8b1ef5eb7aa9b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.3c117cdcc.0.tgz","fileCount":38,"integrity":"sha512-hVvxl2NPcUu+MRPYq3y4vof1B27CY0g6KJrL1ML0yJvc40a0KM6vQa7l/NP1sL1vyJA/HI9N9+E671kESLRbuA==","signatures":[{"sig":"MEQCIEDS137g2hkNvQYOC/GZctoPh3Xsy7sSJl+4jRT4xZ+LAiAiE51OhsY33olbYr4M1ywbH3y/7o90yfAe6PeCpXN4GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbG6CRA9TVsSAnZWagAAFH8P/ikI6Rw+TC7l7a6eUGGX\n6QxuKb8ewUTmlunZLAtbxn0Si6fLM8LluzUzVjFCngjWB6XHyIoVSepACl3j\n4kNbhNpMYMljikmfWdo90LCIlPDUjrE6N6L1kTshH+DjWxAOBHRoZIBZQ38Q\nS2mKQLZdqOzrRd3lwqzzFbeppaTtW+v4T6wozdmkf3a/rIKIdl00fF37gJlg\nZPGwheMQpXE8/WF+TXlFkEZ9pkPfYva6Y6qN7nISloFNgjOpB5tk2efnxZ9f\nCRDsqX7PETSc9XPeiEUv9CTpFFXZEHirlbNUpMoyR5EztRWB+9ao2w6Uwubg\nGnAJaAJsJDBJKydkW5zUbgjuUefWOolE6iYcriMfrlP5PDpg5JGZocVMMlzM\nsPuIj65bbZaz2xHIWDiWM4yGzIKrOby45BQ24XBmWxUHq0xE8WDmmFlvXjkF\n67T+fcXDSkKSS5XSrd6xCaLfeEsCRfXpiFkX7EansiVqcZp2v9ktVl4p1q+q\nlKjULW1/QzfCiJGd0ERU0k5UA/xm+obL2PJF/31plyt76cDeAQ5AHFxpI5DR\nDNSN8b0k1ILEdT0tmGbEkkyyNfnGMxdj1lvKQwqb8hP17V/bFJ0lIA+VrIF4\nzKmzXqf7oMB4K7UxvKbkXoEkkPegSGmS68cKt6rKZx+2XZyi2hZ6uv73v6my\nC7Uh\r\n=vqSa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3c117cdcc.0","@material/rtl":"10.0.0-canary.3c117cdcc.0","@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/density":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/elevation":"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/switch_10.0.0-canary.3c117cdcc.0_1611772345788_0.5652469579444133","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/switch","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.b411e7033.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64523866cde663463c3b102ec028429407f50d36","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.b411e7033.0.tgz","fileCount":38,"integrity":"sha512-Kshzvto4ZuiFvU1/TRO+7n1WzNY8XKIENR1OdUiKEagPZopMtBBkdZCWDxHDf9UmcFKoEzUau50xJvyC8SB+1A==","signatures":[{"sig":"MEYCIQCwh+eRbGa4ylSiK7wpHDzasMY4HLK6V+K5ypNMZLqUkAIhAPVeOF3O+WSN1UaUNS/5OOGF130E8WnaM9F8HyxFqSfm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeNCCRA9TVsSAnZWagAArvkQAJfbu5OzbIoumum8yZyh\n5Ct/ENzV3OwVb0gUyB4KxndC7uluwzsX1I8WICShiT3+r7wQW2Bvbvaoj4r7\nIlJXcoTRmEFONTKItS/+GFUn01byTWYj/hOHkr402Ew+0aHZV1WBAqV2V6tg\nQLCLpoce/bt4e1SSt+3Zjjnfzx/YJ55SIfpEG0pyrlIg7aN/0cVlWNHSXnsz\nTekwJ0CtTBtbOWD4RDHwiu6U9VlJQGH77WSbvJrGlHVCEj1S5LyYBsRZjqPJ\nPWDFlbWClh5+O9bVgwXwZnDlYgUEmYX6CdHItMcXRXCSnxN4y41K8NwklkFb\noumqp2zmPqzmAgGH6qAL7VvSZD0YEDMefPirvHeXdTfy1LJefjgxoBZpRYVv\nwjt79O4oOidCvlvY6/bVo5B9gMPYKDB9Sy7BPGLrgoZLsOINmE4AiowJ19Eo\nD/wQQpa6PHcgbnwICCw6daF188nLvGVyCx/Hxm2YoRN/F/kPKurdOT6ZxOjc\nQuAbYTiaKwV9tcwWYsDFBzpuNRYYf3HcIbvbu58HXKozt59Lh7dbNgXOthGl\n6x8jtVMdnbndRDYWZcMYrwALF+eA6B3vbzyIf2h0rB07+6+hAvh8yPbjPOpP\nKHalT6PLIJu6t4gQv7oDqFbUlMePfMzcitlHqWC2pS+vC3qX4oC0/dxoNU6D\nOp+z\r\n=xxjx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b411e7033.0","@material/rtl":"10.0.0-canary.b411e7033.0","@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/density":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/elevation":"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/switch_10.0.0-canary.b411e7033.0_1611785025437_0.7970129175336016","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/switch","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a2d9e4109763825a34d95c3d174814861f522be","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":38,"integrity":"sha512-8cc8g9/xQFS9sUNd9FB/eI/u3uw8+IIoEc59xVTAvpUnrGnc6K5Kl6Jaf7FDG9Svt4lPx4UN+8uQyCVc3m82yg==","signatures":[{"sig":"MEYCIQDcGPPwwzvuU7EAeMU5aHX6zP7vnQT2CAvdUpGWbh4itQIhAMbfEK72YZdV2E4h3ZSR3CAsqPgB09wYBgF4Ov4f594D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfFLCRA9TVsSAnZWagAAMJkQAJtJEVfXw1YPL/mmeUR4\ntO2YuUhg1bwknFyP9IHdOaCx2IRg48kG9bhqCPRFEs60SKIwhMu2GrVKljFL\nnlgfWBBHZ2VroKTWvzDCnhmlpOncyE2pFc1gRMmHrWPnhMtFKLiYH/Tt55Q8\nnG0xEZS/1z+Jpbj5Ab2hVlWQqlq8TFUfLj89TC8rxcCR0lPFJCN7N56KIX4i\nNhFFNqOX+KUASrmfg9HN/kqqr/hPJlg4tk87yy7LrYlJLM4+OjlDq4HwYWC6\n0oonCzLuDjpBzZr3JPkERvmyTMXfA2HsffGHqLkF2P5aqNsDerP9nWBNOEVG\nFi57IIi8P6F3ZkNaPfthBZh1kq/XIZF+wW/MvyM/zCk8pqg5T9EAtZ5Cnnhw\nkjjXtxHeRM72bVHYivwCbSdzrylx3vy44GjZ00ZhQ/1BmPLJdIZR/R94DMdP\nrNDrOgQbcwd8G1iED1yU0OpvOa1iqGxJOgdeIjCgDuy2xpnSm3X+Ymu31go5\nv3aEhUDSnShAwZwf7ao0F/hfnHeprzhPtx+Vry9M8+eCmXMNDztcvb2GhR3B\noxoDhK2EMnDxxfq18DsCsEdkiOiXkXTl4/mjgQTgUDhZvAI8bsmIzw7+QpTF\nkGbc9hvnLbPs/HG2jfqYTbADmLwEiEUCmqhMkksKoWaZ5WdtvMugbYDjyFKi\nkX4x\r\n=tpRJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@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/density":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"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/switch_10.0.0-canary.a9ac16b4a.0_1611788619389_0.660762644904417","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/switch","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6d2b0ec4b8a6f8f1305f2ff02a045a0ce1889f2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.fec7b42ca.0.tgz","fileCount":38,"integrity":"sha512-BSCEonsacU2LHxQQo7kIbCb60zD3e3/QvM0UXleB/M2NkUNgWZuoh/3+UBToY6nU52lWLLVje3OJZ1PNpax+hQ==","signatures":[{"sig":"MEQCID7wzhIex+6S/oaI7CHO4Ml4V3G80uX8DjTBLgIwLPqcAiBkpeZWJhx1ocw/pPiMbbf5oO6R2R4ds96cZMQdRXxf5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0lCRA9TVsSAnZWagAAIRUP+QCDdbQM784EPpKRbOw9\nmheKR+GjkKHQBD6VKVTLgLCdOgva3f2jJqNRd8CTVJxiL05eRKwY6V9M57bU\nyjUwS0JybRLHXmeqHQrduJQX+5XNS6mBrQ5jJ0n81qAnkR1EkTFLgRG4dtrM\n1O+lE51SES+S8rV1MmAg1exr8881nphX9O5cEfBexjAlmgBQaUxDNJC88xPi\nnh1Pdfb34/eCXR3U9TJ2lzbg9Q5s0j/tjgn2Dh7iMa8ddKx36fuUQgH881dO\n98JBUa/AlgNgAlv0rJcvFSQ6VD56tkee/m1pAm+h3u+HuT3d7U+62RFkfDEy\n9wYRGBMNBN0CUJvYETyZZc33AFAFPaGyVofyZAYY5BpSPJwwKatF5kRmbbEQ\ncRB6MMGClrzAC8tKMdKPGeXO235VzJeuMJ3OulW1fiz8wGMqf9HswPlDZam3\np1wNESTTaYERpbZIl00Qrl0W/Wi89mFDgD1N17f3SdWT+T56HYh/fD4bYZ1g\nKOE+2a4HuwPPFxgWeKguGuKj1IXq8j5Tx7lPBM5nMyCn6fEWU2mvr/q/XXjP\n2WiuFKQJKdhUUypZ8v2M4Zz15jowxc63Ijv3s6hzkDsxxLo0It/zSQ9jzmbc\nJRy6sJbKQmRpZbO5IWoK/80PR/mAIDzOIyfCsVaeCKxgkkugzkPeccmfpDGa\ne+g0\r\n=h3DQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fec7b42ca.0","@material/rtl":"10.0.0-canary.fec7b42ca.0","@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/density":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/elevation":"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/switch_10.0.0-canary.fec7b42ca.0_1611861284848_0.21375717614528833","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/switch","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a044a5586fde9dfab0ed6995a89434ef73230e4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.8e66dbfee.0.tgz","fileCount":38,"integrity":"sha512-jIxwb0bV9QpDZUGyzM4q5ubz6nHOUhbLpiRWAQk5ENTUL9HU6m98neMoRpCg7OMnRa7do1pq1l+h7tltfyCxiQ==","signatures":[{"sig":"MEUCIQC1b4CEKtGnBE/5RcjRTg4HIimYcPi9a5CvFuqWUmMdLwIgCMWLzDJNTs408u/CSde0iNuyITWXalE17GHEI3ZLEwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIzBCRA9TVsSAnZWagAAnBsP/Ras7ozxSe4Sql+Y1LCH\n0AsV8urVSFSiZPfyRnPe8x3kkdAp9B1AKctb3RRSWoDFMBat55E84FqHBUWh\na+pkKITsjlEcyl9tdi2ipWbYHXoqHsnDSZ2X2zM5C/+JSmiZDfXzO+0mJfHr\nt7KmAwqNIMVgPUhg4/GSc0+7PX1pjL5xZcP/bcgOB9y7YNOYngpIwlXtqmu6\nLFbvkYaiZGeFe6fPcFwIYDEc7T/cMXrQ0opH79lDzMk/9J/TFue5DIUls4tO\ngUtbSwYjo789x9lDTuD7qykI9QIz88Gu+B1pH6zJDtvaJ01e+VlUquPsj1fn\nxVFW1o0OdsMn0C9ZK7X4UF8fUKWGhLNQkWAWBaW0rrePQ80PYihWjN4F6duy\ngdDghOy256wokVhsbYwio67jmQ7cfqUsqk3Re3DjFeEpi+WITgkybw+E0gCC\nImsdWZhyVLopgdtjebbCo9dOcExH/QbSht1mUDL11NRH0c69NR8qpVQ6qIOR\nn2XY7sZgwiemHeScIlCaBEl6J0+yyPfU8GyY8jPQKeUA8dpTCBULZuZh72ky\nCEjzt++K0fekLsiPpFj4Ts0wHIXdaBnqjKyU6B6Ohlp+8k+OXSaFB8L8r4P1\nmc/LmqxkfEj/RnG7U2mW/CtXYboLO4US7KY5plxGVQChxfkL7+HO8edE2nC4\n3g19\r\n=SCRg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8e66dbfee.0","@material/rtl":"10.0.0-canary.8e66dbfee.0","@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/density":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/elevation":"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/switch_10.0.0-canary.8e66dbfee.0_1612221633382_0.8203031874885143","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/switch","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.637d15da6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41e1e56d8794adaae541c20c57ea5df864179b0e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.637d15da6.0.tgz","fileCount":38,"integrity":"sha512-rQkck3KGqowYRWwj8+p70nXJ6q5RXmjYMTL3HRbQzBZHHxMLcbMuxULQSkloTR/DrFGSWBcWpVKyDbXlzj80jg==","signatures":[{"sig":"MEYCIQC9n2UVtkREGwNvCvfww4D0gEgbiVAiUfI3JIaLFQpZ6AIhAKN50ZICzEhC0bQGv9KAiPEuD0v8Sj3lYVYXR0DC733o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ6xCRA9TVsSAnZWagAA4zQQAJQI9InM69bPSoTjv9Eo\nxj7y3gI7iUQocFX4YwKSAnx0+mGmp0OjFwF7gzx9Oax4+W3ztnPIdCGalk6d\nld/lBcvKWALoKK7nYdA8pLcD3cIGKM1SvYZcFXlYcN17qGUKiYq4lWV0e7NS\n2POl51Q6jri3lDF4i54t2cmnix1ERBgIV/KA3hms+DwRsCwtFpWo1lbt6Yij\n2nkUeqG03UkcnrlbYbvO9Jelg+BjjZqPMCsLEtIk23AlggnOVWGDKC85QQ1P\nRN17vsgK+c3rLDDsiApN3SpulTbZb0/UxkMSy5zLI+vqKWNPMwQYRs5BB4m1\nKS4oLcdfcdVnz98uvfStcNxfmP/s15gKaWHEPRLA0rx1fG7e9HGnJozG5IcL\nPGQZVvw2X2aGr/eiDiFDqEnoZYHgCWGOkx15Cvuce8md02Dl8EF+eMayrib4\nmUl84d4enxYh+5ahxKT2vsYfsuYEDxKohHYDw9XeYqXUmkcBAhOkOAYYHV/y\nQPtxtNSi74PjxtnyMBntiK5HggziBEDfwg878ew8n7DXq56wf/wedsSa1+ZD\n5qMCy94Wn0JrrCVKN3dahduZb0wcv9X3qU6OuUH1mXZc87JgND6jmuh6e8sf\neQFyzNECLuQuDy2DhOOnSpMgbCMPPH7WkCM12QY3a2fkqIRU2HH0lxH0/SGz\napDz\r\n=KQ2M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.637d15da6.0","@material/rtl":"10.0.0-canary.637d15da6.0","@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/density":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/elevation":"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/switch_10.0.0-canary.637d15da6.0_1612291761229_0.4328567412653661","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/switch","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.fb793939e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de83bf52de854554d17d0df09c158d769032f41","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.fb793939e.0.tgz","fileCount":38,"integrity":"sha512-4OtiXWHI426PF8z/Ry52qgFaRNeXS/vuIclVvagSM67iD7PT14maP4TlmHeYOwc9C15tcXJamtcDII214aJ3Hg==","signatures":[{"sig":"MEQCIAaIqLJplOzwjpZnkQOmmSK3/ja/vU98mbawv2m7Pf3UAiAu8qH8dscw38E0bhty87lSam/1poj0bGzZILTTYAyFIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeOKCRA9TVsSAnZWagAAfm4P/0vGdS8Si9P32pEJlKx4\nKU2OcHZjGNCM8mkKuz1Ph+OGO8HZDtX5z2h3DzC89jo7ZO879EneokLqyKbd\nJf03+HGcKfUXKxpliYeHZmqA7LmYx/XoodaSSntQflIKjrbm+6QJc9lPvpM8\nlIrd57Pffm1+cXvsK5lOlgYdG09aKtOOBTgkb3Ks0zD0lhx/VNCtwPmlDHZ8\npQjSOc9CfGiv1MiQKz3e4EXugbIg/Xh3RZblmyQtf0Nr41XrrFSLmH/M5EPU\nySkea2xrKf2lO6sjLPug+E+2CHaSHI490zEMtPqF1hPpCgypSebYSD+zmNUH\nOyIJ7MrVr1MEoKnUh1s9ATUA2v8jCpxutvi7vKEIzJmfC6GA408epauRhCVB\n0bh35hk6pFY6vp0SQvICT94/12B1DVv2708ijJUm6kum8XtJo+YJyPm2O9rb\nizrVkjkx9eTMgs/6oxRVAtcRnB7tyFB1UuJvTGvWsxo+Lhpw8s/5brmxu5Wc\n3Elg3gOlsXn3+WR8CoRGps4FwwoqoPEzEgEgib3kvMdf/sIfPY1/LVa1dkv2\n54zrbxEj0DA28/ARIsE6kwuRwFKVLrMox3rlY69BXqx5bwjJT9jKaajQIkEA\nNp/gXurfeNBjcpdlKlsEqDdH104hv5I67/o/ut0bJakeUdxxMo6a8/+fAd5a\nfQ5C\r\n=1Nst\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fb793939e.0","@material/rtl":"10.0.0-canary.fb793939e.0","@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/density":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/elevation":"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/switch_10.0.0-canary.fb793939e.0_1612309386312_0.5606159066820926","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/switch","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b4f77daa27b25c2950bc5655fc65b4e2b2e39a2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.15a4d40dd.0.tgz","fileCount":38,"integrity":"sha512-kVrjW/uAxN5mcSU3VMco33WHSYFiL5W+zv9KVlnRm+cEJsJFoJkcVnUpWIAGFSdG7/07q4HvtXiYT+spkJrksw==","signatures":[{"sig":"MEYCIQCDdzmkFGnd4t57uI68wrJR6AX92AOrpMmt5J/rv6HfzwIhAL6Z8VAupXALh47D2t6wtwueka4cSxYw38BbEEi7Uqg9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgf+CRA9TVsSAnZWagAABtEQAKO5GyaBHNvIjRnc7X9E\nJpLvRR8Z2+8tfO9rTDV9cnb6Ba+vC68awSXeyh2ttYrUZRqd5AvbfgggdMi+\nUfDCBQiZ1G3S5CzRiuY51wNQr5ZVZEe+J5Jj5wv7AWK6bD7o6ALU/WlQMI7e\nHkHmY6b+SIOj+K88pj/J8TrxnFry8OWpBqyjrxiUrOMbeFcIp35I/G8NdJpo\n+eB1b2QhWZTROyaC6irynnpYjoH2NGOBi9of6Wp/M61NE3nFI650ts1JjB/b\nKToOtsEsE5M2EJBHlji+FdhIvRdI6Gp+M0zWav2s4VV54hy3E8Es2dciIKK8\nKDWJ8RPvsSyBDpNj22BH/sqKe7P1+9I8oNlmv45lrhUg03cV9VwuDx91wgnE\nKjF9zQ+FyYOWp8i9FBmj+xfFeFiPnK2wnctjDeeBiBuGedsZAnMirBfpgZad\ndZcJrSdPAdQ6xSirqtK6ym0AHMnskDFvBAcxm/rFuOo8qTVoVBDn4SZRTDJS\n5Lz6354gnt2UydgNokgiPPxbHJgjYfAeDWdNQcvHOGt1nckBSjNEke605QpP\nFaxf2iIHnqopz2HKq/fI109QMbwaLxq7JEcH1Kn0na/tYtZo1DfAofwQdHus\nfUQGaTEdyD7/qHA4aNaSg3NA4DeRFcLTN2MVZePNegHk1k1FFyiINENVpHML\nl29w\r\n=63jK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.15a4d40dd.0","@material/rtl":"10.0.0-canary.15a4d40dd.0","@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/density":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/elevation":"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/switch_10.0.0-canary.15a4d40dd.0_1612318717985_0.7486548257353218","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/switch","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2df04db8f540ee721f4dfe31f43dd0042e599f4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.7a003acf0.0.tgz","fileCount":38,"integrity":"sha512-2Hu0p0ivuX9AZDXOxzP3/6kl13W5/1HAL3WkV1EXqX8KChCb6FKKmEi0+rJNKtAltRzYgdeQyKDCiZA9YWVm/w==","signatures":[{"sig":"MEUCIFzLukcpRk3VbXIqgpVoNCDkPsoI8AubjSeuW4jQzp6LAiEAuJ4og183uJYHtveQskf/1cTGBNudyYFoFvqsypFxpfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10eCRA9TVsSAnZWagAAtscP/if4EkzzB9euCVC3zlIh\nhZcNrSrQHNnmrwVtRMNwShgcRshAosRlHRPLV2WN4sawgyuIcTugUD3MTvjQ\nQ5SkA9kw/BNsdstTIN/j05JQolXwSs/UUPEEtAKHepiuYd96fP3FAH0hno4J\nM0avzwOpKe6OnvFXrnoodVtdCqQVrXwGQ689sEWiSeniREAK7lWTc/f8K5hV\nzEY/USzYtPCYHwdscRWEQMqjC5YV06uZm02FSwIO2h+B7vOqmNuOZhkcDOvQ\nDE9kZfx1zNE3d1VNw2WbywRI+Ha0U1YV1GRNi9bs/tHjfsQoSuY7hiXEwV10\naq8XsNpk2d6bemOG42eg6W6aBbmJ2ZHMNVFTXTOG9XLLJ2fWSI3ya+4Mp6f1\nr51oH0rs5ENuaGFYs/4OsYRmfgn2gHAIMkieTRyf09742JZHm5KDmJQv7+33\nQjxIAv/4sLEDsqAwvWWmIR2aLZG/fxZFzp4H7+0gW/Iecrh4nqT9uxjJp1ni\n+GQsY9pIwzCSX8aQhpkWHSckdzhIpvlv2qpOqo6hAsxlxPTm4jdPzLM8cesd\n2wTv1FKWyg6P0E6ABjhEWpfC2Re+nRSMmJ7dntI8+Jd1BHQot2BAMwsFM/Vs\nOw2vi9Ez2HRw7F54v4w8pz1Kr9ixwzxwP6cPvKwjeAtL2OPXn1n7/do1db+O\nmuLS\r\n=co+K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7a003acf0.0","@material/rtl":"10.0.0-canary.7a003acf0.0","@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/density":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/elevation":"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/switch_10.0.0-canary.7a003acf0.0_1612406045535_0.8961665176509306","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/switch","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.05f249666.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82e76bbb363257f636d26f1d0b98ec4dd3fad84","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.05f249666.0.tgz","fileCount":38,"integrity":"sha512-8BoD9ReAwyzf3EmFUXDtgsMXSSTgQ/L/lT/qEbDGOoP3W1jji4jfo2aRZp7bac0h134Us+zlsD6f4hSTb3PBZg==","signatures":[{"sig":"MEQCIFdJHgBpmD61ONmOF04r16ogGJWh9K7RKsOE8CpkjPRQAiAO4+WuRLtyDYXvGqjxduhWYr5zB5M6nHdRNQIemvguNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDPZCRA9TVsSAnZWagAAkx8P/jpMl9Q2vNS90kv0U6Gz\nIrDXIoVe12+v8z6hjMrPwn2C6jgVYWlC7tLDXpOy5J8iQDJOABMlBbGviFNr\njxsoljOhaclrGxBETcsECtZz0E7CSEILsRKwhODo+TSTC873rUOtD9olMhGd\nrWA9LrkDHnzhvIfllk+a8J1hTe+0Nb3aFDilvDyInAM6KLLGnLtI4iQIACIk\nGgpwPyNhI1Y7fq+Bq0etzIUj30ToT0fIAsWXKGUhopNgLDXadP27WR/H1HrP\nLgFpa783DfbFzkpoDGhgFcaAHgES0j5j8k8CKmTSD0wyZkiTlaHAUXMNSxMP\nkdjjk1ye0Vi8pvG0kt1XJ/TxzRmuyNDOR4vbrgviN4EvRpM0n3GcZj3RfbHw\ni+p38Q2N4iz967TtEu9aVFiTPEwARgaxyiIDKfvZrkcYZ85SSg8b5KLQpBNr\ncCa0HgrRnnf2pnyV+7o0zAI+SW95h520WJEfOAJMtNfgh/0nu+M85f3oHDcN\nS0IRLOMel9sMjRZ/bHYStB+3utb2TUx14O6EfsBc2yS+FkLypSLe/oMzL2Vy\nCJai2saLz6bdEaZipjBaB1OV5LDlntuXI3VGtZLDBgArgjcZCEHTNTNL9ZFb\nKBEKNElUMv9xsSAUaVc9uq2vsn+l9UxLHHNr7l52lwqAsUiHsp3U/PpT6HHX\nOSeK\r\n=EiNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.05f249666.0","@material/rtl":"10.0.0-canary.05f249666.0","@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/density":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/elevation":"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/switch_10.0.0-canary.05f249666.0_1612461016502_0.8510787984066943","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/switch","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac915a7ad64d595505114219c68bf513a1ee1a3b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.1a3a39629.0.tgz","fileCount":38,"integrity":"sha512-O6Yo/oRSBw12Mf/D3ZyOA31krtB/P3riL5PYJHnhe0gOq8S7VaKefIYJi/W/xnIZsKGln/nP7AgKAdmFpspGsQ==","signatures":[{"sig":"MEUCIQDeI7B+QBvSYqGCObd1vyC5LqRvq2wJ7qO8+ixArVs92QIgezsJq5VsyCeX0BJhYDV91JYYmxPIxOEB8yS0rOXXYE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEBECRA9TVsSAnZWagAA2N8P/RD/or3X9FVeGaErMRXI\njdY38clYeJ1RYb0snxGpzyrjlOrDYAWka+lGYC6wioM4S0/dtt5veioAb9cR\nQByY8VW4dnw/fit6/a9T+1M21lR/LHd0vcmnNIRoWxz8c5W7mokvbzuhJpRI\nYKwC6FMjfrE9OsMA+w9/u20eYPVLE8Dsar/Xz/BxllJHybr6ulRY4/p1pxlj\nRfjAbIXbDrB9mr5JC9u4FtnzSMo3jgcYfJrFa/8+MnHaXCCqCTgo7m4NEoyo\nA3lPDbkgfaH0qHKUTzJJZEsV+jUApokxbdZbwNJ5M5lmjJraJmXBLWOZWZK6\nI3jDaql1MEaPGV4COixZV/PidUOGZkyefaGpyj2Z5oRcROB6oxAG3YYwxmD+\nrHWTW9OCcoMLX7Gbj5siQA4KzRFpF0q33FzErnJXewP+Rq7U00HoSlibVyKB\nvBD7Vve9q1dyoVuSa0sCwiueOlO2mOiT1E6IQRxvn7a5TxIUfkQ5tkF7YWbx\np9RqCuf8DCQc7pBPLVFkO9VGOAQ1W3tl7h1kdeHictjdyX43XFKijbqUY3Gy\nFI2aus0zyN4qi1scNxiKERfagxXIdL7KtnZqwfHWeFXyO1h8aNiWvVfTyr/l\nwA/iKyeB57ckxOrcSn9kkZfNFVhyz/89LVVq6ZOHf1wMnilRAMkZgWhXvTnV\nIPVd\r\n=61t6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.1a3a39629.0","@material/rtl":"10.0.0-canary.1a3a39629.0","@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/density":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/elevation":"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/switch_10.0.0-canary.1a3a39629.0_1612464195799_0.884992067569351","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/switch","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20c4189c5a393193852708afbbe90775ff90359e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":38,"integrity":"sha512-V2MX9qsfNHL3kUDDwxPdCPjCm9O0mdXs+9UAiyqW+cYI7tOtsHK4gTopKjhYct7gyOqKgtent+Q1PsgMFhU/QQ==","signatures":[{"sig":"MEUCICKT4mGIiUDIIM4x8MwAx8hrDGatMLQylDfjwib17loNAiEAygiJnGI7kG2yyMpX/VgNDeuxRZfvV+wfz6XBQNxdP54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHaVCRA9TVsSAnZWagAARwIP/itPtLmlKNh5K8OtzIKC\nMFKt91gpCtLbW+lzxOydFOFVJ6Ff2NSl1b8bef8jPcP+hql/oBBBhBiLyjbi\nR3f/OZ0sD5pgE/MXXbioyK6FCcIWiRajPMHF6cIgNgnNAgZugUuT/lqzlYlX\nXvnm0X9r82s06zREX1tR9uEpRL8PAhCfRbQWyhLVL2uqaMCze3fIyBIY77tj\nEfUpUNtLow1gjc/VlH9uCKulWQsS7wRd/602gsLTfGu+7CxVTAgbI4Pdzscu\nP0iccmZUj/732/S+59H6w6CskXQoHuW9+HUnfXKfPPrdWmaYAbofIycR5HvV\nGkQgX7cZ13IPWbpyHPvaqWhEJ8eb6O3CTUVbH4COf5+CNzCAbPdDzKfksDEE\n57ZN0Gh++V/6AsA3Sf6m40jSFyl+EMlK18gwrHb9BhAic0dtUMEQ0rR0EACi\nbpFltMwQwhmjK9oVnb8UW+QVE3V6xpM6ZrdffWXnQDLXJVrzwggjsqsYuLI7\nXTTU44hZ1Puq/5chhJDQ3P2FfgbI3DiIp43mwrcIdngPQSJ/ZzY1VFAHB8Zw\nqm+KpTseIwXZAFmUZHXxjDdqKD9oTMjHekqVR+7BScNH9R1XWV7dW/Dng8Ab\n8qMEnsiQhp4fihsaFtWN7QYSspfBN3CnhjseyAhUBUioVXGLwwwX8lxiaADd\nSzXF\r\n=jUOx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@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/density":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"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/switch_10.0.0-canary.8b1cdb1be.0_1612478100902_0.7065586211118919","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/switch","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5e6c89fa8917536ff03fa69f73e358c8a174a36","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.8271f00f7.0.tgz","fileCount":38,"integrity":"sha512-CYm9qg63QVu1LYOeJU7CLNdSJ40VyFD33uvJJVvZAj5dXZuq4w6AHjKT3zQ25rQx6Xdh/X0nah7s7KUWVsKxjQ==","signatures":[{"sig":"MEQCIExQ2pspRaAm2bEF8h6ysDX5N7KR8nRToBJxopw7wLREAiBZV9yoR281iCvvyREsUpY1E4Ag9xc/Nv2fOUgGiSmW9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHycCRA9TVsSAnZWagAADPkP/1IJEywSS3s65OtVxM7y\nqtAGWtTWP5xgLy3lic3hjjku6YOujkIGpEhXbTrgK4VTJslQaMPq4Dt4s4KL\n638noiv0wqPQC0liXzSQuEVI9miubHycW6TF1jq8SgTyYn1CoiEMC0ewS0X2\nHalyL+q6T6649uzYqhXgffAm1y8yWvEnH4kwK2+TLQT6sJMPyZc5kK6RxPBv\nmGT0iSGa+hFITrDHl5epegLj5tgxH2/qfJxJV4a6vjUwdRJd+1NbWtbpKU9v\ngelJxSgVf9oKsstgzey3xVjLGnSJE2KlQ2YqIr0uWFObLqVLS4aOu+F4ofwn\nWGmHYNYmcHT1lUJGYEQT0ZAALGxtvfHfe1bt4ot5P/HNHGf//xdwdZu0ECYU\nxcz8W0sQ58Jqd+ELnGUlSzpKeZ8DkDlsNY8YTKi3CI+NpnqpAqdPqqBxOnic\nAgtuhm1JfVXMkmE8IWcNy1lGYm81qMewLEGoBleBBlq8yxb65SSdKi1C5hxS\nQgpKdefFW1DU0EDKCgppntYsl/4+OQAihsrjiaTyPfhFpW36rVn0HJ1CaaKv\nyTuU2juXMyCMqyZZzME7YMKkUI2LoUczZz8oPvycaIENiBOtPIG+mC0EtTHk\nHW4pXwVlDbc0L7wgGD22+5CDD/nACVdogiw94PZtNDGnRuDR1di2hy79AcrM\nsbLy\r\n=D2Ha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8271f00f7.0","@material/rtl":"10.0.0-canary.8271f00f7.0","@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/density":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/elevation":"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/switch_10.0.0-canary.8271f00f7.0_1612479644034_0.9202549527593933","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/switch","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0-canary.533092a90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2c335f17a61a85a9d2481ff98deba01195cba79","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0-canary.533092a90.0.tgz","fileCount":38,"integrity":"sha512-DvL7iI86dd6xkZ12QIUquPZaHEfTJTIZrKWQW+zkDpbmql3+6TWJc8TQTl3AyrTzrZRTZ4Owzd5glMBNGrntLA==","signatures":[{"sig":"MEQCIAkqchWgdqyUt3A8DW/Ve7mJVnudEUGPej3VfsAPGjouAiAne1xwMHnvVc8odjaqsjrzBeptTXccsudRyp5psLkrAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+rCRA9TVsSAnZWagAA0lAP/RKvQZc7iBhPoIPZ4wMG\nWZ/AXmjUVtfkj1TvE5xNTFH+6BBZedb6yJtjmRDYprdmAAZ7UH2LG+ZJ6Cx6\nw4mUo2M6J1QIBFzolztV8bZqt53/GKQKUmO0GejJ8IlaaKfwDL+pMTUnRKWu\nGqrMQrzIuDwbrhD9yJiFrfzWQYPLliaTT0Z4XwQjNmFAe06rTd5JFHLmhIq+\nSx+FPAgAtdmwBMRlLAJ1yrOAB3llTHKHnNMUo8xbcgwXaYGqF0ZRrbxQdimX\nntl1kp+97K/35LYtYMrgqdX/mPZZj1pdR1i8YIW51XufWOCTGRhVoUL5NZg2\n7yvQZ+C2qhwGAnrdLtFIYgig+cdvTIgRqLJ1V7mbkHIVfz+Rz5vgUj3ylVjW\n71fHg4fwIFb1Ruw8IQOwLwXTKitMwDYQjpjefptBpB2GbR7UJw6P/Iq6OFCx\nHVJzC+ir6jzxSz6wx3Wi6RW+3/n7Y2xK53UCmIvahk6KGaUzxOInyCORIxaq\nF7YFCS1rHq4DqqBoZ8KY8/uEJOLbTBhvHonuh9D2Wsrmm/iNh0dnSIVOoBhd\nhW224c4oWd1cELqhjjsxVUiPWzxkAnzpGENSWnj1vTDlUosa8q97IAiBQTwm\nmQ6vRy9QGnNeVPUStF+Qmz0T7+Ra5+PAiHg1+OL95KjE+iZnAUA+jxUNBiBZ\nEa/X\r\n=VjxE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.533092a90.0","@material/rtl":"10.0.0-canary.533092a90.0","@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/density":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/elevation":"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/switch_10.0.0-canary.533092a90.0_1612496810636_0.05516210616589934","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/switch","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d34c9b468ef043672be5fc021f51eff167d97bd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.633a9fc7a.0.tgz","fileCount":38,"integrity":"sha512-a+wN5SWj1BVEYgDguuMORDbtwRzMSi0OVdJopFOxowSlJeLC/cWkgYGA3/ckC1Gi5ZFWi6hpYmKmoTR4IsUh0g==","signatures":[{"sig":"MEUCIFo/jFxREV9uSEJr0ehI4749sdMzEaWmBRnjPt1BK7uPAiEA73LSFxNEmwodAOgdXYhKXehTRwxCw79jUUpbeETh/UI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+UCRA9TVsSAnZWagAAgOsP/j8RNwHNBrhzh8F3pafk\naTDXhtNUYsPaFh8clVkb807ytubjgzG2+EY+sndSZZ3XO4krIi+pFP9pqPzM\nczYe0kdOxhveiZbsH/5TE2PWouy4R+nvJ9T/YvnU+NuuqfwxVdtehnsNSUax\nGf2l0Ys/UIx5PZRvxUogot6TlZ/n4Xe1XVobc0tuAFAT5KqBKpyDAmccUTM8\n9L3W91HL83mftXdAaYD9to0w9owYgo4B3WgS6atWTPGjq9XJCukaGt2RRGsO\nO1khKUsmxazzaEzvgnA2tJxKrbjOq0bbV2w6mo/bdMI+5E6VzsuCydbnfu1u\n0L3Yl3/J4vkmipL3G+8XoN0w2rKVX74LbuMldl+YS6A9ucZnmHixxvm3CiLu\nlHT95iiFC+m6KsPi8w3fgA7MLdnoU4p+FndSQ3POUastWIIHAnDiOgpstYkF\ntImYMGAECjjFQ2VDw9em9O62FX1nzErGxM0OwdKWcUJwOLLkuV4DWO2xciOI\ndrRnXPKzECNXspaCTVOa/bUz1LXIzCqXNEOgUFGX3FtGBNDvZ9drDNQFXeUJ\nt6qey5UvIqKmes9IDX1/FU3mcpnCfLVXDQV1JuMmPPmzFuuBFXHKD4OjxqkS\nq4gXcX9Q1e+cB38aAzzzHiWiKE5AnqPSvImNB+8LfgzWBlupRaiUrFcCU/KZ\n8lKB\r\n=LxDe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.633a9fc7a.0","@material/rtl":"11.0.0-canary.633a9fc7a.0","@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/density":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/elevation":"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/switch_11.0.0-canary.633a9fc7a.0_1612541844282_0.2665042181618411","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/switch","version":"10.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@10.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6b094da5d1e234218ac83f7a02c4e9442700e48","tarball":"https://registry.npmjs.org/@material/switch/-/switch-10.0.0.tgz","fileCount":37,"integrity":"sha512-2UZgof9g52fJOsGgftnmb66WC/yyESZssvbxhLkUVIwGTephz7KXfRWPvoBWBEC2Gwk5FW2Btq3nw5uRKPNj1A==","signatures":[{"sig":"MEQCIGZa9n88BwL8WdWoK5ADbZ5dD709xm8hgcAeaGtVTP9zAiBurRfk06SsgC+V30uTUbE5H5cHhmpTzpZPyVNox0Ag6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/zCRA9TVsSAnZWagAApQgP/ivvjNPCCO5pJ8d+iJih\nxhA1YpPxNA5ibZZ9p09Fa5IIOhIlO93ZL0Rn+9VGEgHYUawLHHjL0W5uchxH\nlyaoz7ojYylsv8MxZfTV8FGoPPlegCBOrFd28vyQS6J503kCkuiypRWALcqt\n6M8jjhR6PloCjN4KenqCWuU7VrH/8oOlc2gNP1lG0I/PjO8n8tdIJE59KUI9\n86pxUXb6D6AhnoxwClkxs1T8vNGNC7Kd/rPw0K8v9waj4Z7nBSpNdnVa5048\nltYK+TpY7jrudslCMILYlS3aRz6SYtljUxxwVaDTfebCy7RNHheSV/NSf/tL\n93VN0T2Tse4XG911fqNris1Z4hq3x842PvO6kpZfBHLGnG3XdQA5EGEifarB\nqOp3fbvpfSoYMeL5hWUKTxYU4k5IqNf+zLbzscv0Os4NT6eq3wwN0nkvAOi2\nqssOx5zNVZZKQRleK9JMDYzGf7DhNo+M23Z6oxTQyXlmYz/1UlAHM+XvtSNj\nSPjI84JMmnXQl7EOaAh5qJ4EW8ZwzwavLYIH4be6G7TAzgYgY74yoHvOn+11\n7h1cnOwJKvK33YXIRXDHBBtoHYTyrPcq+mzrUt31PCUWLanopLRB4+Aqh032\nYhPQ7UYddv5s63cRfKhedgXt8J15IJWADJDz8qV8/AWfzAiufzZJ31oeHZ0o\nhqhl\r\n=k29o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/density":"^10.0.0","@material/animation":"^10.0.0","@material/elevation":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_10.0.0_1612541938984_0.08516475029343029","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/switch","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.b5227247d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2ea8a6ce009b4eb920be314d206e81ed33adf67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.b5227247d.0.tgz","fileCount":38,"integrity":"sha512-bI36HWPD4HkMPD2Ml61nvVCoWkGIhnaZ3h3gno53mrK9K7lQQpq6+tT7UXINo9j5ims/cqnAPHFmHdpSVprRoQ==","signatures":[{"sig":"MEQCIBpI9Nh0hc7JCaSUiMHCRyTMkG6uUSlBlUa/YLX5Za4/AiAT1biRmLsshOoXxwqbTrgwkb6ItvlyVsFZMUOuBTfU4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYNwCRA9TVsSAnZWagAAM7kP/3VJ7DISm0IkcXsWq/KJ\nBNlv1NByx8V6GVGWqqgI6dVLP8G+pqu2bOMBk3urPoUZbWIE85IJ02GwbpH7\nMHvCjzzOFxv5Vt8NVzFcLquhymfFGLEIkJxDEXZ8+r5Sw81zdYDb/sJW3wJF\nAwPY6xNP2ny4t8H44Js3RIjGdCOVNIANoZzJMRDHHBHJuHrxRVa98mEx49xc\ntzikmgYr+1UBfg40yhcvb1zI1f7NkAwtIvpN5cDbELz1klU0ks+smOIVFPyX\nPTTXB9avJXEG72AiMnkYjbikiUB8Yn0gRr9GdM3S3yWtyXuYKB/+BLh5usDM\ntAs5C06eWRTirYvDOxmvCIuSU1MQ8M6WZDS9yjrLTDx7AKrIrLT47JgREOOc\ngCKlhTGaeHwJLfWraGD8gxR0xkfypn0dMcv6Wr60LyJpDDHZubyI2lqJFmGg\nV3g96k+G+Fyer45W1qKXiSlAaXSKJxJwYtr7xtP55vohPlTCxpQ/k3UdhQKS\nkXO8sMx/R94EhqyJKruY6ISqTeKksQ4sfchpaiKqzHmJ3x48QNvddOfzmViQ\njgscaDDXVKoWEDyhpzWLrSHcObSRyaPIyFTRNip73VT6SDQ5InxOfdqevUq/\nBx01ynqMrw7xSr4tKA+LqyWeRovQUDshljpim0ypePWW4y2Hxs8/MOzb7J9g\nlX2k\r\n=BkK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b5227247d.0","@material/rtl":"11.0.0-canary.b5227247d.0","@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/density":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/elevation":"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/switch_11.0.0-canary.b5227247d.0_1612546927462_0.968538453356526","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/switch","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.95322b11e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b0077ac3d260644420d682a0777b9d5bb97f34a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.95322b11e.0.tgz","fileCount":38,"integrity":"sha512-wIVOtV6pydCS8m1tTuk6VHsbVejmuMKSUXuReZhOipISGyfR6OvrHR6+WlswS7I82oNJm7KUA6gEjImLpxj6hQ==","signatures":[{"sig":"MEYCIQD+jnczzoYDwds+HvFlW6sCvKZZZdIJxDe2miIKvaa2JQIhANUgpKEpNbbuG9rLF05Sg9o3VtqP3R+Ki7AyRZBgbE4f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVfCRA9TVsSAnZWagAAtY0P/0tzHmlXgSZO25znJvu9\nJt4H6i4vYsDxjtF49HM8vLxo7Fdw8P/vRDilaI9WdhIPisIQpnLOvd2uegWm\nNUA2ShJ1rqJ8SojF5gjXyJVf6LLj6zlH/NW5JU5CH4ZUnIHy8UsvQ9j5bFSF\nI9TkosGbDMOygUvUj5z1tfVSErkm1IpmyM/nYo3rlv7d+It81SqF33QIH3QP\ndnGqWHRFezkKtT8vOGKzEI3lJWLloqcnWIUuNll0rhfBzL7SdUrRuAKt9ITG\n5o/knck5rj9BgRPrB0UiNG4aN5XOeTHow21p589R1qLSWNgc405meSaQ2DVn\nSp+Ys4JiqJ0xvVKQkfWP/Y2zYuuj+BbJVpdZrlJ1TBhbTM1mfoH1/7/+nqcQ\nVds8H/QJp02RH1mejFhjB7e3ObRMgvGAmwUJgvgjvtkXFs6eEDvpxC+n3out\nn4v2v/aUprE+kGdCznLpPi2uEyRl761dR/oCywOATkHFZ3D2/iUTMNWFjrfZ\nudUwJKRiTwDwEOtsqURnZXJ3BHWscwjFvLLT78vKSJitozC6dRUq1vIl17SF\nA5XIdKPKuY325y1IxFaVOvfyAMTMs0ibFAHbjeov92K6LOnKL77GUfvB+fAC\nBx/yOZBjioSCOErcUhs/JwR9pyfm/BrR0NSLGG0MHRGGgogQ1px/giNX8Quu\n4Ppz\r\n=oUlS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.95322b11e.0","@material/rtl":"11.0.0-canary.95322b11e.0","@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/density":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/elevation":"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/switch_11.0.0-canary.95322b11e.0_1612567902615_0.9516728659781362","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/switch","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c1cdb1e8fc67e0249ea282046d23ffbe9a3356","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.1f318ff0f.0.tgz","fileCount":38,"integrity":"sha512-JwgqSUOM1g9nGsTaYcvhqi4DRMK0rdeMcFmn1wID5IWHXFOtrQj89CsESbY6wr+tT+s6J38iBGj8cKdLFtV/bg==","signatures":[{"sig":"MEQCIBgZjS3ijhw1aVOtyDS4FMaC0I7E+WhJiahGtTrllm2/AiBNUVhr+vX1gIDTpFtgYgoooDtLHK3fPAzgIPeg7FKQIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0nCRA9TVsSAnZWagAAqjQP+wT9XFXV49IUHk8mM+i7\nG44O/08xH1ih+PlYaBmAcdDaAqMU6Qx2v20qbBfU3U61NBFvuzUAQAHmwG+X\nTvlT1AcOTn54/MZZfcuJCjt1nCb9tFitnlad6NxgZgK4FRYpxrGHc1QNgBg8\nnkZs/oywivszDWtRl0jgyJQogxqif87lnnuYh0oSvpel0kUVi5aJNZ7WZKs5\nMlIq359hVwXjyy3G6Ir0kvK1mb3EGRx878AOeSjdRBfnRscPo8DVlFHrO1VK\nmrX6hx+7HqQajDuoDR6vt1pJwZHT0kuazrLzMLN3GXN2Jo+hcY/F5aWsB423\nYex2IZyzQTCgNucmC0TAc41bC/VlrjGfBcxz5MZoEmrGwZ0HOJ11WpB7jpQb\nOYrFV0oaASch/QOUbzU0EwNrVqpuKQ/OMc0rFUB0qHRZ/dZYiv1Ta3wU1Yqi\nW4RBOmo/b8vr0DjQyRO4MfojHWsIlcKbNbliF85wjGQ1RRm1v/+KGI0iH0md\n2/7l1h5/CNfUN5EWqjHys/5K2bW+7GhGrRtWwwDMpOcHMVVg0Lm5nHVdJ6i/\n6NlovUEECDRAnJSpn3e0t7vI8zMv4jotlDpfqjLcjeUQqD/aZQ0OJtVabakz\n7YIHlac+jo1nUkkYgwDfavgj0TsO/DhsjOt/qHFLeZPNFCPkpH690hnSv0m8\nx3Ab\r\n=7Ovs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f318ff0f.0","@material/rtl":"11.0.0-canary.1f318ff0f.0","@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/density":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/elevation":"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/switch_11.0.0-canary.1f318ff0f.0_1612569895111_0.41470102501582895","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/switch","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0b99be3e4f5c7096f5870dc96bf047e249eeae6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":38,"integrity":"sha512-GgyoSxeHAtQsP/+fpe5ENDDWXQaddoJfQy9SVALD3XZG3PPr1BMSOArwD3n6f+yFygvksixifeb44+i16yYZNw==","signatures":[{"sig":"MEYCIQDTWOApnpq3ZeFscOyGEeVHDuFjIDxDGTT8Wlnq8hMWyQIhAOrlePvPyEcenNh6mIJGmXOgpdGcqNg3Dk3C2xpmfuzW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVLFCRA9TVsSAnZWagAA0x8P/0NTeGFLdZIFUx6gsF37\nNPhA3qlludXTtCPUV/ONrFtP9XBCATIDuExoLY4vkvh/qJEoNje8LADbRKEJ\n/IhdRKHUBMzcG5Flz+Qp17hssFe2xgOUsm5Vbk6Uvoxp909sCZxJ7hmbvZbV\nK10TG4js+NUqOKJJ3MnEz0OXPXjZBIpouzvE1aVoTC+TcFQah2wtW3rugoVi\nvamCqkxMPjsuwSp1AxdXhUsr+8YQk86QGzee8HvMP+UnjLFKaCy1BT/BiImn\ncWl4wk+oJJt5RFIhHt51LFOYjVcxICkowQcYqZli/8p/43GJxa5mgnDB96iw\nUD8pLk/n2m5XkXnkDEUUcUOcafNKtyeVM8w6crhaFeSE555wxNbTn1QPhDsy\nBmU4gSNl1JYHp77m4QY4CUy4uuDnv9/JbsWTlpE4Qy10mMgLZLwFB7Zn7F6J\n7/Wk8RRzmKIYSaW6PNBQpmOvN7FqFNnw1b4ZrY9bjwLiwRPMqb4ksQq1HMc7\nqO+IK5btlBtZhIwuIuxv4yxALUKxEFNvIe39ByOoFPdvW5t3w18eGKVMhdAT\nIC+gjQ06J1Aum2iDhYhnvrz28YsGDaa7/Q36gNmxu/3MoKPEXDJPVfEL6dTo\nEp1/cCFN14HYEyB4cepHW/PYDfegwzVn3ly9L8OhK1auKHGOV5JlZMgD31Te\nNun4\r\n=OeFR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@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/density":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"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/switch_11.0.0-canary.ab12cf7a3.0_1612796613091_0.3882654682533544","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/switch","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3152b55261dfc55aeeadf69963b2b35abdff267d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.98db2c5ec.0.tgz","fileCount":38,"integrity":"sha512-uXhp1B1OOSfrN5RPNvEjSewpWJAqwj8ObJE66n7LjPUJMVHFe0dJKeS+Bg2ZXFukGA/tAzoK4Ut3uwfdZxC5tQ==","signatures":[{"sig":"MEUCIARjWKu16sI7HEp6G/nogRSFrSsoCsgoV0u1LGxB02aPAiEA9e48X+Xmbdk2UMlntJ2QmijXEaWBYwybtkajYnM3xC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVn/CRA9TVsSAnZWagAAKEsP/0NwhJc1sW1a7GoQDpp7\nK5Fkwzg/gbJrNHUP036kA7VSiGenP/2uooD1k2tAaHB4rI4CW2Y7lyNskTgM\nxt1q3nC/Phl/qqPVKl5Sh/qSS8y6EOqOrsCy5DbXLhm1adPEGepiouS4v4Hk\nx0kKZg1Q9p4qyAPNSUpuYoNtBuavRnlLtKMuCV8AXckQ339vme2scRunpXtS\ncZxoGWanVc4ZLup7tgz1CSGOpsx501LtvVsLvxEVTAdzB7zxppLcmRWT702T\nNCzJJmVIJqbUVc8XwVSqYeXMSff8x8RJtLtxQuJVSgTiIxOrQ48AVE8DRzyA\nZMs3kGsXjyk2N9I+iITXxyMfqvDkTTQhr0R8rhgHXvLHjFlFRm0Gj7xpTAf4\nZHyT0JMvA2f8KTVJmRh5TmZfHHJXl9F6FlqJpEI/8j057OeuWnuZGCMOIUk7\nXWwKPjYs4iBmydvpahm2o3gmuSdFd6Z9ewlFwQ8lGjg9c1TOQOIQ+VMDGRgg\nFIa5qGjG0I8nCPt12XrrgOHD9DU218r/dCqpHdpjdDTMiceJZI9fsI1M2+/Y\nTrgC9JCtNWsSF97O7OTyCgWWSV9vFm56a/uCvd8y5Nz1lsvi0wcr5IFlOSOg\nAlAE2V+5WQApZmd6OpCfMoBQ/3HNjoXLsGObBMneqpwMca1+VfTOLRichXL+\ncP7t\r\n=6Inp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.98db2c5ec.0","@material/rtl":"11.0.0-canary.98db2c5ec.0","@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/density":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/elevation":"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/switch_11.0.0-canary.98db2c5ec.0_1612798456164_0.09758739514353376","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/switch","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93ab2eaec0652c582ff549c6c199a617e4a55dd6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":38,"integrity":"sha512-CVQJBnv9b8mUlKi1VB/ScGGxZg/9soJCBGtYa7vNKh7GDLs8+sUZiKFz04FRPe/QnpoPp3JnMh3OReMqXqnP9A==","signatures":[{"sig":"MEYCIQCiX4/JQP1UtHVS+5bUOTylqw4T29SgMGZTM1oVTxh3fAIhALyZzxLBRMrpYEa1YZaHM7KbUanc00vK5kCLCMS3YQoy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXIjCRA9TVsSAnZWagAAOLQP/j3VgTPK95R+3DHhTbAk\nQIs015L7lT9Z/zWeoGR6opFXijVmBzc/NEHn8T6a+uiISA+hRXymuJy4n/pM\nOQ74AO2y9+ap4YNtqxxADLOh2efSYTKMWqIA13hgRFTKyaAsKaKHZL5hAZUm\nbJVaQVQDwAfXAv19VHyhAj8/biOblAHrJNvjk5v2MahOf+Y8uS6/QA5gLrmY\nRu2qrJevWUUtabAFya/cXfTkfZK9jg1Oat4J9ypwfqqi/Zo4fqXe3VkosCwE\nThE2kGN4IfpVgvPRRqxBstlBl1VJzBdNzsrzPr+ZKi18g8IBvJTpdxMyB+pu\n8kfeMrVeS/YLofVL++gI1k3Zlco8ldG2U3eQVQcbo/A1uAm0WjbaKfaviB41\n0OIg1/7WhSYlLAwWcTSh4i2wzCy9f7FOQd85/y5FGK6uBY0BeR+CHqLrks5s\nJ7Lo2JIANdv74Pxp1sS8mdrlRpmLX0fhJUFOtC+HopqBkPgCakZ5cZev0uab\n5dd9Ke0cmohw1M+G2OKRsQdukErG5hucuVwLDO0KMXbYy/X9BWOE2i5lvYkq\n2y8JfTFEUFbxToquIt6+jcBsnJKhUuTJSjfWBD9KEXSm0A1OjSiVc1E7oagy\n4cPlFZAFCDpAPPnl0sRpwcFtX/CLF3SpimeHHuCeMe3GoB/OMykc0tmh+M6H\n+DG5\r\n=hpg2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@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/density":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"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/switch_11.0.0-canary.1f86b9f6d.0_1612804642956_0.6275804158212397","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/switch","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d4d31eb07d651652062b87fd51a807576300be3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":38,"integrity":"sha512-Buy9SOG+Yqr86hChM+sBWb1LriDA8zETgWDtQuFS7YyCobfkJD65UxCJ5nDnY8stSr2MOWbYU0gU2HQjExmuWQ==","signatures":[{"sig":"MEUCIQDkHsBdUvw5CGxFNBH6QLnp4ggkq6cc5SC2cp08Vr7EKwIgXgqBqFZkl91hpmksAziecsg57R9hmPCt3atcADI/9FE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXxUCRA9TVsSAnZWagAAjs0QAJuGh+ZInrBoWGmbGDQf\n+W2DA8z43hNVGa5S4kxbj625J2SZbEoKLG+jZ3ZyAGTfDbmUyWF5pUfCb7/X\nYidZpQEP76IDFd3jw5+GmcZIe0bUDJLU8EmpxuyXgNFgkhGIBjcgfeNelFqF\nL8sfOHxXhLnjzQIWKHlSg124q9/1GUTmmxX/Lbwkm2OFlYrfwLOP6iTyF7bq\n/HxkVWKHCtWvWXRWGUdNQxJ50aZjRnHk6a3q1+EfFL/5WFNlOWwBrisdlLBt\niEGa6Tx3+Pz8ZpE9BMOzwLKEtuzTOjoKfOzV0rNvRSitnwkRrpXZ7bSrSCbx\nCS1SZcs0nNTHa6n48lczRwM1+gZ1oG0rnIrqZB9wmLmqIfbg8srQrgQOQhj+\nrDNSnKd7xdzxyWLXBXOqcNq1wAafBkQ7FuIYD4xKqOENlggWsmOeEooNCnS+\nSOgzsgU75hYLa5XA5PJ9LYh9H2HMBmoWc+AXU+YS06F/RUa8flFBPSgjoZIz\nykSPeQRAgOWhUhFcORJg/l8VRpjVFoqgAPEsyytVKUwccmxkTokcoZf8OqGM\neGcXZtTudsINmpMvLHYvQ0+CUBXi53z3lnuzOM/I1H96PcW7jBGj+94QOcmt\nYYSHZFeLIB878v5YPQ1SqkmhU6fryLp/W8to51Z73m9dAHUcEbBJGDeTB3Ds\niOqG\r\n=qEvq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@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/density":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"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/switch_11.0.0-canary.aac8f5d9a.0_1612807251390_0.6562131092255068","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/switch","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c119efb6873f13497b5d0c8d4f804f66a989566e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.750e18fc7.0.tgz","fileCount":38,"integrity":"sha512-5ka7X2g1+Si/cuzXervmnsqpgW4QIIeBNVFwa19bCR8Q5lQicLQ9ah4e/Ma/ll4k1Jh+DKA/5qvcn2mP8xkszg==","signatures":[{"sig":"MEYCIQDFaMfeCV4n83YiQ2dhEprAjFJbdhk/0V4Kp+AEY5R5SwIhAK0REVPQRYCKW9cP7FXDClUpY43YBHfWFhpx84XzfK6j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbADCRA9TVsSAnZWagAAYDwP/1OwFp9cUp3t9aSKGFy8\nx+39zRYfQkhS/Kt74cFSnQhsAcU0w45AKsIja4likAyaPLab+K2G8nKHfbmS\nme6HFqW2s/YRzg6DvDnkYetBxVO0DJxCUZm21SPvZX4F+9yInN+w4iu2AZrw\n20l+AdGnKtWTVoK6+94p+jzfOdjriwTXj0q2+ny0I2YW4k4o9y3XH5SZbndk\nPccLNA2KVRW3fgHK1B+1XANaj+Y1lXiSOC6JxTb7IJaHJMvQsT/qPun1tXK+\n0L7/qNt8AM2lrO09QwUCKFLhxO9MjirBgBCzIFpGHkjz4Q+JpGK833WqmrM/\n49KSpGqvc340MW6/PZqEy7fBtDIceh7XVgQ7JGS4D8gXESeBCR0GXQ5HQk6p\nOHE6hKEjWHU14/6IuioL/ML19kQfozGs/cv4F54ogzHCx8U6uxWz+9eAqs7r\n2W2oD2aPTE0wyie8bvpwk0h0Z9uRzioBVmjrdn68e+B+WNdBeQKSWZSZcEdU\nHPXJS9X/EzYkS2OCJ34MFk58i9jVL2hBEHhwCtErHBqtAG2S58xNF5KWGHOI\nwYyZLEmp14ge5MipaHNOd4UDA6FUtRnVlHXlR3q7wV6BzXoCZgUiKK/uP+YH\nHQ4YFkSOY5wZshuvsnyKrh6cLSE47LzYDaG1k7scY1F7zz5xx7QYh3vCs9Cx\n9dxO\r\n=rS2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.750e18fc7.0","@material/rtl":"11.0.0-canary.750e18fc7.0","@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/density":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/elevation":"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/switch_11.0.0-canary.750e18fc7.0_1612820483320_0.6795753377060627","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/switch","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a57e6c3348911d01d0eeea8260466a16d99de4cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.b62b1266d.0.tgz","fileCount":38,"integrity":"sha512-8bTndBRGEsm6vLgidyyEXo11AwhNzRd3O7V7qH8t+zyczErGTXXU9FHgeCijCcgBdy1gTkqiT/fE7NjQHbDZ6A==","signatures":[{"sig":"MEYCIQD2IiVa0Ho2LcYGh8cbAfufmdR436u0S7YeXQlCThhyGAIhAIoa6t/ErG5ViGML51IJUTVlOaAJrKRbi/N/RceofH3t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQvCRA9TVsSAnZWagAAtZIP/jodEPbVb+L8raCdYcjJ\nNOpamIbsfxCF3CrDoApE0++qLQL2U19/EZ8qVPt8CKOSB4cw2crViUpuJrDC\n3AzSq0yaG7w1TqeBD0Cgyxy4MwbEyz7WO8uFfQJfIUkGcOvWai1qIekT0wz2\nFCL6q6kkr7g8mlkwrYKilFqpuvNAwNPsvFqB2Yj1ZX4+6315ftBtrpNzXv7k\n0e6eKxh9kfP0PCjtjQiIVeT9LtSat7tDyg3A4L93oyDBK36L6JPtQuWLJD7+\n7Ul90fE2LqRJcJlYHaz7vgWphFRqIWYJS2uzq72Thy/8lEWEA6LohWTpSmyL\nBVkB/cVIoc69Y/RyR/IpvgvUYiiWA3qyhaV0Qn/mJNc7BLkosO1ybfQ6Ht/A\neFL4nu0gH5NQOdYOkuJ2dRXWy2Zz/FRohdT3ZURZo51jYl8j7oZe35BqJFwE\nphSNo76qrB2u6QqNvvi5I2J3WUUX41hdQLmoAjFhdqLzM6Wd53ylxptv3R44\n49cGfPzscx3IokELieecjs9jQo+xVQCVfHrRZEO6/JIosG8AvxoIClZKjXB3\nKu7a8phlOsgMFM5qrwA+qCHwvSbocE9tH2qJN8fjCFm8Pi1+xEWl2CFEKUfQ\ns0taLgo8kXcskw+pJN2FXZEu5kyDbhxCwwGVc6iF6rD9NKSO5MZ2Cia2u2a5\nbTMH\r\n=Sj6U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b62b1266d.0","@material/rtl":"11.0.0-canary.b62b1266d.0","@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/density":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/elevation":"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/switch_11.0.0-canary.b62b1266d.0_1612907566863_0.4637492787120967","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/switch","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c652fdf196547f95bb33d85e53747d00651cab22","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.a6b3101fb.0.tgz","fileCount":38,"integrity":"sha512-eurJwe7fm6alUpqZHAUhXPpRfCjEtr8H9kNCPChXQ79UKwo5zQh6vLAwV5lqYm2tRkzv3EIyYrlPjYE27J4yCw==","signatures":[{"sig":"MEUCIQDBFLIkWSLmErqh/nW7le4+KmOe3enwGmJ3h9BT4+nJwwIgCgAwMKG/0sCHb00lA90KId81MtciBNJfTNw1OMrd9oU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbr9CRA9TVsSAnZWagAASUEP/1WaHcabe1xOLATHLWHJ\nXNGNpQU6/Wux+vXmbM/qXVtZkGTJpYsQXgJCgvioGf1g/Z8YbTxj3Z38vbkO\n16x2FVCA32hKjaLaJoWXPUfn3yGMFWX9O7K3EqJ2NyPwRST9fbmYdIQKviXg\n+oRJWyqx0za9knKzQwbzUOqvS4n6Lnu/HUo9C4l7PydbKHnGwzdXerq7/+Qt\nQ5t19biIjevd5mLdFs8mrAG8aU7SYcS/qa8LKF1JGm65Sx6rArLC0vAavAHb\nsoQut2XTYyK+eLrxJrlHETLQV1YIckjdou+C9WW6mLURr2kw/pvL+vLRbfw5\nvt+8H44UgjqzAuYCs5O2nGatSRK/QNMwTE0JWVkRGQ50OG9dld2LhlSqN9OJ\nNoR4mBkx0Fi9qZcfg6S5+ltIiKZm1UxjXhm1lRJaX69LWdhoVAfAILM5BhwO\n2M8DaLF6sK+/OdeVTmtC7YaQJPmndWKJD5KtwIajeEKTlFbl0D+stgOgGVOM\nGJDvoYjnphM5O0Ff55RN17zy6jx/4XxnRcgVee9IGRpREv/RjumZoiFjXcx0\ng9xuMfZsYaV1V5PLYLOeW41ND2n6mrcXfQp2Vfe8DUWWPDA1Bzwmf7upjBr0\n6P7hFjSIglaQarawQ9kmFwt4doJl/biFJvdVP2BU5QWrqGBipn9O5r8H6L3f\nfqvS\r\n=nRnR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.a6b3101fb.0","@material/rtl":"11.0.0-canary.a6b3101fb.0","@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/density":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/elevation":"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/switch_11.0.0-canary.a6b3101fb.0_1613085437253_0.23086066171272446","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/switch","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.ed88df700.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca5a3e894e356303f94b0c406478bf7513de0217","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.ed88df700.0.tgz","fileCount":38,"integrity":"sha512-VGke8dqf8HjBBvkY0Pi6bFKZrjUMh8aB5iK1CFIvzjFmeueLio/WdUDOtJ1606RhBw/LQq2dKmAWCNf/4YFn9w==","signatures":[{"sig":"MEUCIDz1x8z3hmbYyFU1tEvcwPDoq5n9wYAVvc2k8wDT69GIAiEA4Oe7GBrOZqXKqXK6QuJ09KmfeXSriiEXTC8adpERQrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcafCRA9TVsSAnZWagAAscUP/iWiLxzKGyZC8CLMA4O+\nxHPcikVhZQwrNKjs7vmK5Tg1CRWjk6UGEoU7XZrXa8TU6VMz8BTBYNDA9dK7\nLAM7BU5Rg3B8VKgWE7XYwWd/WyEVuIPiaX9jTkYwmrBKZBKnZOIUuTrDTgUZ\nAGFGFI/WzJ+UirzIPymrYuJGfTKzmRoskr1xdiwGMMnA4sYkr9mGncpwGo3h\nt1ALgrhGX96qCPfa3Uh3yJf9naLiT6IKInr75zEdkOkZuHMprn0dLytZFScb\nZFzqs9PvLxEMIRR7aTeb54Z4FuGAxoGGSQzxFgde07aee6VsrkjDrRXFg6rK\n5jZvXLPm+2wi4Utdh4ROtCvPhlvnp41kyaetHda4OFiC7LLhQ4gcAx7Q9tRY\nAnYyGuQt3UuNEVx9VH3bV9pSEwGD5R8C+0YaLYA3g2ii5mx6fHxIOgMReLuB\n+CWMUluEjPagHLciUrM1RtrPsQ1yTCsOzxfJIS2hLCpDM+d1555TCTeNUtJe\nOwDOxet38m3O/IyYhj2LXAMSvKuvuO/VkjnZrsxyrFgnDyzlN7nSfmoM9u+B\nb7sCN7fVowB3PkBpFnhUzCwZS8fEeQXz0eMyV/FetpOWv9gXkuiYDguZUoeK\n561adBgF43PEf7aJjowJO30TxWOJxz6FbIs3bxYEUY5Itn404/MnLOmIuexE\nSdoJ\r\n=Ncl9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ed88df700.0","@material/rtl":"11.0.0-canary.ed88df700.0","@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/density":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/elevation":"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/switch_11.0.0-canary.ed88df700.0_1613088414971_0.8631747636056974","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/switch","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b23c32a2a30bd19871dac4cf222c4c274cb20ae","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.d30efe6b4.0.tgz","fileCount":38,"integrity":"sha512-sIryldOIM2NwsyFgZuCbLAXyk74EplJL/5NxTLyRU8Asyl086WFjOpMviffq7K6896Jg35ooYyH5MDmmroNZTQ==","signatures":[{"sig":"MEUCIEsys294LBsyfTBuIs4LjV5gAM1u1LgFY27SLQJz6ByuAiEA4u1mAdVPZuI79u26WLvsW+apmGKRCAvQrWvEQEk3v1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJer4CRA9TVsSAnZWagAA+Z4QAJ4EkycDZH6HMBfL+/sr\nkHEoGHrjIprmN+K/8ZD9iFBFvl9d3y5WAY4jR3i69I1hG0OsPwSc2zJVS2No\nyRjYbAUdM3Po1v2U9XI8DLj+RbYDR0Y+gGuMsL/q+wKrKApF0c1IJRpLdWTe\nRxZe+uyX1DfZhFKBxsVydpa0iyKMHIuYb1II1mciDbr2r6SSaZX0mbJs2rjX\nOiiu1ot6bfgh5eUvlf1kIQyOXo+2CnHhTnkwYyKrl5pAfFNOUFFFpA3hmDGv\nN0DRAb1bMr0+GjlvTp550OSydot0QL4foPD3X426iCgSkrZ5rMzs0t+XQ7By\nvRV+r6S6njq8URhidIIUIUal56JQsLois3pRVMNtIE5RkWCTCBLhya6pHgKW\nWX/py2dSlp586lR3EoLN/FdlFCN3mDEd3kS9oX1IqRzihL+qWbD7i7mu2s3H\nUA47LcJ0xb2xDdo+g5h51ektIydD1Jf+n3/T4r0F1aBX1VWCyMoTQEK53kCS\nN9VCx6W4t9yYQjL6JRzXdrGwR95B3Wdknxatj9OTS96/tKyxA3F+Qjus1cvy\n3/GRtR4oDMxjpv9FMzmoWEkCUKEhtjQsQ/VttUqenPfrZdSaisv+KKWQnKd0\nwqC61K7/e2tbSLLZ9M8fH0KMM3rdan6sWdNhmyr1QNrRMpjhNV8FEOxWmSvL\nELWZ\r\n=ENYZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d30efe6b4.0","@material/rtl":"11.0.0-canary.d30efe6b4.0","@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/density":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/elevation":"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/switch_11.0.0-canary.d30efe6b4.0_1613097720130_0.9918225382605299","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/switch","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c275bc27bac49cce4c9a5ec645d6d3c991242a0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.0393bdc4b.0.tgz","fileCount":38,"integrity":"sha512-aN74lJNdpqmX7D+OVmogQ2vjzirHVudT6moPwpMDBHmaMywHby44TDDL51iHpj6gv+9NCFHTJDkb5G5LB3Du9g==","signatures":[{"sig":"MEQCIFdtXKo1aMut1G4RJNVV1Qm+qiubKtyDNVvJjJGexbD4AiAYW0dSEUKVKTyGegpgXEri953BN0NGsptT9TjDm8AcLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgSCCRA9TVsSAnZWagAACPwP/1b8VzLM1uo/qshm4bLl\noIwaVMPJUOFT2sfG1HlTuJ8L89kdqE0w1CJLe+MTlAxbqnlPDGqjielzM8YQ\nl0ZWmP8R6VN0t8Rme7tjSWNB5eXXzzTnr1lq3QW2iCkb3JX9qf/O9EH/+9l5\nlbLiCYgEgZwA5IOv1YmSQhSZMDMfH4JWzk6iG0aGv/jPtuejZSHT4mlDU/r7\nOYawIEH4g1F9+xAXV19Ae4AXoAZuVvEWcuHrnqaTJdedFwyugNEZEVc85ral\n+GlgFjNZKpy35o9iY3Q2JUx3RNsxvxS7yNct9aPaXzau56ROZAxxHygHfJbs\n6qgqWEQyzK+zT2DIdGXg3eNIhR+QOP64kDH1Dej5qz3gpag9Kurl+f0w592i\nV0gtCfjbANdGohthf1/IIVC449HFwuYwJKu+ODaD37kQ4TEvmLi6JC+eQXut\nbHfR2+2OIixbo0W+FzP4K/VN+TLV6NXjAsBlgs8jZ0PVvzebuk/AO/X5Lv6S\nJW0LpckcJsMrD8CqfSABw4sFK2KXnx21TWhARWn8PLQ/8mpXBzPZ04uAe1Y9\ntScWlwQQ20Dm1C4Kotkk1zyn0qLC4Xm2jU7eoyC9vLS1Vpe4Zv1DKNbJYgMy\nES+LR/agn+Oa8eHH3q6F+veZ5DgEP2gcOG5DBYuz2mNpfuREWSnJ49JXdMG+\nU7rB\r\n=hR+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0393bdc4b.0","@material/rtl":"11.0.0-canary.0393bdc4b.0","@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/density":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/elevation":"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/switch_11.0.0-canary.0393bdc4b.0_1613104258313_0.14148574147358683","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/switch","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28a95d63faba40bf9182ddfba9f2e7e245c01043","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.7cd26af4d.0.tgz","fileCount":38,"integrity":"sha512-Q35HEVVaDswRZ1sj4kp3av7fkxgpLQjy1zhLOUNrv2V0HIW9Sd42FI7ivJxiqQTh9nv9wCx1n2L8qkYlijj3fg==","signatures":[{"sig":"MEUCIQCAg/h1DyDp8qwPXLXcH5iwisgvY2XJyhkliSavwwOvcgIgGD3cqMCdRHyNR/dNzp0IqUhq1Pe5Moad2sCAlK/ypYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXgCRA9TVsSAnZWagAAEhEQAJ0GVRAEJF1NkobnAO9l\nHJjb/X9QZYwX1ozLIw392qfVlB84d2woPtyEs+3HEkJtgrnDRylqs4f4qKOr\nhYlVj9s88GOD82eND3z17pNU1Q0T7XI7T4fSD+p6+jzKtxMWcVtSZnLlPTxa\nlrpqJVs9uJzH1wwbWMRNwi4tWEjwctLYdk6DHjYgzzPxsrudnLaxaE6u4ZPO\nxaGbtffs6N2Kq0bClHTL8KxA3GDzjzSzc5WHiqSbJ5ivxy7YwmJLE5ScrSeR\nvEpIvVDiEU9ogDDIEBXH1TlNV40Ec7/0IFMYQI/upcCt6HJOHnQquXdGEA70\nJILVIO/IWQtP/t1vt7TIm+ki110T2qmzehiCITKQP7HtcKxN6EUTm8a9Yg1b\nCpoopcH4rW8TjAZYMblqdnPRbm2hjUb+gRA79jHc5mKsy+GItkT1z72pryNp\nk0R3frhmLstStTzBi42CfwaRawDX0CGQUj59yyvwxo57LA2emLWoSSp/nuCQ\npzXQ0E9coOpoTqu0UwCTqdodUZLC7Vpj2PToiKRa67YU0BEwwuJEzuOu/Iu0\nQ6VxkxEg8JEsdmDZtWeWnXIgKaiOx3L+LlMye9SMAFFP+cxX28nthIxdXVGA\nu76vHJAut9EQkpmXXrzOeqNzkGZgiIIRoGFV1liOVY7k9BUBRh9iMj23zi/x\nCTLG\r\n=tRaH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7cd26af4d.0","@material/rtl":"11.0.0-canary.7cd26af4d.0","@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/density":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/elevation":"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/switch_11.0.0-canary.7cd26af4d.0_1613145567334_0.8586722494118135","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/switch","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eadd193419be86502bf08a4d9100bbdf15084629","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.71fe9a067.0.tgz","fileCount":38,"integrity":"sha512-xwACA4FoaunNwTV5jmGWfKmfzuXn1TVyXe+KPt+BN3jp4bTnuEeKI4RQRLE3BAsiXgupUvYtBT8w7Ftlmqb6hw==","signatures":[{"sig":"MEUCIQDh98Ky2/AS5wYlLuY3cRCypH8rN5RNg0hT+IiuxmI9+wIgYFdrIhDUpwy+hy/EcVChz2J4mJZu2ff8ZmhNsYF5FBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq1ACRA9TVsSAnZWagAARDAQAJa40qKPE+O4o5Eaj8Ch\n6/IgFm/y/ttESlPoGlMJ/r3BVdOqGzuHETnoul9gesBEkkQVQ1W7P6jgqNRg\nvLDWNdunn6Kx3FTjnYfXjoD+KE/5su5DYA2PklFJpGrcIgDSeVvnvnnCXlbm\nWDPSOCGuRgvuO+LQHi6N21aLXlwSl6q52QVu9W8popS0gZD25Y7u/86nvXK+\nJPNLQ1eOcbU+ZvXu7ZOOO7LA3U0nR1KHrOqBCPtfFe3hGDblj8F1BF6/g3Y9\nu+qmWLe9wdnERTEWbmbNqj3MDwRb9v6+XHkOlsJRozhlbYyEdoWx5K8jK3Hb\nBOxactnBjErHN22Yy2wvMurNWiP1uJlegSX8e21RP8I1DAwZLjTViO5mYhh+\nxYtMDsdnFwgzTmBdbmvV08z9c0VREmlcE0yOfNeqBmM76Mkm75AthrX5+Keb\nRKeQvNl2KMeEV0lcvHgqX8v7aWtdSn4z0pL8LHkB/JM5X36RgaHvgZ2jkwDS\njT5RdnSBfGA5r97PQMW2CPJVh9n7HcUxFTj36LhJg6e/NTFx3Lkhajv6KCoS\ntssWJhsyCns3wJyUmllkVd4MhxNPgFRNO0029LSlk0jDhOrB/RuKGMkopT/x\nXhHmdAabuqAHOYb23AeGKTeVMvbTpBAlVVm8JcJgg8S+vX+4vqzMjW1ZUsv9\nNYNf\r\n=rIpC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.71fe9a067.0","@material/rtl":"11.0.0-canary.71fe9a067.0","@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/density":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/elevation":"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/switch_11.0.0-canary.71fe9a067.0_1613147456517_0.33592647160594424","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/switch","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db52184ef3540d60bb6baf1559fdf5e2076984a6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.0fd56a86b.0.tgz","fileCount":38,"integrity":"sha512-kdfcwQGwCxbL7rrS+lnKRewcG2Ma3N5X9S0uFdcntZrpoRRUwLMODroK8fCLyW85DysUK4revw3zt+bT1kFpJw==","signatures":[{"sig":"MEQCIFTsY9Ke33z80sA1cIGSbD8hQ9igLzrSXYjRqrDGj9OAAiBom/u8D2gkt07JKchkIMq2k1s2mfXhsWSvLTE8ZCJSaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxlCCRA9TVsSAnZWagAAVgcP/1KYghRpFc0NpdeLVi3U\nUGUMrwrTRnNPTq3YaaqpIx9VuMwJ5QG+2vj+RWxdjnZjAYwu8BFVaAwOvM9j\nQYOkwCc/y3vE9W9dHjtPnVImBX2d4462HQ/Lv2Kgs0/5fQppBozKCVDJUfuA\no6WlHH4vQFvynZmQHsRkMzCo3y88k8Zyut5mHx6wgCFI46fU5DKyTmTt9zPv\n7stndQBi6t0fLqtNk8dZmessq7d/lRcm2def5cuU/jCwSfAsne+iyC7ZDOzA\ndCVp12Kvb15sZHws+nzUx+ficGeTlc0Zx9FYmopUzYYph0ELIrta4PQ0CFbF\nC+sALpAm43G2eZRhc48NkCW11KlTVdNaazpeG+3oxAQEe44Py75q7UZpiVSB\nAE2Ke8jCQrbhfczlVaICn+DGcu+QJsVl4UNOHKLZXaj6lZuQ9TJPVnRdf/hj\nKYCzyv1ZcoCGMlyRoMO15qSZwSPnksiDBSqoztYTkY0EuiHhKmPDWelklxOc\nzcwnJbN3DbLpNIakt06dN3KIg2Ivb3PdD9uMeK2byt+nmFurN2DcLTvf4kBK\n0KkBCZdCQp4UMsHFkEX2PC7shScqEZdq8t9A9aHgS8ReePazK0OyySckgTLo\nXm9gceDvV+/+/wbAZZ1jkER4BnuQPWNxb0aS1Eaih2fpe27g0tq42lYU6tJg\nJm8u\r\n=ifma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0fd56a86b.0","@material/rtl":"11.0.0-canary.0fd56a86b.0","@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/density":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/elevation":"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/switch_11.0.0-canary.0fd56a86b.0_1613175106435_0.17516692418749602","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/switch","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"424be31847efc73ddba33b5da5442aebedd240da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f19bbc4af.0.tgz","fileCount":38,"integrity":"sha512-UXjrlLQmT29/6V6b9DSublO6lrd3aE58MKntte9kh7i20zTdfjUXy0DY3EgNKjAySP+Rvob9vgaKGkPMM/jolQ==","signatures":[{"sig":"MEQCIBSq4slQNAv3R33iT7X/Me3/StKiUR7R/gWeQx0DZ9nYAiAHTB5G8K9F7AMWkaYCJG4CMF0GK1P7ANwFQevMgzGlnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQvCRA9TVsSAnZWagAAlU0P/RSMQi11z/FO0AGpDf5w\n9+df9xWppboy1xpMPWEuWfcc5Wgmlg7j88d605/po/9gti+eusZ7G3Ebr2Qs\nJg4TPWuLU5cKzCEE7FRUqgO7YrqSmMyb8D+E/q8TumL6vLEyEUAplDiHthUj\np5dSHNXeTOdOxoszHDmctqGvAxbsCa3q4TFqjqHcvPXsYf7iz21B/eP/elC4\n8lR5xfWh0UFP67y3qcIiRBwn6mr+92pXTy28Y5rdfjOtZyfB57NJfimq/ZZ8\nFMXtsj+hYhFuaYV5n92Z6SbVWzzX29Wq5GumEz3xM17EusfGOqzNdlBFnSLg\nJ7uUVSk2edDK0aoI3i5yd7ypOnfTCIW4WFkgW9otHjaMdnHBENLd8wUQ+Bud\ng+VLGC1GPeD2MckKo0nSX18MPmzmrxub9mqpoimwq3QjWKvGSqYmAzWTTiZn\nbXhNY9TlxZOyYrMN3HzCCIGkYIAV+/KF2clVwhvtPgoZ2jC3dtn5igA/N5ea\n3n4JsZ54bA1uxQYUGGtu8pVZXPtCHNHchGhzp3dSY6YgLZZIOe+qffwKIn7Z\nnOTkMew8LJ8nGcw6UZEnuDsBygxRo1TmlvT9rgJQXyqYIBOKB5uru5t4h+bI\n+WNQyqb17wnZngXv2rcpMc6DoH9PdGWgSx6oZ3cs3vKjhYq4JXncHq3f7oB3\nrPJy\r\n=vpCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19bbc4af.0","@material/rtl":"11.0.0-canary.f19bbc4af.0","@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/density":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/elevation":"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/switch_11.0.0-canary.f19bbc4af.0_1613513774801_0.5577692015656885","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/switch","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6544ec6a9585b9545a615de985e249e4b4674079","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f9cac96cc.0.tgz","fileCount":38,"integrity":"sha512-tbl9ipMTIr+uMQb/wUK6XGnwSSu8CyTHGrIsZ7ZISAunVfdGyWQp3fSBHzgenDO4AtKj8Tiapq9u2eHC8QkN8A==","signatures":[{"sig":"MEQCIEiiZTJaKWJo3VIUAQ9RkvBKlUxuIicYw9sbIS0lSLdmAiBzCymiakp8vamsVQk6WM2hzdh8m63W+ob9VqzgxDFILg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/WCRA9TVsSAnZWagAAN4kP/2Slf31dfTpb0GviPPUx\nZ196Kv3aJE40U6Gwso+eT1im3MqO7PLGDliaQPFRoj8a6hR4cscdiuvSm3Up\n2Xj7LsD1/7DoihmcgRvNJfg3A0cLfwMDut+hqsYTDT+GPp2CQv1wmNM5JVNf\nJpa7fyMRcbY+rStxsMunkCeBfDjorgP0xsBDmLcNhSbqAc9c/VJz/shU5rtp\n/uWewoN/wux/GcDL+LaDXQGAIkNfy5ljJ4aUnrCUWHDXsIOtgcChzwtPYJTk\nfukP+oNIGccMMO/igRs7H/2j6fi/V7kzAG43rhJ+zoZpdjlE0taUGmITTTTJ\nen+la7Ju1hdkP0CxREieiA995yjPOhdN3lCx+hINWMm0rd02tN06EZ694XrO\nKRF5LD8eGjYPRf2WejeOPJFVAaHk0kmZbNWASVXjZxsG+cP6iGBEKiQqhjb4\nMXdQ69WcpOCX/v78OXnGuNMpWlTDDcdGTMDTlfpq20M5S5NcB+nYYK8SKLbs\nDd8L9VBQcNu6C4IpCdJtSm9NEwNSPypGNohdXKXNnpEUFz9JM2NGLtTb34Lu\nYdS6XcQwU77PcgER/pPOhu6VUV5LX9qPYpwCbEbxIs9JM0QskaQhYhXPwpX2\nvyQpNzJUaAYAwEtphFmUXsXkOzuBdz9vg6uN+JV6M7vahoVLOe3jgZQZiixI\nIWxl\r\n=zafV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9cac96cc.0","@material/rtl":"11.0.0-canary.f9cac96cc.0","@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/density":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/elevation":"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/switch_11.0.0-canary.f9cac96cc.0_1613578197703_0.26821909933844146","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/switch","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"495e73466e2c7c86a09a14c4d9eae4c012003063","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.79ce0878b.0.tgz","fileCount":38,"integrity":"sha512-cjvNRZqZItFAeu6nRQM66UH907TC3/qrpdToBv2MmBiKh71tCyzjsnc1SnzS5hT4yjjSpSIeKEJQWKTDqGVPPw==","signatures":[{"sig":"MEUCIQC/kfEoeplDww957m169dPZzwX9l7g/TCVKiuXukHjtBAIgM12JJ269RqI51sr/DRCrfwg3owt6oWnqU6rZSsiCeVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW2aCRA9TVsSAnZWagAAtMEP/1tbzbyiCHjfpoxHlcG0\nrjajnJFTDa5YI926mjOZACQZT7YJmssl++KqxI7EUJxuBquBe4v3vp+5duKI\naFkFZlTdfXu6pgcu0NhYCwBQki3j9D8U7ttH1d3QX5PvaDQ8VT959TJwVEDV\nWGVLcZRuwtNItaKEqIC0B3EL+TicDwkB4YQUnrV5C+yjNXw47JAhSF/WmW7Q\nNTeQpKzKYUOJvn2aMj+oZjWv+bn9ieiFBhjDVpmZdLXh2CJsCaiUR0HbXM7i\njsUZo4JbmduBq9vtSU5Ymy8cftr+AJOfYNhdxewHncmJC/wPHnLMIpenfvUo\nVHSnanFW+9aqCkIXZvk25mdZJlfS/WX0Ekd7lWw76VQqKM0QoceObQo+F3Ln\n9PxXCGIgiLigcn1O3PGVwIINvrhaH+fngnKSPcV6tCgPPw6mbZ3GcvlhmvT4\nI6SqGQJegKWkxYABT0XEub0UOpHhZJTW3BaWNF0iCb4p6O5NMtFHulpSrU/2\nZyO/jXzqst1Ij5iwuE5ChoD64QcMH67IuygSFD/WFVwZBub57ABVWOvpWFOw\nMjeQhu+QlOqqd//Eurwq1xPWlZ56OvZTd+ulDdo+1vZXgzMzOawOcANKNHWH\nZxSC5Y6mhS//eXXAHiEaa3iIk2ihBl2sjWAYDbKlYUWZ8b4Hb7lkSY0RWk85\nehD0\r\n=cF6f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.79ce0878b.0","@material/rtl":"11.0.0-canary.79ce0878b.0","@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/density":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/elevation":"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/switch_11.0.0-canary.79ce0878b.0_1613589913637_0.43552908004746094","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/switch","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8b09547e167d9a976f5e960a8cc051ae7972388","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.d6e507b5b.0.tgz","fileCount":38,"integrity":"sha512-GZAMzHJFN+hgnNefcIYRdIhib9IMlVFgsxAsUi4/wtLv374DRnjDYsbkg5WNgXsuZYDDGLYW9+krveuSDTnYcQ==","signatures":[{"sig":"MEUCIDzIbrF9MMmTtWAFdIu25i09aGTNyFUyTEyej3II1rXIAiEA1o7DpdwK947RUoLGpeRc7BqJYVsjjCGQ9l238Z9J1K8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXVUCRA9TVsSAnZWagAAUZwQAI2VAGiqojC6OLv9qqK8\nYUnKNruQkAnDhpYw/ut8ttq3/EuS8I8uwVgGuRA2398Wo2BG8VV5wAm0zX44\nlkh6TTDdPRXavoPHmEJpmxeFnqRd4GV0RKrLoanPUxB1j7vlHCbiLhxvKkRG\nbKH3JjJDcxid7pz9+oBcZG9+HMF+K5FGoPvTXg5boscuig8YYqNZa6uFctP1\nKzKXuAEOb3+o3G3m2Zc7B8o95S700GegWmDJe6UmbeJJ+ke5KUKgvZiOdJtX\nH9ZJGgX5Ny94eLWUpNU1LQ5fIz9E7RWMJ2gy8VNTDU6ATL6PPMQBhV+2ovMC\nsBcBJnkWXSB7DvOVofyUunVkYYBPW22b+3hIHC9gY950EY2nMu1RSXnhTPK4\nerVYBRCOVSA5CoLvRJErDONUWqwkQi0UCfIJFqLJYNocr7HmD/Aj8I78An+1\nnGQdckyTUPHGAUMcEXcyOdrSfxpYDl+9CqpU2zYJT0u8sxrCeuLcFtT3+SiO\nXdOnS7K1IyIpRh7rBIqmEMDo6/VcSWgkJMGy2L059Eh4OrkrEn7+MsTlNtaQ\nyGahWeqQIymyKvWvFuzBmWKBzRJyUjiF8A7m3vwEwBzDgOBhlonP36jkSBQF\nW+u9mNP8J89lmir4VTNr+I6dpt6Qpc9+fyR9iq0GRHlrwXcUBHBSyrLbsYKu\n32zm\r\n=y8Yw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6e507b5b.0","@material/rtl":"11.0.0-canary.d6e507b5b.0","@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/density":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/elevation":"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/switch_11.0.0-canary.d6e507b5b.0_1613591891860_0.41845271155728714","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/switch","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f2658381b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf376c9ca2a683e1d2485d0fe8579332f614e80d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f2658381b.0.tgz","fileCount":38,"integrity":"sha512-RsZCl2tlXV4fkTaSLucDY/GfHV7sk6CIFzQeGLZCZFUqXgKi+HAhXikPJA708DCWZuG2Tmu4cpif27OJ4DlnCg==","signatures":[{"sig":"MEUCIQD+sGNCKb3BT12aqqzObpYdsCEDLzBf1hHa2VkdqsIowAIgeQPLjsYktwtvFrW1MuLT9wGzb3BrE+DsUTg48xcyTz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxjCRA9TVsSAnZWagAAWhsP/Rxr0G7kAteLaf2WTVT3\nIe0Ys3kOEL7kDHXgY2eoPcDTN1ZhOva8Fsc87r7kklOtv17XIvNy25dDpRSu\nQzcF8Gaq5IIjYOdpVQ70j/U4/Y4yfFXIDvKf+x+6fToHPZdoF6whNSfB7hpM\n+RoBhK4JB4yIO6Yh+5WzqsthdydR+4tfl+x2ptfFTu+oReTiiveI3h9CJrE8\nmCmm0uKDPXN4gD+lapQkrAnqEFmDKSrW6qM5iUFkSqveJaaLykmRo1Lo1c/t\ne9Ti3lFO4nRfNZjzjrKsQZWWoIAPZQvx1sq8dzbFsgjEKbRo/9VbQFNvlhvU\n3r1vHXy3+dtzUsrFGCZY3O3Q5lVCdhl/HOdGPr+Gk87KB9c6BmxInumljnbW\nq8lkRolouey3ZmAwicDAhRS5I4oZUygeuNEimpIlKZ4It9JcipiBGbzB+zcp\n6zUwd+SXMz4krMkzlYBYvE7P3m28Fex/pJXtvfcHhZrwRaOtFboPWYRczvrO\nU6canvRl/bm8bw2OQcWqxyC7kkPdvin5188kEpb1sa/JpKrtHJyZXCku2C/5\nzn9lk0DS0ljIVhUfnPSWOVT/dK58FzpQnxouj7+02mFNFONtyW/B9ib1V4nJ\nBGj3+MaDYzqsXUvd2llcckcE5jHH4I70mrCrjHinKI02BC+zESJC2QdOy0nV\nqKor\r\n=Ft8T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f2658381b.0","@material/rtl":"11.0.0-canary.f2658381b.0","@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/density":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/elevation":"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/switch_11.0.0-canary.f2658381b.0_1613601891199_0.04403320303646607","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/switch","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d0a64657a9cc6e79e6f8c217f69cc5f4862d242","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.97c4d4035.0.tgz","fileCount":38,"integrity":"sha512-LSxcPQVqiQW7jTLwnOmgI16y7imYe8v4hIXzcSwdNPq4EvNNHuNBxsAKRAL4quBKvNi6Dy4TcDBwjaGfRlvjyg==","signatures":[{"sig":"MEUCIQC+KHl5v4bYEr6x8nT8/RGpCIzReh4Y3k5sLKK3TVwqiQIgOhznk/1/c4LrlZDF0+snUr6IWvqtLn/bpu5x8qmdMaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJeCRA9TVsSAnZWagAAWSsP/3/0VfOLg0CI/gkxLSRA\nrXzQyfGJg7YoFW399z+5NahTvFuQLqlXYsj+H168rDQGl5QIovLSIB3Xlukd\nAvXUedpkOn7byKYipXIE0gpekXsfeAi2YopM3lG6yI6tqCq6xyhY/Q1idYcz\nld9447JacDvcaSlFXA/j1TCPjRnD/vQ2eb3X/VIOD8sqCZj4gsLRYyv5LeBC\nbtEgF64dOWOQmaOgQe7OPAzC/DWf+ym2M+w/XFh0SB6Hnh8qSuApBrWOnyOM\nP0fMIxFTn8QCQjoSvADeVfaHL/KHVDuy3sS7VKeKM7kKyOiMdzAtcWLKNoaP\njixC9rHS5UXnqn1dms0VSYb+aR7niEdwWwUV1N2sRyQPSvAOtCSvEAaG430c\nfhanAY2XcBm1WRqfSZSZWv6LufLjTrgUa84sltzbUufWSj0d2f2mCkw8o24i\nmHx9FIXtOBRkS6Eb2GVs8kiIw5depKCig9klKKiDbP6WSovSTj5W5c2w9p1E\no2eLe01f8gWPd4e2B+6M3m2ErsRhEY9lMD1xTdg1yxX11YSrXcRRYjLBq2DU\nsNcZf5ikEGbiZg0h2x8mL3WmNo5h+kYWFp7Vsu7nAeb2mEUeC68YydmQW4D9\nVrGDOlMJV4qDxlYLd0ypyjFtJUgzN0PyTzePhUtI7hart9bpQ/R9dp/UFMZq\nRiue\r\n=Wi11\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.97c4d4035.0","@material/rtl":"11.0.0-canary.97c4d4035.0","@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/density":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/elevation":"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/switch_11.0.0-canary.97c4d4035.0_1613615710263_0.12391033169929089","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/switch","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7a904b3325cfd4e8f2b2957e1e8cd3cee716f0f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f5bb4648c.0.tgz","fileCount":38,"integrity":"sha512-R3SEBNE1nRt/5nU6uWqxKVypGba+J+gPzgI42xcP5IwzMAAxGNCmZpx0ZRvQ/5gfLsNYAigtrXWnRsD8f0eVZQ==","signatures":[{"sig":"MEYCIQDXG8nnEoeVgXXM4t+1u94KV03c7sptCspk08eamyzXygIhAIaQDnH8Y1oE1DVMHO28RLbN8KSvaHzKLS7fTlinOSvH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpBJCRA9TVsSAnZWagAA0tYP+QBEMgiY9tluVaiuT+Ow\nFouDe4jvYMWDeWv9O3Ut4+Uyfqmtxg8x0GeeN2K6glBaGoy9Ct769n+HSiPU\nbEFmKKGxTbNHFhc+G8Z3FAEsy8r3r3qJkMPTzNnHQKq/qAdMJjpWnUcgaaPw\n9SFrp3j9KsSPpV0KhRWLCWp1kLjvGjB0W1yepk4V1T/+ZRSocLRpobYtibQN\nu2TGlmZboebvwMCA+x8hM4fsiUF0kwWtZdBbOADnEzeQ7CaorMlV0Cy32gKh\nEGl/J4hCWq2gGyMa7qi7lSo5AJ/KpVMOa1ikwJ2fXlr0+d4jnGaHyHX1N8i0\nTo6ILlAtZWcMT27IuFCwV9z0wZwjp77Dsnfo8yYq7XB9RbCbDIBA+o+SGYbS\nkiUkkY2JDPX5PfXxBkIoq+PAnTTRhAjlRmvCSpJ88MMvZCLUIWZQ7/wB5IiQ\nmnqx2C27+IfsW+UZqQUvApCUwXY2u8JiOdY7mFzOytfirwV02jWAXWi+U51S\n9qaXVRawppVsgG/LDaWODy4AkCKEitmX4FcDlXGINriyljrtRz4hkQ4KB8WI\nZa9zzfFebS7K48W5BgVf6oKBNnQ2Xy+/uc7j73m3xmBfKHyQQhRqOlWkJ+fd\nyDrOgTHaT3TFlpg6CGNFlUIp6lK8/gTuXP94+mdVcBXxbCIqdt8u/rJaU9Mi\nAuKQ\r\n=WiaT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f5bb4648c.0","@material/rtl":"11.0.0-canary.f5bb4648c.0","@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/density":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/elevation":"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/switch_11.0.0-canary.f5bb4648c.0_1613664328953_0.030647419569980405","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/switch","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.302c7a960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d683a7cd310a94c93ca5cd6f6a76cc2ba8136f71","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.302c7a960.0.tgz","fileCount":38,"integrity":"sha512-ZRA3XUOtsQustWCvX8zqKfKHIY+HJ0++4sR7tv8GxIzJCxPSN/fDfq9o9KmBoJ5H0AKMSCy2c+vd1CTX+FwB6Q==","signatures":[{"sig":"MEQCIHG8KatG58CpmoffehGnvidQbOJxHJqwszPEnMKljLUcAiAm8TstUtGjqdLqUpWbUXA/F2pOacypLLDTl27FpxYdoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrP7CRA9TVsSAnZWagAAO8EP/1C98DSxeQYDbmFWp+Mv\naCqxZDuPNPi2lZ9HDpkG8/PRO4SPkKVa1d8tY8YbU3gTCwPILsIrW45Y6NJD\nRqynh9AlrJF7P/O8NOYcMfZc2vUrNPs8rnUvkCch41zzHA4W69sbkus1kEWm\nHuHmSyWJ8y1lxtzaNsb/aOiF4jblGNfM59+jCFX/KpzWK2ZNK2wClUUr0Qo0\na2D39dtlsyL92iCOYn+JcGPeddInkmp906croK2pmhi8IwLnJBocWs9j5yls\nwlTBCKUHcOLzumBqPrlrmFDLjXFjvRqTIN1CgQkzNErseDr9a4czmDiSE004\n0yjM9QJsSLshXG8Fa2w5ibhfXo+x9JTOwOj7fFEtTlqkMx0dHtjrQljrEdb6\nNQs/1Y5Av/0W+Peanp3cyAzSFUXylm2AK1N5xd59w+Gs0HiuaRgc5JN/D06g\nMXsodzlDDoG9+JPD1q+xulpn5oEvieiT40xyw2/6O8F+IYN3cPzu4tdkaBcu\nXbX8ivQWAV3A9IX5bNKNToInzpbeA68znzJQnoRDMWwkQFMKQ/FgIvFgjltD\nn1/UKrXLY0VL9YPLAgIGoXXvyDt82xmnVI3gFwkcg6yWI42/izOrFJ8Pr4Dk\nR7Vj0G5rtQ5UMEAmhP5L1fVaVgfvqlhOOV8jzh/IUClw58bLAJcag8ezZqHk\ng3vV\r\n=wYL7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.302c7a960.0","@material/rtl":"11.0.0-canary.302c7a960.0","@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/density":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/elevation":"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/switch_11.0.0-canary.302c7a960.0_1613673466732_0.9732374310125975","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/switch","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cebaba32a11f4b547b5a546654cdfe9be94fe1ef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.aa0aaf026.0.tgz","fileCount":38,"integrity":"sha512-Z9BuYixiMmflhK9r7v+vrVh250H5G9LjCdmuLcRlLWLs2VbxmIAy+wFQYGBQG53yDgPOqu/8HqQxNPAZvQudFw==","signatures":[{"sig":"MEUCICUBmfcRyglgAdJLd/C6ThhjEJr/78ilF6DvUywLn4zJAiEA57ZRQ2qt9EFnN1M6EvzlWb9bkCiZ9WnXylR1wfBR4Xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr60CRA9TVsSAnZWagAARN8P/3jyxkOYBglIiq7enj42\nArn260WHRJ4D6FxwQ/I5S8toSKYj4e1bjCZVsj1iCbwM8XOznnWsT6FNuHRE\nATx3RNzGNE93UyhBo3MXYWSvV3Z3SeINuBvKHqR2dSt59mXCz/3sf1wKA1cU\nN6rFC1YAulvLgJULJtE+4LT5K601CfvPzLqtoqXI9l+SO/24fsCDe8uWed9n\ngSQckftRZI2ABkXaEHsXHHIAPfcunb4ApPP26h3bnjek1UAxQvqx1nufa6+0\n+SrJ01FgZQ0GBzk0ZGsJQmxyaGzIXSCVyYHoaJKoLhRKXgGt0DyLjLWgXldp\nlLa+HEaytypgkHe8+rCeTlJvkoeT29iKB+SQTaTr9hFYNO6q+8TRH/HlF0Kj\nlkBMEkLl4EPvqZes1rzDi01XHGcZs5U45rVs0xZ1lgtMljKFqWYdQeQh2bkW\nBPHlMoajplulE/aBWFgm+7iBW2vgHwcHuEcI6UgP1QIG6L3p2I+tLwQ0VGpt\nkUNZhpIzZZosQnRTUVhr6SreNx8Tp10GTRSNOwZygeKHOIZWe9XVRNiQ8Z9n\nxaWVBEIZLPDPWAz9oM4m3FcIXGLT6IEELoS/Ij4cGG0nmTe343N9c8PtJPOh\nwDxinSquSWstyGF8XRo5X/oPlqvnTomY1TOF6X8hPGnUuiwwxTurjm//SBBJ\nCeWo\r\n=7bJ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aa0aaf026.0","@material/rtl":"11.0.0-canary.aa0aaf026.0","@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/density":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/elevation":"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/switch_11.0.0-canary.aa0aaf026.0_1613676212424_0.39358719739755066","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/switch","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee37f1807be8d574de849685b75c92aa490b4ff4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.07ff0c452.0.tgz","fileCount":38,"integrity":"sha512-rCcBovbxe5xzC6EtMKP5oK/JGTrKwduK8ZYAABM7T4demeJZVBeGgomdGMgnaMMqWRBUqQ8otMWuVo22Xe7jWQ==","signatures":[{"sig":"MEYCIQC9mnkBa43PHS41YsxLIb/bq7bMr9t1WnuHxLYrfbDnPAIhAJixyoAhC5GC989MQ88iiwnarSwrn2e4PHff7HG+wjCO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMpCRA9TVsSAnZWagAAYhwP/RonjqnWSlMhAwjTw0tr\nGF7sczSKiyMMczWaS6F3B9TKYg3reOqZQziuJYQMldrMPAXIA0TuZVC4VQ2h\nvVYDXy9+ubBJp0kmB6OZ4SVUTSZY6kP/1DIpQ4yrdrBpaPT42Q6r1REbOkfK\nRc+U0bsIMX0C7CUQC9iYEu7OxNw+ZESWLxhiH3jVOWdrGb5YuHzO+iHjUOR8\njCuBzS7TceT+gn440feSw08HLMTV0zgZuVrI6mXd0F91lJl3pkMAc9LVKbYH\nNGKO8cQiUt1aKkSylU/7kQJvsoU/Jxh3JcKBeSUkfQcn4FV1QIg0FeRiqKgT\nZsCJ8wnmmYeYCj7y76ahdKJxrYLN/zgeNa+BdEgRllBvu/QscZQY/V5PrDMu\nzohr1/6D5KStBSUe71fTyh0BA8QjXmoE6uNuNuXvJIlK35F4t2rStOoDpMea\nb4ijYiF9ZYJT1sf32bzFjvqXoiEz1B3nqsaUNoFtjDlXL62+R3/JFRj7AKUX\nQrfW9GRxPhSNREmVZNnDlAj5+T+O7Ob5Y82Sf5cM2k1I5F6SPorryBJZ0xJv\nEUEUhoromudE815zzCfrfq1TmGzGNRJA9/D5wmYrEmOfrbehJ0plAU/NtpBf\nCVgd1bF4cm1Nu/ZsiD4A6/3FryfiClXiMpE29b6XtjXSsYSKJzZejAE+ONU3\nYIPm\r\n=n98v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.07ff0c452.0","@material/rtl":"11.0.0-canary.07ff0c452.0","@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/density":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/elevation":"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/switch_11.0.0-canary.07ff0c452.0_1613677352625_0.6906776945736106","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/switch","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8939958113750d682e0964ad01cca0cb2e3215d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":38,"integrity":"sha512-pWUD7pogdlrMQLCGNWEpM+R/XKdrZ2ux3h97kIkUzYRNVJ6eSHOWIoSw3y5sV0reek0OdBC4immMP7Sg+dccIg==","signatures":[{"sig":"MEQCIDzm4x4gfT5kQk06DHEd4OxOoLwe0Xxu2kAj55sPX+aEAiBw9AKU9B7M0I1ZWbYyQCnu0L66mJhVOvKwTGafrJFSsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfqCRA9TVsSAnZWagAAiAQP/0FiSJFFJvGY1UkhQt5+\nEEd4wAn1U8wCnMr8+4Cpxe4nV/raAZU2q0ekOf3AR4lCfOqo7qfwzdFHNLBW\nAcr0ZAIuUUdgwuLw8rT9zTERJvNhI2BnL4pcctP4HAhHeqPahJOlo8P6CPC+\nzVNhnCah5JmmPzr87UaHrDcArhxU72gA6vQrIURSgvUuZ0cnmKx9Hds5R/VM\nneqwQ1y8AtdPnybQYmUhMS2CS4y0zJh0XqrinWzc0cXAsEnRLUCoAC2jX3tY\nQyCqLZc7DxAFpDRn35bXs4HbtGDi/624S5geXTKgmHETGB+eKtUjKnC0pk0n\nh0BWmgKPVWg9L38VB010VmL5JHgugq3HdOWoiLU6bQojzleJkfaVjSS7W1rU\nJ/6QVcAcZ2oDZG9ovXybb7+pIGgGTgAzY2/DyvmcMrU19g6qRvrLTuT/uU36\ndbpFiPxMuG+/0I8tbiyv//OEPL8yk8XresjYiY3s10BjAf4gNGyHqPDcC6pU\nK52GNhDJTKZ8aiLa5lgOao7B0dSoxSOIC+XXnh9AJtf8t+451r2VM6mj/V0O\n2EwVtAZo/SI4Els17R8r2rG9I1H/4Hm63/ojlr8sHVzcJuh0Y2ce8UwQu+JY\n8Mv5bZp9YXW3psZl9DCCEtxJ/F33zVWD7mUt5+VMcxLBL0VPKt6Du1S6j/cK\n1/lI\r\n=NqjO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@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/density":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"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/switch_11.0.0-canary.bed7ecd3e.0_1613690858057_0.462443907314372","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/switch","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4505bea9f3f89a9ad9af1fce9db1b2eb8a0d9bd0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.06dead2d6.0.tgz","fileCount":38,"integrity":"sha512-fKLZkJ68zcjnv9ciWpf7hjL38aKq0lshbtZpfbo6xlUBQlT9Un0crh5uA0UPlELG6klO9mMprYjuSYzSoe1vqg==","signatures":[{"sig":"MEUCIA59MMOAPhKTDKNFVDiH4fM0ISsUrm1hELoZhuU43MIfAiEA0GQXvHJQ5269NcHdkPZq4lsHz3jd+LCZSI3+k8JdUpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwgqCRA9TVsSAnZWagAA6OgP/29hQXYNxC3cEsxTlDhH\nNTk5dhu7DKGiu/D0ZhbXcEpSBz0j+uFVPmnS28e0RM//SbZozHFLzgqiRnlV\nkC/i1PmGy8L3PbFKPfVpXayGQbVQwN3bL10k/bEiPYETdB1X+1IRN58awlFz\n0apZ/cNIM76R2E8iy0qK8F+1Z9gb4CkPw1tUloQuHOyrax8KqUZ45iysvQMs\n0MApLl5rCTgpP6sdpOyjci7aSMSG5TkW68ycioMiSl0IiuUcxeGD7nA2uwvW\nKMCpl3wCe5VX3B1pqt3uXAUqds7lH61IiXWb5lXIQY2xJA0DIr+idJCSvH5F\nNjYTPC2+DxNQGSSZJQ3GNKC5VUt7SJbeLgleVI2ZwvJ1rrXnXGG9olNXlENm\nZZQUQ8pYcb0cLKrAadrR27ZkcWJLRY45MZnNDefRdOO+rYzA+Nm19t3VqRpc\njgj/K0uXZYGTFMTyc9xjI2bMd2dQNkH04ya2E7IZCqAYSNHt2g99CK7UnvgH\nAQcT3wr0/Z2/mrKbcAgT+5HkDZZv4dIiJrkZ7acH4mfiq5fnAX4h8h1TYrAo\nI1wJDfOp1SFZSyqmkx0SimJgbV51QiJ4iSC6d9O2ICPBvBo0blFIzD9SA9nw\nNG4sz9WyH+/Sp4GcM6VIsjYY0rXivF+wGZN08jisbX+mHXwu/bDHckZhjkgs\nUWpX\r\n=0G1R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.06dead2d6.0","@material/rtl":"11.0.0-canary.06dead2d6.0","@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/density":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/elevation":"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/switch_11.0.0-canary.06dead2d6.0_1613695017728_0.5747179088324859","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/switch","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.cddb03553.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afd5d9bf433e8e6bcdf9c3212d9ddde145653dd0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.cddb03553.0.tgz","fileCount":38,"integrity":"sha512-/ikQRYMLEOhDFYiJvlatOeZHCNWmkrzLBkOa8ogDtlyNLhdZvNSQe/RvUHhpJRx8SHg+66gOi1rwCdPwe4K6+Q==","signatures":[{"sig":"MEUCIQCpGltNH5RDd911L6iAY1ztFcAJNgbRfVEXGcADimqF2QIgXkvp5uD/UcHdpdazOLpKqaouCnfnN42RbMfahkSNtuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyzKCRA9TVsSAnZWagAA9r0P+QHCBQ2LypS9i4W1y+V8\nGJ3XlSoSKxg3y6jE/BnwkZpWw5CqCYt8ok8+FxuWBLFVZjMH9RT2CJjqvuwM\nPyHkPPlGh7Hw4Lzfx9ajxL+HQUHROl76OzL6mNnOa606vR1VLEDH+H3DdOao\nMSfh0n6iTGuwuApVBsZs8s2sUuW7DicBzRLLCBfKqNcF0iPttpJZRx8I7H/2\njV4dm+elh3mbu7toNBVpbOkNtbBVNodC0+3ZhXluGiCiZGNxr4ZnZZuPSO40\nXsItLXRwnEBPquLQjDHLhi17eWJMGk23V4BOtrFEjkfVBSx2mnVWZFSXjdSV\nziFM9C3fQlkMYbtd5aH6ODONXAKErGq+qTVZceinq2tMdslqoB28IWJpZTDw\njMp457n528USa9fCHglJbSsy9YNUK56HwlZdbzCN7HTW69uKh6Rqft+H/h8W\nynfTFsuIjHaCXxS2OJ3N6sg6gkgDY/BdHz5WpiZ5YJyU9gy8T/1OTpLlRZWP\nm/6W79SWmKRUAXkb8wVhSyNBAbG3m1YXUXVDc1lvdkSi4ZBi7PWhU8t7wOYW\nUxChfbfvqUV1TatufP0utRDLvoxUfFBUAaxYR8Rn1KYTVOukMu/qoVBDvtzn\nNyWINkU8eKktgiB2Cc6W6d4Ttv6uFhgJOCMTJxcaLmpg8zDa/23hwavF3vJq\nQa1y\r\n=ePHz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.cddb03553.0","@material/rtl":"11.0.0-canary.cddb03553.0","@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/density":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/elevation":"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/switch_11.0.0-canary.cddb03553.0_1613704394069_0.41920143935755716","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/switch","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5b10d5667a4f23b58c8195036106fce915cc258","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.d6d8d0476.0.tgz","fileCount":38,"integrity":"sha512-xxISz0jBC/W8OnrOcKDmqXMNyZB4HI/uNeGG9wPE4pKL4tBChIQSHUlhdEcgQdmOvtd4HxdhCy5gR/EPG7s4AA==","signatures":[{"sig":"MEQCIA7nCUAtc5IOx41qf6PGvaqFe0MLxk7d6IAyMHcCW3QNAiAUzzYtAWGeaZcgFuf+15dpeNb3OM6wSXQJbkVdeBrPrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL05lCRA9TVsSAnZWagAADOYP/0/5QK5aI4XlwhRrUwrL\n94s7bBY0m8+heuImYI47+HN03/IUK6azCXMv4u1z4YwagtBsd8+KlYmN/WIE\nxhzWJY6mVPR4Fg5VM+KrhF/taStsVz05Pqkup7LXdWJewvBMHaWkKRZr7Vle\naP3YsXCpgr/xHJ4SfF7y3fuXFyA8ByTdPf1MBcGdDVaH4DOrXkmgV6ImptUG\n1bJ9a3AOp2XGQso+v4X5SPwIp1O2IKogDhHomd+uORo7mYS6ZnJm8Mxpm0S8\npUbdC2I79g8OkOeq0puD3UIX6S4C8nQ5aEk6S14sKkiVdvYXinoNdbsO6fLv\nNfUxFLdcL+b2HDw1CQFPaMc5Ls+yejpzlGQnM+CgxXn4JqbIANCJBr8UFFM8\n3IBkYTmAIrrknQnDszbeA9uAYR1NJ8MFwcIwmVbau9myW5MmQHj22mmqn4l2\nfAW8UsSLqzsCP+B79NXYWxropCiw6SoNSaZaGLufOwwris05GPK+v5hNTtHt\n1Su5Quc3rkl5lrJKrEVSGd/pck8Ldr/QkxGnySNtF+Hy8LAJ+hIlnj9ezTnF\n47Llm0wv2tMiKug/CL0JcL2js3g7Bj4etMp0kr/gEcpAn8FEsGq4NwbU2jH7\nca0heyoQnZJ/M3PUtRk1GvHVfzeX8Cfu9tcLABzGd20AKrd/biiSCgR/f1V3\nX+V2\r\n=5ehw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6d8d0476.0","@material/rtl":"11.0.0-canary.d6d8d0476.0","@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/density":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/elevation":"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/switch_11.0.0-canary.d6d8d0476.0_1613712996874_0.5374405478913873","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/switch","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9203eba5ce25dea14f96793d7ec59a9cb7c171be","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":38,"integrity":"sha512-ZmJvNdyKAAmLfWqEMJtWUIeQ9nkVp1UMRkff2SIMfVzRGuS+l3X+pNIs7GRYgGU6Os4XRYvYtrgzvgUV46873Q==","signatures":[{"sig":"MEUCIDS2je9EZbgFz7e7UxtI89yy5cpbO6DUlvD9EcA5dlKWAiEA/yPAZ8kzMqrWBWaHzZ/vOB1E1okXCy9Wfim7IAdO6Bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL90oCRA9TVsSAnZWagAATOsP/RyPk72v+q83QdKvo+/W\n3RxxvlY+m/Csnf0lRqOHvo7MT+XeGP4ufFxLTr/WZgduEpKXtiHAaTYYcgol\nuOPzJo7kGPGcgaINf/Gn7MDnrjRXdZ9pJGEAWaA6GnvG1v1oSmEmfWfscPkb\nUExxBIarliasi0c+kPYX3H/xv4B01fUjCSN/ciI/huVKa6OWyQgcHztTPFS8\n69vqChfsVMLZpHOejuhCdty2qBZ32tdIlkDe1Vv8Ka8hwLHoLfDCqaXt5A1a\nnbTMaeNstGw/ocxo5W/MusChHjKlAJZaQjgJXzhIQ3B3FS/M+/UiVYo56HSK\nW3GApSogeWsB/HCS+B/SN+vwFOxi31B+HH2M5JCvbztalfHudfgTzOFuiNJC\nxMvw6za1QivDhBjg+NGAKDhQX38Y5grMKEPiMN/MiLH/fpwBibUMepW+Ap2J\n/ITMC6fm8egzg91Av5bELQ/0Hw+R0TZR5NlQV0hzqk9r7CeIKBCSTCauwf5R\nucp+kTJrOPV0p5s4wQN0D/D9YDtFzeX1a9C4OmLGDV8A24bcrdMDvI1GFf3g\nL03L/DGYU4a3oRPPNAHffRpKE9Ea2yl9kDSgFB7oldUnHdkOc66yA5VjT92l\nMvozGXHOLn4qwX6fliH8jEOka7o2b9aildlc2PCBaZHNdY+WjSJdnUt6mLp6\nzIyw\r\n=YX6a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@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/density":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"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/switch_11.0.0-canary.0b4a4b2eb.0_1613749543824_0.23296871414340936","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/switch","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.3201cae47.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37285826b83833b0a1232bf692ae7d40230897fb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.3201cae47.0.tgz","fileCount":38,"integrity":"sha512-T6M9FjmyVfHdB1nXQrON8BB9+GVDQ7cD3zJIC6gnVXkA1xY38W0tQc4jyMquyJigeeeejpkxjqdtZEQELgGlIA==","signatures":[{"sig":"MEYCIQD9AZopX+vetuiNHYQn5mAfn58BK1pGsFGgs6P3BclDPgIhALorXSCKnxqmCx/kh6/yGUUdkk2KyGjEMOCXR6OeInJo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEMdCRA9TVsSAnZWagAAgN0QAKL+owvbW2/73U+TkRoX\nM66Lb1N0yJLBIArmsL7ORDqUagoprmrcwd6Ltig9walwnoXJ/nZZbgdtCwHA\nK0O+SVgdAE6xlEJ71xNZIf7cS1dag8QG9Ep70eXp8gaQEX3/pHL4rf2IbjJJ\n7e7B5IUWkd3CiKd3h2OVKJ2IDP5r9hsk42Y1PuGuC75WVRkWLUjLMWUXTtiO\n8MDinRjSTeruOI1iqjp0Fm79fFwq1XFbFqX3zr7LYeTdTqCz90W1kTvMccnD\nSi+IyfvJDm/oWodfM5HWRijUoIZqc3YMoGJ3DhmxcGD74v3PyiKyzvEjTwl6\ntTa+Mq2lvCvvoshmW0/ZTcLI6aOIc+F/f3IdvXTzOvS/ADKi00fMFJDvqLGT\nBRxDmlYd778n8EtBxkhrJ8YWKxLl1HrKDaW1pfjIxUwZ5IRN4B/f67f1Jfsy\nK6wWYGu0g3Z9K8MTL0tVF7mRKS+iq0HPhXyzSTcgBrXHHLfhv3Puepa1sHND\ndeVAnbMcLJgRJjiJ7UqLfQ4U6v0zG7Z9WXhD87k8I226YPjlSJxMAWdBlmgI\nFg9BrHW1KeUYiBxIyqzO8eTqFPxypSmTb8oa/knAiWIIYcuQicnrOecxGrO9\ncEf0run+TMHdJQn225pi0eircjN8GE7bFFOkNfxieDFAvWBdgMa49iZ76xn6\nKNMv\r\n=jvR8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.3201cae47.0","@material/rtl":"11.0.0-canary.3201cae47.0","@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/density":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/elevation":"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/switch_11.0.0-canary.3201cae47.0_1613775645211_0.95196123874011","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/switch","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2117548452837c91ab3aa1d1a9170565eaa9d0bf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":38,"integrity":"sha512-qrO52u6k8rsm25lih/V1RNEs+J2rw88GRhAGXeFo9Tuhb0OVaE60uWtsgmo5Cyqz61XtV4qjv43phIAXxQqyWw==","signatures":[{"sig":"MEUCIBPBrsr6ii8yCcimEdUhBZk9aX9lYXja0jmuq+tllBG0AiEA956mujbD9RzLrGyzGFfbrYC9s7jqjIpR6uZsJLsnjMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNArLCRA9TVsSAnZWagAAy9EP/0OCYgbwDKB7zDb+JPuJ\nYAidfRwhRGQ+kzVMeLXMNBY+egFaeA3feibLSxUhOmeK0s8CVkwlopdXBPuL\nHJHNTI/epq40j+FP8AxFkJkS3Z0MWibXD1TjdTAowJfN/hicdzA9jiGQ7wiW\n3V6FajszjH9sO+uZwv5UMPM17tiBLFqLV4xXQn8sn6JW/v1dDt2c6lU/FNBP\nvAagrzcJk7VDPMhGYV/yK/Sy5XzIH75o5va0XdX65I1vpiqAV0EXgTnIw4xC\nUSekH9OKtes84TCYxC7TrKeg/rTVRLD8vVUQT89DxqmJhhokn5yKlaNgwBHF\nY0Oyf0QcJHbWmRN/PDMHBcGtmHscIgbt4bY8sn4/PF2IYCgorbfVmBYvj5lZ\nBmRjdHK0A7Gu7qHGE/juDUJhsqw6MsWCBV+rbFb2TtL04KeNCPYegGgSbchR\nQjOuo1bKrT6KRsjr5zerWrcdDmpiSb7q5c1Sq3icxNDrl6YKZS2Udwn3k9lb\nTjsKcZRyqqOHi/IswCJtCc0UyjjUiGT6wrj+zeumLCbXuukyyQwjZ+lKfyDY\nW0npnSVShJrk4nZb0+7dWfEO5kHKYSmFyxdhpIXnpA1IyDh9jx9t+lLIsp3n\nO0bfyczFeMFDnt3x/L5jNPUvlBIeAbLZxn0yaVYXkz5oRFGC/S+UKULk4W6g\nIjzX\r\n=SWxJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@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/density":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"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/switch_11.0.0-canary.f1b1fd5d3.0_1614023370528_0.7990719262276531","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/switch","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ff4ba6727421c3d79ffb5808f64a30382d5004c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.7899e0fe0.0.tgz","fileCount":38,"integrity":"sha512-qHUvQ8CZ01uFozLuxiXg/cfTe1x9mBipkvrptZaTjKPX11q2CdZ4Rehv1EKGMDilD3l8AYyGT871mv2iHqGVsQ==","signatures":[{"sig":"MEQCIAcnvBrSr52lbu5nuce9Sss1KedO8L2Ji0eMkaMrKqXzAiBNNTi71OVMzBgszcFJ3+6bmbFdmRo8mE/ras7clq7MIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQmCRA9TVsSAnZWagAAE+UP/RXjvJXjrnKeWlEeHrVd\no1CRILaPWzjXcU8lXwHs+XIX4mM3MP2tHtbfQ/julmpO4SKUQ7chz+theSe9\nUCVdIwdJj4NTvYE4fxAy5Qm1KburaV50moY+h5AMC8o+2/w4XmNc/U/un/3/\nMbbWVPVxWXvIOSFxNtPIDPZvxERpes99sO3pbYBSPxw9EpezwP1FNWmQTgbo\n6SOCeD6cX00mmukStA5WWapJYrzvsMJXxBN1gcvNHVxj6in6IWypBX2J7LLL\nCajLTfNymli0/kV1E+iKDmV1i2S6HTHuqkqWLMlCRxxkSiAivPldKjhroRCx\n+o5AJU0ZjvKTQN5Dwi82u6SFlCDdLN8NM+69ZTIXPO8PhF5fxfgGW0W7btm7\nThEvVb+wEsVvjidmMt6kiFbupjidAkCGC93+JDtmGSXpnpkoxcGqpNl+x0r7\n65NPk5lr72Fk0gKJ49EF9OgB19h1EzMRFGZ6LqBd8uBvicxXgBIvB0zKwgHk\nFs1y1k2o6KVyO+QHYdB35u6vjKPjxV5Ot3r08VIYrUp2zU6XmnUu7K3kO85a\nUdQFvuZGw5DtgEUCuvuxH+2lcIA2YG9DZe2WiTAax0Z3Pita3n6NN4bICAhT\niXrJK6TpxCTcjUDue5WiBxj+Zh0QR7lCoSO7Nkl0HH8i5W/YwtGq5+PueKiK\n0adG\r\n=vS/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7899e0fe0.0","@material/rtl":"11.0.0-canary.7899e0fe0.0","@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/density":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/elevation":"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/switch_11.0.0-canary.7899e0fe0.0_1614033958172_0.4648974925196361","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/switch","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c526910e36e0ff4f2781170b95fc592110c98065","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f19c86d13.0.tgz","fileCount":38,"integrity":"sha512-EBFTlgptDaBfzbdK0wQ5KHBzx/3vO6EmdC1oW2BFtVo/0MPC7w+I0KVdS/4WnQ+nkKoNruxx0raWi65ReFXpnQ==","signatures":[{"sig":"MEUCIQCxo7JmStwWyXjAA0PLgIgzc03GVnW8rrXW3ITpaTpE2gIgAfOL7NZjfMehG5+EsYJ75PCCMs285RY0/sB5TOjkwN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6jCRA9TVsSAnZWagAAd3sQAJrdDkd9dnKqjmuEVzIf\nPrFhSnraNvPghWb7jeAOlfxN8x4DOyByppfcg92WWt4QIV0GBE5fJewcHFTV\nsVlCW50+BEJjOjoZkfsC4kYsAWbv8220nZHLzN3T+CZLpLhEsekRDQKKrTNM\ncOcSbZJgPKefVV2igxwR9NVnQuOj090Kc1NDyi9av6ZG1oTkpseYRfrtDZ2O\nV8byKYnlnAC+wppaSNSsJcS+3H0om4toHTembzDWuaWIgRUoaZAOycMnUmc4\n2O8ZygpjL77jmjb+xyQVJYy4yqp3zSDMNkOgrW9HfhawoTVK6hjRiHDk7xNR\n/ORe4acaco3/R/XC14aLg8InQ/a9MgyuzRucs4/EMJC/2chgQ/MkvyVWUuCL\njPiC1YQblt6kq/B18oajQBno92b3eFBhaEWBZjzoEyXBrup+KgTplL2P9lDs\n0FpAoJqrTgZVswEZIZKo+FO9s15vyXCpd2DeBcQNWyBckyQnNG4p8fzMrIvk\nH1uTk6H77N1C26nZb6q+lqEYcX2iHBB1gS5EyDkEvLWLXaaspeosao6mdbAb\nrDPRPkgfOY4JIKAo6T05+rgto9O0UUAHU9w7njYvZ1CKLna9F9CMcyWTxKZA\nG1XC8VqgIyIJ9HJaNHdRP4Dgdt87Qnn4mYQ3AWOOhNdE93RCBvzvCTvy/mHw\n/P5R\r\n=6BPx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19c86d13.0","@material/rtl":"11.0.0-canary.f19c86d13.0","@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/density":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/elevation":"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/switch_11.0.0-canary.f19c86d13.0_1614036642461_0.42527178956749623","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/switch","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.60e892d79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"433e10d5422d8e4296e6c75c8bb79c0431dcf826","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.60e892d79.0.tgz","fileCount":38,"integrity":"sha512-DHFP/Pflbbbg7mUsd9ZIQPqtHNBmUqpQZPd16gJCgHpo4OKNalc07v7qshjI/enTO7VT1JyiNanDMcV4HKSHHg==","signatures":[{"sig":"MEYCIQDKUbVurJNfVzuHWfB3wD+bTAWyvX1jdzhW5k/H8vCs3AIhANZAT1Vih3Phjz4MfWCAVU/fC9PLxwewWehDD45PLDnt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFbWCRA9TVsSAnZWagAAVxQP/0Y4t82ojCpRLJjUNTzn\n27gFjDFP9MYeD7gXUmoI5btjqHGStDNcG9Up+T9aelOUkA0hy4jWnnQ41JxB\nkapHOVT+i6dEeXqp7Y25ehWCTGZ69O10j4eMN7CKq6wvrdrhbplRCbI5b/s9\nOWazhPHXb1cgky0+F40w2MMS3HGa0enxx+Y/eC5BxhMdXtvH2aNywbRW4Hf2\n7NW5IAj7whByBC/4EKa3Q3BipfaZc5UgUjTUuMdpjgokMZ8j0Ez9D3TrPggV\nOoVo5sqSDcHkRyyUL7wGHfoS5H0sTxyu7b878bKLrEyXgnonlc1SHStjXK7Q\n7rsDE2JND+gfUJxPQl1EzVHZocAETrK/ifvlatNb9yg5Tb4toSklH3NbOfFE\nHwyt5vl+pd+Ua+gaKOYxE8Q2TNuzjmjaKH3ZT5022Z3c+Wteoh3fZ4KYRf0G\nb0sDqeSurkl1O7bwzVEaIg+ccfwcmkVbquDnx1ZvqzfJhTtMVIcN5iSncntg\nSQRke9fnEw6Tt3rsIkAn0rK2dI8F4VLd0Nup0mUmy8gTduGonpdab/beyC9F\n6NSTwieKr9obuBE/LxHY4uOpt7oR19u+MG1Cb6/2E8KAIA/bVFM9YgDxH2WN\nXpZlV8yCKtJViQfF7X3VDRAHxSo6ib7FAQAjilJlfi8V0H+RPsyOZr9voUke\ngVYy\r\n=E4Vm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.60e892d79.0","@material/rtl":"11.0.0-canary.60e892d79.0","@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/density":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/elevation":"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/switch_11.0.0-canary.60e892d79.0_1614042837468_0.010668445024977657","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/switch","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2b74cad58e34b5863f796d082ed7289a6adc17c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.c96bfa495.0.tgz","fileCount":38,"integrity":"sha512-KWHDMMII/B3v+wNov3wd2abrY2JUTbuHueHhvcL3YM6GbOuk1YuGm65aUscVCz1hh/vVXnBp1gKiDnBeBCD+rg==","signatures":[{"sig":"MEYCIQDt16pQsrIvSVlSqjLX3bRDjYCOuY8/NfSihM4+7mbMLwIhALs1MHr+sYFrWzUk0dgBusW9lXrbyxAGm+bwgcUF5QPw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhmCRA9TVsSAnZWagAAVuAQAI07xHqoUj7b6yf4gI0w\nt75SY9zLcAk93jEzbWnoieBxIho7M4YdrLGtK7gq4HVLBB0QBSG9L6UswQlM\nJ5/kEqIc2aaOh0F/2xnScmLeakQB1wp6DYoxZW8+4AR5GAQuJgKBvuDmVKlF\n0hPGIoZqcqORyyQj7/5F2tAxIP6TiV76H0QCkmCpjrlqJEUlzHI32uWmhkMY\nf1hIWWokZFUks6gYWwqvjlVc8Q6WABPTb/YWBYjnT5IfK8hg6D/suqP1lvGe\nLLuW0LIm2qYmy4TVhXYhZ/udt9RIdkMMpro275RdGnY35ZuDIvvN2Nxm4smE\nDKEZ5FrhU4C2ksZ7OCjwajRd6A8N4y0KCxdMOf31x1Kc23+xE5W2tBOCh/WO\nWZK2l/vTK92PPqFHWwKxi4IuD2gWxwyHUSiBv4DWdGThoxBcmXcJOKyU381q\nQm4Le2BYZQbJAcleLOqCFsgLW94dffxM9ZU4xWU/iC4BQ26YoEmUxgJz7WeQ\nzLi/rM+SAaqPqTaAErG/gqIv/0gjohJNA0NsHSxGICUBNw5aGIe/VCHrcKNE\nMjQE+WCfrSje3ViFPbHNIqLVPJfSanSspJn2QS7YheH3N5kb3C03jyCjA76C\n6Ez/m5Gg3ky0b+/ajI7ojn1KXaYvPnHu6Upe2vyODlqlxHLQxmEhXcrYZYjb\nHmvj\r\n=s0/h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c96bfa495.0","@material/rtl":"11.0.0-canary.c96bfa495.0","@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/density":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/elevation":"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/switch_11.0.0-canary.c96bfa495.0_1614108774341_0.2511876022724078","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/switch","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ad910daa0165c4acff44a2cfc23ca871970ee07","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.fa9b59f67.0.tgz","fileCount":38,"integrity":"sha512-rqVh+9Odig+kEbPlC0XuWy8zyGnnRYgfOa9GybtmVkh3SzLmeWwLYRIICis8maiNv7DZaJBTo1wNtTzvv/5YNA==","signatures":[{"sig":"MEYCIQC3Cov1+dcCVszQ9CUIA+MFjvih8RT5Dm9d7JnHs5vKIQIhAI63lopfdFxSjQgAWFTwLGfgACWOxEPP/T1WuCKgw150","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVi7CRA9TVsSAnZWagAAYAsP+QH8oWajzFlURAAfIF8o\nT4VJwBEEpxq6q4PjufbVcphqKrS5eGGtrYlASScw9dREPQb31FGRLEppJ6bA\n8BGIPXID7YlemO2+2abwDos9woyGE6v9SwM2VgQiHPDZQ2UPVGJiGqFTsNWx\n4EZR0yJcKRxk2ngmVr16otq1mWejQa5KeHNIbqDMC+H3cRMBbzaC7kFarbVw\nIOW2M+3H7q063Vu5ETE3vi1vOos57JS/e4mli2RrnZqS7ldGVe3DrIaHJleN\nOIDsJMEFa4lNtdGpQAESeYlLt/8V5E5NVWLPglfGsyUF3+0PFedufqVHdihE\n2be+c2wdet1oU5hUbx1ohN0YRmSZrwpf13SNnYOmthJaXCXqKWsS8EA47jtT\nk1hSxcN+U2nnORazrg2CggbWWPVRd9qSZFbHHSOQugn1eLIMPvzgPemO86s8\n2j8PUoieLNWbf7XnPKMRdxy4jdDlnotGctsNWMB/2MVnWOmmJUSqauP5sI6m\n1CjeWE4LyYUdvtiMaVnLZFzJxflaiatCtmhw3VGzVORyQiqkCsPTM1/OnaZr\nk5aOfkMHJdznjE9Z40KNDjEPbwk+4xvbKVuSUueEbwcILRq9suv3Y9PFp3qP\nK35EzSsJpAsVDbhT2JRkClF7N3MoGGrM/Pk816RAUb9CgG8XyUPTb4EPHxxy\nF0qx\r\n=AKJ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.fa9b59f67.0","@material/rtl":"11.0.0-canary.fa9b59f67.0","@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/density":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/elevation":"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/switch_11.0.0-canary.fa9b59f67.0_1614108859444_0.12420470377069481","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/switch","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.869e3497c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"230994958cba42421364e17eb57c719bf412b97d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.869e3497c.0.tgz","fileCount":38,"integrity":"sha512-rEZAeRDmwWSF9yoy2+QbbFhCS5IIgvA8Yva+RAXVEsMuc0lO5gYLOsVeVPu3PLbMTAoHXgP3XOIEXHXxxprl3A==","signatures":[{"sig":"MEYCIQClOHCDMDmFDMuUvUcIsS128/KePO4RcbhRGDRaODZBtQIhANQjGc0W/dARH6b/C7EPn1ss3htRPlYPEg83ad25bqRc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjsCRA9TVsSAnZWagAAgFMP/iwKisiARp8DtS+PgOOa\nCJqBdNcERiFK5yE7Bw/uXNmB7dEIhHVO6s8NBx/z5bu9oSbTji849CXXoS6Z\nRopJ54JwVQpWUhbF9LEx0KZSxTnmYA/lPIS8yD3x3lyp4lOIw3QMVIdN5ky2\nSFfDiyR/UiHr6vHTY0fzVN370NXtAeDpxCYEF3alYSn9opr8JE8JxKRae2dz\nXnCXA4wpA0NpEcfkG9SMGSLDxaqvpRmLd2r7h+pnrDftsfzkWMcsnhAwYtDf\n3UbJVNrtoDC2kK8NPRAeYUSvigCP8J8Sf4Ctr5V2JFGWowIzHmPhTAqTCMw4\ncpL4lkGXdpDe3N/8IWXkMf8bIrma4WX54su1T12n2LnOVtUqo4st5l09hMdJ\n0IwfEZLGmxz3QBh15uoGZmRduu/0cayxm6gb1RJ0hb9UJLTvnCfPcrZK2wKo\n02jXDOqXPVaGxPercdTh6/9hMVZ4nWJqFV60dvxmHIeX1TFUK79wrRiCu7Yb\nxdD3HXQY1GVNDP0IUJ4KGcB1CSBLF3tdmjXOfDdefnlT3WP38Qv4lWNRIE2E\nUyYACyF4HsA8jfVQhN/pF37TZ18vLAw3vU2lOnj3jVk4k+mhprBQUvhm3sD2\nq8uOSSLB19hpdC9eCfzz87VJdbXdKzPcsM6gzI2MUjz+/8Ncs9Irw34bMEUN\n799E\r\n=0beJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.869e3497c.0","@material/rtl":"11.0.0-canary.869e3497c.0","@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/density":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/elevation":"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/switch_11.0.0-canary.869e3497c.0_1614108907484_0.4897285581722697","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/switch","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"317f2e23d725fc201ef697850e452d90f36781d9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":38,"integrity":"sha512-JGAyummEeYFs5QwLLlPyYusJWuYkYKjBP19r96rQvElRJvw7etbS4TyLSseuqmpS9ramUfat11h9F1RMBbAoCA==","signatures":[{"sig":"MEUCIFfLmcchIuPV6mwgoEf5Ilz+HLH6BZm6+5us6+qmzNSuAiEAzAuk2A+UWZmBA+IOeUy+YsmADvli4yRTGpRAWSISBi4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVyRCRA9TVsSAnZWagAA6UsQAKKzi+ISh3m2eGknIG5N\nC42KR9cvKqedtHoS4RMkFLxmdg4MxDfLYhHgDyptrDX0kBSezboxfVrEJLT3\nH7G6y789lCd3cJSvyCCKKpGc0SD7uhXSVIYmx6ARO3fSQrn7AyNHDq6p/6MP\nY9pND0NcjiX4vyuZalaedVpjlcTAEwVTgyaeYIDF3JrbYCf2DgzUt82OkiYO\nAZ/ud6C0kV4P4nxNCSRGTjmDEvL3w5Z1v2O0Q3R1YISsiCy9ORnvkWwJ/BEb\n+9X+MJO+eyjH+u5OxPg2yPGwQfK9bQ/ag9EfjMQpj6aj+w27Zkv+7Q8V5ehk\nX4PDh1FtVVFrA2ATfacrGOeh8w06TAKCyOzCe2/MIjDi2vJny/I6MaDF04nm\ne3pY596WYiFuotg6Kgc00hhBAHkiwZtwzO5Micv3JqBlzEO0Of5xRa0gJxH8\n+goa+RyXzIKGptUBrAUcHbB51EAo2tby5IWINfEQPrOJWXuiCXV8PgQIhb2V\nRx/9r1RfmATNG4Nfo7Iferh43/N553fKm+97vIeCewMTH29WP+g3zUcoUa8P\naGM7yDQ84tspTlPVFgXAMsFroXzhbkilKJFd5hqcogqpCtZciTn365436Iy0\nU01eOJj79iQv0Y14nv9EWeWj2wdRzB84iQMIZ/WrmxSOg9SiOMmKoQcxZgHW\nqGi4\r\n=WyrP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@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/density":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"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/switch_11.0.0-canary.8ecd7c9a9.0_1614109841319_0.7253292337179242","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/switch","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2209ead2f5829ea67b8b9cc04476551f35bd7c17","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.9c85d505b.0.tgz","fileCount":38,"integrity":"sha512-TXWbBkMI3NGL/ScDgiOkn99CuqFIka9RpauoIvBVfyvzqPiZAw4JxQJpwNr1rnRU55Zw12a2cRITW8ygxiZ8yA==","signatures":[{"sig":"MEUCICUYDbJUlOZS7DoBCNLX15E9XM8MzgGKsSYrpxsvkrLbAiEAwGXYk4G5fU3wf9D5gSu4e/mgQuBtVHfPxZSoGB+3vTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX6JCRA9TVsSAnZWagAAOBgQAJzQoJpKNsUp1lLB/ddV\njalFrUs4EyKtNtq2TW1+fmKplTy39Y+bQ5FOJWVjcKvOP+ZrryPAxATHKUIB\n+PdqdY21B5RU3Sk2yllWKPMOKsV+t+j/7DJxKjp67My/cwRxboteNyek5vv/\nIQdQmIQKRYl7t3HAu5NXXfuJ7YYozCBnwjz4FMl9FtjwiFkrUOq0K3ollvTG\nRaFk2FP5DyNkYCRw3NGs3B0OT/I8ta+04d1jIavaEKP+jomIrTiFQk+vC2c/\nyoBsloYkTxB9/O3CVKHK9+h6SU+/X/Fi/22MBn2BEcKYpV1VAICLpOpdCnNm\ne5rSsi05/cp9GVucC+i9Kwwu1M2Ke4JQGmif/Y+R7yzJnSv2n6NiA4n7JzJx\naOYE0VciDvrTvX6J9Or3J3C6YH9gHTdFUtrIrKJgofex6imGpt0PD3S5kGHe\nprZk5coDBPL2rTUdR3E/aOwAPV0oowLGGCtRPKJ0MVtzAbeHdazTT3bC8YEg\nfvn3JjDn2HU8lTf6EYVaSxTNzAvOm4MNd3UzaQXzb+8RrVsl1jHsgu5g0mha\nvs8bgZqvt6mQnITD/cBaZP13q8vJQiLR/+zV9QsK29ulT6/cHNwhPyVLHbM2\n1low/zNaFDtJNiTAenbcP7BtwvkhVh/fL65tEwf9/hrkyxHtvPF500AhxnC+\n2KSw\r\n=3ICr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9c85d505b.0","@material/rtl":"11.0.0-canary.9c85d505b.0","@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/density":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/elevation":"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/switch_11.0.0-canary.9c85d505b.0_1614118537131_0.5928759852229657","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/switch","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e8c709147188105ce26b99d5a0bedc908950f38","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":38,"integrity":"sha512-fFCLuJ6T9Jq6iKQ8Cfy36DVJsb3emjpzQmYJZZ3kGpkXNsPd64D9tLIEG+9m1JGQ0gjyvrpcVngE51ynBuoxNw==","signatures":[{"sig":"MEUCIQD72sB+cJfWOKSBUbjAbrdKXlYgiFjzCCHbFkJnZ2lgJQIgecs5RbMwqSW1ui+ZMBj7Wb1b+5NwlRgbKAqm5nOfTkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbBMCRA9TVsSAnZWagAAiCEP/04wxf73vHO+8A86N2h9\nup4DN0k9EhGySBAhk5F/Nvfnd/FMPUt7yTx1ZDDFAChomZs7rjKD8MDdRoYM\nzthIkFn38V20d1sSy41M8NAxRPY99HcO3CKLw3MbnJorE5yYHMsA567z2AoD\nXSr39muSRcUAYgN0n9J9XiIUcLAp5hkZEGjMXrGyXyy3BcXGxdX0yOlso13e\nw5keN++fUfaRm70mamiBIXCePdSdCnRrB1xDc/Ubf0sRDpAqir+qUx7Xmiuo\n7rKoj6KQW48JHtqJpDevY0OZ30zOAc3dCj4UJODCalkxZMbFVnfHUfdGuSzG\njBS4lJmLhPjWFOIYofF1zBNdMwzGRatF3X4evQW4nNOeUmZoOtjyGyoJBrMf\nMqVTgyIQpHuZlwMNiDGqQILl+iYQGhQVBjRLhwr9chaH+hBrKtOgpxGWIxr6\nlf37hp6dPQIPod2m1bro459gSTCEEEDlDnqt0oiKEC4n+O4VVI7wXLbbeZpl\nMN9HE6/pkApucrvMz9l52/77sUQzjigdrxDy3Ka3POpQmb3jC75mu0d2Sbba\ngn5EICnKxwAoO1qNfFniab7IyefcSyTksELcj3cosODsP5BRqyiLplwyYryI\nEwennT62xB5EGiz51Uk1DRGNNy2BRZDbfDvw0N/6+W/d3F04PhbR8ua9tw+J\najrR\r\n=om3A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@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/density":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"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/switch_11.0.0-canary.9f2e85fb8.0_1614131276454_0.04382652763641115","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/switch","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db2485c543b27f38b803f6ee135c9f4c2116f41c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.19c4f29ef.0.tgz","fileCount":38,"integrity":"sha512-uqrO60ZlPU1ttLpqJO+lMIM/AGbgDoT1l/0AqCP91VbdB9GmMK4adDzyy+RKBR9vwZ6vepe3jhbVmlabKalPPA==","signatures":[{"sig":"MEQCIELIgm0/qNDu884tbb8bXR7krJD+0mIlzj+kOOVDiVv/AiAj4tkJuiKPCwGezP0q1ncJlOys07Bq818A2h7frP/mqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/jvCRA9TVsSAnZWagAAdTwP+wZ0MDTYGFyrEvGkaE+2\neiw545BsDAI5ht6glMNbv2WRsfE2fojo4J39HffUGqYpMg9j4d3zmOf16o9C\nLxqlRux8UoY0FDwOfrcOn0iNtT3XduzggxGTK2XOZq+gcJsmLhtqX701pyV1\nVfO/QR0LH8YoxgcAKDagukprWvo8MwkwHCQMAMI6u403SSqwC1Dlum4wDTz1\nR0djAfEYKEitbv6EqNqcMSNxwSADxuVoE4R++siC5YqhH7UtGWYz4HeU0nJS\nBBQXFaCEl0MY4VvfDmWBeTgONofXOrj6LB/Cico/CgxhU2u3ASPre8r9ftIX\noC6KaRvtYsf0/5EVSfQTI/NiIuvi7K62UxZJg2AuyPeKtVqIG/j0evxd0zOg\nxKBkKxZe5rEujtNkgYaQ0jNvgAo3EsIX+FeZ1Vj/8OPc4I5oVQKa8PszjQOC\nbzXm7plU+P9+/+bvb2jJKnj2FT4oWjlYUSCjOdecSHuf9bjG7KZ6FC++qIQp\n/t44wH/6ZATmjwg1KHFDZtpOzSUYR9zZ1qUhKQynoxhgvp0/jF99zLX7AAUg\nMgq6aoTPo9DBxdNN/g0ll0jaiP2FM6FfeHlbc6Q+NPPG+D9+BdWa/rsskb9v\nh9+iZ9ba5XtDZpmFJUyPMK4RrNmu4A3bBqq7LMkzkkjB6D1nYwcHibHTLSz6\nNLad\r\n=stWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.19c4f29ef.0","@material/rtl":"11.0.0-canary.19c4f29ef.0","@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/density":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/elevation":"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/switch_11.0.0-canary.19c4f29ef.0_1614280942846_0.7294628103784213","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/switch","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2711524eb4a3b53a8c0376f435909978af79196f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.63df6e9bf.0.tgz","fileCount":38,"integrity":"sha512-2hEZf2bUQAofZVFbd3JKGKfo+wDHw85NiY/CJRnSSH3PYkttLGebqtzv3yw8zRYEB2XVrAMTtD8iHkCEU8Sspw==","signatures":[{"sig":"MEQCIB8/LuV8suXG0Op3TSaJTqz2AFiwH+1KTKCB+YcqPkbeAiBPovSSL88WauY6kokuD1wIrD0OeENFl4zNWgvU6DO7kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xqCRA9TVsSAnZWagAAbM0QAIFyCvQ3DwP+MnbqSBMw\njVaBziPa5vTIwmELmTa/M5pOac17FoE8eZCLw8W+aLmjOeLDod1hdpeoQOj0\nNrgBzPPATMo3sFgLRCwtv0GRXmebam6S33OQoNEfxbXz167Nl1dsnlm/mBpM\nDo6e0789SvuyAJJHTFqutnoPJj2pDcPyRWP3VSQKKIAuKVc2numf5yuUDC3Z\n78diHvvMZ+DPcNIHoYLkY9hOnpYQVeZAGqEgBa0T79gYB7lNxexJVWcnmdYe\nEfBH1Y/6GtNQ4Bo99fkHBszGWodrdJIJfNojbpu5ajD+Yb9Wwo8RnfA7xDrq\nLqpWTFGlkFEvMtNoC7evBZGdKcUPGt6x78IbS2xIV9JuckGd72sZzTJ1PnCg\ntVEEhL6lVK/9s6RZvQdA23ELjmm33+eZXdcsZqdxXsdpzDOu3R6SdwZoilnx\n6aaGykTRqqNktihOKWbVmvoE464KeWT/m0d5Rulld9U4hCXaAWtfC+qbIyqP\nEUBqcmjvinFBuPkByqCXywnHyffLojqL77WazX8Q3CAmcC30KbQasPUEQwtL\nQ92DkvkLUW/ZklxyoCeffbEGvax6WkITSLgSYbqhKCqB+yMoAM4UkGbXryai\n4Wh84RP84ZMT8+7mdu69zJtsK8pc/uVRPtFRKi5GH2sAwF4vn1xRJrhAltFd\nfg2T\r\n=YB+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.63df6e9bf.0","@material/rtl":"11.0.0-canary.63df6e9bf.0","@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/density":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/elevation":"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/switch_11.0.0-canary.63df6e9bf.0_1614281833664_0.5737083065365376","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/switch","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.981ad970a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6afb6284e85abe90fd6b8c70e62ed8d847668f67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.981ad970a.0.tgz","fileCount":38,"integrity":"sha512-bsDk6MNSWWohTd1YkWKuiNMMpcPAU7dnx5fKt7QGKeS37GIxzO7i0YHYsh2IXdTutmBnL2Pj4HbR6nOvUZKXLg==","signatures":[{"sig":"MEYCIQDepaJ9gCgp2qEEtslzPsRpCUWKuhhD2iYu1DMKafoz7wIhALvu+Twv9+wcYBbsurlDUAXzByd5fw/JSciHtfB6tT7i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODu9CRA9TVsSAnZWagAAcNUP/3xjwDRQSazCAE2DR09z\nn0+FtWwTT1Nc/ng6KFEyl4Oi7P06hM8Hp7pgqD7x5KMhXqcLdIOjMx9f8gwg\n0jcSjTKC1X4tnrIKFEomq1qdg4vIfqfyHJIk5z3InIUkVgaRwp0vOEoT8jGC\n5nsGrBYHxS2K4lIS+Yso/QMoqmSas1zlYRwwKnvQ9pYu6WisM2YL+1uCdoQL\nIGVbMZ3DDKxRhC0awHBnLNkga3UcVSmi1s4YADDYS5+QnEf6y5e5N1Paj7gG\nmBXWF4rzxG7kvsBhuB0rsP/oFQ8D7ll1rnGju+Th56hxEFIrt5Hwfi49Jbi/\nBTMs93TdYXlZbDEcKeCdx1DUJW2dgtdLlm18Qpd5kNnfdrmgeGhjs/dcfaKm\nRBYEXaeiV6VpJxO7fFqXgO0r0UAUjrJ6e4Yi5sPKsF5Du3/hn9ZO32A0ZAkw\nfBpH4Q2kwwHJOP2VDITe2Ujw9wTTHfZe2B5M5QuzVDTukIEpfOl2MPyR5zGe\nyxNYDMrNOKDKrxV0dbP9xagqoyl4qopguogumiPEREuDypyKaf1HRul+1rKb\nhWtJr+zLiqFOJ+JS8/x7uc41hJZtDoCPeiOSp360LwJIJhC75xz/lzMbyZe7\nvs7NxB16CnbCfumtyI+72GZlKdgYiWf+YV3W2hh7ka8ySF55D1lt2UUrMomo\n4uhb\r\n=QA3a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.981ad970a.0","@material/rtl":"11.0.0-canary.981ad970a.0","@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/density":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/elevation":"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/switch_11.0.0-canary.981ad970a.0_1614298045115_0.24473486389717758","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/switch","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50455de3449ac7001971df8c7f5f7f47b0b27163","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":38,"integrity":"sha512-1kS/i1/SUDe2YOAPLd54jppZP3zLf1DQXfmo6YBpHlHcEn9JxcqTLKmgdsNHBA2A50PLu11oAyEJYd1Fapw9xw==","signatures":[{"sig":"MEQCIAwLFuVTQaljiA75DKFb+t8SdZrNyi7U0n+7aRJo/Y3uAiBlFLaaFZ9E0kl4jpvnThXRhLMol2Tx0bs+bj9vxUllUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUA6CRA9TVsSAnZWagAAq7YP/2kt/8aCLNkFngwqGpUq\na9/qnRn/mrmZS9L48M+pCBqG3+DH28hQdxkaln8/OH4a8xiChUGPG0LTFjLE\nLX2v93RigJ5GweSrpWCVW03RgFChZ6CTFpyYXRqwaNYxwo1nErOBEERungOc\nDNSRs5vPYC56M+ayyFHasZaedBawy5Xh1i1Ifvj2jUI3qD8slGm5jMbQ5RnF\n0FFswlun5UOB6YtRaI2hX/EGPfvZpe2HZucu+uytK7t/Sn89nBx6QNH57u63\nuxJI+ccbcUsSLdYS6A7GZJVEVsC4cFPfPQWIFsnLJmqwDzcgQDWTdoZft22D\nv4BGs2Dt9VIpM5rfLblRKK3NOBtkKRp+L/ooUQbHiA9uuNjcMcLT54ULud+8\nuqtnuBUY0Cu+eWm3aMEeRZVNJwZZt9WSE6sAORdU4F9vJV3S4pOJmBGhAEhZ\nALAu9jAukAEVlbTAtgkKOFS17CAfrXPrQ2XUmb2z9jgk+6fLznY6Po6UmrY4\nWa49r3Ot6Oct+Gc4rGF4EN6i31AFaUwnuioF0S9fTJR6ZujKnQtDLiJsDM6z\nBxxWDOW15SPZsr3K4opDh1zbXX6vQ3viyDBl3y+qBDGePLlrOOVuvcJwtRUf\n5Ytpu9YiORNqcOKP9z0Awksj0WQuvF/cY/3GFmtHUygH4rn7AC9ZjddcrPq6\naXN5\r\n=qOP4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@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/density":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"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/switch_11.0.0-canary.f9c9e39d6.0_1614364730019_0.7957315216781904","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/switch","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"520d4c669e8839ecd0befc7fbd6f9249b90814a9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.c97d7d881.0.tgz","fileCount":38,"integrity":"sha512-TjBZ8Uva69gKkYXpa/6WT8iyTJ5U1gYafGtagpQprNUjE7vewcc66ltJGvWFXdhgKSvnD2YPjQ2SuCFaUHrfGQ==","signatures":[{"sig":"MEUCIEKVNApXN2J9AE4FkOVZdapGuQiXTZuXKrc3p3WsxKQlAiEAqtCX4qbCIkCWX/vGw+qkqeP0yU0NW1LY++liuCagaOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQ4CRA9TVsSAnZWagAAODoP/3MvEvK9z6wBfrSZ9N7k\nE0/ijZmV0MDtbgZXzQMoqfnFdqnInKjh8x+PMfgICM6AjwRMY7RYkrvFHsGz\nQm1YLL4wNhl1rLIqRPEWm+0Yxpl89/bb/pmX9HhbJ2AS4maO5yvvKhBchmKL\nMOjc0DTv8y9ejMe4bUcJigLIQwnJZvMKxLzKxZabQ6lazh7AWlaAAbdgkorF\nKOU59lmMjemDUmnM1QRmPRi7uarI3AiakMSCjgLWWidT7o2RLrfgTQzBSrgY\njp/BW5NGhAP+TAOWqC5d8Fzm7TptNy7iGJq4nNW1JJY9m0pgfq0KD5K2iOJ4\niUVYOpqWAeRFjwDnLdAJr+fOktNzADnBeWCJYsGVVu4o5UAxegMkUF0EYuTA\nqI7kHSUKnXvG29ZGvpd50hRitoCHyokCjrmXginXqO7KFL/+pV/frFcnRrpz\nbSFNPHxzp2FtfWmHaAr1an/QFJrqLHaw+mIuZewSC2wlLwQBpCWO8qpRhrCQ\naMUa8/c3pLjOSTSGDoijKk0e5uS9kJ7MfZfLgr1jcmGLS90TYBq29qbS82VR\nsa6Ta/lQlXJya7JmKytjDUPtcqxSOK2xhJRGoDKBiaNy5Rr90yu3mSVKdt04\nrOe8h+qIlG/i7WINefUiT2xJzwiC+yuDJJ3evvtKdXpZDHekDNVpT7QWr4+q\nJQiP\r\n=nJOe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c97d7d881.0","@material/rtl":"11.0.0-canary.c97d7d881.0","@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/density":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/elevation":"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/switch_11.0.0-canary.c97d7d881.0_1614631992025_0.1458947229455423","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/switch","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b708457e98406c26f154f1defdf1bcccdef5ebf1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.bf670dad7.0.tgz","fileCount":38,"integrity":"sha512-IKufzdsLSk9YbPEHU96gT215zhMNTVTgc5I9FBdf+7zWZNyyMPqBciJjBOGMI2jS8uVtWQRneIDN8L/tz2vhzg==","signatures":[{"sig":"MEYCIQD6+Kn1te4E00VbFmYmQ/nB+XYMyOov7FqyH9GzLFqRqQIhAMyJDHqOSZI+kt0bXOT56H/zbnd01njd7i73Xb9UQnOi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZrCRA9TVsSAnZWagAALYkP/1cTx8q6HvX7bry4of2p\n8y2+NIDlzIpikcyNEbPUVEImpoK7hEQ7U8Wx1ypzL69Ke54sDMgJe4Y7XI5l\nRpN2e9FTLd6QUBJqkxq1UdDmOfFqDuZGQCdrTicHhiImUVN+/A7bnLUWnFE5\nekBEKEnpj2USlUxtXINn4zptkQf849qJMT+xzM5zEp3bIBFyb+i4HCNzq6h3\nr1jSe4FtFQSplAMoPPklj0Mxd9jXpbbbcfG7AAQO4obKvAXuQ5wjn5zwdHje\nwZTW4gA0lPnxavD3r2qMiVFvloyXGMLi0vJt8179Dlk/r1+GvLBUJoEwwu3U\nwS8hVVz01wwr+1FYPRgOqM0YZx6S0c7xqPpvfjTniKSTDuBMi5OlbsH+ktjo\nbPjP1RULtjNvyVkkqH41bYNSwQnCao2/TIlDikeBtgH6SShbQQBmyKvRZvRU\n0Vi9GklKQ3J5H9MNyz1p0U1USfn/Cqm7u5IZfgxi1HxUABG7Wprzt2hUB7Mt\nMKK2vJ542f58hQplEBv127a1TXjH82WNOov5p1tbbHLI9RewdxS7ZO3jO95K\nE9OpDbBREzxSTJ4Lp0SX0IjN+UAY2BbMIjyhlaFHB2tTB8+xXswq2g+gH6G7\nHcoeKSYrpU+IdNXY+oatlm1Y9d4PvPhLw0rIS7wlSovlhKzeeuTZYPVK91nc\n/v9m\r\n=HFCt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bf670dad7.0","@material/rtl":"11.0.0-canary.bf670dad7.0","@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/density":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/elevation":"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/switch_11.0.0-canary.bf670dad7.0_1614730858960_0.7822102957095776","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/switch","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f808c37abe3361b2ba2382f3aaf6d60072df1ea2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.c7d98fcde.0.tgz","fileCount":38,"integrity":"sha512-1NGx/Pv4W9vlu496LZtbcEy0TfO2z6rl7SmWQv5IZQs2cdSRUIYE0Ie1Jm/zw1g1mYYt9XIlvx2f7wJGFgkWig==","signatures":[{"sig":"MEUCIFLH9rGx4de13+lKXARXqqJ90rAG42GKyvLF5BS8v/iDAiEAh0d0zF3nOuXqnx0rQLeYLvskF0zn7b38mP94VqO2wU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/I3CRA9TVsSAnZWagAA2VAP/2yv/5iUuqESaV60Krqo\nA2jo8PC+lSoE5BKEuDpDvIodBFqVmre6LNcxXG/rux3TMmxj8cRbQkYzdQyc\nU54T4frciz1poZInSqCKfsCLPb9BpnGllRHVNWbTxSEhKYPXTwxzkV4tCtdd\nFxBvAEMtrPrQfa3vgpKNNg3wrgucopxs8NubXm7s4lsy7vjMNb7s5jtLnmbF\nrVhjxEa9220V0IU+n4YWyoQoipzai/Rwz914b+RwG2tFyKpYAlFur0D7yWZa\nmq1Sm5WnZC52cehBZM5tkieXUa4zAhLPOcBqtk5oTcz20pF7jLGV3Xhyhgp5\nWz82cxTL/HBLi0zlxnbKuxmgzoxWZ0F8HxEfGW15MH72UrV/mx2uyjOGGe8R\nEPVs8C7p9DUGEWxmwEq121xFuErIULlv5Xz5Xwu6KPxUtxt3tyUv7nPluPQP\nC9wMjYQMOnP20VPrnFnuPwgSrLFx4iruCz510RSt3oaOlh5jb+3GWGWNIX+2\nYgPhrKAxVBvKXpr7cgLcNIS4W9Xo4ZFqy9bxrECbyuHr88uh7ZatLwZakGJj\nVgoigQMCUEqfa4JC+H/lBthk7ywlfrP0ADUZlspzCTKuuv8D6QCIHMpd5MoN\nGnmfskVAwfjVLkdVfiI8K4WhGEVnWU2hBxHoFOh6ZCQNW2zjuXTRBz4FeXIG\nETa6\r\n=Jt/z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c7d98fcde.0","@material/rtl":"11.0.0-canary.c7d98fcde.0","@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/density":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/elevation":"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/switch_11.0.0-canary.c7d98fcde.0_1614803510781_0.18911122289368154","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/switch","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddbfa9b601a1bd8c489cced7251a21e118654068","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":38,"integrity":"sha512-iYjSokYMl5lf8hjd3YOTq5EKqs7d13+iiLX7jtqxkrxKBnZOgbAQ6N5GBlNVbbFP8caNFXUQGG2CXyAs3ipcJQ==","signatures":[{"sig":"MEYCIQDFAWxOIB3GlqvUS2VgVviZ1L9iLDZxPbCegQof/pg0wgIhAJ0Q9dNowHUnQ8rEo75ytraUWJSubL5sL8mBbV9ZquRH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqgCRA9TVsSAnZWagAAis4P/AsSI9Q+upHuHXtrK/lh\npwJcndYV9hSLH6Cgz6JBk8DWZbUEEif3G+vUdeIj7Snj0w3BLs7Fn1LUScHb\nNXEfq4tIOHDTM8LMbDYYgtImYLiCDBc+d0TNIKGAlGxkfnrJvsSBAlyLrqNd\nBRN+DlVT1tZEnlFn3FsyL/F5Gx7NhrDj6skb5XONeteOYmtU5rawbv9fod58\nm/v+fHnNqC+rckGw2lCNUv7NsuTuljpJMuMBZRnJ5IuyJHY8sdoAzE86snu4\nGabB7JtI2vcpHZo98X1WySqRestH0MXrM8qiuQYyuWlMJNpo2zgN6kQeHCHa\nVmUgzH9ccwOR5SSwZddXF64teKGurB1pR+qAmRKbBUBgHVv+mTFgq1TY77si\nHGxUyrK+I1EnV2MDwbZKqy1Uve2N0w5Syul8qYlEwdVZrOXbvCSmGRoU2OYm\npvWT6+vPcLrKUH5xpcXOyqMF2P84QPyoPFvIdroo7l/AzyPmDQlXuiWMszn6\nZ49tFc4x7mv3VghNXyfBZGSC2EIN+ncvNZppZS0MtWbkOxuxCwYXZ7uks1qs\nmCyAipHG25tc43n+JZb5tuPnZK5afPjSo8ZdnGsqmRirRwVrpqrThU4D6FiX\nAEjL1W2ZNMGqIDW42cSLfT9PkhREFT/m0l8x1/TudD5PUjYcKftG95Bjo9I0\nyUmB\r\n=rv60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/rtl":"11.0.0-canary.4fef8bc1e.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/density":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"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/switch_11.0.0-canary.4fef8bc1e.0_1614813855712_0.41547851221246046","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/switch","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bc95f00ca60dea849ba061a0545a87a18b0011c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.afae3a3ec.0.tgz","fileCount":38,"integrity":"sha512-R9JSIJmrIHbgw4WIiGSLG/ifohKMeKQjGGD4vTQN2u8B6BzAgULaBqXHjb9HSjUUwrdRmBE3t3bKLKMpeFXglQ==","signatures":[{"sig":"MEQCICtsBID01NcxLoi1SlMHXpo+4CVNK24NkG2Q30f0KdN+AiA9+GRkAKtbDHkOkACb1DPYO2JnrY4RfKWUo7tHO7Eqfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7YCRA9TVsSAnZWagAAoDAP/2Na94iTsfDFVVSB6+DT\nhJDIwcY/3ZDqqAxaWoexIqy3+9cLU2KSFPg8TaxAlWg6Pewmfwi22ZHvWdx6\nS+YXaXQu64H7a/0yxb09JMIrFcDJBun56kXJZYrQwElpf/uLpsBvdMX5z2Fs\nlLyU71REZq3cO85dA40G5MBc0kaRTBpEjgK+PZDAffkRTxMYegfxfZJt8PNh\n9Z4XklybmUrUKHAO4jZcpZk1ftRgyGBm58wOTQxMYOFyfmUek0tNmId0aIyy\n6P8FEeOmxvPbL6YHWOg2aL6W6MU+3O7ehJwMzLtEQrmyQwYRRvvUjbTcQkyX\nNOzn62sdrV0hjo1C2uQt2WNcL5EFkIgdw4wu3Cffl8GfGs1WDhww+gLBFRTV\nnHBgwH8zU2eEt9onypBjpVBx/iCzNk+knaa/ImkxoLbnwu8vpZw4YZMpPklq\nB1E0gQgDnTfTl5wMbPmkhLlxVXVPCm6go1lOamAma4MsFceJlM5z+zHOjcEr\n1d19nnqQ2VA1T9kSbfr4ndAx4ExHO03ht9RYGJGeyE0azvonOxjdNEKHHbc9\nOMyF++3loORcp0PdHhjsuGIqtyJM8zN/Y38iUqkbJ5pfepYzUO/rcFYOJJ+N\n3Htr2kn1pezgF9iNWiSmGXh2cV5fX2Gc8m35WbERniTVw2+buw6S5j0nyLOc\nCkQa\r\n=uBJr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/rtl":"11.0.0-canary.afae3a3ec.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/density":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/elevation":"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/switch_11.0.0-canary.afae3a3ec.0_1614814936259_0.21540675608912818","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/switch","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5c874382ef14304077772cc6b5511688728e1a9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.0a0b10f22.0.tgz","fileCount":38,"integrity":"sha512-XxUMJbjNRv23kHr27Xut8brnIbR9uvh9b/s00Pkf99IuOVH87dWsJLrHqCBCxPbm+YfONkatceUD69B8x+MM5Q==","signatures":[{"sig":"MEUCIQDJt2AQ8gnWbFHf8HrRi3Zm6eA54p8sf0EbMhDf+7L2tQIgH0OaNlaGJLYd6Em7SCrF66B/q1f509GeGgo3VdnEZus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCM6CRA9TVsSAnZWagAATC0P/3Cn3jnxss2aHCn7smLL\nGS+CfBd+++Pk9wHOllWV7kvy0u2xRF9ioi2k+FtDYKuo7R+spC/79bBYTVnc\n/OF91tj4TlhIY6QXe/IpuRnDLVFyHjMq74rYXNsgB+SDsEve8B8xgNcY78AB\niuqIsa75VQKtfnVuXeLDxpGNIOsWvChwOCLDux2wwslL+1EYpNrIyrFx60ER\nmTJjsWrmJZHOhpJZVGzm43gHfq60X9jKQX2ppWi/0G8We98I1sTEGBVB2z09\nnQ28xytzpiE0dVAieAy0ssuHwGr17xgsN7aX3HvlbQZl0PVqtssrGVQNq+zC\nj4au4a1ulZ3At7Zcq3lQVoRzkOZq00pJOUr4jqdK7yoxiC56UxJ9lOReJTb7\n2OEmlPr0oa+1OWX7EYgmmysi9iIdvtTKSNlSB5oCv+qqyUPTWVk3Ts6PGmMV\nqOkRd7nYlZqmeLegWqAhzM+SdfMLfoDyFz3io0bNKWt4NnJexnAgvXJisNbk\nJhDVe1LSLkpcxpfoeAYRNnF3Zf1eePeLntHkj2hyjgk6hzhtpA5X1LRHR2YK\nTxs1EWb0O1WNZn/mZFeDdfc3M0zqN/ZbmT3DARdDXPWU4dx9H198wi2aRfYT\n56aE+KcOrZmYKLJhVMoLFXaHLYTX9Qrkv27+C1bVzfRRsJVfsxB+iEToxv63\neLZh\r\n=zB0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/rtl":"11.0.0-canary.0a0b10f22.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/density":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/elevation":"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/switch_11.0.0-canary.0a0b10f22.0_1614816058021_0.5082189994328847","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/switch","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a3b41e0d8faf52b249eb627320727856e78eba5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.6f678a91a.0.tgz","fileCount":38,"integrity":"sha512-zGGH0tZkOLoRMnxBorODnCbKXK/wypc3/LoZB/45YGI6vYk9O1LmgSABC8LFmpL4Y8KfjUzJPKvAXOFeby+4Ww==","signatures":[{"sig":"MEUCIAiH5z//K7Nm3qfX5zchZvXuOF1sWLBYDmV5T4to6jZSAiEAzb93iKpv0OTRCXXVVeg852Bbl8zXKPpYrrD0zT3NBA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSmBCRA9TVsSAnZWagAAqtIQAJYAtftI1g9Hi64REUul\n5LFyj1EQTyb9RzZV8h86GDKTJGnYcsTKvM37laMFC+Gr54h4gTOVIkaAUVBu\nz3NHkaYhWpiLzF6QRG8kCTl+ds23YjNcqNB26VRXTquPAonX0XtE6ysbWArO\nd3V+Ekf4KfYwR7MjloHFYY6lgzNlD/YivvaUjOXX89AENYElJP6OffRHmxX1\nkrzO2x0KT90QdHtAQIJeyo7HnKbh7IudJNeUgZWYouNGj24O3AkpTNRsSuYW\nhEuiVwdA1svOxi2B3NNIgcdBn+MjmVIMU029mFSYqe7+e2wmmF89IWCxOn+S\n5wliYIoXoCwpMXUEq+rN2MFQEJw9JOSS7tQqWO0FarXJyou+5uoae7onInWJ\nFvsuVX3HsITAaHaIIMG7NTd7YBJXsWaUor8GpOiTfbbvZUN3YN+C0hbzVUub\nr3GxafHoEGBNXmBnwmFZn+WRO0yCVC+q9Rel3Jyh/1kK+5o1Qn/hhdL4Ba/k\nmGtfMDOM53Vy8R4+r2m09np2VqZxtEBXIsSiNoT/tR+NOx595jzRPng/+vjj\nZk1JVbsBxqC5bx7pO7UQWv4DdjZMd1SdmUmWLOsnHMPMo71eDmAfHmC7zZ42\nYtnQTziGOw+s6DQd9E1xByYk1vSEfHCmGbt3kqQv7I0NJ+fxsaurr5magVZy\nCFsY\r\n=dDum\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/rtl":"11.0.0-canary.6f678a91a.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/density":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/elevation":"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/switch_11.0.0-canary.6f678a91a.0_1614883201201_0.2245842899408248","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/switch","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a77462c82f770379db2ad147968c33549c021578","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f5f1b613c.0.tgz","fileCount":38,"integrity":"sha512-ng42c3it8wbDM4L7PdAnAmxOoVLyVxjAVXNHSbluPmt4W9Gn+QlnyTbMmz5Vl/lxRkijLXQUJjDafx2PiPYYTg==","signatures":[{"sig":"MEYCIQDERGEEvemTcnWIFJqAbjPw0obx5TPvAElyTXblv+zZpwIhAOae4TZfx7iXHH7ahSebF3ghxzw5NpDwHW0FsNqPqDG3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUfVCRA9TVsSAnZWagAAu5wP+wbijAj9+jtANFUZHWlu\ngT+3fJjCI1N6RIRIoJ/u/s1nMSvsERCleoqBW0O4ooi6aIwi+3CabcwNaWjM\n6Wb59SzaAatAcpsKnDjISBgulAXeDre5YtujNn/Yxdwk9q2+yGWU9eVM+tWq\nMGdrGb4MiAKEZ3CasU7VSZ7U6qKedvNGu0i3JGaJJtMCypu5YWmIWT8SLMlB\nyfwPQiOBq3JSlRWfoRcALdKAtG+7+YLQj/LutoQzTxmgS7c8xKXl7TgnN3fK\nqn7LGWijrYKzZXuii0AgJTGuO3CpXY65pkPS9wF3bMxLW4+DUvOHelzqZrff\nuwFaX2zWcw6Ve/ymfFRSF4T/rq1+1YU9qP/TNN69LnzN9LvNrI6uzrGVDxeF\nU59jJUr0NZ1fdHPTPvA2Y6n8Ec6nRbvCAW7nxGzOhsqqdCisAD3oGm0abe32\nSUUwPS/RKUnor7N3oNyHxzjQ98Ny7GaNN5tN3xzI5+ryHRL8/lKrVC7Uw2y5\npKGXIFWcW1o+kCNviB9lnASingdcv20OrahBPoWGWWDf6ttC79MzFp+mM0B8\nNSlDQVmONZqJV7SBoh41qd8tP7PBin3387q1c3PuNaOAJ/EcIHWpH62mEpWm\nitngxvA0MXXMdBo9dkoOnFnc2VpQkOnKbcJry+eX167VE8ua5LkEg72o0NT+\njN/6\r\n=hKPh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/rtl":"11.0.0-canary.f5f1b613c.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/density":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/elevation":"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/switch_11.0.0-canary.f5f1b613c.0_1614890964694_0.3053659390373402","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/switch","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.606e767ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7ffbbaf0d03bdb3ef89a2294ca391d6768260a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.606e767ef.0.tgz","fileCount":38,"integrity":"sha512-O1Hl4VriIawcfWIsxkbKjkjLJD1i64IgoygIQutUDQIjZTrp8rsfshjZnZagbKrUGyLvF+zOrH5vIla94Adjyg==","signatures":[{"sig":"MEYCIQCNIuLH2o6PvYwtkFbGrPpdDr61VN27sW+/YIZGxFzHqgIhAOJlZiRxJc79/81MVWXEIVl7K2S02QljoG0YXl5Eqxfw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVUFCRA9TVsSAnZWagAAm20P/2Iu2GAmVSD9DVEpJD4G\nS1T1KJ4HYePiU4rd32I5uJm+/0wNael0HVe0XP0N7YyD5inmR9j8s6+ZpGjh\nydEqoZVRgo4ij17n5zdYgHpq/qiymcgQD3frqgxGUUBL2/5JlFGkwsereWTb\nszAyKks2NOzcoBGDsUlzLtGAFO8tofPrqn4n5Rt7UQmZuTEencTObvYqgAZs\nOThno7pFQ5oHLqHOA0umMleIFQc2GCiENfokxnBJDaqgmYNI77Z39qgEnyON\nXDZHlrNm9Bsk+/Z+4UYDZBMqsUI6K6baCy902SheRTlv9431TVpbAPHyNOFP\nAnjSBis2eeDQJdn1Y42oKi3gc+gAXW6Zb99CCKaXEtN5VVcf2vBff/w7X5yx\nqRZROLWZJ5rjZ1kn+xb1sP+3NYfSZFL4xVZnjD/v2BINE7YQx/T+dgGBrFc7\n/KffzSg9yKakx8eGhON6gdfm60FVzP8RWIJZ0r6r7WkAl8AdRBiPqkAaPXH/\n3EiU1AjEazNhvi7quUGbfMc4N8FkwPku8EErPp6HyTvypt5FNUE0BjUhmmp6\nTah/MEKneBEhX728Mel+7fSzkFN2YGd8LgrnHx4bEDBdzWEG8/moV5SdWaYz\nJePgY0p1WktZ6N9ZLWOLVd0KA+hrRgrRpWvNzOIX8H0mm9SxNBjkeHTypgvr\nTwm9\r\n=aQAt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/rtl":"11.0.0-canary.606e767ef.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/density":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/elevation":"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/switch_11.0.0-canary.606e767ef.0_1614894341176_0.7587276702102626","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/switch","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df7492f2a617e6ea639c46986fe40b01405b9c2f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":38,"integrity":"sha512-9pyZyHGmQm3hlcjkci6efqjE4uAvuAK+Ez136PvrdlFx8Appm3cof/PU/4CPqlgQ+sRU1+U1mnG4wU01yKOfrg==","signatures":[{"sig":"MEUCIAOKB/QcH2zH6j3vdXOI0AUa85sXpGY38/s/m8mXS77EAiEAwWojRWO8JJc39zqUUnCK12FF3I3xwlAQFNqDNG15ctc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQweZCRA9TVsSAnZWagAABLgQAIujwNFu+6vVA9F7I6et\n028MBoDjP1nf4wOI/IuzPF4ocMFKpQkrTcP8sGw9gSHD8hYUlcCPWlPzP+HA\n2bfMlnUUi4FG3H1Qx45L7hrrpSu0nxnLVBaKE8cStkCvYE5PeNEwTGd6UxZ6\n8ODSE2qmg1GVIirkOjqAVbIDuDlGw+ym7B3GGk/meRcICWiEdLrFT2vVeuOO\nwmCFqc0ycO+APDBORW0AHLQscDAJdf+v+u1u71m75piecgkDAcLZ6rNBOaGr\n+apDqDORy6Qx9gHBxoi6G92/F+xPbhQ6k23CKfcWOBoFBJZ73WQ6qakdPkTB\nf995oUNsjJ36S9lp69KlqiNmEO8+7aofJVcSxkmce7kBQeo1KA1KxefuAY3K\nrLVhN9zivVEK6I8hwSJHfYDAKkFz8BzOPYQIaz7ybHen0t4ejaqi19oAreC1\nhaBowHoypWLNpLekRZHy4oKqXW8y7gN1eydmJZkS4ZQLsZLzdUKJvu8JfFHt\nmI2txEDKCUy9UJ6zh7N3EhUHFplBBdg7MdMVlQYovaIQGpeTcQhyc8qUoqaD\n4oDQChP0Mlqy23HYjQ9XV11QsihTNq9HqzIkMsmK9fZYTYkkVCl0Y8EjCt0v\nMqknWCRW63WHVS0ZMrCcux0k5/esZURuFgxg/0mjpqzL1yrNi4vHxCsx1UHB\nBYBl\r\n=1GnS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/rtl":"11.0.0-canary.f77a4dd1a.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/density":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"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/switch_11.0.0-canary.f77a4dd1a.0_1615005592864_0.6493220189655577","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/switch","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f044b60af24f252f1d5035211794b302c0dc7ac5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":38,"integrity":"sha512-iHwSEdHI5vzOmOF2Iti99lfXrDNZOGKIrhdiM3vuM6y6a2pHkDYHoNem0x+XWlP7icckPrOroUKLmzzsxPkfKg==","signatures":[{"sig":"MEYCIQCjx0M4g+NM8xL0PR764XeeRjWkQgw5+FhlVWWquclQTgIhAKhegJf6dBSIN5WBMJ0aAlRwhp5g9eZtghGmhmZ4hr52","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqi7CRA9TVsSAnZWagAA3/YP/0EK2qw7BM9EHqtgPMkM\nDowrVHP80RoG41UsEHgLK5RB9vNLv9ClMj0LC35AThif2l6Y5qdzj3Kg8BSW\nlUr7yoXltcxjYR0JfGLQnSvOqHAHsb9TMlbyQGDUqJ+AU+58JocU+Y59QN0G\npZMs31z1191fRwUhowEUz8pZzB3dXcpYLYIdM+ZUbLy1qNJqmMrNG8R5Zgb5\nDgFtFeQ9zunHLWIakJWpk7GMYl9Ruduhq9MpDo/gFuNmxvS1hlFnJanlEIIC\nBuJBOX4OT1k5hL+EO498wn8VcObisMWhTJtfHh4jkIFx5aKkPzROTODf+cds\nd8kfGP0wYcP4grvcKEpo011cItM4MBRKOSDKXjJO+kBHumg2uIIHnT9EYOEb\nn/HnYoFrvMxpSdhxgOfiKRpU8rHyEEk8tLQuN7ZsANNJFFeMlfGFNv/LqSmy\nZuXZcwQmAGjHq8Vk2m7te/llCKvfRsUHB01gH1WMVkXfOC7ObIeg2oyjXE4x\nTpWAxw6UcXZ4jIKYT2ct3HEdjZuP7d0vu5BbKACP842bu8+Q9X+fYSXTeqJY\nwHOlpkV39sxt7uWtt8siD0IBXJKgO/Gtog5HF3fJPRooPib6bTfP+82fv3uj\n1827af+GVkxry5kIWFdW3ow/xMHK398ixTTRuo/qTMjGubxsoFe6iq7EUNBz\nxG6d\r\n=zYQW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/rtl":"11.0.0-canary.2d6ba2c23.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/density":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"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/switch_11.0.0-canary.2d6ba2c23.0_1615243451100_0.6109054771688871","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/switch","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa1752798f7cd5254e0b747bbaf5ccdea6e6a325","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.7522dcaca.0.tgz","fileCount":38,"integrity":"sha512-7Lm/8rxYuSwZxY2XdYWt4ltmrS+bZHnJYE6JdKkUgArxweOx5uAh+/if364HFjwBSDNGHdTI4rm/nfMDoTXhiw==","signatures":[{"sig":"MEUCIGMdwH/j4GuDlDj9X7HWTF/OOcI2xMcSyO6h/ngh74qiAiEAyfw7cUdG/AeKX4YHZM7oDyo90LsgSCEfVqbS7GOk570=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsD1CRA9TVsSAnZWagAAzksP/1KepDEWaoOb0h3foB9S\n1Gy9zFZyjw7ISPZ6pveI8AdgjhQvhuQPHdMCJ89Lvv3YOzNHcNK4TGmKaqqS\nwW47Q5/ibEsXZx06EVQTz3v68fDSNXLIAcUwhivme74ldH0HG2FLt94WL/bl\n3TfB3S52Cp5fTbsMD8zVmCGfsohcb2DDe/3B506te2fVb43LJwGhXKmd32D5\nFR/wWlBmJ+5CaziTda/ybIWqiEGgfFRcc9YYvm+0RXx4iZdnhY/vJ1tzlhOc\nC+8iSCfYcz9hv8CcHJIpBCXGfGBkbC36ctgSMS/5Qnl484cuOjdsxY6k6EJH\nN52FyDoUXSABeFVxfTFPAmAfCUBf2/Ol1RPz02KzAlcDAMrzyRkZcoXzznia\nc88gUoC4/Gq5+ZAOVoxRfltWEQG+D5ToBI6jmTzWwx1G9Y4ejtT8JrLvPLeU\nXkD0LV/kZa/xdBAb84g6iRUfncClCksUdWq6+kOtIIlLP4MHpdSXh6lUkJmz\nIFjDGnCg2+emeLE1GXVPWsHHnfCtw2bq6wcLKnXcn7q/6KJeHYJSJ4so4q2J\nKaUgAWZRR62SZMiCLhAAx9Ll2VTbLl9dAL2HPWri6495C0zuBTsZbtmfP+QD\nUMorUZ5Xq7L5Pli/SHDIiZogbqHhiYNHz9WYx6A8fPiU2HPEM5KKqdLs9nrM\nCi5h\r\n=GSR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/rtl":"11.0.0-canary.7522dcaca.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/density":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/elevation":"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/switch_11.0.0-canary.7522dcaca.0_1615249653419_0.5544490385756606","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/switch","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"993eb2d88c7c4e315d147ba23af772b382461adc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.5c0ab7401.0.tgz","fileCount":38,"integrity":"sha512-9VC03ADXlURAm59bUfud1il6edTttZWtu0L71xWC+ICYlc3xvUTDZItJGSlPuWrFU6LHMhRNeE21S2Go3ybFzQ==","signatures":[{"sig":"MEYCIQClLAG0+jlYeXSu+Fw2qoltz6Z8h7MoZGxB4+VRn5zZDQIhAKkRojRe4nV+JhwqITFL47/RP9v+uyXL0AbXC3tzBmyD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/wkCRA9TVsSAnZWagAAUhoP/j3FzV6jKCgYkj9YiUwo\nQnjkHAYH8PxdNeaSsuLofUK4TQK0tyHv/HPNP178hhfZoGTSfddNr6gcp325\ncqcyOz8D7lRHO8+pGQ/UjRF7htKGM6ScYC/gMxFUjDDR66e8uM2hRuT6PpIK\ninjOmPvTLpnsXoNjEOkz0TviDcSTFM2lHbOnKxH7Nb59b91tfplsqPtWCfc/\n4VN0fNvc/CdwayCssVDf+tYoAHYOOdXYStTql7Z+zn9AmAkb0hnIcktt9v1k\nZRnFU+EhBSyeeCns4MmkvbxwC862qTp7s4yGhN9axvZVZFKcwNUnHhox2BVa\nZgx+Cmx6f9HsAUjIejIbFBP/i3zwAkGq0dy9M6c6BTMBgAOUwORhKVbeqFrd\nog6izI7OtRGAaMfq2biSM8pK1EYHOWkES1DM+MbStcKSyOqiXuRS1fCwl5D+\nmXTU6OqjdDVDRBVdgqUrttULMWGo/psjr8LZFgg21rSwf0AdJuY6FyovQFm/\nQBzTNQ1BqAHZK6wBzhL6Uu9oucvmqlbL+p9uTLhJjKm/gMq89W4NNc+7HzAi\nQOeukyLBjXT7fdYLgFGEDqyGPO9k5AlGR70QNdOPFVFWigiuQyJY+i741OF/\nlBOb1nnfPalNtKSIswkGHMkO82fZw+JbknIOmQBwslNZPiSPeL4VcpqNB7jI\n/c92\r\n=rJG6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/rtl":"11.0.0-canary.5c0ab7401.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/density":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/elevation":"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/switch_11.0.0-canary.5c0ab7401.0_1615330339547_0.6159449795008101","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/switch","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d8198a00ceaf8ab581a87970a6a7b347249d0f1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.59010b6dc.0.tgz","fileCount":38,"integrity":"sha512-P0Nj4g1rf894ZBwihFamCxGjxLyUgO/r7pI/v3z0WJ98iNywJfNEh7P/yXstMCCwsqDqv0rC4Qx5l+aYj39lWQ==","signatures":[{"sig":"MEUCIQDITIRsktYOxxU7sOwV//gFzq5PNiD6TEAybQFQZaJQ8AIgKZ7egV84mxsYmPuYAN9qy7jS3jLE70cu2Sqjqgw8P5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPpuCRA9TVsSAnZWagAARpQP/1o/ZNZ24A9DKySjSY1/\nx96bxQI1CNnFSEXLjf5//45o43/s8HDGYqy40G58AGKSxE0/VDridjVRcgcP\nWC3gAhBGFRhL8QkPVKH5ryEn2EscycuV9ggSDP7SyTcrFVpVhfddxYwZZDLd\nKMNnpCv4fHqu0HGe7RHHzvQlkEdtkjW8RCcMO2YrPifDcQjbOKOyrtvMGf8U\npkTR+zcsLCHALACeC++RCjH4oFBW5ovmmdTFNkCzVNXB/osbRD7FzjFomwvF\n1EiMHjYdn1BuxSUF516dMzFvHd6ZRxH2U5m63aSUEq0Ex3VX3B7KF7fY5H95\ng11ptTHmryRZvOysw1RKUciU+2J0S+UJWr+AkbIvHhUUuYQ06BEg5LzXpUe7\nqwi1n+6iFbIx7Gkb3T/FjFG5gsCLD7QtE7jGzR+OSab+vnoXlITDmnwBNGkf\nSoIQLRrMYn1UIqfyAYuafEQm0H/IoicJVIp5+804D+sjIA6W8xCP2qivRO1j\nob0PLoaz/OQxcMpNwhsVH7utv1/wfoLL5otzRP/YdYSNjLoPv3a0qbGyEfJP\nFlT7nuCvJs8DjuE37SBqQt5JZ6J+zxFYdP/VJCXo7F7yraZKLIF5qGWo+/Z2\nACSgFfPmEuG5ZHfCSi5uIWxMWKODjG18htlLpMCwLblQnEANUjgNYvZMXMnC\nZ/qu\r\n=90aN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/rtl":"11.0.0-canary.59010b6dc.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/density":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/elevation":"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/switch_11.0.0-canary.59010b6dc.0_1615395438403_0.22460643281840387","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/switch","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2adc554f9193e3be10a25659467c09a94f4bcfd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.9e52f5544.0.tgz","fileCount":38,"integrity":"sha512-66PozdyV2bf9H4mJZXhzcayLmMi9a8hf6kvSGJDmMg/xOPjAGPP9dW8dvUsaR4r+pRNEp8GESwFJIUGOi25/4A==","signatures":[{"sig":"MEUCIFV76/8LqHTbtDyraGexXZ3y25s2e4DXUl7mdM3icTmMAiEAg9AxwgE1cYVHKacitDPpDmAe0uH229NV1PpspR8UP38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVVJCRA9TVsSAnZWagAAE6QP/j3y2tnFne3Ar77yxIMe\n7/f7cYCGoIQnwuBuMbEXiyMBZeLCnkAbyk/7LkT8Q2pJPxFRnBSMqmY1szvX\nS0V54OJQpnvuSpmo2Eb9p668QAYev1uIDCKa5bY8996YyWT2uHnBiVybRcWX\nJz1VOK5oGe2CyP9I2+qEF/I/6VCvw8z9OUUcmhYkidmAvHT9givdVNZNQKu0\nkFhsnQ3FWx/+IPNN27AnDgVqepYB8biQ2+0SBCD0yl8Tq2O6dCpXB4/7VBDJ\nRO8D4Xcn1UN1CZFckH89ybKmsp5JdM8VXoqQlCxMZbVDxgdr7FcpkpycnTU6\noXb6n3chT3epzyTBbVcm5xO6mlXit8T3wgIfkDHssPqZuAdNVV60MBMeTFmI\nW0j4BUBQV9x0MHEnbcf30uadKJG0VJLwjHQL56c9Z1WicrxOslO+HGAOQjaQ\ntME58+0RvGYo0Ct6RYMVzOQrqSKjxrf8XpbOb7iIXu9mxy9ROzQx2AOoZ9Zw\ne17UmhlPv82ECwF4s/kFTYtaEgT5nHgA1dF4lDiWOsHsZ8SO1XyGA+d2qt25\n2U4QAYV5ror9xJYf8oxQyZToKgM3YUXimpxFKtf9E4/2jyRd310UTwYSnq3W\nQhiTaG34b1fHDsvBNjntgjMRMjRjlTh6N/LAakL6CPwjX8lbbLU6GD9j9V8T\n8GIE\r\n=BMAd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/rtl":"11.0.0-canary.9e52f5544.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/density":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/elevation":"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/switch_11.0.0-canary.9e52f5544.0_1615418697186_0.2644723083792855","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/switch","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.a678806f5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d02a7d0be13ad58b3f3d55d3a3ebf33dd26cda45","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.a678806f5.0.tgz","fileCount":38,"integrity":"sha512-Jykyc0j/73LT+8XpvfZcFgGTvB0FPLnfDOvagvRjTNkyOfMgGjBJG9p4/UgBMcvHUvddA4rGqJytkaSgMJvb5A==","signatures":[{"sig":"MEYCIQCizsaN1x1ZWtvd+H1NyiuvnN69d796AMZbt4NlI+kz+AIhAMX+dz8sPBPXcVQpiEbMBjxxEazS+vwVf7Z9RlG+hCwG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXc+CRA9TVsSAnZWagAAojoP/1B34G9eWuGufSF+FAP7\nubwikRzcGcWC2IjVyVfLwmbSI/qt1SrU4FnOFQIyhEBkIQ/YYdtNhxKGFD+Q\n6FojzmoibcHBMLa/LWqibBuMXFX3WJcJq8IlRpdK6+fPUtVGwPDSO8foQEU2\nl/BKVy072JMSln030I7rcuw+XVt/VFk6wj7mj/nRDm9h2RZOMvDYKAegsvaT\nZdbCU1C5ixz9WWpjR2n8cSPzYNiy2hn/uVL+t1O/nTot431lfFT7r/iF9G7s\n2DUT4DCQ1qJ4TrIu9dsQnru0kF0oOZdicrx89idQXATz37yLUM0BO6S2i0KD\nAk7zFfu1mv/g6PRwzsm7J2pLhyVGRyhrOfLwh2XbOlKWu1x7i/9ep+apR5G/\nF88fhJmhtBhsEFnxhs1djrsc/EIp+0DUGU8YkwHIfdz3J/AVHNyncpQL8Vnr\ntbGj9Wibpe1PuGszqGvN7TQ7wOZiH4TcM5VTKuQOrS7F+zF4ydgmMtNbmH3o\np2WyBFEs2XfhWpiQEmfd5/encOmkeomW0hGC/ibSw+hZ0AmRibuXLNY1Fj/S\ndWRWZB1oQ0pZ8k+The1/IHSrtpTSqJEi8vnjdYYWNAsshqokXfQgXrdC8DyR\niOJoL9Pe+KKIWzKuMzOHIiKu6HuBMznCvc1pdV90FMYmGe/5LavQ9z2k6sPC\nZeMX\r\n=kOZ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/rtl":"11.0.0-canary.a678806f5.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/density":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/elevation":"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/switch_11.0.0-canary.a678806f5.0_1615427390142_0.29977975476118934","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/switch","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54c07d7e6811790a8599b7868135fa67ebcb72c7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.b2d22df5b.0.tgz","fileCount":38,"integrity":"sha512-xclAED8vNsPdnh0y+lQBk9wJ11D/1lWCNUEmCxDxdo5gYWPgmYyZVAk6OWVhF7ukt8u96lGsH8J4lCZz7Q6A+w==","signatures":[{"sig":"MEUCIQCjtmHPoaYsBrv/9KLu43BVwOiycPLOM5h2qthL9MOrugIgISZHrjNgOfAD/kkVGgF6tnn6gMLB1ECswnDPHqQFP/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk00CRA9TVsSAnZWagAANxwP/j7hPLlwq5VxLYV0RixR\nHeBKUWoNt/IZTMGlQkWF6I2HTvxqa4bkJAAMgrpIG9nrS+cN4mvqP60cMXxF\nC9Dk7+e3Gwoecxh5UB2akvE37kQpxIBah1fvVSMgCSHEfwFiUjAcrgVgelm/\npdGDyVXlwEBjReM5GrO5YWiMZq9AnFhxfmMN4xt7NPNhu28fZSiO98siakWh\np9j7At/PEdWbjQLUrBgNAyGqe6mO/7BL/uuEFGJsT5xVpg4aCCWJUKD7w3rw\ngMCEGW9snhMYXYvOgPk9Dgd+xC8h6mLVnZEk1G34M0CmdQfmKpijgovMOKUR\n689RcBHc3X5gDVEKwBklWm8q4KfUm0gQnCkxPGlppOhFxvm7C7rXOzRm52Vw\n2VHq72uF6SAeO2PALYZjAf1ojUXAEtITeGscoBJC4oW7VsiNoAtkfMcfgulV\nQVHLFNw29sr2cW4BldYUe3JAVd4HclIKa/pSJlx/iNhKPiXdIMcpnTmyTy7x\n8PJoRG/JoNQafDtFZXwbqve4uCcP315aUzcQnzo+SFAc9OxMwKquTMJO+FEY\n9Xu1jUQ8IIuH88BMEmwJ4GH0c7/Xd0UToE15e4YgZweDMUh9ODapTiT3xpIo\nPgXGaRerMzMd/6EZSDYHx7J5t0XvbN1XTu+Jll7Je7ycjxLzcLi0YB5dnwjK\nkhaM\r\n=a3V4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/rtl":"11.0.0-canary.b2d22df5b.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/density":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/elevation":"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/switch_11.0.0-canary.b2d22df5b.0_1615482163652_0.7271704802551875","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/switch","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.81911b707.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c21ee66dd1d7beb888d61cf003c11b818f742f61","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.81911b707.0.tgz","fileCount":38,"integrity":"sha512-ADoZXkYWDAroTY4YsKo7K3vpdSM/gsXDWznke/vDHQyted/k4UZVxSDX/sEk104vJCqao/hBNJCV4Fg/0JjJIA==","signatures":[{"sig":"MEYCIQCrCUUO6HhYuNr4KQmiUPxJYrKOrWNxI0xAEFjWM/eTtgIhAKoybCur7VardJ4Zl54RBtbkfX/V0HU0pRpOM+1THOdf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmAVCRA9TVsSAnZWagAAhv8P/iwJ+UHTrLcvpQJS+mcM\n1ZSjlVDcmYfm8FhQW2UgkHisFO2ZQrh+cz7fN5bY2pe0z+vlSSkdQN58yrdH\nysDtFp6o7Txdf9c41P9SKJG36c7Lva6+MedVA0wveHqBsv4xIfRcDzN7ROst\niWbEMQ5p/IdAcXEpRm3vTqYfXCnKgqOfJlK6fCQYlX1gw9fYIO1rjoOEb/WP\ndtYZP+RMInLR4sFg3d5sxG/kpXfNYWoHbCsDqO4sK++eF+O8bUeIPX/zXVAc\nuuwszardfdr26HKAaxVKPtJiTU6sb5YSBzSsfoWiHms6+2GBiB9epMWTCE7r\nqtX5O0mFt6WTl6sK75fFKLJziZhsQ7ZoN818VC8Kp/HZG/qwdIoCUXVSeyW0\ngNah3MNAr68/X7lgGIlbEufLbM1s462g3cNTHrtbLOCm/XJ7Im6Sm4BjV2cX\nPhRII+Rlscb99l5JyLPZ/jd6QepEoF9wtc77ghhYIL9vFUpR9a6qeXLldJMu\ns0liUmxl8r5KHmo53Yv5RpCfl4Q9gubSE3OKTvBw3qlrDbEpEDUBzTZzD4yE\n38loKM4djPtGwbZT1+g3PQrbNK7FrIxXwrVo+DDcss2bKyvYBd/H/bwiImwv\nNCbmQ2JlzI4kEqUvKHHgISjLxlmMTelUSFT7JT2YdXXqVShu72fs2J9YhjFx\n9kXV\r\n=jO0k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/rtl":"11.0.0-canary.81911b707.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/density":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/elevation":"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/switch_11.0.0-canary.81911b707.0_1615486996598_0.7490307620429151","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/switch","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2873809f0f80f8aeaa4ba814310fa2adc6703f77","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.9eeb35c38.0.tgz","fileCount":38,"integrity":"sha512-yLvmAYWLlPUBVWaex5u3e2aW2dlMoVDlMBx6H2Yo8RN/jjLTsndCUkYUf6KYicndSJSoEV7snDz6pnlFCIWtTw==","signatures":[{"sig":"MEYCIQCsokuPE5upM+IBW/5Tb9OXAy5K+Kg7mFyNNHM6yLVrkwIhAInmTkD6BAysborUE3yiHUOn43rH8hwJEu6V3Hy+ANco","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnFQCRA9TVsSAnZWagAAAjIQAJZmY8unnm6vPvSUjV1Y\ngubu6wGFs2lJy/v4jWa6afRgKiEDFfPdZ+xffROA6aQEKK9MjFUwfjwAXX4C\n8s+QDAIRKSPbhkGScMvRSgcp4psxYBG1U4oHepDd4LJK3u2i9V78TQGtORuW\nGnaSyzu1zqJDzVsu9CHRNuif2wCbw98kEyHK3wZKJm6z9Pj77y1QV7/hUHgI\nhqvTb0auDSQ1Tbv+XaWs4Tn+BC+nr6lUMgcHaPaMEd/eUWPNotamj35Hb1Aj\nzDL2UPOJ26XG+gGPIP284albL8XCe5h4hd+YGnsZC146WoG6wqiKXy0OhhD+\nDbDBiGDjbpOnn8KvgdRjyyQkh5dNwiUKok9hYX35RiYiL8+X/DbJrCA7lBU3\naRGXlsnH/GeBkS+3Lg3zBfQJVqh4t7CBcOvUh7yoNPz+86AG7qP4IR5gkkKM\n/GWrppgQ/DJOeann/4rmS+20OO/2L+m3sFEUbZcTKkouCjke+eCcIPY7J9ri\n5OX8z6Loflfs/lVfMV6hIxuJxZt0h4iSpRkmpXWTL4eiNEi5S9LmCzPQzxKU\nZPEFked42BN2Ft7hJZBZXwyW+eYHBa1O9IqaXL+VqZXH79SYWfHgbjP2COU4\nTultiG/uygrXG1i2fjFBjBqJgLAwfHCqAQMMkHFXhc5CnKh1Eq0f2MFrTX8b\nIC5X\r\n=YkTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/rtl":"11.0.0-canary.9eeb35c38.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/density":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/elevation":"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/switch_11.0.0-canary.9eeb35c38.0_1615491408259_0.053472296862377755","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/switch","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f2ec87b5544db62ba358c03d3c2ecaf412466ef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.12be3e95a.0.tgz","fileCount":38,"integrity":"sha512-JQaEOQ/5QSOJLTGyK2Wjv8Bwl1wxqbd5wS5jM0g1LqG8H8TCRA1NzmyDXdLFnLzpSc1bhz0dTbUptTIewN7FWA==","signatures":[{"sig":"MEUCIQCsPyr+r6nTOIeiwCqLOOzh++QaW28AI97CAKltFFTbxwIgfKMcz7G5W0Mr/tlbk2d+/S0iB94Tsh6pnKoybR4ywio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSncSCRA9TVsSAnZWagAAvRUP/A2gylPYOl0z1JgRSxvP\nLpEzXvWn1QLsUChyBoFSsO7ERH6j+eCSOwqkmrXRhpqlGU6I0Iz1LQZhrftX\nwzsABx4kFVFVkN4hk6o3UYykTtcmH9iwNZvB1RiTftYKypCZwr0YCIYwQOVY\n9YouAcjxVezMze5FKjgNOYjEdNOSL8sO5Vy9AavTTM+FPmWQklpaJcPnAI37\nJ+ox/wFscs9eSawNlk1lfnGdFLZ7BG2AY9c5TiJstALkmLq32hrIrzX9l4ix\nhVmNpuThWBonf2xWJZGkUzLwlkOZ5NlMaB++vSYjhn3+7eVFB0wCwNqm6w/s\nj5mxTdXRalJvIHfftMwXs8N9AokjUC8o4V5+rVF3Ta8+qrmfbkoB0qP8eBoL\n9s3wgW5MUE0bTFdLeeLzLuWE/tuWQkOXO3mB3ZvZhDjF7cgRlU16aabkCVwW\naz8TSfSOwRaQEsDbLuOS3I6FSypz3UplBOgjLiJw85knAg5Di4R7hllMLOGZ\nKo0xWLC9vUoYiAeLFmMsJnNSSa+GHzbtVB4z4Pe5R6VA9CGQuClzZs4IjNOI\nrSdVC8JvgxuBLAF37oKD9CY1LIcasb09sUdbC5101OpYZQOQAkPyxedLsAbJ\nk9w0TFHUYWkQUxzOZ6238YvqrULIf1zRXYNFka78F9UcSZlTyjWhcRadQIN3\nt5ED\r\n=0nfF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/rtl":"11.0.0-canary.12be3e95a.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/density":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/elevation":"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/switch_11.0.0-canary.12be3e95a.0_1615492882286_0.6481923516129613","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/switch","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d0def8f4bdf642b8869e99741320fee508209ab","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.e683bdf4a.0.tgz","fileCount":38,"integrity":"sha512-CB8ml54UfOIKHrOQbiHzI/gdaocIizRJ6nifmzX9bOA0gBSyXnS2OOXE9mwM2O8xDphDQTNDEocbQxAnm4+q5g==","signatures":[{"sig":"MEUCIAwA33b91zwCmVl2X/6g9pd1a7sX01NHv/yMzyocfyJeAiEAr7Pr0VW/YcYpKSWA+iJGxyw1mA9GWaxzOF8ReC9RvPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnjMCRA9TVsSAnZWagAAX4kP/1I5FZt9adkWqjw/204S\nPwVivGv4D1VgqGr3fwc+MjpfI35yVTKdyhYEATW6GE34pSBvSkxwak+N7uis\nv9KpRolZdOmxmdz9ww1/ijsHjO5XCcp9Blvi6+/vJUXvCfhU+tC3mvHpmP5P\nZnYnpMfz5NbEplmmAqiiBrM0fj02AFrWVawcdiHgaGm7b6St6J8iWJZEVMz8\nnMvwP+wNKGApEbpCTwQYukxDtBrDQvMwRGEZVMnA9Z1nfc449676csnDGKbI\nlYas91vcxUneOdIbMGKCUq7y731ZlbY3hWNTHESnIamIfZWdu9AY/jslrNFl\nqqwaJsAcPhIbRGIW2A7pU+mOZNPeFHA0JABPx6UU+bI+nBu7yXB/E0rho+hv\no/oC2b/osOc6BXEsBEQOXeVvaaqj/gwZBFc5OiBl/71cLYgK4BfwBAD6tsK9\nMOoOk5jgK93yhmoV99tvdgBdXuTMRaqChfsvBHCSStO0qi4X9/TXmN0gBwvs\n1X7HX6yj54vbaZ3EIm7ZxuGyaUYjy2mjuYS6ABnSpc5rj9+NXtP0d9kS3w7N\nAsCqv4oJCcqYRjXsl5OYPd+qTC71P5qvzE1FZw61P3/0QO1LWVzqtGDeeg1t\n1dwq7R+KVrXnPEs/E32ABg0TXKGO80smGtfoWHlNHWEoYLE/bV5AN2wdrC16\nAqb7\r\n=SAnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/rtl":"11.0.0-canary.e683bdf4a.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/density":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/elevation":"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/switch_11.0.0-canary.e683bdf4a.0_1615493324396_0.42470089015215895","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/switch","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80c594a3ba34b76a0ce2fe17169a57cc781bcb48","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.a07b6d486.0.tgz","fileCount":38,"integrity":"sha512-0qhAFFYa0yyBUmMVr4x7Y5GEVAS52GcB0ohm/x2uNq0pPbiYYY9TVxhn8cr+DaricXtWbZOuPDLiNfyRGOdI7Q==","signatures":[{"sig":"MEUCIH+X00EaeWTuH0qJU89MTjZk16YGzSavgO2JOvc2m2oYAiEA4t8XIiOCW6NEeG8A4UUzdGKjZwl25ZyNgFayGOfr0mI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn6CCRA9TVsSAnZWagAAlMMP/27wGyBjqae0KtixOoYx\nwTFWZ7GcWNLXDCtotBGQQWLLx4DJWEattPRPSPT0li2gk/sq8VR4L3Kc54CH\n4UrFSqJe3q3H+iLx/sHMICKjfQ/cyYhnnLtzDGMYNSZeBrwDhubWTplZIpkL\nFIltCaKqlOot97co4Skt1ZD2GtYiV87ge0kDVf8pGjYF4UUicfOUcKnSkGBX\nLMcTFjTmVoc/yjJr8kzrpZvqqpon1ymCzDZ2YdKWVeBS5+05CxUShcdWtUjg\n9vgnlcmM0p0uJKPBoEswq2U4ttYKHFMgKKaLcqvksWN2Vp56poNMenjDhle9\n+WMjwZ0TlysnDewVAYpSaEwnNTwsxgE3Fu2Xb8qbttEBN5gMIlqlFCxE0KTN\nJ0Zmt2tm/uyCYxTCimLNfGPpnL/ERLl4aCyNdcemQ2F4XDUcnX2Yt/3z4mun\nt+7R3eyxxIU/ctZ6RJG6/xsAKw/pUrMVg7LOaSd877bsj4lDz4/Jhq2evpuS\nwVg55WvetrK+zY+2ls5skEukFuYn5IifQOl0nKp6cFI1k12v7/UWXUJMijlg\nLk8PhThm4XED7GHH8JWUhWvAKy4ZRGMNE+R5LYqyC/UM6FEWFccFvEnyy6Xz\nl1+EcGmA8HZQKCmQPap5k+bM8G3Q7GmvGhLQIIjxxS4R+rxyhbHKGcpwauX9\nS3jd\r\n=QBnF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/rtl":"11.0.0-canary.a07b6d486.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/density":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/elevation":"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/switch_11.0.0-canary.a07b6d486.0_1615494786061_0.5780380073318327","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/switch","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.1e0653477.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"491b168c0b01537f08350c07ca41f790b5d2d36f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.1e0653477.0.tgz","fileCount":38,"integrity":"sha512-0xsvqlbBVe9zMy5+zNwrOLWpxDXQJKpuKlMM2fdX57KAPGSpyXLR7vkbiVpl3p/e3IMprUsLRDKwTM1MFrG7rg==","signatures":[{"sig":"MEYCIQC/Nf3LRP/FHKNCXWKDZBFd0PC+GLEq4DKLtLwJG2BAZgIhAPTE9IjiROqpTTsphRbPMW2lc7Tfwo2F0VSX00vsBk5X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoA7CRA9TVsSAnZWagAAXhgP/0vg4AGh/yd/R5RTlX4s\nR8sGEfzOHQNlTIHxFIo85VctdsCH/PRfODJ99uXelzt1DC9t+smJ5aCq1gO/\n1RJDBRtwfMDVaQ6nbcrjV94x0LHNLimXfG7OzZUA2HRfozcpigHbghXL+di9\nCWPV98cvqpx1IFfBMWFjsIZi7YytXobpeKBsa4BoG+XpX0nfO0V3o9n4vZyA\nFiqyBY5F2bC4fDaYRMNZAxUKkFyXBSorc6ZNIEPvLlHEgCgl4z27ROiy/Kof\nCSOlEVDTe8axI9JUUGSISszVC/2ppVHw0Giv9IQW/vaxLbzkIrzyGnwB5O/y\nj3PSfhpGjFF+p5548usTtGhxiIRStYZqTZWRCnOop9szrfy0Wtf5Cz6Lu3At\nrWYKxL4NRMKih2vz9uRyKImBQNHd6Spl/uKA5ULrvCad0t4AkVKazFVBLzKj\nDUAvPYE07XAeVVv0MqzHAUJlyRzs4vSSDuKonkCCFbRPlAlsInEomZqgktq3\nhfxiJ7arWscxQ73N4SvzSIALMNrPM+I/lvoPJ3G7Nvi07ZVHNAPKwW9OcHDg\nT1QW+5n9eJpzCb8o/GR86q4QzNQAb4+zwI+tPE0zP1EG3Eucsetg5vhR0FFH\nRRiQaLEpWc98MahvSe3rJrvSMUOZzD3QaoDNsQyc4IGuic9A76QmIFytkR0c\nGEqz\r\n=qqSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/rtl":"11.0.0-canary.1e0653477.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/density":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/elevation":"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/switch_11.0.0-canary.1e0653477.0_1615495227288_0.5527831708263364","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/switch","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1acb49e37878054ff3aafd7df328ba63fc0f2c83","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.148e8cfcc.0.tgz","fileCount":38,"integrity":"sha512-Yf9oCghithfvp5KJuNy0t1vhzR0OgCScALKIlptPHKNoYs4UfxzX3tdKyrtP/GfbvQrCGM2/Z35hc+hcxzsGYw==","signatures":[{"sig":"MEQCIB3wYTKd6OkDJKDguZCzXwW0gxYExS+kodERAg9ZbhBsAiBFayhY4aO69AIvpe1r8Yl2uayyf5nvV4z9e066UoB75w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp07CRA9TVsSAnZWagAALLsP/04nLnozCOD3udhu9hKc\n51xii3XDzCLg/pY4cvHAp8OT9Qp0i3jrYXbUfZfZJTbxOgfHrhNMH724XOaE\nceoQzGqtx5SYlS3rZz7au511K9LQR6AGQXZJJIpfsWLvq/iIOJ1Y1PQLGq7k\nCB+XBMO6pKlQA6mx0BE3g8tBJD4JDOPjQfoVfYnqUooh5Ll2HuSmZnGuk4AO\nXu9BO2AxgrUCeYzyGS2aoPRBu8ziRafpIBqqv/0S5BUXqK2HFdDIHF8YMxum\ngAispEYYQX0JWeuwwAeBJN+6AegTSVY5A4t2v47VFcJ8JdjfdK8rQ5pfr7i+\njaMQ57/urPZFHuIdpFcGUT64S2RS4zexVjcsbOW2HKFNx+l2wGpZTp/endbv\ndyCx/6qBmf5Fh5z/Mo74M63LKTyjLvH6EpHhLJpcJ1UBa0AdFOifqjaIJtmQ\nwoTSiEHQjNdztQc/tz32FOG0SN3ztaMKyW36myUDK1a8TRj+CJ2pSAJlmEmE\nYiaQduh6KNjTLuBcxPQzahNJoczMF2oughUs/LEFB/1gPU38AM3HRu5rUbvz\nksMD8FwjLtzb2uRzyinx8TJHg87DCvWUnySCjjzNmQGLx4oKxEZjhjZnwXIi\nqqoYTPVd2tVh5HvJYqoGoeuVG3v5uLfk8h0C7vjND8eAePpPjBKLz1WVtv8d\nG+1i\r\n=VOol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/rtl":"11.0.0-canary.148e8cfcc.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/density":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/elevation":"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/switch_11.0.0-canary.148e8cfcc.0_1615502651337_0.6417934050718168","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/switch","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.73a227194.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d13a3dbce7c20d79f489fb110b1fc05349fcbe1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.73a227194.0.tgz","fileCount":38,"integrity":"sha512-1XoMplCOaDaRIlQzEJeqIlGywnps9/AncEXt8aLjVdksOkaa8h7Tucu6566l2kf/3XB8Ag1z8ALuNIq740GLlQ==","signatures":[{"sig":"MEQCIDXOUtJ5GWSKDQOC6P2FRUCawMbdJ/MuYSm4hbDUaNTYAiBToiVknzbAYa3Y5jPVFKTdkJAo2rWTMhvDDJUyEEsVrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrScCRA9TVsSAnZWagAAwbcQAI/+PfDyWPWNigZFiI0I\nOp/80FS+VnLRVCpkTTJISxUXAHgOTMPt1hSNUTZ3AjeDZZn0Kxacv2dDNcO6\nAaAp+g3tX4WUJ0jtYXuc6a1jWgrPLpRH8KcH8LWvxr/bR4dSCCxONzsXezQP\njMI3Mv6n3geMP8P54QDTQcbuKptmGdR8MBr1IaK9yTlbBunzQ1bJlBCn0a3m\nnnrQ7wEVCU+SBUROyb53bFpfhCZnDFkVTanGHfs1CT6mRJ4gtax/GhEahC3A\nLIxewrk/69KagC3+0aU7aM/WlfNKgLoGGxtD4Mw3u0RzCi1LMTSb/fMgtUFT\nnHTrEOs1z4XVkrH22a5/EzJVRB8Resro2pzwylhlHlVyrZoZb7z6LNy3gbOa\nXw4+ETeUqmgxtINAmrIs+POxY25uJnZjtpQNh341GqCpn96diwBRADJpRwgw\nKRfCi+E9ojFUBgaMO2Qg+sORR9LSMC4FYtLwCWJmlJGUGOYQNi6A7RdsBY1Z\nsujAfK+XUOLZ7KS6+GkdCuQP1W4Oz9uKNl21kn0/DJvs09iKTRjh4iaJmP5u\n0iDd4otbO/0Mb4iAB12vFL7tW1vmF3uRbCa91NTSy6utCPUcPszayopfa2Zl\nq2bBGclaSnu3Oc21d9VlDU5IOWAGGGHuFEWqdx+LzvT3dwaWwwgPBB/vGYg0\nUWlh\r\n=yRgi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/rtl":"11.0.0-canary.73a227194.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/density":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/elevation":"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/switch_11.0.0-canary.73a227194.0_1615508636229_0.45878922967052116","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/switch","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c23bd28a9ed445652d067906629a4a6cf61dfe1a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f8579b7ea.0.tgz","fileCount":38,"integrity":"sha512-glb5t//WZhrSv4CtcpqAtZ4wDyG01/F6DgQRsnWLGVJRpV59FPXl33wY2FvXoYlzohVJYvq4wUwfWZ0WSBqzsw==","signatures":[{"sig":"MEUCIDSqt55HZ47Kk3d9n3PKT6YNr3Q9LiuSh1MRSWsKarllAiEAxu1qeXU5od+thBjXEYe6k07mCDe4mhAyIoChgKFZp+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB1RCRA9TVsSAnZWagAAoUUP/0gNa3ixTBd7T7XXFjCo\n/qxw21qKmJTGrQPX67cXeK6BiT/qEY5g+eOJcWgiSsWbZjtuktnWpt5M1KkA\n8GWrYeMA3h4MIaBZotZVezpErT0H00DVSlPRb9cKbVSu8K/RLeBACLTElX3z\nKqc/CI63oo5YYsQIy6eB9eWkX8/KcmZmaQcAE/XxzRcFp3ij6jkqWkjLTUxC\n2bkEqoOP40uxppR1mEDsNEDx67XfTNCynnZ4XI+W+IhN+ONRyB1UVrtY0LWm\no9Cv7ftyGVpQnl7NWRkCwepOziMpqh26/ofGJHgkagtFO1H/hu5/KET0g9n3\n26Q+A1UQManzqbSb+pMkNtSU4g2JYmq8cG11fiTXG1ow4duYck3S3nVkTxRL\np0SvpjVPm7Nm6gaoEnHsQ/Ptdru6te2Np/rU3sgSdwHNKSBH2PSraNJjg9u+\ndrgEGu24lYMbrsiPUi4buamQJjC8y1wg2iGbGL9flScHLz4Hxvw17MzHey+w\n7lQeowT2sE+LRT1tpstZzwqlYa+GwzUNkfZicYo/Qe+F8rCvWndj/dzKY/TB\nwPUABZRNb3uTt8WJVW3ceX4hZIV+R+hMUFGXZFgH5FoRmMvKMrmTZQD4tzjf\nwVjx4olka+Neo45jMtJtI3ORXjAal8T/R7uHUFZpIQlCtAJTo+l/gYcvQ2DW\ntZkY\r\n=dF2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/rtl":"11.0.0-canary.f8579b7ea.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/density":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/elevation":"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/switch_11.0.0-canary.f8579b7ea.0_1615600974388_0.1276112711743258","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/switch","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88fbce75bb104eafaa2acba6140b87f0f3ed1d49","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.d2a39d300.0.tgz","fileCount":38,"integrity":"sha512-pYBJuQRMU38opaZCn6u9kq+l+f2liRnY8NDahCyJV5/zPQijFc0kefq4qd+lgmp75L/GP84EKDPlmy2KyOJISw==","signatures":[{"sig":"MEUCIQDMTU3noMzLqJmkcGGIbbi3bgE4v80diafzeXbNkZjByAIgdyOWZJ6EzVRWwsCwnlnsPAVpZ+OkFuQV5nmqrEIZ06Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/0sCRA9TVsSAnZWagAAE94P+wXzZm3+K2yzTDUofsoH\n+hLTqg0MM0xF2MKnWJkToPHoYAvwkXOOKLHtFD4rVy09TjEqfFNXv0rJqfqB\niO1AtRM75xvJgQUAl5HkVQbsNfqPZ+iXp1+YlQgHgZreg0TDvKFYEmEOikmH\nRUN5qPgcSRs1Glrey8yePWNtjIH/kKiFx9ELKk+3TG6cbWcL8amT/k8Nvigp\nqzpUQXF+kuSJ/mMLUfW+UAdmuZ2tV+qTtSndJtSTpQ59UEAnG0Ouw+LpasAA\nBVV+WMCuFRMtz6KwfYIS1lwm0XEJ88Bp9pXnd6+yr0o7ewXdHuNJkArWw6NV\nIajNiZJipxAMGi0xCSyV0GfzqPvt91L/jYXWy2fhLVRsjX8h/2h5LP43+CMo\nWX0ZjqxWsWdMHzeHsWKGNtUhZfQvSZGV4T41z2T+bIlpdmr5RxWW37EnnKXs\npM2azn9AvkA8pRd6xgjl3uFk54lX4PM41Al7Rtqt5/xYE6+H2mSySepB7bhB\nTiPiAhMaWD7oJ9JbSb1hau7/+F2cWNFsMnHYRfbTNdgVo6TADMB2rM+yUzEP\niNlqL1TsE7HYoDlsQpBzhF1IXsbOj4jBFUdYLqauj2/hD2NGFOO58Y8h4RpT\nhoHoDGGYDFAo9vlTNO9A0LX1byG1/jlZ7E9wbe0UZB+2dnE40qH1awbrj/Ar\nVRup\r\n=3b+L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/rtl":"11.0.0-canary.d2a39d300.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/density":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/elevation":"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/switch_11.0.0-canary.d2a39d300.0_1615854892210_0.6359041726544241","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/switch","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"124ac8dbf681ae5f54895e48718003349ffafe0b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.7cf67823e.0.tgz","fileCount":38,"integrity":"sha512-wNFEeoa80yr/YQEUjAdEsb7HApZjhvo39oJQ6zDZNW6XTqjpkGCuHr86dU0ub589RnSud9xFGa4Lbp7x0nDqmg==","signatures":[{"sig":"MEQCIHhTvZPBmFK4+5W0KKBMWU+Pgnnk3guWiF18xHMT2fT/AiBU+GbSObDWw/Ygso6nV/u4O+Kb/hC8buVBRUlEN6NRAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPbQCRA9TVsSAnZWagAAFd4P/1+Ilslcaxgd267z494F\nhdhrPuTCvOUslYwTVt2MzmbHKH7z49J/jN3ke9QDLn+LIJzukwr9uUcpCS3T\nxiucE0az9oQRGNUHI4vrcBsC1TAW1VtCX0woIACyHw/XKsqyyQduDHDAs7Dd\nJN+rBpx/137miJn5YBU8aksCgEM8U3U7JIlRYLI0AOAbJWVKxawa8c/hMDqZ\njWzFotNUI0LbeF/8fSWo4hvFhm6gjba59AImk4PSsV5B4FgnI3qxEt6d7OZ+\nrwS4QrDPpOb+kJt066TjEW9WYIXFrsnyMBIDXidU56FgfeOxmEGgHTj/q/df\n2QBJRU3H6pvrDqLXqWjJp1ZcOn+Xv6eZMfzr3VlW57WLJoNQNsrWKhVUeHDZ\n7JWIHh9QeQs+ZB5GcliB+4siIKSrecN2KpxmC2R9LvVbkSobzOb95xyKaCGt\noVm+MDkkym4hTlIvkD6/HHcH0KtGj6FcK4tg3qdPdf320RmuxZsKnDGx+Yij\n4zGolH/xSUwR2ZmHwMWn8Y3MW7XDPbrYGOyL5VAUb5DKsm8azXZ3rtuZWI8Y\neKinYzxPp5kAS05MSj2SoSyNbaVwQYaYWY/iVsOGWNPQtZzY8oeKarD0loRD\n6PZBF1W5DofeIG6TcWpJobGBVRFsKBOAmEJv6lB5PsDTXA9bwo2+0Z709wNC\nGglm\r\n=6WC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/rtl":"11.0.0-canary.7cf67823e.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/density":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/elevation":"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/switch_11.0.0-canary.7cf67823e.0_1615918800084_0.4828410376437702","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/switch","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.67d780c79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cc5a91ebb608df79b2c888b541969279619b367","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.67d780c79.0.tgz","fileCount":38,"integrity":"sha512-vCtCefEdiHSOXYZefoNX5igGln1R33CUv/jNn9JQ/2c4e37Um7u3/YJrgTfIM0wf+C1qQns9IDBGCW/ReSzbZw==","signatures":[{"sig":"MEUCIA4EjOcExV/IIsWw25uJ38DKHeXX/MgvNzqWh5XmEYiPAiEA2bjtp5wrPGYDAWLTfDB7LIv1G6WkRvsBjB3I1CvdEGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtiCRA9TVsSAnZWagAAqdEP/2fUZtczlDltazTsbRmp\niTd/YHwWu9VNGZ7F37w/3R33hLr3CfVWEC4XrawxcM5+H8/Xd/ntEShNw1S2\n6Ft+HKevVE+6zzShqSWhVyam8en41Y1g06oxTP1StlEgLjjyD6p6MFGmlk55\nB9/x+Or5rNdW5UpE7CV2onhDq1gwgfe6Qyv8EqYPx3L/xW0xhHaMlogPhJTC\nf0OtVBvZaK9sXtQW9rTk28OhAYoZJi/BvGNdrgsSTxO1K1iMaBGyKwqLvRei\na6idtbNYSp2si1qxTxhPxFKZ+jTbDPTYJp/wEkpw5rQ4DWKQmbuwxNd5XPPC\nKdknUJMAMV/W/4zq3QqrFljcgz15pfHLCH7a6k0Rm0Z3mVYjvPGb03jMLfT0\nMOfql7dUlUsKahihCX2CN82oz+65BxM3P88QS5hkjsMrKIgqJYDvqj33mUn5\nWWDmkZZaOTf33gRWHg+LcDaJeIgveOq2DW4Ylrt84+gFvfLMSUAnZmfzjURV\n//aldSyB+ahqwki7WHFhe4SMrkcu2Q2BBhzl9h+em2/2F4Dbpl28NZLTsYbr\nBpQEMsbs6Ux/Q16+Yi0h7ysanFoCZ8gKWYoqoi1Cb2TMyjN0YglXlZLpBMWw\nh1ko6+DXARz4VwqZ26lGa0qUaqMI7WWCN3smMXsi8l6GzwxDeUeqGuVOulA0\nf870\r\n=v85x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/rtl":"11.0.0-canary.67d780c79.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/density":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/elevation":"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/switch_11.0.0-canary.67d780c79.0_1615924066325_0.4607643321044339","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/switch","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d8e87202d69fd7b8d45b1f22644541a9cefa1c4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.0f358ddae.0.tgz","fileCount":38,"integrity":"sha512-gDulIMvKZOM9qSih6SbEMGhlZZOMWq0I0nF97thkalsfHfjA92g30eBVGHhSAAKjhspy+1h+oexd8Wbj2YLveg==","signatures":[{"sig":"MEUCIG58QuUbvhhGu9NQCdw6BJq7m0ESDME+8P873HY/RScZAiEAtJE1Fn4pRHoHUI1GWtWmfz4wmpXgbcYcIwJVPUWSoJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS0/CRA9TVsSAnZWagAAeL0P/1tZ6y9YFLtP/whz2xHE\ngucDoFgqsUDj8p8jpk2SPPjlGXGNJqh516SghRJ+Kl4YNEr+At+yUaCYogT3\nC6GVRbvFW7OZiv+1k8BP1cMLmI0ZHV2Eg+vvq//rZQxCSy2La9wKnkxcCcxk\nUYG/lLpv4UPyTSST+0mSyMESfrdssTQtykkeMMu4r2YDTuDLZwhzCGkuUCsr\njfLn9QI3ai3LsvmNjFOS8gxsEIcMuUadeOaNVg2iqqudMPSir+kwYdnwsc7Z\nqCbP6rdKFPswcyo9g4+az4XZuipa14dn+JCjSCSIcmfYaprixpCuvGOvVrc4\n1FqvGeLFbe5Hci7TwJ8Nio2f/Rw35GpVWVfdVmsd7KfsKDv1W1i38Et3HsW9\n6P0qHtbhJ11UAlICqnigLkSIdoot90rVOQAbzQu1j6PGBGiBxSY0erGo24ue\ndAdc85QdmAY/WGFgUaTCYT6mlQhOg3zgeQUygutX8wMuxjq5fSOJno/oUmb1\n5+hfSp6r7c033ZgD5jVv+J/ArKEspGOi7CW1leDFBWRvYVsD0uWBBbvnPBFA\nP6QPKg1paM3rfm+mldUyS/70aDDFh1dD6g0i70mXYnFl00/eV6d+Xmm09aLr\n+d4b4+KXdut5un4JpVTiChMdylmb5p8rG25QAhqJdMmlejI3Hd90vX32Frgj\nfL8q\r\n=eMJG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/rtl":"11.0.0-canary.0f358ddae.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/density":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/elevation":"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/switch_11.0.0-canary.0f358ddae.0_1615932734953_0.6801055051275089","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/switch","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8319885f18f4cd750a54df49df53b75c407bec34","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.67eb0df80.0.tgz","fileCount":38,"integrity":"sha512-/mYAI8CoiNRDIOqNS/0lp+LxzNE5DsxtIw0mWgGddmCWjBDnHaoWISt0YY/z95PbpStEN8hlDVGEUH6XEoVFGg==","signatures":[{"sig":"MEYCIQDUJV5rt+oKjaqvMGvrRfU/jdEjb4eFBxKO6h5sLiOjCQIhAJnmrsRDiPSplrIkYYMK8uUjS6dtwSLUr2jl1wQWUKy7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOgCRA9TVsSAnZWagAArswQAJf5d3y2DQaz7B2ytCSI\nz+wKdFGArI0qhhY/STwTOIpAKo0VimEZAwGeqOi3D8G1ftRjJrf0OQKgHfkw\nwfbN1SrajU2j6X2UrltcJZpUNIcFCvAfXZwQzGoKBUPANemxg8stQ/1mSYez\nC/S66a6EYuXAqPYFt4GvDMC7DqsFG539m5e4ljJk+/S7QcpwWf2ZjmJTsjsu\nD/ipbhsoWgAKzEyM7NYA85B6QjXsdHpzn8hZMST6ZxWl5amHAkqTR36Pgo+U\n1Tbjac2dqh7ms/emV8w5cNtmgXSW0BU+zBvjEcTIMJ3S1p/d4CA2LqX36nlK\nIw5+n25rQ7yN6yOed4QUgpUuwYvG8DrqfOQORkPNPrL5m6EoRID/PsjBXWMU\nmod9zEGM2ynGAeSAdT4E/8ZY64HQSSZqwFUD2D4nudLTNNLM58HWybcc9D3x\n7cEHTsrjjHnT2sn8YlcUg2HL/aQ4kK+Qyt6a+LLqWQLDzO0uvX60WGfB0ztm\nnxpTcGvcONeXsDjycWzHIhsuz+26V4wv9YWwS/fFYH9bLiM7N+7SLUR6EYG/\nE1mVh0kt+6MdtsrN+2uBLbiveIjvWo0iHLavI9hQuC3MSbaP38w7L+tu0J3Z\n26NCMSF+/XNmF0pPGHNp7v2xwlHnl67BmKS5IP1Ref9rOLxQOSHtJAIL+cL3\nSIkL\r\n=Jrn6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/rtl":"11.0.0-canary.67eb0df80.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/density":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/elevation":"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/switch_11.0.0-canary.67eb0df80.0_1615934368385_0.46624123401918594","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/switch","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48242f8e1524e673a1e8de58710b8e5beba5973","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.941ca3b3c.0.tgz","fileCount":38,"integrity":"sha512-y8Fg0WPU2UpCWhKqBTFw/znTN0vLniDRnRCLjKJNoeDxNNgoXOLLGtVodwPix4B5h/omg0nA91WY5BaaiiWkpw==","signatures":[{"sig":"MEQCIEAt5Fognh8sIry9LPH3oc2wSvVPo7Gu00U5OuAJ9FJwAiB5c5d+XM7cNW1nmBw467DMXwgk1SR6+f9XF0Q5bowiOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQQCRA9TVsSAnZWagAAg3wP/1ZiCDnCANZpL32/uGBf\n+jcN3jCk2FLAc8+rG/iwEudYFpocVxhLuTI6loBWvNevhwDTkPDQ2Fbn2Fi6\n7GRS8x2ozh4tqjz6HZmiJA7hIZk9/WwMnLQ7KYX21OSPS4GcKTWB7twlW4i5\nBXYnohIe0V8WchyUKvjgNqQd8xlzR0AQkR8kOoLW3cyWEmPOQQXQ0UkMC18a\ncEmPogaY8YTcXjs/kuA2QkNPZ/Kw13GWUEB7oFZVEue4ohaeua+uBPC4ZvWd\nqN8sD12NILNDvIQGpA/iffUWaCjN5SaI3368VTf9dtlr1mRWP2slWScSJBNf\n8qxiqlG+ywDqQlIaQ2yMacxm4ohTMZlN2+IK1mMoIXaQ0aUZqiUgi0Vvs/PZ\nF7c8YAl63uvJOyjosgJ4DzHezBkUmoDTbFugUPGTzrR19SQ2QgZB7QbSGaO5\nVlUv7CwkQCVzvQkT+B+L9uyoKL4wtp925E73Kf+g62Bl0OPXkTCDvjejv2Ul\nTBfM9RSYlw0vyuqST5Z3Ea6kjiWIavg/IFDPXPHsmykSBbDStesXiUA/0sj7\n8mhjk48/y42+Dy1ZmqxPniA8/f2OWgfv0KzgAONXFm/OeKh/oMvLlOi6bZW1\nwwcWtkt1FHel7uLa5d9a8nKfX3EgPi1ReFouUVERpCShwfI03NvMBB+Tb6R5\njK3w\r\n=sVeB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/rtl":"11.0.0-canary.941ca3b3c.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/density":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/elevation":"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/switch_11.0.0-canary.941ca3b3c.0_1615934479596_0.22223271186139182","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/switch","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5686aee3682fe977e1eeb129b5bf3a013db319ae","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.3344d12ad.0.tgz","fileCount":38,"integrity":"sha512-+c0/ZvQEZlfBpBRrst2OLH3Wn1RwvwGcRJWUr9RyXHPgEeW7N9UpewZbhxVUME8gvb7M+acKpyvCS8hy/xqMiQ==","signatures":[{"sig":"MEUCIQDbxg6lntZyT1cM5duvyWD7DYH2X8/2A4F00InSaVFfYwIgNknqt5sYKUUv9b3qNPiIKoD591DVsm+H0IEngoIibTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdOCCRA9TVsSAnZWagAA1J0P/iTstQyoye+I/JhTHL3y\ny8dJbXaDCgjPiOCawawi1hNvZZYJAsF1QWrYdJFwyqjd9UdaFyMZR9yuvgsK\noTWa48mz2nmr5MC4fBOAhBN98DWwY3avRj9e0YWz4GjTzPu2U/OJWuhv2iUY\n626zFy+7gOkNGOZCJyqyr05Qrk9t3IXNqkoRIC6WJBJOIF9TDYDaxibZ/T4K\n37MWCyKCpAPPT9LKcQr3/CyYIwn/ts2HYbjiYlLzLYyINKskcaKtHXwqiA6d\n5ikxo/RSrM0jPUu7Y11hm6zH/M71uZvY+VUJZqM/xFHqxRXzMB3hmLwESAWo\nzdtPpT37JduNNjwxqlGIOKFyaQ8hvo86mwqQKtmRWARkFsp0Zf6w/0JxQqtD\nUZN/6+g+aJI9dAc3RzlYhHmSj7J5OBnjXgHak1lLqqlI+T5H8gW7QqR+XvlM\nVwGRY5cWEqjAv8CXTRZyQB7F3OwJ5t/hyKYsuY4jGQTI7bApVPdg1E43oz5E\nDAjFY1RxmNKEyWXwXWz2bMTOC+K3Of+wG97R9XWLT7u+clDMQ3VxKrv0euE2\ngOx1pKhwDFNA54sdGLWW7YyFz2nz9Cbt+Y70g8MfpwpNjibB5xE4wshd2DsL\nR/XzUWAsTDXgtn6JwiWt88jl01x13aoqvAwS35k8GgFruO2+DPShD4xS7EqJ\nNKXj\r\n=eemA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/rtl":"11.0.0-canary.3344d12ad.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/density":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/elevation":"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/switch_11.0.0-canary.3344d12ad.0_1615975297605_0.29525229082543825","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/switch","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.6072ed604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3729218194bdcda753140c69e1c22b7cdacfd82e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.6072ed604.0.tgz","fileCount":38,"integrity":"sha512-xly9K2aGDPurOp0a1xcfapVUXLM+MljKSE296RFaB5YXU7rL/78UsGisvaOpR5KKAcqtMzRqrq87BLPTj4KxOA==","signatures":[{"sig":"MEUCIGRCRpjuIGSfSMwWeSpp0qBuIybw+x4dqjWn8LfHif+sAiEA2V89ltVVgl/ur/SzEn9bLaVjPKXBdcxemrJIbG1LtLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonJCRA9TVsSAnZWagAAExcQAJVxp/zj8pW18/AeRft0\npR7NumjbKXYyMaTnHgtsBnMkLr/K3PC5+MuPkyNCxokGTidsLNsvlqtDCNRp\nxIlCJ2JXitK/vz4Jh4QbsVlbbxbUsczaQPQw2ZjYO8cDmnSsQKGZpkiozBVq\n9xve/lA6O6o0EWspmE+o+V7W4gedMfMQ7BcvDEUCSY6FmnNszvJzQnrErrXx\nZqGm7MYtwj2oD1egf5uZzkZnxHza1K1t+4IhxhQ4RRBHstWELhP/6lAHjUsw\npEIutddiKHO/89FTD3AV9YBXhgGNG6UPIGmFGv1/f9u46HuD+3tTfxXVo6pn\njM41YSZShrldi7nY+dz02yUkzYir4Jb+IN+jpkq/92gjmzITC6hs7V0uhUYV\nIfdmIv/EmyU7ftm0jfblknV78LZyL3jUGbbLChEFl15I1dPsl8bV8AskUptl\nZKVdWZFsGFCQPLdEQEGaipy7lYIOs8FqMAXVVjkSnlz1yiCIFJimiTVUVKsr\nK5Zij9Qe5scxU9qhrSSME2Kq9NCiDpvcrRzWzUDbEQlaimsblnsMUZd775bU\nwZffnVxSGqnSZSPa6hfemDIPuNGAdAeSoKa315hoBz0X9TZ3EyBPPBbFTGlu\nm2rbkED3DaMpM2hWzZjpWKiNdH5g+ZFIzckNFwUiZQtYOyNzf13tij70UiOs\nJ8dD\r\n=WpPQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/rtl":"11.0.0-canary.6072ed604.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/density":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/elevation":"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/switch_11.0.0-canary.6072ed604.0_1616021960796_0.7030453437128019","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/switch","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75c729aeb8fd5af4177358917fb4a7a9b91a7cd5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.d3a6862af.0.tgz","fileCount":38,"integrity":"sha512-bQUPx/uZI06QulytPafRkH2KhB731A2F3eP1KKM7REOR8pxYIXgS4HXYyNN76qMbZIH4mPokEETU6u0SQJ/Fvg==","signatures":[{"sig":"MEUCIQDpd3A83J/xDtm5PREGU4MfcQ06OrRCbvPuG5gB2Z98ggIgcHAIqv1CGSiVqeaQNBYr5QDnNqqG1StVgSgLdczjZH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU32pCRA9TVsSAnZWagAA9usP/j0498xFe229ehGGrvhb\njQJRLUmqI4W8U1TdmYhkeLNs5/++9DdtLvtZTUvN/v4wRujNRgobqrzj9bg3\nH8wWLlwSV1hGDbbjRxlzTmiIwkvcyxHQH7YqjkOM09a6pGjzEnKDvupH2mFe\nu89eku93u6FHShJjqvEwyTa/ZdnuFU9lbp8hxIaGsg3It2zjnAiW39dF0pru\njukSv6JgM9LuLtO2okzJgs9+fkBFt2syH3BUzSeBvfPyZ5CC1Z9bLlNJ65+B\nQPOjHkeWRZIJ9+Ut5w94tEn02oe0EiAueNWOjstJUVsPSEnJp2YH1iY5ZjRA\n7TjK3aiwElMlNeRrDe2d7j3bG06ee0oOpICvFPyHFr7V1yN1SP1GWnXSYL1T\n3R+Ktmnq+Jiu2HSikjepQk9t8LMEm+e1Oy4ARiQK0loeML214PGPiGN0VnUw\nZt4v72n6YLSm4XZo7j6c+bjHhtAHo7YLRx+bhg+x8OLGjkgiwFNQDwvBWcrn\nke5I1vSyE7b7Ynq7wCrNyoLPa3XCW7IMUy2UgbZcZ8k/i4O9UHrEGANYNfSB\nirLcih0U4qgk3XaUivsNp7K3LX3iPpvBWzX0EMUIgHavRnGViiibXLMl0W6I\nAD0Kiy8lkAxklvdf98Qm69mRXwc99ttAtSQ5bA1XnVzYhUcNOSAtSsPcuh5m\nwg0w\r\n=9R9D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/rtl":"11.0.0-canary.d3a6862af.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/density":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/elevation":"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/switch_11.0.0-canary.d3a6862af.0_1616084392925_0.5825095505532778","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/switch","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e75de78feb8d10e24ddbccc4785eb90d685b272f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.40dd242d5.0.tgz","fileCount":38,"integrity":"sha512-vo8vFn/GMvEaEDHN/nw2TUyd/3ft3RhtqxxREBFIifB/ftpEn8xVs0pry99lY9w/wLzHhVtgnlkU706wsAq7mg==","signatures":[{"sig":"MEUCIFpGxxMYhHYHsm4I9NDXXeTJHnliTo0bxQ43fKDs7fekAiEA25GVpPC7MrIV/1h5WS7H2q9K6tiO8rlfpTWglTjf5SU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NSCRA9TVsSAnZWagAA9VcP/3a8/LTdYbfDmW0fWope\n20zESihxsMbwNNKFD1OtBe4NQqF+e6kvF8lFp2vINUELLIc7QFiIhB21dZuF\n2EizCFLDlqcAlANBKP8NqB1ec1DKx6wGuHbWyJlVaQpoCaQp9aTkLIJKmP5i\nJHfKULd59k+mdIwxB7Rpi28CNaguFj6KUu6S9qV6LddwHYepbTGIMa0dgB8D\nx5omyLJaJ69O1/Ovb1YPA3t06XluqFu5a7IKXi39nlRr6dwhkmSmGk/lhlrj\nPKhzcdbRdmyKKj0g4y9gN4TdQYW8s1Cii+ZE2UG+UjJaEqr9d/Uz5x+96/4F\nIi21eXnlVSCJaMnc676HbItG8Y35y2BDOrLueEQ+84+KUGo7LDH2PEeDzTJn\nbQQ6E+8WJwN68oKfR5vfFXwFFVgLzdobhOAL1+l6J+3CyEF/Bd2SYjbr4mW+\nq/rSCTfDK5M6s3DYQQpQfp4+h/2j3HVCISyIMIC4dehEomvwqZf693BtNmRo\nOPkmUafry0cIPI8a5VUGqik7VRfZGeUtS3zlm50DNvGZlpMyBQy3DggYzxym\nYxmlNSZwNV/OFHwlP3mak8tch3oPal6+3UoV7buFhb1r3AQA7l4jHcIK7L++\nOPJf6UwFRGoc7l/N/T+5YVb/kr7KsRj4hOWl0wr8rcwp9CKuV3kDpOTrf7id\njfLI\r\n=Or0+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/rtl":"11.0.0-canary.40dd242d5.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/density":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/elevation":"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/switch_11.0.0-canary.40dd242d5.0_1616102226399_0.265507414567397","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/switch","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8a6d3d5abc6e842dce800327ac7fd1176498c55","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.ec8f8465f.0.tgz","fileCount":38,"integrity":"sha512-DmFf9kllaGYq+Zku4RRvWRQpGoBhPc9aAlD8jcCIRYDn2F5FQJWi3FVixxy17BPmPEcfSmDlqnzT2LkM3lyVAA==","signatures":[{"sig":"MEQCID/aSgFWPScL48cVJxS5U0+4ilAUO3rpqLAFDzk//OWWAiAbNFvjwLZjOXryFmbqz703GcqSVgt4UB/SU2Jw6ZP1hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8mkCRA9TVsSAnZWagAAQgcP/1QRKDfehzVK2HOTlcGg\nFVVdQAnyRsfSTbJ/9dHRfKOYKOHEET0AN2uXWvsrNJH8hMHeyGXMv+Z6lQ3T\nTUdN4upuJuwu8z8gu1uq+CSjikFRbrX5KLMDkb3wviQZ+sL+uFgTFfnEsl9l\nW+g4zMdfryiQvq5h1JSsJWaDgkXdSf/rnNWYqK83AyjE2DOjWcwq5IPMwIDY\nFwATjiznouwz+yIG1d/IB2wII5F2LhhrktzYPzfyrhuaWnXdffQfUVl+vZJz\n3ek/4mew899R2hwmX1CceITA8QK0WqdyYeWDbBDze9rQk9NSgJnZSUaTazgr\n0yvDwP5j2p1jZoB/Uviu0CwMsb6IxQddKDYW+sJGW4WEYbFojsZ/X/Aw6Pkq\nN8KSoaBfZyVu4i+QaCgkbRFtgK+9M+93yhu+4CfU5wmqy0BViQufvjqE67S6\nn8PygHvlV2wGvc8k3/SQgtUAyz/uKPgScAUxanR4DqgAXUW3lSL6OrTI/Jpi\nNSq1zdWJDDiRGlEpi0QxjPzLSsSDCbv/JbJd5c2dDYDTYo3KD7GLmmLySybT\nRNaJy9xevFYQIgrmYlic0wI8HN//lQcsV3MvdxfjEIy7tGM3zolgSuVys69+\nSXvLfFJzy2/NXkkvwGNe1wuwDS7HYac7QWrq11HHohHxkD6lXTcFtRDRttEt\nZW8r\r\n=ugXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/rtl":"11.0.0-canary.ec8f8465f.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/density":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/elevation":"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/switch_11.0.0-canary.ec8f8465f.0_1616103844030_0.1833226987170513","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/switch","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.da38969ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d68b1c8c64ad8b01a7b986526855cb0dda0ae05","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.da38969ec.0.tgz","fileCount":38,"integrity":"sha512-G9fAGX6t7qkbI6kJc0q4/gOnfz8BEvZgtsdggwPAr/9eYp5wSjGK4Hr3h31R02E6EKt0hKTingV/SXx2BPcu5w==","signatures":[{"sig":"MEUCIGvEeckGKB35SKHgRmI+qTzdOvt5ZvWVyhpC+ESn/gfqAiEA82RTu3sP/39XC4Vn7MTCN3OTmHxb6O0Avvb7J38WkLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9GKCRA9TVsSAnZWagAA89UP/2yEfoWfk164SY+fvu8L\nLbTwdp+BS1pkaQb6+PkhrfQYyjjG2d39ZClevGkWIyUlCdo/BfMUKgdgkrr3\n28cZC+7/n3/Hj3c1RB3QYqkcKT6tLQqYzCCAKbkTaM+POvNpJnDj1zQGgA6r\nmXKWAil/tzx+O7ew9mL8s/ZpgYCH+s6Nxd9Rtvoqz3Pbq7g6twcWQ2vI6c6O\nYt1Po4xwvf8CT+oC/VcQIcmko7qWhs1MelpdRW3secIunDEsgOOjCJFm+qmn\nixawYlwIuBqqKQz7KrHH2TdVNiURoNKT8NAUuCjzctqIHtBS8W8/02rvnFew\nq0xKu1eapLJg3qFgT/H2lKzKAeSC6KO0rhdJGTLNRqdmr6IiNbsqXOr79PvM\nSYZVZAOad7JdM0VD+lMJMNEHIKlcmDDBe2TczNQBc/n62MTacxjlkhtT+bMe\nr7cT07miq+PJMGTTjvwYNMbdW/nPEaGsyWPO1k4i+9FLys2UkCmtIWm/cWze\n5+Xu1QNZ5iOCjY4Iq17bWIRuFp1yunqtfDNvBOQ8zGYlLOL+syoRRIk4t5Zv\n2PliFPTLIkhtSTHS5vEGvDDR/hhgqelk4Qw2mhM0cgP1W+jKgwYKFj31s2XO\nY1f0v3jeG9pf6QK3beBUVtcbtRdyJeoK5D+VKso0RR6JoIhjeppSpM8tyTzY\nWbh+\r\n=llvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/rtl":"11.0.0-canary.da38969ec.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/density":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/elevation":"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/switch_11.0.0-canary.da38969ec.0_1616105866085_0.19778612368892534","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/switch","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f5246264d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e3e7369aa3a9a7428aab76e201178e3beaecf14","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f5246264d.0.tgz","fileCount":38,"integrity":"sha512-mi6LACUYllELlxsB3A+csd5xMAz9yRbgRynmXEklpKVj0iltIrXQJ9u0ijdKwuw+D7bWNTvk1BakGcZ89RFEoQ==","signatures":[{"sig":"MEUCIHfCtZgAJhiEcLab1m2Jc3qcAJSPSwotU2PDzmaS2RcgAiEArCBaLdPMAaPNwRt0/P/6L8C12ftbNbHoXmtpNlq0ruk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/JfCRA9TVsSAnZWagAAiE4P/iLViChF/wdsFD45JxAn\nlfC6mQtBsmIQoIEaZlG8FyNS8ETmvLGzZSmbkDcUe0WSOmv32M0dyj7DdZSl\nmYD1nmnmxSubCwT89P8Oz66Da74qzPuswRNw3U6g7wZWxlaML2nBcKv4+/48\nULSrFlqpKCx3kbMUXPdbV5S04Iihg6ssPJ0013rwgJQ3kponDIqfTxB76lKC\nPY0+17VaUC/Eg56rvVuWU2msfcuhK87doNQnf3qenjLhQ+GyMwGmU9cxUHuE\nF+/BKU+50B+amXwDl3IqRYEE43zzZyiy3+sDzVWX9b+ThlNAXqARr6mg4FVj\nA4kiuJEjA+hRBc+SAFx0fKUfODgLj8NuBSMyWMNO5uueRlYgcEqmlrKhevA3\nojwFLj1D1jXaL8ullvSKhwLrMLNhcZPqPt3Y96PeXNTXJkVDrrDRh9PWOKms\nW7mtMpT+YKMO8N90MbjDhDMnw15Hu0pSmjN/SfaN3Dz2xQyWWJju27ohT+7d\nULHsDQrcnZktfr2FWSIOzsONHc5wT4sE3nwehEVbDWEIAW9DmQh7E/R01z1q\nemHx58E/oUY6E/7tOmomiQNuC6aaJ+q6m3sTMuWT/pJN4D5eI4CKHlShRcGS\ncfVQD4CDK8/4P4bfySwmn8jOIQj2+Y96up7bAvoZb/VaV5BL9mxQvZoweK2M\nfIms\r\n=lxeP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/rtl":"11.0.0-canary.f5246264d.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/density":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/elevation":"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/switch_11.0.0-canary.f5246264d.0_1616114271405_0.22666617773841158","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/switch","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a6de6ee53ae924e653a327c2dccf18c457d4753","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.03d34bbad.0.tgz","fileCount":38,"integrity":"sha512-1m2QiP7me+5xkymraG32nZgo7hdF5R69tQRAFmJq1YAJBvhtOXId1m0j3IXg7kAXmAZG7mmcVDLy85k4RfU4sw==","signatures":[{"sig":"MEQCIAGts5E2wqWp04BxL5Ehfs1p7RMWzx4UcUd349jE+ZOfAiAOiPr8AJT42X+NxGl6Abj2QIBK+zFi7m/pFsRmEQo5Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/V6CRA9TVsSAnZWagAAimkP+wVogl5i8/fzMFeC3iNv\nKThKQ1/m72n6C17JyMHscYM75oGriPLZvdEJ8eLzUUhMGsglvk6RCU28PIKO\nIUSMMJpyvu+5CzM4uLnfdoSFlG1r8ZEch/+WNWaQxQ6edxSpxRM42aLIHaos\nTueQ9ciFQlC+57eDdDgH4JloZc2PfLK1fHVZFnPwIZ4gA7hZtjMq9JM8OxrD\noIMj1CyitfNJpcrFKPu1Pp5+3v5j4AOwjO9uD8TeU7EwONrSoNHWql+zwyJz\ncPf6I/YNp+TkJCst4L+m+T1sBHBOqZsKvl8u+F+lrGiIg7JWaApggCvMSjpk\ntXPcUl361iXJx4JYBx3HfdNs5In3iRdMEuDzGBI8QHhvxs58MMc4h7AD3t1l\ny4IZHPaKkqCk8n67kpBYI/rqQtNKCWIBRcJB4zVJZG/ezMEbaLsFZGic5Bxa\n4vO+CMula47VVZDtC+sXd8fHyFw1x2JYh4So7uo3mjjgOq7hW/tJFOjb5ApB\neEb/5+ARkhqzH/48ysnDE2+KzndphREFJtR1U39OYZ1cR5sO5J2uxyyBS223\n+EDN4ZqAeDnzyqIXWX5mca9ajO/HNrSHbKVjIb6ki4uDudBfqeDoR2AvFZ6u\nTu0zGTtA9xcge4ZE7AyG5p0V6RvK+IFcf6HmqArOS5P/X5C93QwBUTl8W5jP\nM8pX\r\n=xPnO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/rtl":"11.0.0-canary.03d34bbad.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/density":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/elevation":"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/switch_11.0.0-canary.03d34bbad.0_1616115065566_0.5547659430405345","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/switch","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dbf9dee24c1c13af9485fa6af28490f1621bfdf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.cbc57c600.0.tgz","fileCount":38,"integrity":"sha512-OMWgNXZ//EH0FhERurVR5BEufrQWBU9E9yry5TSEM6cvRiSmu6aomT7PxRPtHXcz+wflzsNYW9nFY/KG2kO1ow==","signatures":[{"sig":"MEQCICY1Vjb571Ig2W/WOEwr6wdUYC0V4dwqiSNK/VVSbBnGAiAvgNv7co6tI/eJKLYCX2Z+EFGBqM3M09oLFxJ2SxqrJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/d6CRA9TVsSAnZWagAA5f0P/jzZ2ZmpQ0AH4qA1MZaq\nzPfcMjR5XryPr18DhyMpj5Tglm8pz2lGRD7ra3SsAliZlaoF5numG72iAoDA\nhppgnQyGCrdcYF0+sWP6f2j0oiM2IYmb9c9NpUPYeJnm5SUEhFzRuxVBD/sc\n2OLAqaD9Wfm2Oq7XG2lvbYST6fwNHOiJCxbM6kKcmT07VGy27lQEbxNNVNYh\nE6wHbiL8unvZqd7gbc3zf58fldGwL3szszOXforvTABvGtfPjaSsteUf3wt0\nIWJVqGqZVdRvLBm7tgv5tvtMmh1RpalfCFuhGzGONvEsjGjvuwkjjGMA5ONx\npgGP88mkJ6jchhLHXKWXJ7Uw4KMeFpH2ZK6wm+AJZyXPtghLoW7xDeGHQ/Ez\nkUzQlS4ADxNaQF4geYwQRZDBi03Dsc6mUOcnCzQ8U7yga7G2efIzAB86jSN2\nVY6eliRv+UaHymBzisaQRk+97zJFg1xt+Xvx4M9HHpeYcrcw28sWS2DxdxJQ\nYfEyDG7Ty74Tnjmn8qjwgKb2lsJ3KHz6IBON2e8xo9zzxbWATV6Q2GTVB0xw\nF7gDt8KyQzV7OAEAz9+ZYcInCF5KzVTaNGUTHWoqy1CmreO7c72oW3BBgI9X\nzhMbItKQXRHkK3yAZYvmy0xO+5wvSjfHN5flWrN7qmzx68cjjejXjsGCaoTd\nz/R9\r\n=hVap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/rtl":"11.0.0-canary.cbc57c600.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/density":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/elevation":"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/switch_11.0.0-canary.cbc57c600.0_1616115577504_0.2268449629621201","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/switch","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fe0900da0c3956062b2af5311b80a896f9bc923","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":38,"integrity":"sha512-QKuavbl/OJnaVt7SzPOsslJ1ffOdsruKWLCV++xZSdYeeWmSSB4I5bNS3Xl9qGgPfYPzFUrL5wq+3niRz3D8nA==","signatures":[{"sig":"MEQCIBPAsBhimmxLbxdhGAH/xxiG37pCE/so0z70gvQTeULzAiAflujdaU44lNWYojUb3rBK+8UzsHtZi5ppmO29g+9SNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/prCRA9TVsSAnZWagAABBgP/2GkuhQR2vdHG5sQz+cr\n3bwxK8L55jg2HGcT2oK53WCe5YxygqLXMIvXlcn1OV2KB67Hqd53301I+rb+\n/2Q3VHvKRoFWoYlT3ZI4kPjoTqiE59k64lWkzbmFXNhSpMdWUNTE6lRBuNqW\neBgRfTiyrVXjD79hzpDA629vuCKWlQaVOApNZTtDHrDF8+5mbiDMmdOKgccP\nyWnOpQRgoC/iaZiwO6+9DL6tcbiI/LczIAzpjJ6jS5yF9RUCbRyCIqxICRbo\npO4wAYewtFB9qSAjYVpT30W/C0XR1CyZg2mBgLITLSJ/TYZnLShICKoNQaRy\nMggjDSWB47p70Lyj32+bTUG1SCDxak51LhC5itgnjxY8izW56+x8OWOS0dQv\nFqRRX8FcWEb0l5sn0lyvvXdVGzywjgGq/jYH9gh7mpBwq3GWWK+tUejwN3qS\nhx2jE+vBbSop1WhsthQD3G1QQnGQ77wuaBhcunAqs4H1t21CPf8JMTNxWRYY\ncbkpsKjmqS50ZdrBmQEMyTQxBHaipY/PTor4BAZafsoE8mCYF/K2WaHDR+Yi\nykDb9I10OONbdDuxmXmQcC8cn4VnjqNe1FytZFRKx3Pfkt8MJJzig4cUpyg7\nrJ0AN4PDBWh/5oBYbd9BnwamsygmEZ+ThKGKrp8k8aCpRuWs01Caqh1QpXmu\ndcCu\r\n=RA6V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/rtl":"11.0.0-canary.d6c5bcf37.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/density":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"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/switch_11.0.0-canary.d6c5bcf37.0_1616116329785_0.87253730075771","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/switch","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ec38578a8f066f10f1db9393985e1e32795f2e1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.fefc668d7.0.tgz","fileCount":38,"integrity":"sha512-JX1JKuJfIfD9CkElbWK3vIPxn5t9g4PuAjtVHQ/0Mv+02KB1grEJrIWuD2o+YivQtHtEODrAP/Ht97iGE5Z34Q==","signatures":[{"sig":"MEUCIC7aPhTJ5XvM1U518ngzJS4e4JUOnLNec5jFYbVVvAuVAiEAxW7lwASsmc8mxnLeAPQEl1Ow+aw6KJBoDgPM3M/sM1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/93CRA9TVsSAnZWagAA+PMP/0h4OUFjxgP6Wza3s2YC\nvdCpJO43JEznFaLo6PwSqcMaOD8sR6yn2q7FDBzGL+wYQQe/MQpmbEWbQtez\nSxNXnj0xqql3xoGj8z1szeZobCtwayzKUOhbiSO69XV/QttetBW3ysj4ibBT\nSNNA7qQY9/oIS8uoU8ECvCR2ne5KVJtfm4T7L9UcJvKfKn4KHMHBbKg2wMyr\nDaEhlkyT801T1USphdtIAjJxxteSQFIhjAq+gCYacKK7N7clLJjyNyjyyG9i\nVIBA/5iplF4C0WO+8eAkL7TBOXtI/5y+P2rvXrIj6AZ9SkWBH0QUaCGNKJ38\n3eQOqQf8+J3Tnz0AmlrfLAmHEEYhZUWNfOZOUFjQhpp4Em8Hruue5opTRAKI\n69mkUaQBEJcDzvoB8xbZvgNscH7vC2y0CNqQezMaMOubhxKFTjMpxin7380p\nDevHftxvD33HspRpNO3LSqCB9kNah5fVLR9mqViVOeM/+r5Xue+glLbUgWW3\n7GOCH+AeNDz+71I+0gHxnveytzGLLnhDVyYvq+zXR9aX9FSMhOn2jrPUR+HM\nCqtG+nkZetF6ak3Xjqm0UpwS5WSg9uksk8faIe30RpuFBIfHcd5xTFxyDC/T\nMmm6DQYkJOz98BI2IZMFwHm337WuYGjAeVzYsJVQ/hrajyczs3LrLIbQMLrI\naXd+\r\n=3vVh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/rtl":"11.0.0-canary.fefc668d7.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/density":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/elevation":"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/switch_11.0.0-canary.fefc668d7.0_1616117622723_0.9759270752637088","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/switch","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0df050c8207ba4c387dea687badccc6dec834e24","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.faa7d3226.0.tgz","fileCount":38,"integrity":"sha512-Vfu5+O1YiIDLi2jklFNlzDKoFXbu5g5XkUgB1sgdfVfLjkGIkLwucDBvBs7L6ZXTJzW/JjNnnKuJ1HUEyB7yXw==","signatures":[{"sig":"MEQCIDqSCNB+A0hpks29YjbEADZ1/12SYgCqERzgkMKN67X3AiBpsQn1+UuLWlVhHJgKfTs4DDa6q5ioWf5uV+wOULFDYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOLdCRA9TVsSAnZWagAAOiYP/ji3KtqTwkRFWvlD7vmM\nHXIOAhqTvkMkCe9AGAIs0FV5jLwmNc+4/v/4Zb8uUWr4x6CSdLaSfCCyrXzi\ndBRYolGWHc48MESjOQaWkcXYTkciWPpmqEx6YKHeFz4b2UOjjl71XMC102rm\nogvmZX9CtC3+XVbGBWufjv36pv+3tSlqd9I4yWTHs4Lbsaj2SHO3/bKAEtZa\n78EXycJ7nQVkWDSPUae+LL+Vsme5fNmI6awnOGOvdLShL2eegDK47Y7c3tlv\nIsbkcOlq87CLOg0osDnvdbleXwLZ/XVhI8+NGInHxEoljRazoC0n6wrL3l74\nDH1YNJnpfTdq7KxvLMoInPGh4R9sJ68zfCzqxjHfkfMa/gZiguoPyg8weFdL\naV4iE5ow9aXzxXjBzddmmVbq9THp3yO+FoGkZWJ3gRRXoBB/3JVIAAyxT52I\nkKofgZkd7oRUUrPTZz2tBP8zEvDBkN4ddYSlnkuVvLMq3fEW4snx6QIuaGeH\nXVyJ3oP6qDDZgmWT9cSQMACMa/LIeYQbApi3TTaCGZ7Arjo/eDpxPmt80n1k\ngWa74/XrdeF7dtIuZKaqhaQlY625ov9JGXN5Cq8YAxpvNaTZfjUXITsjp96H\nr11Z+uuSNu8EafCsYyj52qcvP37QMO7b9SdNP+eqFZQP70XKDGYTZls8iWQ0\nVwYR\r\n=7qgk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/rtl":"11.0.0-canary.faa7d3226.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/density":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/elevation":"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/switch_11.0.0-canary.faa7d3226.0_1616175836489_0.7335229356216182","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/switch","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caca2f72716847ddb79b64c50342126249550100","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.c60449bc8.0.tgz","fileCount":38,"integrity":"sha512-EI659S6gkpneoa9Fxf1aimZKX39GPiDiTi5xQywt4gm8oMVXQs03QqnVNppov4po/WA7yaPyAMxfa8U81FdVfw==","signatures":[{"sig":"MEYCIQDTwBqFMwIBQrL4PvlmNldJH9gBw0cog1A3rNdwegpK5gIhAO5YsJf+8nzys/gxPJEbrseYCFUrDk4ji4cVoK3dPfRK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOfNCRA9TVsSAnZWagAAdw8P/RJu6EmfoAGNV5hwaXCc\nWLqibC+r8NjuN6XfYF69t6LY4IG0cyIvs6tmFw1zHBN0flfpMVONbVn51euk\n3cSlrMBcqU+S1B91jNcZcWZIZF11CPlA69GT49DcOWNtQiKpd0j75xCH/P3W\nUlls4vOtY8N2wn8p66lQtObNin7CPj4Yu2T25egBYDeMWbrj7QDaGQfMBMEc\nHQZ0uugSnTza0Kbepb6IT5vi0zSTCqtY8Wqazpy8ysLUdc9kCSNFDh4ee0BT\nTwleuJDxJBO1Tt63W02rPPyh7n913Hn8kwI5opLJd2DpRT0VNjNz1RXDcIJN\nDKsS4HnUpBPW/RzU6t4GsQagJlieOvrG6DuqYYMhuO+57wz8LWCTldPxEMWt\n0hIWXJlyfkBzP6JQHGhSaVh1Vhq9SJH10VxcXxFDgeKyt7vEdqtCQu8IzLTA\nufK2fdUyyyNOykH40FgVfYSj87Cv6hI36rP7PkQhxh438aS24sCHILRjKUs6\nGBr6wYYBOnSdNg0x6ofHjKFYN6FjmEz7/ImiKVIAxWWkNUX0zFPV0gZ6YFPO\nNY4ZXXeC7XCDAyEOi9R+l2rRC7p15YPNu+0WXmMK+dC/okkZ1+5HP6DHLzHG\nXpN+P/NPbRX3hqWtGtgig3Li18RZEX8XGlGlf7JMF70Ccr01ekZxMUcmL56w\n4oez\r\n=2BZ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/rtl":"11.0.0-canary.c60449bc8.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/density":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/elevation":"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/switch_11.0.0-canary.c60449bc8.0_1616177100849_0.7565132080094525","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/switch","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8648f535e75654091248e7548ae894552effc44e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.5f0fc444a.0.tgz","fileCount":38,"integrity":"sha512-U1i1Ga5xSUPUmyi7Opi0dDMRcc0bjuc4da5O84P/ts75a2ZLfDKf7L05g8xj4onuHzj+R4WAh8zSSpvc5LTT2A==","signatures":[{"sig":"MEQCIAiDjQBZrRmO0GtmsNVSs2avOEcIUGFt78WGYBJbgnXFAiAVST78YBm0j8jYudvbMjiizRGyaxLpkTLBPyeqIOpfPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO9wCRA9TVsSAnZWagAAIxYP/jr7N6vz5FaXQOqY80Ib\nviJL8xq9VbfZDX6N8n52GNavT0WbbEh5tTW9WwB/jf3wkVSUF9ET8fBnmPQG\nY1uxNi82pozAAGXyZDZOexjsFnNQZwvQwZMQcfFjTxsBW+bZ6n5V4QLgu/R3\n3cDdIRwyJw0BaMikUXQ6dxdGFy0ncp0og2W2YajEodK74vIX+g0QfRD9XRjj\nfPJ7/VNHPrHCG8i+3NnyDOCumoSXhdQxLKb4oyHGqwzts8IZfIn7a7803hts\nFPEok9L3PMWWoWva4vfWpPAW3JOTTQgchT2l4P565sqCmxGpui9Q8rqCFX0/\n+TOGacS+ZxfSFlTT4lMXYbv65Uv7eZ49csGR4NXznF2IGN05cxb+4JsQO9Wp\ntB3xZ9GXyKsNoOAjb5g0IYRfpJywlc4Ctl4i3agerITxNMAOc6FFf+FipUWV\nsViWFojDJWOQgxaThRht//bWzdfgYvn9DF5ghJCUN5EaBbpB3XDSMt6lITJp\nLrEuBQ44iCIPTo6TCGGGBMVfZAxFxW0yhU0Rh0SXid4KeNEf8b/n/1PuMKGs\n2OdXgWjPGTeW7SVCMs9NYRCtEtrPp7vljHGPBmHQQRbi5HYA9VyVsy/4Oe3u\nddTHQcl8USDLtxMcoVHHAlhkUWDZo3TzdR1PjsGx2i5hYJh2bNLKIMtCLTJp\neQEt\r\n=GCOi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/rtl":"11.0.0-canary.5f0fc444a.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/density":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/elevation":"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/switch_11.0.0-canary.5f0fc444a.0_1616179055490_0.8805232092718505","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/switch","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.4567a750d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4d15e40c716557cd4ceb5ef62a1ae4a70069196","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.4567a750d.0.tgz","fileCount":38,"integrity":"sha512-vcO7NF5GdLA/r1J4fmxtsdAfIVWvX8nreKckNWvtdsYydTRxXVW3iMFz3zROI2ai5vFWGIXABsY27KOIh+GiAQ==","signatures":[{"sig":"MEYCIQCsk+AYbHO1ekjnlbZbOWXfVLVLWBvUI+wAuhAwDn1AAgIhAM+P+35bvRf6bPMK4jlwG2C1k/+hTMUmmJoLJnF+td63","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVjuCRA9TVsSAnZWagAAt2YP/3DKIV2quXGGz0HJRSP5\n4kDqN5JCM5ZnDaPBJewqh/iCRCBhAwLYekN/EYr1rwSNGcL6I6HuNlr4m4T0\nsNQpDe4CGFNqYNabIddxdJNYBMbAH6zjxkJbhJZpJDxBPGYqxKpt45MyMQ2Q\nJOhCl34n8HjeCC2Lge68j6YDgqC4g8rzf3bMNqg4VpxQSEYmMtfuWkdTSVrA\nzS0M+gFqlmo0Rek+miZvt+jgIE17Xr2BZ+0u25dMDkyxiLIvkncUhu6aRiKh\nIYQWPRNYFXkQj+iGFmJ1prYaPJ0LurJYo7pga1c1y5j7tyguCGniY3OAhSFn\nGwQiPG4MsHe+3zT8gxte3o4V2gNnww/5kUHve3iQxrJIz1doRqEqUao4mc9X\nKLKovjf6hhb7SlWYGBVCyCX36ZfLfuT3YC92sTC2O1UpMBltrlYmg2cmI3kE\nCgnqyjkD5DRzDO1xEfzz67auIr4nduUqAR+R7v6GABd12FCwl1CKN8KhikbD\nbzBztAaE8+x2IqNyXZeUxdkrsI3oL4597rvPGP5NjeXNPW4hWFHusLSI9m6i\nJiY1D7P6RyjaM0tL3BzQPC+9ZmlRLg98DBDThu0pw5joC9Yq0t9rrZ+PrEex\nbxX9s/wgUWalOqpBVGZ1J0I/Q3prxH486CyBxdC0Rf24O3edPx2PdMjO4N1L\nEYPR\r\n=6iNR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/rtl":"11.0.0-canary.4567a750d.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/density":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/elevation":"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/switch_11.0.0-canary.4567a750d.0_1616206061545_0.8711398124463035","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/switch","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a16bcce78587984573dbd6a7a8dc65877afcd33","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.0cde52f5a.0.tgz","fileCount":38,"integrity":"sha512-gXOwZLvyfCMBvbD+NhCsDJ97v0sTCQVLD3JBa8I5tEqJiWoMb9bkU0rdZUEsUBlsR/NwdAd0St/xqEvAYKQo5Q==","signatures":[{"sig":"MEUCIAs2h7+P2cYxdm0YYxU6WyM6Baw0c2s+of51Y1dxNzuPAiEA/GSBL1WBpcFLYbCb8LBD+IU8cmsz7OUtH+Y4gUN+Y1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTAnCRA9TVsSAnZWagAA9hcP/2LCldAIb24eLBqvmdwK\nqaAJVhv3Udw763/D/32SLsSEV6uwqBwHY6KWtCZ5yPcrwGe6Z/SAZjp9BuTC\nvLGN3kjj0XPhHfarOD648/8kt/It7U1l47Bo4uDrTZj6BT0lT7n+7yVaCkap\ny03CymZPV0Ei7UGOnr74zB08rrQOuiDLOfMWzO4Xyqjqw5VxgbTU4DZDONxP\nb0RNpCLG5Osj3HyZEvwtmkkgRue8uXG61J1GziQ1l6Sas+2tJLP3Pd5YndaY\n6ivd6gROR3VorSgAHHMB1K8PNrCzEv3EcLIY2aG0Z5u1lP7ffBNO4fi3MsSU\nKT75Cet868nnF4SPFfjZstle5NJBPw6UGGKqkA6r5p4jVffDvRqeG4qzQDH/\ne1NUoiXbITvK0gb4wTuCjGzAQ8ftwyyqhLS8c6/QYLn+0Z52xNBBRawAu9Sq\n5m7ZcpsSPx9THEcTy4JIMrZZmPW3RhSQtbQFBJWBwhJRFWx0F01AJMGcumZE\nuvDjUMD261LzlFvu4VyE3GXZNG+7JcpjF5XUP46ZB7FQ9N1bCCHZ2PXbFCAG\nwrTP3o8n8aEgoFo1++jDm9DIfl8rdRL0EFfjP5oNM4oFfhOZnsxuxm5zolnw\nASHtDDCU8T9fx7fHf9xptdUySNtoe6FiRXVy2h7rnJtioxVrw3AZFcKgxGrc\nJRMd\r\n=zSvl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/rtl":"11.0.0-canary.0cde52f5a.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/density":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/elevation":"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/switch_11.0.0-canary.0cde52f5a.0_1616457767018_0.2273826018677314","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/switch","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4edd89339be801b76288220f76bdcafebc20a83e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.48f4b67fb.0.tgz","fileCount":38,"integrity":"sha512-LWJn0frkvd5TWpmhwP4lv+BudLGCQkvbAdUTIF8EOojMVGOljcUdW2VMspXAFDE1Ln9lguVofv7sK+5agfapww==","signatures":[{"sig":"MEUCICYvwf9uHVJuAyIQ0xFhdh6k4WXe0W8r9lYYg3k69r1OAiEAggnKW8E5kZjMhmpLXS+OsDvsckWbYAw28RrrqXbCvfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkdTCRA9TVsSAnZWagAAP/MQAKSXLsq3FLvmcc7N9v2z\nT/tU6q/aINp406OVnxQjxwJRTOcQSeOQASxXbIdkxqmgW5OWHeyOEraIpxwR\nApm/tFlpTPbp0HNb6eoFT6Wq4MRQapJwQXobwdztxKRDLgradZJ+3GaZSCrq\nNeczb0P7qKZ1Ftv6hs01OCXMucf5pDsFdQEnnBbF9ENnKEQQzGBPUK+VxLvS\nlqNWRKQY+e/mdXNCvIXv04YH9Qo4m2f3LZTt+EmfbWiCga0D6f0fhdavwez6\nwND5ZX73u1HE/8DSVnfYqCU+pc2xovKiHiLhxZyVfKk8ybEzjgX4UCkzM4yA\nKoML6GpPLczD7DKG3Ugg4x7SYv1X3/H6jbtQbORa65jpyH9ikokB7HSougrZ\nOe4/OEdpUK+9YXXy03w7EBUevUEEHULr3zzOGMm9W0olEIhmDN84HIrbPu/5\n69mjC+BkzgTjePvgoho5OGBFreMGyhGrASu+7szGEavRd4jfCr4lJHSBxQOQ\nIjavPFe9xEXrIr5b8WXX5UE/UbYpnzABxrEIfPYY/drz1eCP+Ik06U9iasma\nqtcjyY2yVBgmaCze0sXnQs0eDfJcr/73uEcByvTh0gnBzaWjKKGs6LhHwqD/\nZvNcnzqtcqxGy9coS/blR5FdGT8+fqHZxddTBa/8ebc/VnB1G6W82cEKHrsf\nNO2L\r\n=taOE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/rtl":"11.0.0-canary.48f4b67fb.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/density":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/elevation":"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/switch_11.0.0-canary.48f4b67fb.0_1616529235364_0.5506374969560728","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/switch","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a80ecc23d89dedb4e71d0beeeb96c3067371eb1c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.0b8cff734.0.tgz","fileCount":38,"integrity":"sha512-lWAvPvQXisKUsDgk580bueOSP76Len504YY7UdU9u8+RZEnaDrZ91SXBWCW1mBK55uIchpzMWequSY0ImxArQg==","signatures":[{"sig":"MEYCIQDDVQIMze1+8UqxUsNvV3oHgyHKXr5Ju4py74jwCLn2/AIhAI4AdqpJei5KV9Xzpecfjat1JltDfoL7pOUeHZk2XBAS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknOCRA9TVsSAnZWagAAf+8P/3P7/r1OHhJgVOlEYezE\nt9jU8ciT7KOJwHZ7aCPZykOrKkNMQpdKWBYm7fLtmwPlIAIKY6fVHSA/RFvF\nQtA8epyW0F1w1ONiSXRHa7OeAxXITsT65EyABhcFBmgHiuN1blogl9nrhR7p\nmT9PvKWQSKskiK5+iqqpDaqbeSwQxW6A8lxOMdO6Ww78g5yZo9lWaBt8qX7P\nr0icrlROzfDUR0J0hoBrAJ2W9NKV8qZdaRdvRATKM7mb573+gZVVClsT50GT\npgS3DwpgW/6fryr7qLi1lcPD49qEh8xvlVNqVOZ4W7TqKW3k7szNKsuVhFie\n/EwB31Vo8TPlRejNYo6H9ReqaxkzDXa7WOQwXjwK6t/qEnFidFuhjsFTqXxz\nrznsd9ToxrfZA9WbdSMak0+ZpmHFoJDImaALJesMrmRiS3s6POvn36D8WMkk\nvEdsuBfkeUI6NwiWi1WeMGRr2ZK6V4CFkZAeSje16V/aV/nZWqz7iA8gtHA2\nzdOGySoM6wE98oOi993VroUG24sjqKJNpi1QgWxs1icRcs0JDQOINPF7V/u0\nftDw34Ye9ZXrs2fOOPKGmfbUSSdDXdENyXe6jTCfTNhvWIMcdlbBrVGSoVpw\nGiQylQKOVtgvLnIEV5A9LmTKtzytFJthqLklFJlPdSPaxa0tGikvTfKKj4aR\ngF2P\r\n=8v8L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/rtl":"11.0.0-canary.0b8cff734.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/density":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/elevation":"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/switch_11.0.0-canary.0b8cff734.0_1616529870197_0.4818241507847012","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/switch","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.8943b991f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc5ccd912e3547471c72a53a9a819dee7a4791f7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.8943b991f.0.tgz","fileCount":38,"integrity":"sha512-BJwTFe5KLJx64CUaWb3FWNVTY5ViDnigo5NVKY3V96f5AAMlgB/zcWo2njGr1Ihi9nKlnPdgBymu3lvNoDNGQA==","signatures":[{"sig":"MEYCIQC7oZszIqadp0TR0vJ12XJwRjLIek6hS20xAo59M99bSgIhAOaTTQoMSSeXGFbNaIhgNwspNHF1RjTHYoaFGuzIKjEB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+pCRA9TVsSAnZWagAAfwUQAIvrOkCDd1eUpAu0Dgtn\nxtOQ3jJDWaM9EEMeZPAetmOMy99IP2FfMwKNDgUtd+37df/NspR+tbqn6Cjb\nn6s4oii+ET5Edn6xyXx9L1O/V0cT/BfLrUWfkVpYcMY2A+Gbh8GshFSS2NDK\nJDQTHBj4PzjKP0kV1w+ohb4+QUXvg3X29y+V8OlQlytDCQCE8fdGtB/IpSbp\nC7uEkYjXNd00bPVdqLPVaeiuPTwubyankAZAAKy9WFoSXamrOJo//f+lljOr\n++dJSjvVDgqy1YTs/aSy+94jbakEAv9bhTEEfZxId+mz0kQOMVQFMgAi0uZe\nMMvlt20Kqkfk7Qgym0HSI+Eqy35+d1POTZFELl4CgU9M6DNIgm+8p89o6dqY\nf1fmQ3iujZa32RlBTMOfpQW1fBO2znxOM2mTbNvQ9OOaFnocnHU+fjDzu/s8\nPyjnbV2XFvykYi90jIif87RoV08/WU+uRmEVmo12Eq5HPrH3Ez3xSzWWS/Op\n4MDwlu07tzgXPm3INME8nWTWkgcOu0a/OvqZqq16y7wfkcwWyBODFLeKbOGG\njkzDVrUqNzlIMMo/i7HP1QlFR3J3OKAmTtZC/NADCrw64fBzOjvvdN5J34Lz\nUeKmqnvF8QLihIVR77QETKPUaGxseEb2wwp5Z+oJoiXH5deo9eObNzrkRZuL\n4/wA\r\n=2Qb6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/rtl":"11.0.0-canary.8943b991f.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/density":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/elevation":"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/switch_11.0.0-canary.8943b991f.0_1616531368710_0.6316049272153716","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/switch","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ec1155c52a26740b87deff0d1208e1d889c4791","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.3955d8d3d.0.tgz","fileCount":38,"integrity":"sha512-yussZk/9az5x/xbA/WhhvjfvQu6oLiLJRpdrd+p0GXqO/aMhNToGhfr0c2kcre9vVzGLkVnZqLivujsGCNJ3pw==","signatures":[{"sig":"MEYCIQDRQaftXP51567goKKixPMaSyYr7t/x0I+kmNi+PE6qWAIhANq37FMON/1rK8m0/uu7qmIUKOQdhyIxtpIsjb5zP+cF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5AACRA9TVsSAnZWagAAfUsP/jH1+Pbu/56c2xuQ6+m2\ncU7IHn4mJmY8nMqVfrQz+sFj5MOSl7tM+hU1uIbWa7X2O/VTohxYc/o6lxvp\nJkDGFfSiMhFc/POgFqKRktOZRHJlN53CLPcqSyOdP/HHE1K8GgQ/31c+WGn1\n0M/1PHmZeVx7P2ucd789XlDLrPffzPLXbLPlKoDnBFjlsoL/EsvQrQv5MGyH\n0w2nRw5X2X3V1MAviO6vUwmwpRRVdlX+Bc3woirArzxn37pASHDNk2VMbvQF\nMpJ+tSmBqAGkXz6buraeCBbalfIpxUTp64UpcYzbOhjZVRtYOUgKH3LgNS8J\necy4JqNn0O7TGKsAF2Pq1X3C/zSeyLGTChIgV35HCt760RWTjnR2vginD557\nnkATtJYuHm5ZZXLm6qr88oaL3v60993aol/fQRuFpxQcj7/mfBVaQSPGtktZ\noJr+2/IHzu+nR1piFlRjzfWS5f2wZVEWFlJu9rwvlnt7vNKsx9aG7oZERPyh\nbIJ7zmMQhc21a/tweOkZhij4vsKfJzYTd6dbCYhxuoJfBuRwFCg7TAsv/HKP\n8ka84TCFhYCXGRU3zM9vSMuCZmSo+vrofdIl6cCoDbTKJUJDYT2Crba09IC6\nESnYJjJX6v9UB7QD0/i1Jp0W9xuDpGLoeTUIeXAZ10A3kI+yrYif+zrLYZHN\nOdPN\r\n=y7us\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/rtl":"11.0.0-canary.3955d8d3d.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/density":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/elevation":"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/switch_11.0.0-canary.3955d8d3d.0_1616613375934_0.292595224368559","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/switch","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74f42f8e08a72e113d4c9a86822ee3fa91828c92","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.23ea2d85e.0.tgz","fileCount":38,"integrity":"sha512-L33+W6COk1bVv84fBGRDasMqh2qu+qFhP8aXrpvStIUdlUNgLzM+2Z+GEQfCcIuAdXUdClSDaRCqfIXfnV4vWg==","signatures":[{"sig":"MEYCIQCfIOTmnu7E4oaXoObQQMeMwgKXK6k5CFWXct6gbeghKQIhAJaNuakwsOnHViRR/scl29oDWFZem5i+03n662++iBL7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMkxCRA9TVsSAnZWagAAw1QQAIU8iVLkFemKb9rQqAJS\n2oYS+3aITswWcESt3E3dF2SxQeK+gakvZssxwg/8BLze/YGp0mMMnKPIuxeQ\nxm62X+ES2/jtJjZ2wO1TaEcd+zFSz/rBDInP1JaugPSUdhuYhMR6vbEDpzha\nX08tfbU3y9ED2D7za9XjI5NyzQmCjwHhcqIQqYyu4SVQOrUeMCv3H+ewm79n\nQBEb2Uy+iIhDSPnFC9QjZZyS9lM2qpySuEu6ch3PNSOdfKKl3ULpYGwE1vrM\nFYBOweKPlSRx/ALzsdVjF/dxyW02OlZo1hZ4ReZ7bFCt+2Ldvq9M/qyBoi9/\nwIpQI0+QbrPe+ZM4dDcGwZJYeTVHjqwS6DC5TK/UlfD22/t4pRISVtyNWNB1\nwh57hrI2qaLGNxdoqVY0np5jszaoo2M1S8ucojm0/TKmPjUmx5eje4FtFObd\nJgiB6JMVLGym3yHl25xUC/SpH+revoWP3o0G+AYSyHcoLHnazIgcrBp5bzY7\n3TbH6JdDhyeeSHqd93WlUR/GWJO3/rK58rw667HKkoQnj2Dy0BIOcB41Zu10\ncC6NBZmYINDKwWvHaR0xx0GXOP2cRhxzl+mz05w1YPDJWDx/yoaIC1+U9L2c\n98tprQUaAPstmS3L88H+/lnDVn1u+tJi5FKo+IVpVjf5+IFOmCg5yOWM5pXC\nbJEk\r\n=w15z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/rtl":"11.0.0-canary.23ea2d85e.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/density":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/elevation":"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/switch_11.0.0-canary.23ea2d85e.0_1616693553288_0.18545730435546748","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/switch","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dc43a36e2b8a4bfd74258384b34f23261d4d6a0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.e3ec22f45.0.tgz","fileCount":38,"integrity":"sha512-8ex8FKB1dWP1yo8DfVTSMB9oavHVOxr/3r/Ye7B4q8s9/E5Qlkz1+yg4RhNxmH9fZylWFeYjw9yeswcI71gSsQ==","signatures":[{"sig":"MEQCIGIXX04yp7sMehNFWZ1H2142vq/LQ1UqxDHftfd4cbHuAiA02VTiVEBIHqVc61ZEMZIN/GECpcbwyXRew0HZF8eJQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM7FCRA9TVsSAnZWagAARH4P/AueBF0er7L/fKC7HqaU\n6m99sEMkpjEV2mQLWT7H5BkORTtCF52Ooi2HZlK/ksbAjpJ24Lglq37QaCoz\n06UBe9SMbAoP/MAnxt1F8GgCQMs6XlaRE85SzjTTngUIL8ckLQ4EztAQR/bh\nh6nOUafkMTHRjv2kkfqTFipGmSAW+3KpRHOMnrWsNSCeG3+MpNXH386J9jHM\n99vAaIptf3w+pwmgCXmHyrio1T6ikd1cAJdaOECgLrY5KGC11fXppHCRh8J5\nqa11emXeqZNpSALTldCdKgZnytUzBB7nO15WYc8T4DWO4/1zAR1sWXOK+aGp\n1XlJRqe9C/Uvb19qCehwxTHKHDFIz/CPgsawYq/8agCOoCO5hzZCT5rwPZpz\nASj44Q99cxNE36rrBg2G9r6h4UV4p1eqJpG32aQEqGqQE2J5+8lqVZuHCga/\nj/9AVFLw7/TISHdSbjVuAQTwU64tuWET+hXQxfVzDHzV74gALZlduyLvkyhx\nmY1EGZgVeyCsgcePqF1yZKA+mF4245UuWsTS6fhShP8TdA3350+P6o4vE/O6\nCy9qdL0zUv0zZKWVkGoXfJR3QFokB3uzucHMo9dx1jU3w0nw6zdnQGEfAbJA\n00SplFGCzoVbOSM5oKB0rrsK+2l9/FDUUTRWJ0CXTAWx+6ScEjFC9K2ByYk+\nAWwN\r\n=LuZy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e3ec22f45.0","@material/rtl":"11.0.0-canary.e3ec22f45.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/density":"11.0.0-canary.e3ec22f45.0","@material/animation":"11.0.0-canary.e3ec22f45.0","@material/elevation":"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/switch_11.0.0-canary.e3ec22f45.0_1616694981208_0.47755093968880136","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/switch","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1d5dd511a2d4520e385f3e6210e81b6ea437a33","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.4ceb42220.0.tgz","fileCount":38,"integrity":"sha512-HKcnApBVrH3iDTolMef7zj6dU23t27uAlJ8DQdCytRTxTh4ge3jB6xY59oGx4fbL/BRkI3mhZYrlRJdDXWJQQA==","signatures":[{"sig":"MEYCIQD+7oAv//yXhbB7RTLw1UpGEcjAKR1XMf47huM2EZhKHAIhAPzp2jUmr/7pLv1+EiEQBkr1/KRBUPPms/ID+4jfEAr8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPeCRA9TVsSAnZWagAAHhgP/0xYQh+3chmZRjTNlfeR\nKCEcGzWGFSnkNDtA3SEGUcCIYA92HVJi/BhlJUFwASCyYvYC+VGR3NTke3b0\nAz0gfvNXibKMiR7ryvOcUmapbc7nqt2IDq0pYu3Jkyc8xrfGSJUieX+4HjOo\nhThKmWCWtY1pqdez09YlTksUGNkz2ZgokYdqjmHS9EVkwmmQQ43d/pTzAf5p\nQOCJUOpSlwJUNxnnzbp4uh01kRDk7DxOilG+KSdrJzYU90NiJY8C49Jk++Ke\nTDDHZjxL9ux9fOCm6Rac2TE4gynfRETel/ElsyU92McPTj5aF/4I8tU7Vebg\nlnFQsHoIX8YZo+DZs+ACvcnm6p7vOTYWhrp+DnWx+vINQZXg93vc0Db8CH5r\nx/2MJQyMuRvJ6qQG7p1m6MLcyWuptQzYQ8hTNSvTMARebHOd8HB1o+DWUZXd\n5poDBU4WGqJTmjMXLzd0DvwaQH+NdNyb7ZCVrTZQabNRba8BeFpkNQJUmEeA\nnjPNJ1WMqNqReIJncsMzaXbA2cv5WnzojxHDaHaVLnRAUEyDb/XmZJX/Cbc5\n4VttVB9uZZzML5iO+HAFt7o17Erg9EFw6nGF2u3MMved6Z8f4+FvoGebS2HF\nm6tNkLZ6kd3XIeHNlDB6OsxOOOqld86I+V4htjLXasPgO8pgzOeHiFQd/rBL\nFERX\r\n=rD+q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/rtl":"11.0.0-canary.4ceb42220.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/density":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/elevation":"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/switch_11.0.0-canary.4ceb42220.0_1616745437252_0.5775892285087754","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/switch","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3e804ee8e0ae949f1a700c43c76e188657204bb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.dc9c84023.0.tgz","fileCount":38,"integrity":"sha512-V0fGgF2zOqN3/E+tYSpCGgqCGNIErIOA1hBJJAd6SoMaCR+/PdJNRoY4o/pgLRehDdyLgptst0YuNWaIuvDVUQ==","signatures":[{"sig":"MEUCIH5gPgr3YPhyBo24ka1Kfqviijg6GDC/7EI3WrWmg+5vAiEA4kM/ECCtVr/AKzZETYz+Vvip3ZQ1wr3SEOpM+lyd9qw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2RyCRA9TVsSAnZWagAAAnQP/R/xUvfV6ldRFtKCZgGI\n7OUuWit/3Mu1mKySH4mY92d+QNDL51EpPz9X1acFich5qbT46SQCit6QpVon\nbu26NgpC++iu7Jll7PtDbmqePp4AEx9t7sMnwFU9WwC2hXTTrY+JnjbbkiIl\nKqK0V7zZN724kDlwmQKojsQ09oKNH43cPtOJOeE5g4rBGQPr20r8oJFF7aBa\nukinsyaT7Nfs65UQX9UcJi80uwLmGYS0qZdaHF09iYn5rqu+V/8Q/kw4uZ8Z\naGeIOZhVmpBPsYWT/3uupLqIkw2Yi/rEkdwltRAFCUCuFA0qSya/DlXY5a1F\nttyCfM8lcQM7rgP9PMD99mUUn6DFQHYWsUmIamQ19VLHOemZ8eVjhJXXSKbb\nH8qNJtRCo2klg0S5O94ykiEKd+BThoaGti/rSHnkQ1Cb/Mueh0DpJL4y5SyG\nZlLiSrIhTGuDJHnmnJrgkwepRgC5YObGWjoVxe89kJ3l58KbnutPOAJuKzAz\nEBpzcPejt5gIXoRXnvNCNWcUvGgg3sJBOZ3EOFexn8IWEy2xmiTOPNcnCs+w\npA3v1z1e4jc1KM97wnxgmJe7b2psbJ8Utpco8pqQKDQ8p2ounnbCSBbmiT01\nnaEjuZV/eyaRdoWSdnTtoeP6PWFYkOAJEg9/qLElpKt+u94SdpSYc20zz27Q\njKSv\r\n=excp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/rtl":"11.0.0-canary.dc9c84023.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/density":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/elevation":"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/switch_11.0.0-canary.dc9c84023.0_1617126513866_0.37389951274313393","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/switch","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.56fc26962.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b2f9442941835e3593b6229ba603ef49872010f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.56fc26962.0.tgz","fileCount":38,"integrity":"sha512-qdkDwvg/nh3x+LbSQwhMBO3AjmaKeE7+xGQmukL1sIqUPJ7YJYIoO7jKOYzqFk0YzordbSE64+Rbfw/PdTp3/Q==","signatures":[{"sig":"MEUCIQCtJUItE7QqsBvP5kQmEY7SluIPNo4PxQDqkC4mYQ4JUwIgJWDDDOySK4hTt+N71eRJDCEIupAfKP8Kka8o6sK8+2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BbCRA9TVsSAnZWagAAEbUP/2h7v5laet7lqxpq5qYG\nKHydCJdzrlMAWWolWrG/NcaKAA7qU7z7sbQ4X1i5ixUlV1SgN/UsNiZObVhb\n1m1q8rA2Y0GULT2KipLje14kDOeCqjlrErSg0PEzU8esk5d9x48x6jRmJ67O\n5/3S3N0+neT/+GRdz9PHQ4IBDGDlLUTBz/Uduf+Mc+b/SETrLHVdCdcWIKzK\nLNk1ZiJhgFWnrg1KBhNzrpL7jdvWZ5wjuvOHUNGfJiwtqhCJTsdTCZC8O7YM\nYef3WcKeLEY+1JWkWWCnKHZ4TSNwkGvb+iEeNfLdTwOJCazBt5Q9Ph7XHB+G\nVGIbXXhmtkyoDDKxxD/wQgEXgPkuAWtd0CrT4TprOi1X/ldZ5fqPu7IoTcVX\n7Q4h5mDTV1dXHIMgAuQ/EynYNXFatNI1VTvvGuYohScCNgQke7FwbGufOWyE\nHVutF2GsBsuHFmXimaZvO2TYRyAJvZ1q+T8V1O8qpIdnKR6vL4ENbgHVu0ni\n0Nbq4iNaIKtRaP2fNKFqCDaSROWJpkOT2cs+6RmaBwZZUwx3zVqQLIvR4okd\niIwHj6OIWzqv/4QUkANxjhsFRccd6nRFHeXbdH2ZxhdtnxcOTmPgDOs9GaLQ\nw4XU661/Tl6St0RK2KSI06YgFxt9EiedyIHozmO0aqyxirywyjNQe9N52cSQ\nElpq\r\n=i8q7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/rtl":"11.0.0-canary.56fc26962.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/density":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/elevation":"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/switch_11.0.0-canary.56fc26962.0_1617150043337_0.5478080863539612","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/switch","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.bc318250e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee753153a8ce0fc887d85beebbc4979ad4df21e2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.bc318250e.0.tgz","fileCount":38,"integrity":"sha512-VkbocERIbBz3m0nByYe6VKH88b/ua5y6NCR1jQgYZJMtd97181a8Uv1SpdxNUTFQgsGhRmdWvaT/jMXciMRQww==","signatures":[{"sig":"MEQCIAbsnra3TeHDwvgxRdhLbczCggiZ2XJ68bwxPx45HlXjAiAWX+U/J4dAIZJ4b260Bvhtzyz1q84e3YCbntPo4r4xfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9FxCRA9TVsSAnZWagAAObYP/3ZgaVp996BtSqsY0JFo\n/p1JxyzrIEH9/hg0hP6CkagoGdf6k1Oy9C/13mcBFNLbZgJYQVTp8p+cxnHF\nKdVT5zOuPDwjb8pk2kOMUQ9ApZ0i7dStMbSOIfswgTmUFoFw+nqQIrkKSMhk\nYGjUEVS3QqI8D5LE/hvJTnOPkgR3tkCcZmu+J9XHHqXsctyk3spLANoCaIXE\nKh1mi+6ekK9utRlZH5RGvA2m+L0SjmtpFLIj/rAG6uAU7fVZ4UoBI6iHfOCw\nIlTPH5H6Z571XjQLgrr8r4GUvMy1Msh5Ygl1wqnoJerTrW4OjdYLIgkD0hjU\nK2rq0k82bPOOcYatBI1Ad/YABDDyvN06Sp1LfwDCarrj0oFV5DxedYm4msNq\ncOUm+vhtEUfDOTji9wtqrzYInz4L/2dsqHQkbXKkEayx8MzMYzHAKPUg5apF\nFSMdnLaGhpR1DlzUqzKYZoAxAfXkSxjntyWXGCXow4ZfVx8Qvv5fa8nRMyql\nEL5q/Aji3noMCi1/m1Lq/ULcZV9d4eGh0b9fnrH4wsoMg0wxrPEDHmE5Q4Cq\nT8/LWkX0+1D0tSMMV31w/CD1LG/1XlU+XxPKIGfcJ6qvTs0XsG2s7Eq2fghO\n3Oe+sV0YKol/vYsxCMl9Gd5UXnKhi8wFBLwsPBNSgVwm7z088DOh6PcKXuZd\nPkqR\r\n=o2au\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/rtl":"11.0.0-canary.bc318250e.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/density":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/elevation":"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/switch_11.0.0-canary.bc318250e.0_1617154416944_0.16604652941912024","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/switch","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ad40d1081a1535633799cc96eb4e99fc62ff15","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.edaee19aa.0.tgz","fileCount":38,"integrity":"sha512-0ZnorD3fVDyqf6agKW6K4lz2LL9zprwh4k68mszIx1ddFmn+kx47X38NbnS3CYyKGHzhc/I/WQ+YURvxoidacg==","signatures":[{"sig":"MEQCIDeNS+7otowMwgcjaeRJ5R3Xo5ddDOP/pBV2lS/WKqlZAiA/Z1uD2i84RWDUoaiQZvyC/JKM4g7fxABfMrRktizbLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pXCRA9TVsSAnZWagAAdK4P/0oiFXZ3nbdkb/fvlCvE\nDkw5A+KO/+bo/EsHD58XCgJ6hAVOzTeQkNWTpYNyjRZKdQ1omVJ/yP8QmOsY\nyrBG4vY24qafUXLqMMieCotfgIku604WtiwYk81zNgMiU/QKEf0JCKi62kk2\nN3MJVEbIAQ8JCpVNI5NcVCkS1Ymms/mtsTvlIOje9A1Vty3m9HaD0VuFYv2w\nhIAysgVUJCE/c3ZKVBMenHpFJjphzWARG2PcbfGW3XsQWc9g14YxIQZdOEk3\n5iW09ldy5DFehGowmJpRCL5qzawRslYxH3U4zcOKQFCbGnQuZg/SoAuy7dfR\n39gscrt/97cK1u5yzct8R4DpF9drIfDnrkxvvTUegyOep4a2Ohsgsa4lCpvi\ncGHxFsrGaUu0Qex3YPQGJD/IHO+531IboRfX9su7vdM9sgEZCi8M0FMavNHW\n+7Xexc2+hwRLvOGfM4rpQsdAxGKiPhwyDnp6JMoL475UovqaWKJPAczwcNI6\nljnx6Urv3lzlvev/ydykNO07c3FYLma8ZjRwXNt+eTvkjKmeC9k9o0U6sgoz\n5ZovHSM8fDNIhgg5Bl0vQB4BfegBvanURRUfAk2jiLuE8sjjhHC5JiT2STQz\nbrPnVypmDKBWkTxAqQsgWnLnG7WdZqJPp/F/pqEtTv7I1CdmpV30owJYNbkD\ntnA6\r\n=FD4X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/rtl":"11.0.0-canary.edaee19aa.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/density":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/elevation":"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/switch_11.0.0-canary.edaee19aa.0_1617156695093_0.9109917580484126","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/switch","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.24609b822.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0c629b11584b84618168ce54308fdcadfef1ca2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.24609b822.0.tgz","fileCount":38,"integrity":"sha512-XQL6/8dMXMuvLbkutoxw9RVbdBSrcEJ1eGh8yc6OVK+FKv81YSTaSY1EKRb3K4hAcZdsTx1iLfWInxZPOXydrw==","signatures":[{"sig":"MEYCIQDqwEv4czNGB4ui69E1aK6uZEMNCzSmTEk0DSRsnQXLZgIhAJFMQsOJGm4hFT1r6jep836MN6BK763ajYc/sBPocGKS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIeCRA9TVsSAnZWagAARy8QAJUNH2Hp2MPcEwU72Z0A\njXe3omhQsw6PrGgo6nnnwSptQHIh0IEySlF8Wrb8u1NPGuTpRgzMBlVz7TwX\n3UoJJcRzmBzFiBFYkaplqwqBiFk7fjmKgDm9wDTxmt/KhdQDqn92n3kLkuqk\nij6mtfgItckyaQIAa7NLBL0JlwvooO1BJEq36dk7ntRAFU6Ir7Mipalre/1n\nKWm6zS+rvJuiBJxndkxe2NP3sjuuEaeN+5hpWBPTp92vScFJxC5TBH9GWsS4\nJcof1b74wwUkcMLBH7umLg8zz93+Nab75J/Fe8HYBHoZOItLd8qjJVm/kpww\nXSQdd5uzs8hOUIISR72D/LfrhRUNFAVYfUkbcyL8ADjdEP68K+hUDZeqTnlC\ngAFKErBUyjtweaOQ376g3wBzwzScT+Xpx09yYzHtoztA0iG+pvvEUDaQkPdR\nrRZrey13Oxv3nybk2opGGcf7pRzN3MotcF9p/yF23mvrGeCGWekIgqoca2j6\n2ySJh2QY7Zi+3wWLG1hdd26cKmr11RhEpVyKfcC8GsoycwEPX5jV3a0Jagqn\niX2SjHtRUVy4x6uO+NHFT05K2/SSvKA4j88RO8GOSu+n5xDZhGAuKJOYOAfo\nIXwmaECOAMXSPDSmFDuba8WqstYkPD8oIjIAwkwLOQTBh4Ya9sA6aZxV5Xh0\nlvuK\r\n=R0PX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/rtl":"11.0.0-canary.24609b822.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/density":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/elevation":"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/switch_11.0.0-canary.24609b822.0_1617224221825_0.20417428746064958","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/switch","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffd7932043c858c305534a5127eebcd36af4b646","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":38,"integrity":"sha512-lhFsTgyGLIoJZ0gYNq5jC/RuJ1EK6FpiOnPGIQZJbzdheXy4nQtaZkvP6AwMdgg2058CguvVP2pD/we+scFv7A==","signatures":[{"sig":"MEYCIQCEWwoE+irXCIEeWYoX1gA3V6CHF3zE1xahzUweFDYTtwIhALzkWJcd2CIlBZFZBrXtfPjRyLNN5LOXo8QfElZuzq3N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeEkCRA9TVsSAnZWagAAn0oP/jarg1skt5gSZCHW1W+9\nybF/iPgKPkzi8rJbJKnQ7RB0ZXW369rAwCPFuWwy+ncgGrd8wCrz+bboGOzS\ndxaNclAPZ2tOJYyWqE33cYHeCTep/oKEoPnwG8TW2FbGzQ6Z/6zlOyVmNWiF\nq1Ju8IS5kpSax8/8hDC1vfRs+CDxQC3El+//qrTMxXAcECHOsmhAX6vpzBx7\nooCj2Sd6OO345rzyTjIAqenacXFdcYO63rhHYveYmlAF2K04tl2c5kUFQ3ns\n762qLv7ecpSRHLNRC5zD+w7dcLG3ykv/LR/VrA4xqDWCDaLVnNNa9ZjfjXPP\n9PcGdslAlU5HPW/vEVaEES3upYqPfm+EeiZcMpeXxD+ZgbPapWjfjLp9He7M\noRiv8gmuBHa89QR35rruyfdgenmTqzcoRryMtXcsMA37o5NbXdDjuMn3AemJ\nS048IxD5Tu/RTu+04JEEQBHnD5bu3tX92iSpgigFKZxu4bB9yIjo7NxWghnW\nfeyol5ja/0QAo9ubCAVX/vJgBUJw8JWtmDGIysnwvIxDrra8h50J7Fg9WcNA\nGjR/HObbHpNInT4ziTfoupTNzuMQQLVp4OHN3V1mogHqL+XL2kBJaaHoBIW1\nxDooHQubudkSabzXw4XI3gxG/751lEvNTZTGefpgH8ryRvzE7nK03pQGKGNU\n2wbd\r\n=NGIs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/rtl":"11.0.0-canary.b6cddc2b7.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/density":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"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/switch_11.0.0-canary.b6cddc2b7.0_1617289508033_0.3144865293438166","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/switch","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.94937c78c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceba3797f71e3d729d45820c391f704f417e65e6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.94937c78c.0.tgz","fileCount":38,"integrity":"sha512-39RMPKDu2pFjWk9YCF/WBYeionp3qQGtlwA3YDDrBTL1hq9vxx17FqiZHwMsRHTlHU4GcenotY6Y1M3ICDbKPg==","signatures":[{"sig":"MEUCIQC1/rQ05QkNjC5CR3vcyfSGDCaL0l6HCljY4fntQpYtIgIgaFyV1gGIOATtqBLgpjEGMdR7d8MgM+ujliVBRXWPITk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjR+CRA9TVsSAnZWagAAaR4QAIG3bb46qGSb1LEh77TK\nT81kl5jITwIdiuk+M7IJacLbZ5MEhPnyBwKkNX030VBVYlmCmVHUCNULk3HC\nqhwfTfLv2GdHs6N1qBEzmiY+N8uAtytXEAQtSXcH/ld39syYsgbi+G5m281L\n9ALu98yoKEgCKD74RCeTX1wYkaflillefCJwhnM/2eoT9JmK4jrCg0vcwe+k\nRQRho0sVvE3wfgCkLtx4Vk9/nkf8xq9KsD/N85IplZi1Hia0IhnXResw9Xmi\n5IBGe7S+MmcabsEHcGvJH5epqp0ZtmKdjUwHcyrU4d4LGYIZrYqxnOXL58cW\nL7mn0vYuUjyF/Kh/VYramvlIt7lCqTMwkKWpR5wZPX5pzowZCfFaTvW10p6P\nf4nxKP/IcMh/iH6Lcs/DW1gMK1pD6BHr4AonIu+HMVDsRuoo0mSOsVA4I2lK\nHJwVwe7oEQtgt1uXsMmpvHTfiaCuDHt2V10HTSC+47gc5qaNyh6+urWMj42r\nAPxJZBFWcXUgSXnV35FO8DsSAFlWEJbU0T8x8WLrjUrAnVwZl9PzMmPrYY1B\nA9WXSvk32RN6W0orzEB6Njrf0aUCjrYyq9szUx/HUWJrvAazuzYFH+DW4elM\nre7KGqFeeX743DXHVjkXITQMvBEJjIkJN/W5A+GnbaTvQpWjHym7CYxSOPjG\nwZVr\r\n=/uOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/rtl":"11.0.0-canary.94937c78c.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/density":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/elevation":"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/switch_11.0.0-canary.94937c78c.0_1617310846237_0.8161782696234896","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/switch","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"890663cb7b7107e85b195caebffe484cc260b083","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.e7202cb57.0.tgz","fileCount":38,"integrity":"sha512-UVUgAozOJPqr6c/rK4hM0PtBRTtmFqk520Q+rdtxEnaVl36iZQSQtkCN6U2z6o25ZUuoaNjiKnVUDEgKeXBlRA==","signatures":[{"sig":"MEYCIQCGFCer0EPgk2bdVXnRvtBkxgzUsM9t8ivY2yQbe6LsFAIhAMNzMcXuciewRBLiLts+793j8e5pv8+CX8xukmbN2her","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk11CRA9TVsSAnZWagAAJIEP/RoSdvQj/4l0CZc4dqyz\nfJogq50MivxqnhguiKdn+2hlI9ZghvLXpCxzOs06kqYsgo6Ysj89CnhABlPw\nA+IXGZoscIT4a1QAfx3ybO9dRkdhNyK/ke4UrOv77MmVChXzIq2Qv07I/K1a\nfZV137YVUsPEDIctWIRhUsx1kB5Y0s/CUNEIkvL4ROa55IiNXz5oDs48MtGe\nIuQjSzsgYr9Wsr4YlC0RaLlJC5DXsx2W+tTektJE1kNxFAUGxrZ7d5hboK3S\n/aJ5g8GqPeNLIV7O23wG5cYlPsmTrVy6vnJxgUo94zgdWbET/LLCMOdMk1kO\n6Vd84C696i09Ww6q4vMkIhLtcmixThEIpj1CL355fnduQySAfbVc0RQwco/X\nLdh3LY5J5aTDO+ohYNQ6nVOmbRG66mZQP5+K4YO7BGIj+Ght8zCoklcWED6m\nhpdT1xTsqxMYhXf1gDif7dJBTNBogCtV27tm6S3jSQBJOkC3F9GrJ3njJXeb\n8n2wsBK6mijmdZdpchiFBQ3SjwcU/HCc+yaylwsC68+nCoT12++itRJQzSWK\nqMxZVxTLKNV8WH16PdJe9DeKlSBCev6b1Q5ABKliapgE1XInNum60xVX0kCB\n5rZC4KCIcaxrtVptM5h4tiF/84Paz1rcR5uN6Fog5skQdGhYKALbOmVmG9n/\n8/6d\r\n=1raD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/rtl":"11.0.0-canary.e7202cb57.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/density":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/elevation":"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/switch_11.0.0-canary.e7202cb57.0_1617317236221_0.3801842553606398","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/switch","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.1f636b205.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28773d21aebdbf4877b29b6d32e05ed1d280b34e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.1f636b205.0.tgz","fileCount":38,"integrity":"sha512-4Pp3h8xWNdqQFuvi06tQ95yt+6iV2/TssViyrym7UdHK0H2789gqEuhMhGfyvxcIb9IPrSJ24+wyhUcyfL/e1w==","signatures":[{"sig":"MEQCIH+dgIaB7gUezVOTdm4jB7aXv9EzRpRRVRATyZ/MiIPIAiAW77zgeExv8MYU0tj2rkzlLBTgdJC8Gv0n3mdIcjE4QA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5l7CRA9TVsSAnZWagAAcpEP/1U599rQdCBiY7M62LO6\n+xGfgqC8KpAqtK8vO0COncST56ssMMsMWm8mXIUA/dY7n4qJy5wXtMp+8Gjs\ngZRV2EE5sHoW5wRJRONut9xtDOIPHOol41K5MqvM0NL29W7nGCviBtcDzUQ6\nNvuNKa6SDUWxu38aJnp5SL/4wLXtavIWD9ZSLLThp/BUezJn5L9duVzkgUNV\n4fZsat16lTn1s27lJyF2aDqSsju1Vn9vu4c0JaRpmXNAZvMCUwvXssBh+6od\nNcTLcwsJe0LZ7VOqqA17yJbXTHQFRjS9duhuZJOvAASr6uGJri4FYGMSyN/U\nIsDrv76x5b2Mv1BBAN114/0/WUAyxieJan9Y5y6DWzc45mLNwSAto3XXMYcD\n75/DbyBS1R2qv++WI6FhBU+MbTKMQ1SBvw/lxQ3/13SuEdgw1sc4bdX5BwaU\nui/bO8ouNvNPyDcw5pZ/5w4YA69P6w863yghZljaUhiHKjDt31k5wNtdha0F\nPEIEu5HyFlSKD/4K1AYSKnIc6zifK7/6uXOgh8zsTf54r8xUBlUZK+PjKl6q\nasxzPHkfS04TPfUxDyjuzkOLyquFkiySWyUb3p9omNMErGNgvGD+gsAH+uu3\nY7ZJg4eeAFKWnniwT1tf1wefQQJPppI5+fOb6SarcEsi+IoYNtwxTAA6edEm\nxIJw\r\n=pK8v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/rtl":"11.0.0-canary.1f636b205.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/density":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/elevation":"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/switch_11.0.0-canary.1f636b205.0_1617402234717_0.7326016589328714","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/switch","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.94f50b260.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0365156994be581cdebdd56bf8795a5bbd20cab","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.94f50b260.0.tgz","fileCount":38,"integrity":"sha512-wpJMAwyMsPSRrwXzrBMJJVJLW2fMYYheCqkaZ1kYLCCm/0J0JmDVWOcl1ow5P6fXIgMDTSmPZRTdzBRKK9AUMg==","signatures":[{"sig":"MEQCID37ivMDgchzJnnAWk353xeHk1Dh9C0Xhndsih4UTtF7AiAMUQxD/hVMCtJgFhwD5QBa1fB/+X7iKBksFNOxopyVxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayccCRA9TVsSAnZWagAA+zMP+QDoApca5F6DdsKrTUoh\nUJg16lPSi+dtR4ZcPlRw/TwOhSfZhpq1K90ggynNrZ4FYM6bjgkUgddAKQDL\nhbfxBAdLMujyppIRMIjeQUjZDST+Uggsc+MxIK5eGahmi/KgmphNYpYc+OXk\nzqIR4kv84QP3OA79/6HnEUiQYFPYH9n46an9RtGxV7MMB5dBFDEjL4cU+U5i\nXAAy4AzXXCYH/MxiIwydhHGd+eDVXzzQjxh8y26mQaWMX/IF7g3YcMutWPlO\nIjhNvMrOv5c+h55JTEfcyVZVB6nsAN+s3eEqB3rVQ2AZLopaBz13emghY3yZ\nMeXqJQYOTChdEaXHZs6dYaQVDLYybW0PicefzXwgmZW91M/XdJOOjB93r9Ej\nv4D2X7lmwMIhNRi9z2HLlU+z3Lb9FQUOnJxZ+cTr/bs/kBNPYpRlxw/w2NiW\nuzBWr4prAntLbjrBMtjPEoFtFlk9KbTgufKIqUlvd6nVnWWh3BAEWUXn8uNB\nPbhfDL+tNTSzpQ7tl9Ngd8R0twiqW+yowq2QX9XdlrODHhB0hOMlDjDo0aoN\nmW7jg2V+A6dj9YZJISvjPPPPk6G/PbZOL4iw3WbvyJcP0SdYRgRdojc/Og7E\nKkU6i6G+BYyO9oHxtHRYWNOuOCR9AQnlo9lcxfN4xn23FiQC6fMTiFaORiYu\nB8bM\r\n=iw5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/rtl":"11.0.0-canary.94f50b260.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/density":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/elevation":"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/switch_11.0.0-canary.94f50b260.0_1617635099956_0.6881623704924849","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/switch","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c331833e6db722d2b0328c338e01aef087db2c4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.a4009b80a.0.tgz","fileCount":38,"integrity":"sha512-ob6/MvifJfbP8h5mTen7B5HUIXctutjdt2uhnBHTwGoEzJAo7/BccoO0VLqYB+bAmpC6XtWOjpOM1UoCcFqBPQ==","signatures":[{"sig":"MEMCIElXYIWnm8PHbmwOvpyCj3rAhqtmDaOtWDxw5KmSa+23Ah9HHt/qaGg7COsABa8MaWE5kt1qUGxgAzQYsmxrIbTt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4h7CRA9TVsSAnZWagAABj4P/1sidXMBUkg/RUb2Vsr3\nZrIOIsytpQfgbq9JOvH2m/cBwMFyP2JRUdouK0dM2iyVE0G/9okTVSm+nUXE\ncwxZdEys/4+DrLXX7N+bHE4vjgLRDQg34q/RzONIzgnDpBMVKmfTq5etLXWJ\ncmEtUYVN+OLV4yuFvMMkQ9ldIBXW5UF6eS4yznRGGDatzA2Z07Y0jKM09BIK\n190bsQ9OIH0kfddPbMryVTGO07sY/oKaY6/82O5AYBFpGUobAUEtYgpLxh00\nkf/eT/lDxwcl3Fg5VRHwo3135V+Ofy1gNuDl8P3nFI/ShOj99XihcjuZCGNV\nOA3v5s5FpTd/ZNgmNbL3+/o2BDlSJpd0t9sEO7xVRzuxiAXpSjBGN7QX3otj\nBDV3Gnv9LdsLJ5WbqvW8w4LTU8FpXz7Oc6AZF2lLKfXWXunMsbvTFyLcV6TK\nKkn4nWtvtcewe91qcm5endTBamcvgfu1I5gZKN+qk+GzHzdF6nT414PMRsHU\nXp/xhXMb9g81wYN3yxrKYKQgmFF35zaJUdx5sUOLysLenoyacb1hWJ6s9m3H\nQTrg40dpVOH1RDRtZKHa1sB+JQ1eTZQz9+L/deEOcimpSbwHtBlr0KMi/Qvy\nuSJzO9ONV+5gsEPt0qRhWvisjjKdX9pAhXwkdSsoVkjcOoy0QISGSHoVpczL\n6Vfl\r\n=sjE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/rtl":"11.0.0-canary.a4009b80a.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/density":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/elevation":"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/switch_11.0.0-canary.a4009b80a.0_1617660027114_0.6167641446899144","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/switch","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e70f1e56b7f9f8c8550afab1a9339573862a0b1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.15604bd0d.0.tgz","fileCount":38,"integrity":"sha512-rQ961yiOW6H5zxXnIAehQBd+WVmm2lyglT9hMHf0EYyANjw84W6gt9QyLbcn0ULPVjYgLesqXma0mYv4V1HZmw==","signatures":[{"sig":"MEUCICQ+pWwzY4KXbGXMjJo1FmzSkc1COVLMEmgoTbY5DFH6AiEAkjh+i5cm5r51HrisW5O12dUtBafprKxWPg9ADeL0MQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5JFCRA9TVsSAnZWagAAotYP/AsEpWxWIfz8e3zBuNip\nJ3M055JyVtecBaYP9bcYeygi/TgX5CtCGrCg0VazTpb73a7GNyKnlgv6UzRQ\nD2G+Ox7T9KitR8MgUl5qq3FBYUsS3Oxf82s9LU9Y2gJMCunCgQouZbyLCVsp\nwQATLcfByhhgp9Q49vdJ3rdPv3CzA4FWZT0wWwaKMA7Nu5fBkTZB89lpAqlW\ne/mxSH/Rpnj/rahTPIISOYZ+uLfS2NClPqLfvtG/H8CP5K85Z7I0n9E5BtJF\n7JKnFdqGfHjjP2D1T1cCLh1zWZw+cpJxko5zNadnkPqm5oWzPeBYC+smZZtX\nv44bVF+BgOchG+6m43vRhHtx1r6t2wvtuXf/a/PeTOQrptEwlE5QfQXvCp2C\nos3Zv+WH5Bdw6FrW5Rht7KbZd+4J+k1a/WecVXFpXZJRx5l5ARw5mRzTViVO\nFZIcK17c5ikD7STlQitpmh5g5+wqSVrLoc6TYjf5ZGQw6Pa/s+mwG0b6TzKZ\nRjvHK3Me5JzJtw2RZUoxPCzRbERp2Mgag84aZ94gym901zrgKo+q6DPL5l0A\n5WDMxFRVBCFtKoStZEUPgEoKyeov7RsbCNDICLL7wstnPM02uIi1UcgF7awN\nXq3wVknTsoQJsewXmjNi7omq8n/iGnBHykMD/Mit0f4U0jqsxgPGbXOf8NFd\nA2/1\r\n=+JrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/rtl":"11.0.0-canary.15604bd0d.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/density":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/elevation":"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/switch_11.0.0-canary.15604bd0d.0_1617662532607_0.10210433162123755","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/switch","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.76da7876c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45277e4353b3a96bf1dc79cb7e7ff6dd3d8cdc7e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.76da7876c.0.tgz","fileCount":38,"integrity":"sha512-vZCe73yJCQfSWY2xDVvtBHA3wpCh0JoRlKgJ4peuoZsR/6Q9v0nbz3y9a9O4zUQczoEjOpmht/v4MpSxkKhq8w==","signatures":[{"sig":"MEYCIQCgn93QdN7UPtnVxWTXvaSrGZP3b6L6VAZ29ELFFUUSLQIhAItN8TvWc5A1G+LTzF9XCbSk3UAlT58GCaA6sIyzVLng","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ6FCRA9TVsSAnZWagAAwuMP/1xLwxKt/cM1e5AM3XwK\nuPv6xahZ9kF4RbBcGjtYcmyFkMN8/+m8fSm973Et1NA8LR0hsSqAYo/u+uzY\n0KVDY/9fUjePkptvo/IuP1DIgqwlPceMw1f3eZ3NjgYDBtzlARmzgnKa7e52\nHo0Ie8lH/tJDC7gKcppiH+nrbb8iR5yh2h3EO8SZ72p3RjprWma+A+tDsiGo\nlx0XwEYyr1qJvttkDt5aTVxnAPwI329+HCWZlC8x+k7lDpg3V0Uubu93BP+P\nxhQcTdc52Rk8xgt7dGDvwDgOoZchI2tKR3L12cJQL9vGTZ1MAz+mRGPsJ4j8\nCgT0JH7MkFBz8NKZ/jdEDO8QxTYk/UBdkmHDidRuVZqMOp+OIyw4F7T2yhY/\nUCEp952zEDfKK46AcfsDcVcdb4/69yl73m8ayqtwjyxHiKgCI+5O147LhJlq\nk0FJXlXgWwGGnEEKd/WQCyUlNFVY1FIBtkjdLzcaTY6KZhoaBxxKFinOBYwM\n5SFEWC2Uze6ppSpAy6z9z9eenIhh5pR//xkbqg6wwu4g/ipKEZcV6xxyYrz8\n24T+f29l/KpuQDOZjIf6iqf2fxb/XYB3u1elEqLNK00TkLsvknoonoahWeUD\ntFNjw3Q/ICpai/lvTkaHxaNlfZiBjTqwpLm8oaJ/GBQ6uClGoi7WALEf53Hf\nc3fJ\r\n=GTcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/rtl":"11.0.0-canary.76da7876c.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/density":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/elevation":"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/switch_11.0.0-canary.76da7876c.0_1617759877109_0.5343215801976684","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/switch","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c920b21542b1f4977bfc4a038950a949c83cbef3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":38,"integrity":"sha512-ecw6poaaoRD+SgZ/upf+egYWpsK4XxaNUsIypbFGF6wz20Z+2CBpXT+Objg6n6kgO0qe5ExpdIs1Hc11Tf9IEw==","signatures":[{"sig":"MEQCIDC4BFVV38u5m7j6UB6i/ACrLDoanz6pqeDDvH4es4XEAiAUFFUyGFGpMkZqkX1czYVZbAWUiYIjLxkkR3R+E3U8YQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+8CRA9TVsSAnZWagAA8iAP/A27hOa0pqQWuGN4mzAM\nI/lQOXcKBovPDRRr4jNaimJdIqbMnZ57504o4v3T8XkURQEzFiGiTVEIkAxL\nVxfG1IGUPAalVVlGt7y99vyceYdfAYLfKRLH4gEtLp3TyS/uirjBlgMetItO\nKynPsDMu4PaC8u1YCsXzAs0wKQ49msrxm+Yy9jK1iObhB2Ll4U6OEhZqfk07\nhi3372fkIhSvBxHwLSPE8duYWTxIL5dFPzyEN6Hq9O12pYiF747eNKQdy8/+\nFkKXyEiNx/4jO7nHC27gEtiTOAT5lo+Wpmn6Wjqdx8iUM0OBdg+/tTQtDpp4\niLIiXkmgt/eTcmOR8n8CMaPzQY6O1IcXtGZeHg06gztgPHd+583Fpj/XkZP9\nBgjAyMBnoTv4VXLtJdTsxaeCAoGBKfzx00B0GkbLzJFbnBGHqXpdaiszGD8M\nIXEW78kY78RjKMTSrHxspg+J+QLjHDvbKKT1kDDQQ1mN8ggR+RZbstbtYGlc\nqcdG9mKJ7jSrFvCfbtf+fmX8JH/FjXMFwyK86bSF0Gr55N/iCSlB0vurQ3Rp\nx4FXgGETGrvJQCB9BgwLCIdkz3m4Q70FUkPNFfTqrefHsTDsyhRiWfin9uXJ\ndPhgOcRr/Ok2v/zwND92DrQ1pPZJoEum1ASuUrmNoZcDozQrivH3C/9RQVXR\nf7WP\r\n=hISP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.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/density":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"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/switch_11.0.0-canary.6bcb6cbd2.0_1617821628219_0.6511565515949755","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/switch","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14c5fd57b136ce9ce262205b0fa3d077069eebc6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.c91e8d141.0.tgz","fileCount":38,"integrity":"sha512-H2TOC9KX6pu2p6gOBmNNjnMSnGU+xoGdLcTJv1W+KsCuJRIrhDQBwn57NNuFGcGQejirVxqMIJnumL3h5H7pXA==","signatures":[{"sig":"MEUCIFvViFaA85txVp6CKaeS8Oa0zgrx1UElCPKzcaXbEMxuAiEAonnN9w0UjD6rxJsWLG2i1St72x6HzSFEnGGLaUEr9Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCpCRA9TVsSAnZWagAA0scP/3oFzWonb38EoFkDbCGm\nZ/wCmBxgh1v4J0EzwhjR8yM2QZhejcKSTaMrfJhoXKFgHVIOrfxOoOhOSRxr\nmywkZdG+1MWxb7yuWDQPmsjCYLXnAHVdA74WkY0Gl31/EhN3KFbFAtlN0Ch7\n9t22CgljLSDm4g0Os5Pr5TI5da6UQiBSIROuU8h0Ct6wj6gPCr0AszlGcfdW\nZPdSI88Rio6Lf6g3qyl2HrtGFB8i+T4czXMBbS+9t480vmhd3czOkLgHudLU\nHf8DI6dFyddA0PejOi3PE0PxyL++QuoN5uqGv0pbJOTFHlaywaqKI6nEyIxe\n+KzWEuGCpZ6EiOUd17A0OspE1WPOUZ/iH3pn2AlAo3yoKxLr+ax5iwsZs6sw\nQZ6Fu2wJo7EM//1+kbOniJJQv7hktcfqHr9yzDP2OpvkoBtaZwThxXKSHsuL\nPG+JsbP5C9nklAtN4RfpKhNI3qT2cDbEZzZ2S2XUVAw1XnRzIlMF9skwvd/6\nmWM7dzNNp1eNTfzumQofNvhJrzLfUWgICy1geb+RDDKF+OkW+Xx1D7TGNbmx\nvBSa4CAGQF+Oah8vdRy8MVDceCLoVV6c6oEafhMz6+hItQhZW46T5oiuBLq0\ngrr3k2U07Fb8weQgmbGKOu3QVthIemrA8Xz1teMzWb+pxiP3mAY1Nrku0ndm\nb4St\r\n=FOhS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/rtl":"11.0.0-canary.c91e8d141.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/density":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/elevation":"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/switch_11.0.0-canary.c91e8d141.0_1617821864708_0.1715810113717562","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/switch","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f77c50860.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c71496ff3fd11296afe20a10d0084132ae62dda2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f77c50860.0.tgz","fileCount":38,"integrity":"sha512-4hfgizLJpNTtLLJegZtOSQExRABcZLpW4sw2Uzk4pCPeQGLf9MABVYpnGQBndEp/Jil07WlxsNPc+sxhEjQPNw==","signatures":[{"sig":"MEUCIHm07HTg6YBQLKsA6wu83bziIBL3pzwZg9IMXkSlEr2SAiEAz5t+AzYzLIPWn16IYnezPFfHFzkpza7rAoB6EAkSbUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyLlCRA9TVsSAnZWagAAxYwP/iULrp4W+6F7gKCR1SiV\no4Qg8pVq5GcIM0JR1XfIHg5LEZ8AuI4miqiVBBrt+C/7Sg09dicA3IeW2oK3\nuMFGHDGXc4wbDAbQ8m9+ej0x9dvsP8XKbdsYdBwJUDaldUCj6OK9H50sXQp/\nu/ARqvLbHlPajsopEPIocbhL29kHDeaWrznZbPXmUY7+qrP9i5ho5IxLeUCa\np9f4FGEf37N9AxA1/X9c/YzdUF8rutUj3MD/NiZ8iMFwcUKlhVwWEGSd9ZbN\nAt0yw9lEzXpp7PpPF0gzG7GZqHcAXw/ZRPefhTfsCiIRoGSnGXkd931+/cPj\nl7yjCM6UDRTSYzFYkyvIgkMmA2jrZwjGwooH/a439A9nIPMTcACkvwXaS3rT\nm59eJBs1p6FyWkXueU3TNPB9JhceM8jsi8fWD/BoIEdO2xqc253zRWqHdFKD\nD7NG96vhkPZo1NAIiU//Oy6TeW1/RrWD65AtvOBqhnJz1TcuJC68gZijj1rH\npLcbxQzpfm3jqfsOQ40M8rsj7y+j/fHNloKHIA9j5AI6/WGsyBM28nYIGUQa\nS5VOgYHGi3xp9p91wnckaaL2AASSQtKOmAmrLGC/3zT2HvDgtmFjxeh8y3P4\nddb3ggFjy9JkAzLZa/BonQs+QVFhv1sNfBkE5BYVdQFe77uZ26GMMHgfQljD\n/s5N\r\n=d5EH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/rtl":"11.0.0-canary.f77c50860.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/density":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/elevation":"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/switch_11.0.0-canary.f77c50860.0_1617896165062_0.43296340970974834","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/switch","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e65fd0f54ddcc6d860499ed30eef74e76dbee3ca","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.367d88bdb.0.tgz","fileCount":38,"integrity":"sha512-DwPB6FvfW/VQsAtqCUIQ+YBmZV/bE80KrfdVsmQ6WZSKpNUmvXVt6lhq/oCk3D95s4uTc4HIQFPTmh+JwGoOZQ==","signatures":[{"sig":"MEUCIQDfBkLYdJz8Ta+oIOsIIt7ww6VDOiMT4lFmhWN7NjQ1hgIgALmTXCn+5J7PpLFZntjpcU69uip4oPI0u4o78xO64OQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGJCRA9TVsSAnZWagAA7McP/1AZKhg0RXjOXRSoHM+B\n6xDuk69Zs29DgwNQQftW+/y6q84zT/oW4r91XiWEYg2bDw/pnGXkDoRxTOQe\nrggsjVWNvUqeUkjTXr6Wk8YyVVhRwSG1vrScDAKQM8tdJOwYuROcXtmZiyWo\nNUCxUaitzPa5gJpwO3xweJiEN84Hve1WlwiPFeB58cMf+RLsBD/F3Z5ymG+n\nL13M9Ky2AaKCJbFaw003enHWhbTP5zhPFF5fIGRVD3jSVxBSG3v/8BY+iiUY\nxYcixiV+LYS6ZHh0NGzPSN7uoo7bH4vlQebf6as0uKZ2Qa0qbsyF7wiuybLn\nKxq2rO+BouVseWjhNKNU4IEgWU60uFKv84ItX6CettY82ByzqAB/XWudYr/m\nhjWQ1NkL0hBXYJA0GjxkJeKtxKp1RVr+Z7ZGGxp1evNBFMM2c8ZlOhzFslgA\nU4t8T7+Y7zt0SBfe/NAMRnSOobMDcBvLlqedOQyW+U+23lTKkRTrUAJqZ2dW\npElsLGq05DdIfqaBDRRpWQ3Y0HYxD3qYzcyBmQP7n+0M+6T01DNLVbmMHxrF\ngaCrp1q+lubnsvsEu4ZE02dxFv77QruOAd0Bd8wtn/tzvEtZOidYLa20Gi6w\noHf7doZxP9pvnLGLiKrevb/Yu/z1c1cUHwDNP4RanX9iIP0yl11ZX5dzvgmf\nq3oP\r\n=hWKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/rtl":"11.0.0-canary.367d88bdb.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/density":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/elevation":"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/switch_11.0.0-canary.367d88bdb.0_1617899912903_0.6168634526531434","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/switch","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16983a629cab7d4b52ca137b4c1242a75d3f9752","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.0ec437d3b.0.tgz","fileCount":38,"integrity":"sha512-dF3WKyMzXpllxJIlAflglgsO1oyArriXau/66CHZD5No3WHIAZT3DEGbaQ7M0GSNOhZx40pHBTSjYmGG9/WvdQ==","signatures":[{"sig":"MEUCIFKxM9PA0n4eu678WdvFQWOiX3exkITLZErTr5fXN7BTAiEAnf8QekbvcK5OwFp7DlTETUhTeLRsdIaiPYLhpuA4nxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1r5CRA9TVsSAnZWagAAtMIQAJuOKd15o82VJQ3xj4Ky\nFB7H547925UrdFby+W9gP5Csn5HW1z6kXzI07q7C/u/EhtQJqq5LZmdXCQiI\nW2g06rWwvvPpe4YBJ/afzCWuHo+CT3CpoPHi8Q++yqM6YTTUNNKcMQjq4FeD\nBP0cuzkL3ARL6Xub591o52ijmRGTm8PoZkZD2J1hCQG6p/z4AxNe2Ys4hPCc\nbg7H7+6nawAWvtIqw04eeSWr4YOyRPz5kBLGCJR/1akpdDdRgMLJP3Au8Rcv\nCfA7RpudhsZQ+LarcYDiXY3WBgCXvj3xDQZ8at9UZHyREzJgqoLfbNfQb4V6\naQ4Uj0v8YXUSxD/5JMdeE1DKK6iu4A+jyFIx/HtJe1KsOBRs/5rwGNw0rL/H\nvX25yrQU2iydaa3HEmUHTgtI9qxgU231GVpXNA6wZDDokMGsP9E3mWiNBVG3\neOyv4AQborGHkI0lhIRIqZ8dzxaXB8/fV+KqSw4I/xtRH9KiDWas2arwb8jU\nKt2RCgOWR1KFaYq8TN+tZgQ1FUktJLzXCyS31t4GpdXkb0dTwdYTL29Rmh8h\nfhR1rK3s5T48FcZvtDkX67izu2OF7T9zOBardbNyffxD4+OOdHrqVMXPbfaD\nBzb4rboAp/CVpm4Ag2/E3PXnRFvNRfkZLDjOKtsa+tjIcI4hlZZITXoWgpmt\n55kW\r\n=TPF8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/rtl":"11.0.0-canary.0ec437d3b.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/density":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/elevation":"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/switch_11.0.0-canary.0ec437d3b.0_1617910520790_0.7440363604332869","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/switch","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed12988c0655176d02266a65810bdc19a43fea8b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.b2fa996a1.0.tgz","fileCount":38,"integrity":"sha512-MASO6dLOnxgdfqLRlY5QokzotQ00tgGc6KEapN6GcKLZculRXZ0khzgmU0haXBq4hIYkWu2QROmDYs2VVrI5Gw==","signatures":[{"sig":"MEUCIQDVPvtmd2hJFcQ6b95Yr+vTLpvEQWIAYR3mTjM5TLKr/gIgUglc9oaa1R2ujKxZu/9ijcROa1HKmPMcHtugAqJ+P/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG6KCRA9TVsSAnZWagAAnFIP/38/EkrUQW/ltmZ3ZxQP\n21lHPqnOwG2KJbGpbREzz1AkvHNsy/gHaFgXa4bN46cX89ETtgsfYRJa6vod\nvFNrqcw2I7I8TcNyVyNKdGS2oUqDsEgs0im0IcvnMbIt49r1Yi+4CuPCcLp7\nNkCBVfTwGreeMnHczDw2Lk/AcAZxG1NgTKOVqo5WoEsLVnCfne4egiTeqveh\nQZFkvpKkyArxUITNWbhabAqTDJaYEa/WQGrDRSzzMcgf9FGR6vpcD+ZqLlJo\nPstiDDcsTDQojxru7kvm7MaiyqkPgB4nIU9o4HNC1nwWoRqnPSAQmUmXF7VI\n4RDYavkA7Sn9roaL4lNGPJ8Wf8cZYLl6WX/HJLQqSfvCk9n/xFTk5ULVgUVc\nwvBWO+Lhk36T6cLZj3+pHufCqMiyCx5iAWfkeU9wIbtHHyFQKJASr5ubbf2N\nfwaasWx3t45tj1AoyTiay4cSJfXEUeDlljJkddk9jqLLwqS59SGwOpn8Dwt4\ne/hzEDN4zPAT4a26OF9Yt97TKT4UiQQImz/dENAyw4UfAWOkvvS5/5hCBaUi\nfBtppEAfQE4+PA2PQJUQMRsGY3kJDGXebe6Mc9X2IN10XQyQsc/ENZwa6+1J\nZME/qgzUOEOEWL5LFvDnMa9Ln5BMflmw88DX4qfBtDKPhET3Qg4K7lrZNAAT\nAB9m\r\n=BI1i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/rtl":"11.0.0-canary.b2fa996a1.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/density":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/elevation":"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/switch_11.0.0-canary.b2fa996a1.0_1617981065619_0.41217422960923944","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/switch","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.24255c408.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968352f28050f6e4f8440b76b339f659cfc59695","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.24255c408.0.tgz","fileCount":38,"integrity":"sha512-k+JRz9fHVNsz6/3MRYTcFBOjyXQQm2Z6J2RyhLP4yK+G6JXJZx2oLm0+cUg1O7kfKf+wNFWjSqr+jR4q3BfLdA==","signatures":[{"sig":"MEYCIQDGVNkARxuVqAkj9oBSkMRwwo1ZCEV2bYTK1AIXg2KiiAIhAKTw9o/ioYhZNH+jwOrHSaabIpNUXro7KWT/G7aqJFef","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUnCRA9TVsSAnZWagAABgsP/RV8F5aiSjMD5LKUR7L5\nCSS0u6KcynpCE0zarq0VO9gdcPHW8TtIL4Ib7tjYGyo0yAExT/9GPvEdDBMq\niKUrh3MM563PfxfOQVkFvzikB2x3Qs3po83UMizk7JAf+Bnvnc1f2wYyuask\nib6TH0KITyRQIMUTmLLXub/u34ztUSfA1ZuhLjpw86OfpN2xED6pSZxR4AXH\nYxZb/ThAuCQ7x18t2fLk29asHKr5dmwA07iTOYIwt3qi0J180lXCSZPi2c8n\noWSc9VEfkgZ+jxKOCC16zrsLGybdl53ZA+izICg/Hli9TWV9s32ZVkUyQyUP\n+zond9Xkfj++Zp1JaMY6Oe4P+kM7zfykRrxm3UcMCwgX/5lerX7VIsfPnpBN\nbiuthlsZI7yOYe3GeZfhk6iSI0h5yoCgMMck3ia9m8aOZ3ML7UubvKP8GNhX\nGgo9gVqvdNpyTJbYxayY5W7j/4z6rQOyPEOktlu96A2VeUbyvFrv/QiZ9q9z\nNRvub9tDSoywUTpSU5e7GZZ13HRrO8b02zJr06UGUQWJXeaU0xxMSKxLWQOd\nxGe873PclGN4BSZ9xkT5kfEvXUttFU6AFj/MJtoQzySRR2RvBzSccKQTHc99\nqxiPmRI0J3R4VGcSb8EKegCg4dN/yc4SydJFxwsx9WdktqHCRshPe62gkIVn\nbziH\r\n=qi0X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/rtl":"11.0.0-canary.24255c408.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/density":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/elevation":"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/switch_11.0.0-canary.24255c408.0_1617999142894_0.5420737226835222","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/switch","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c16449885ae194b32b877fa6003d1637cac7430","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":38,"integrity":"sha512-Z6apXnuJXlJ6NI5Q6UxpYlZfQEYetaCR2u+PUi66DIsFUiUWMttk4Nf9ozXl7KX55WktQIaMujLE8Bh//K8vJw==","signatures":[{"sig":"MEUCIQDVkdN4Nrk2aEEsHgrlEr1Xm7gd/23vG3uIzJrdcdNebAIgZX849mU/C3F7jGZgQjlIxe6Xe4AS85CUd78i3+0Wtzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNruCRA9TVsSAnZWagAAuGoP/jQ/E6hR2oVMGjQxN7Hy\nN9Dkmy3GOYSBUxxTBjGi/IoNxbRW1SFxXsm7ulGnaBySbQymkwdBnXN3ktvd\nbYkq3P3x7JGTuEJnmEXsszfOjMWWVxLIxrP47uhrEc9vG9a2G9EuEiBuqsZb\nUSJRQ3UimCMr95EBCBRVAz3oz960W3yAJH6QlWU/sGS0qFjFqBFoqPKNE0Q1\nMutcUQ2kruQ423GRg+5I5aJqROp3OzC9EZioeuBZ3YUgrqqhtykjhLkE8gox\nozDJHcv36rEr/KIOqJDXq83sfknIuiZ6fCcXq7qAbXMf2k+5eouDkg/+qz5r\n0ng3K9Ye5pEt+j4vukDHKl8XcyokdptzsZtidIX1+z2c41SQLczkvDDSl7BP\nV6geNRMiMxxaEbIg/wolKVkwUuGZSEauQ+8rKgDE04ADMuCD/NB2z3i59luf\nxW7k2ypp5vsMqmHd7B/31Jk3FqGF6xYCFuF9p43FYITOKSw2rYYRx9pzS4NX\nSRIKI2g8sU30/jZcASeiKFodl3RHYtl1sq4AbaGA5j5/0RvnMEFwbeq3fEL/\nJ2IC2tPve3aLAgubB5yRDC2/7XmOtGNZ96UREhTEEI3GKgwtMXMTk+aXuW5c\nxrSfo+MnB0hvV4oQAzdbAYwn7B9jEfyFZwLFj+oTp5XjTCY+j/RgZSW0kEqs\nMZ+E\r\n=284b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/rtl":"11.0.0-canary.7d6a4bb72.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/density":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"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/switch_11.0.0-canary.7d6a4bb72.0_1618008813601_0.9248604828140483","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/switch","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.352b295c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"651bc80c543168e76fcb1ed59b634fbd38d1ea98","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.352b295c1.0.tgz","fileCount":38,"integrity":"sha512-RSXiDhSP9hIschbVq43GhW9Q/Tla6WF1waZEr90olAyv4NslRB/3PbDBPN3D1Yqj31g7bN/PRgQtgFfLWs8iIQ==","signatures":[{"sig":"MEUCID9sB0RRmaTlB8w2mnxtSfEd2o7IKR8h0GQ7tXYppzE0AiEArgxwLLf2yuAHBcKrqX6pvcQz/19JnhM2BUV5RyGjSI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI5DCRA9TVsSAnZWagAAO+kP/0FH2grJtpsl4Xh81vNg\nSyqIkTK/LUT0QOVUukuQXFSO32t8F4dX3NzEUZvqZw2scAh3O1WyhQ12bbqo\nkzpptthLGkK6kOobMmg6miEUJ6yqlGbLtU/QG6yPAOt0rffxoBDqu7U6CcEg\n0HydKTMsLYBTYfa5yAnasZHLz8DxbxZYHGrTHaT82iODKL7OJeA/4EwaQ3K4\nBzwUFx0HYdT8u9gPiyUdsvXVT1wLd/roAtmzulmH+h1bDuqVQRsOpAd0zgG5\nd4aw7WTc3cm3g3+7oTaa97mA1SbPr0KhJeLhriPZ2eQ9PMkywoc16RwduF74\nTaK4FAj0zpPGIPTcv0rWpdZCrgZ7jpZRokykdZ3LE9M0dl88cNxXIfBkY6ae\nsbx1XMInTm4OMWy42ixdGQsFuNNxlC6cFAYsxfecs8iauWw0But3HVYRrx3t\nIevScIZ1tFLw6uMxZjA0IP70/1E7WhdIsE1iKzGr4bq2lV2piXmZoSZM6bgO\n6kDyZu5xtrHcpHkxw6pCmFYg37ut+Yr9RJjLOZHnvYalgCZvKz8k1wFHJRpa\nkiqtu9FCDtEX/Vo79pI9+Uwcb7L3CVFfGhPyVV/aP8RAR4HPFj+erxbgeoeA\nCa0/TvsX1VEnQH0NJvynmYtW2tXUC97LhWMYWSnTJUFcH0KiZtGQFMDcMjLn\nd5ei\r\n=JQWS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/rtl":"11.0.0-canary.352b295c1.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/density":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/elevation":"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/switch_11.0.0-canary.352b295c1.0_1618251331358_0.2671589542128605","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/switch","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4642b5e3a366c3192a8b64e0be4d5d1607f472ae","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.ab99b8064.0.tgz","fileCount":38,"integrity":"sha512-aPBLuN2MDGX2O2NB7mPMUzsyOWDGRoBrDVSGj1X1nA5sOwb4GNB79vEhHjHVTxkh4lIRWU4l/nzolmLekkvKFQ==","signatures":[{"sig":"MEUCIQCNILEd88kcNuVjZQJwZx0e8jdMVdagUuWuscLyvm3YbwIgHjz37FHoxO73wMVyfwX8SE42aXukpFR0VIFpjN23iKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4QCRA9TVsSAnZWagAAPe4P/iFP2ANd7/hLq0/s7OhU\nOd169kFzbGbkWgqsyu4/ChXuuHf1TiND2FB6EwGtlhMuhVJ/576xUUQlHkj8\nW3lXbHdb2Vu+jZ6uX87OAKDubWqxUbMWOQkgyB9NojwjRVrXYcv1QAPC4igy\nAlnzMwoywteYPi0o3vCIn8uxYom5pKCAWfju31Q0jQCd7oOYyDPtdQui5dzA\nVPoNZwoOBFhEN5S6UIctD7B4g/vFDpzJhd+P/xQStRJ1QoCrTHwIjpy+l11s\nhPAM2ZAAxE36omJYqZzt6A4/ukuyjeL3DWDJAXFx+Oq+OzHQ8I8WpdY14yHp\nPWKGfFxNoHWRVvXiulrvf2wMubDayApLz+OcqLp/GlSBAS4hkIva/tGWwbj0\nhNfJFrPlbCOWuJFL3Y0GOcnqBBG8gqaIqUCCDF9C7eUgfNFdKQmSynM64+AP\nkoG/XklJs6IqcTDjtgzgjOiBldJ2w7Rcml3DY9nM1Tb0ukDTwl72+7LN78ma\ncQ/T1zygZcvZYQX7KYgWErWFBXZxmEtV+5UIpNI0mwdYq0kQSUn7nRSjfLuL\nLjz3JxD+jmX6efSTGyVrHO/+EsFGOxOeSc9wu/DZGtI2oJOostCyyskSz6V9\nw2XpLP2eJlpZEt/T8hddIs3cjWeUE1CDJrH8Zutwt27iBKXBYSjFyXk+xeog\nHAxQ\r\n=6QAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/rtl":"11.0.0-canary.ab99b8064.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/density":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/elevation":"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/switch_11.0.0-canary.ab99b8064.0_1618325008107_0.45571093561157006","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/switch","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9cba7b49b97a5669b59afb3cd381465fa5094e2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.8f0a11e32.0.tgz","fileCount":38,"integrity":"sha512-AHlHhR+PiX3xd0K4jjSY+ayQ7dL1Hzu0GZQIrCOIKiFWH3dicIXxlep4xOwZv9KRJU+OAf3tg4762bEafVDRlQ==","signatures":[{"sig":"MEUCIQDCzHBU+sjYDpR2IOpXmxxSHef5DH2Qpu1rfytZB0djxwIgQA2n21nLDQ6gJIKV1RfWylKgZDyGMGv33TiiYjA8UhU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0p1CRA9TVsSAnZWagAAp+gP/jnpjga6EaebHnHn1nnu\nAovaHJgKS9Ue/P72ar4QRGXpgW14VJNAvywji1sfW4SebjpmEoXQmdviTGYi\n2rdvDq5Jhknm9HAG1eqQT9o7KW4e+rI/zTHfsnIZz25go7xfNSy+aOJUx/d2\n1jdhkxQStSLvjTWljmozMKpD2CBoK7IsKF9dQ+IkqSy1W/oC2zU5bT8a3p42\nBivQAHJwa89YuSKHpbaFBdQTFqTjVa/JgskdDd+ghEATcF+Sash9UTk1nIX2\nDyl1kIW55sSihGZAtHPc1mXWQlWK2mZtV9lp7bO8tHUJYAzwgRTZfalV8k5q\nkCAQ9iXg12dsAFVnBP+28WcyTL2XIxPh5PH3RCDE3sxrLMA6/xygVMs2rg/O\nO6XGfAqlfBBvAC6XLONIQAwdyYw1jDKgkME3hzMGjhMsb2LGkfNO7y8/XJTa\nAiF69EIGw0+gA1UgwetPvDFVBwDtLxyO6s1dh0MkQai+6bSTGdGmBDji7/xk\nEt24AJQhpdmLwT3Lm1vrsgqhya88KYuvaet32ZI5MpycQmOh9hG3/pdIFS4C\nLGu/7CLL2mlySUDHjPlk0uCRZx/IlIdDdhTgdZy1YvfR+G/yYtRw1vYcFpVW\nKHr+LuyB8bFpvBsf7rcp1NGAdB1oMqhmpbjxDtCtNHCfxd6r/GTZrn4zQd1L\n0/BG\r\n=IVvc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/rtl":"11.0.0-canary.8f0a11e32.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/density":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/elevation":"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/switch_11.0.0-canary.8f0a11e32.0_1618430581041_0.6870998721724464","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/switch","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"441d7329a2a8e986d3441904ded4b4f12ee8cbc2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":38,"integrity":"sha512-VS/WX5hVENUcWZdkrWX0zYqCwzhyVFzDUe37YYoBwBI6ppp+I/MFP/TThZ/vIYqSbHB+kUtc1z57OWxyt9bJmQ==","signatures":[{"sig":"MEYCIQCO0KpVZWwevRWGbXFERajqT3M2ENjSeVr6kHfkRXqJOgIhAMaYBECpXx4q53MH1E6M1bZ3oOhysaaI+T587OTqhJmO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAWCRA9TVsSAnZWagAAw04P/iZmWYnPVY7N0QWoejOy\ndWnB0AKT/4SIAbReGNGeDIsj+xJvRd49+mPXHz05Ju43u/1EWAq/9lV6gen9\nZciBXX9ZDSHDEBlDAMO0E9gBlVrxtSsOmsY2qgoRYiE0dxHii3m+/qzigcPz\nvO/yvGMtnPc0Jp2CARyK/1f+h66I/cKfkCbW/dCxvpd57BQmiiZ2PgnW1F9p\nir0vIgLWc0INccva+GVH5UpuAcNlBVIxYKEfocCeieo9iHZuSi2JmhA+eZOH\ngsr6i+5yDGU2d9Otz/DmxlVbKs9nnZ5c2PcWre4fmqJow2jiYg4Mry8g/QR5\ntHEInBGQXZhzOn8F36d1k4iuBNxu7ujPggt7GPbiIt0DWYq+v1ENVP1mdUcl\n8GDapv8P9hJ3bP7V/fk9uL3Jtk82Qmipkf/x3UmqqseLcKoqTJmYqqe2aHrV\nW+SOldRMWQUIoixx312AOiZQArPx7YZ649LW9+x6/Nj61e0SkcjaLQKWdWD1\nzLaKeUrak/FehyGLXeh2mftazodJ0clSCnr73H0FvL3idxiHaKFiZJTu+TAE\nZwzzU6l+oak3ID6s2iWtxqvl8RFLmz4OuBAXz13bOrGXjFIYHAe3IknKeL2a\neUjclPe7NXfQq+j65SpZiQDTQepnxr/s/lsPmTg+wSTd1i5ekBgXOiRFIbrQ\nvumV\r\n=MOw6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/rtl":"11.0.0-canary.f5c6db8fc.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/density":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"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/switch_11.0.0-canary.f5c6db8fc.0_1618509846469_0.999484523380773","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/switch","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.3793a3143.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fcd45c6d98de505f78c4d920d1f33c2cfeb3858","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.3793a3143.0.tgz","fileCount":63,"integrity":"sha512-kKCVM7z702iLpU3Wq2G8fPSBW3cF/qKgGn/Fk/pPeyQeRhiJepv5cKJSxhvHxed5zycPGGQ6hDXJoiAOZgfOaw==","signatures":[{"sig":"MEUCIQCLz/ow80ul0bXxu5I1Qjdssn+ahYn5Sf7bhzAwaGMfAwIgDYIib+JWqzahbOzKW/2qsXu0e2ig7e3xDhSuty22k8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZ5CRA9TVsSAnZWagAAxHoP/1sJ8OXn/j1epDClg+dD\nCNjjEIWfiqGRAmbnspwb7i5zvTrkg/NbBBqcCCdQtwL5AaIjELk4B9t3QydV\nK8wlV5KIs5eRmBkl1vzDvMp+oLF9lLWtyHpJZdYcg0PLFyZct4nRESMkmJ72\noFQWwCBOyWb0XHed4j+AkJ9cSf8VXZgYHPyLyC1+jXboCInblj6IwfMq/hSh\np/z/L9V/MdG4kY/V2WFEvvPYuUL4Z0w2z7vtSXmE/oMBemqyoYNFTRtVbvx2\nyoCzknWe3GOscro66D3cVga4TBlgWTooFsaxsqrsjBXutTTIQU+2wiaDEVE6\nj3/LBSDj1vZ3+4QxuBh1Lf+R189OwBSoPYFewHgyfP5VMRpUN5moxV5l+9oj\nq9Hr5e68CoMsQlROqwxNrXigNefWmKiAJG5AVLSaxgUPwelQRzWlL6ZbNH6B\nU0lL6XzDewupq1fDFV7BaQSg0yGqWPW4Y5pqHvuZ4p2Ugln8SBlDZ+6SMJ4H\njWTABzfvc7FLolwSBM2guQaype4i2Mf9MRkyyvQsEI7sHq2q77lZ2q1i9z2e\n4FBEbquMxwFwoiosiLJjIfLjnHHORLGeYWw9fVTr1jpIbxfwkU8JuHWdQ//r\nbAF1hKQzF8xtwSRJDfXuX4XyPfGr0Bwk/IO/04++9sFik/KDq3EjlBO62Yd8\nUixK\r\n=vCxx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/rtl":"11.0.0-canary.3793a3143.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/density":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/elevation":"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/switch_11.0.0-canary.3793a3143.0_1618511481568_0.5659582649991874","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/switch","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2651bd7298eabc8f79d1218638bc876891776484","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0-canary.bc104bae7.0.tgz","fileCount":63,"integrity":"sha512-uQideRB3CAp2Kw8RYgW/Juqbz804/uGMgK9E1WRv4+HqMSULVzimfZdaYZnS6KHdcydmyLjmKv25azr5ZLxwrA==","signatures":[{"sig":"MEQCIB5xkOPI73VY0lY5yQS3iS1jq3FxXbzn5ks4GmKXoDM/AiBr/m19jg20HzMkFhCICp5ptxiArDznmk8toVD5HnoR/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJf+CRA9TVsSAnZWagAAM/cP/AtoiODKtLj/9/ijg4wx\nfQXl3w1LKKB1oENHtptVFEMKaXL+mQoWOEET9YpmwgF/GLYmoYAZkNCU3Wo6\n0epCcwKVxIrlQsGUlR1rpsRP9TJaHlG93exHuL5CCANW1itEtxg8Vze0UomI\nwQBJawBU0D44vamiZetstnzcvpIJZQwm5KuFIZ1TWHAhBX1bpkvK+n5v06i/\n2NQdOR/SVI6y8aXgJU2kuphvxLZsr5me+W82sJQJPV4udjd4XcMsZRbb0s6A\nsifqSOdM11KPJ+PguTIa60R+C/Pdfp/2MRRCMUm5X1HgzWi9JBmo7m+sxV5E\n7HPmh3ozLc0km7TjKoUeLpm6yAdKXvEbZgfWaUrLaI6F+Fx/w9L9glXtUU90\n9nicvelUibjlpVIf3gHn7HF/v4O01va7H4vFkN5c1OInweAOneZ0ESoA/X7g\nbzp5pl3SBFcbwu5hDMn3enUjNdxeBjzTuc/SHKdYo6y/SCNyEAl4wnVr94n6\ng2aOXgpHqc7mkSW7ZFnaiYxsmmwevse7l85oHG6pH9LOUykkYgJrBWDmX2lo\nyiV+mcY+lyO9WmQNq09ZXSTloGyvea4kLYb321Z4QYJLgDLzVjUyryonV7/j\nbEVvOLPorI+gOZwxzan1o4HHqzZus0qyQBjJqYHjdknNPDDujx2Yfuh2Ghmq\nKIeU\r\n=AF69\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/rtl":"11.0.0-canary.bc104bae7.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/density":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/elevation":"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/switch_11.0.0-canary.bc104bae7.0_1618515965560_0.6992212320666504","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/switch","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9f3aab82838b99dbadff412590d462b26524dc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.3f342c3f4.0.tgz","fileCount":63,"integrity":"sha512-gYkBBz7hNHqtNZqIAW0uQc6wkDDX1xf1ZZnc+lP0Yt4Mpgox9Zf2Cx3+02bLkz2Pp/1D/phgBY5SIkxJB05aKQ==","signatures":[{"sig":"MEUCIQCG1JqQ6tzjZshdfmopsbKls6ke8H8XuYH+gZ+J8YNJqAIgbAmR7EbxCvlmLbEVz5tPehXsb3ZNPe/K1z/qsn0AmuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQVCRA9TVsSAnZWagAAIiwP/0bAoEjbGf7+lHBdbqxH\nboTZz0dcAMmogBwYg+sDTy1Fpv36i44E68wwPmDhjoaT+ODVeQaofqIJSiG1\nE+1Ds+IlXfiZshCvwYe7u2lMwJL9trWL7NNL8iJooxrmaBhYDkvLp1pOxh0W\n8yCn8xhywXRqJK5xeM9xqKyPiBAmSVoSoLoSryF5+H4mjixSGqIBolYY7Hck\nC+XU/RV52gggxCmdYbjFoPs3T1+g0Kdjhzo9gzru/3v//UcJfxdR6o8GiK6R\n2jiPwr8czKVRflG1eMdbUA3dayNbwyRVkAHtIXUWl7DzsjpXnC0jo3sp/bDG\nD26bt7scfLyga7Nug6ypSQskWAJKJmjNeZnkWXWOo3BOe/6UOgz8sHyta/Bh\nRrsvdl8Wet7+7TGqFNjnSa/0IfpVWglnUDCV4jmCSgS3mYyWXpptmN49A5nh\nXWtCCshb6/0Q+UIWd/41QJh740T1CRRKd3YNafpWIDcdDLRTERE7adkSpnYg\nVHRPYgIwRPEiy/y7JSgGXFF0v8dm3lV/0bJ8pYDE2SvdoVISghw00in9Oqln\nRoI54T5CGoKB6Bm1qmz6lLMif81d42/sz5YN6FypDdAPYD92VVsmEN4c1pCy\nh9gSRJks77kimzY/aGSpWx4LVSppOCJuxZggos1KkguUT8RglfgsEG+gXXGd\nG2OW\r\n=Nhg3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/rtl":"12.0.0-canary.3f342c3f4.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/density":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/elevation":"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/switch_12.0.0-canary.3f342c3f4.0_1618527253194_0.8547808210228836","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/switch","version":"11.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@11.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46c43259522e98401cc071171064db56792c7187","tarball":"https://registry.npmjs.org/@material/switch/-/switch-11.0.0.tgz","fileCount":62,"integrity":"sha512-xrEMHtVhDJBXSAKnYubWSFJ0Yo+W6Yi1C9xcS5jqSU2G1FoxKiOWIcM8actlcHqspMC7AWh7fDz8LJVpugGctw==","signatures":[{"sig":"MEQCIF1PkUCMgvjNe+g3Da5jqY5WpUxAHoWKCpgUiIB1xClPAiBsixagvKywuNh2gkkO8i2zZe+2aw4eyJyaXIEW8yRa2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMUNCRA9TVsSAnZWagAAGkMP/iGyyU3jdJ8PJnSZpiDO\ns0vmvLRfE6KiOem/cUjozAaCuQzt9Wy0mf+GRPCLXrqgDhO0S+b2Hc6IeYrY\ntYUNYVmoulOOAHfiadn8odY9t45sJzA/UmKiVQrDPJhGoxBBI7GIBzqMx/fJ\nPkjeT7eGCOqfpd0C5Z6chnIgemBIQ3bf7KI8UeR/WQlcMTCumx/6nEch8ArA\n1gChF+OIw+DO2RVlBWR8QRu6HSYPiExQdnZ9n/Y0uqckfcIBiQ2uO+lNOcQ3\nSDLoPq7MhD+rNv78c97vPR1Ahdl2v4/IQFXNJjvjWQ6G1eF1vPAVNXRr99wZ\nzjJ0I/QqgvLPt+WfpQ4UM65MOOOXl1PW8FdM+2gbBFk8htJ3uHX4moTU229u\nGB+XMzz/Gwy2OzyRhZB+j4Cj1Z+5Q7IF3P2Dg0qWB0ODwRFF1Lej2+QV9IrR\ney4R+jDSuuBVENlQrLsbCxFxUz2JjZHnjc4rbU3jN8OMDJWSixA0yZZkQ7dJ\n4qHMew7XUa/Mu6L+eNA9XwGSBq/A8nybupM76VGrbouZS+aYZE3oi46MJaSO\nF2+k2SJKK6FjUK5V62q3d9vJXH+TPOkVMe1qDHwf1jB7GqOa7zgy52AjyWX0\nSczz+sAJrEbAMrVEWa+vl2xHUejWsv35yKkE+M/dkPIi1tHHw1ndQEXIR3lR\nXiJD\r\n=+KuL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/density":"^11.0.0","@material/animation":"^11.0.0","@material/elevation":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_11.0.0_1618527501216_0.42812576128240476","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/switch","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96931e48aae498e065a07f582e6ae2c4582310ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.2ebfc5374.0.tgz","fileCount":63,"integrity":"sha512-ir3jjyiHMSJtRHDWse/ynoqplC7S3yCXx0OrR7+EBhHcT9fJVu+DTKMvjP28gOXh3LspD8lL63ipqYrRhjEp8A==","signatures":[{"sig":"MEUCID/qYmvM+U49t4GaUybt83oldg+v7axxIGuP5ykzIAeZAiEA4BgD0dghWzQLqDn6+SRruBhUyR8bO+Tij+H/LEBZitE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefdNCRA9TVsSAnZWagAA0S8QAJqNTLaK7AqyZvqfky85\nLdN11qXc517jFiyTr0SJrzVjy3rJgw3Z9N2n9iGrWvI4uvG4Nb2qEoiWi8du\nuCHA8CJ90NwtyMYJL/AQVnHyY8uOJI3AR6zjd5GDOy9XWvK0TJDqCUQzyEe7\ns5iXnbjsxVNq8xxftjVuovPO31uXj776tCHmsZKUV1GAi5HXbLvLJDi21vhF\n4DghByFzQJbY2xk8qR/C8Q894dxOsc/qvRXbKudFAjjpHS73OAf2ugs2b5ox\nNDDWtt3DALyV/bfr3++HybhlnVHt1+fTFrZ2IcFrIaQX1z4ucQPc29h898y4\nfOO6HMHg1uuOS4OiVMxW1HmIUsMRXHo9XNX4zyzu/aahEEPsZ4SkQaTF6Mee\nX/BcOt3XwSwVrnOIgSqkJ5Pkb3b0sJvVAxFzFZfPHriLEw6BeE+s/+gtP/p5\nHVn00Js6nLYqQRmxD/Z7QhRS0WfKU6ceNlgUY1A4lIXilGFUNM9qDYNZCNH3\nwbasDvGPryu6p25TZiUd7qaViQBSzP0d8tvkAyr3Ok5bgZgVDvu4c935VNs8\nClgQMeEWS+PFCokeygAhICxobCx7jz03/K3HldZS95E1P8pDFwfLHkDKsCP9\nSYMyVsVFGzTvKtZswJPiz3hQYcxB0qh+uJAz8iUSyjIKnqeox8KytZ+YSt/B\nqpKZ\r\n=pRJj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/rtl":"12.0.0-canary.2ebfc5374.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/density":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/elevation":"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/switch_12.0.0-canary.2ebfc5374.0_1618605901009_0.5976527918609904","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/switch","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.5631828e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc86dc4f560e460ef1b868fc40872e9bd01adcf9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.5631828e1.0.tgz","fileCount":63,"integrity":"sha512-hd6QDCgNI4FK029mgdBKp9V0bi1osczLIBn3ZWrsp8eIPOjl/p+s8bGsfkxGuWH0Ezpdahn4gqvuuA8vK+KTyA==","signatures":[{"sig":"MEYCIQCnEXcSa8yoS/nj0f3rZ74m7k+e6X/wi7s7W6uO2uVLbAIhAPTo+Wg/zDWQvzAiTPvvoVWndoff49VN7yuIqev3RNUr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJoCRA9TVsSAnZWagAA6ocP+wQwkD9ltl4FIj8bEdCY\n8H5bdSl85LvAPwBPyyjV70u2k9t/WL55FGWFFPOdA6W0G+ZZ3Ihb+Opf6m0D\nxl2GXk4sVp2PHnOdIcqGv44hcaQ2YpDoE/W/Ij1fGITzkoHU79tkMTu8YOHe\n//I+y0jQ5jqTsUQ/MmOV7VH+9J2igvlTeKOVs+KSo7wQh5F9d/W9hs4E2soq\ndSFghHfgrX1QVEDiLTSglWYH0bA9zvzyR4gOx1lS6Hv6C5hgFMLxgYReADkg\nJZmO39Ir9z7iAiiZCJ8RzZC5IHy4vjbtFD961tzAcyoNy+UPKNqatul2wvVM\ni+23HhWFXtto3RrIoGXF6bqxjzguGJIj4kbOxPTXknASxNAmLmYGeeR+owE4\nly892MK3q5Y3uBQDXd1YoaeYUz4kJSQ2BEznsP3yK6nNrDPWRvrS+ldUiv9U\nJp36+ppPFKHqgvvjeYqUGX2TQvuKJyUpOpmEj6xRqAA5rIpQLxlNwqknYbJo\nQFzD3es4iCf+oysH5hgiDUP4Ta1c1tTaEDwWH6JaxnJZHwgKuxJGOj/D9BQO\neB44a/cr/mKMu5XIwFpDzHGmKIzJ3rQFkzZvvLO/dvhfaO4vj8C+1I9jA/C7\nhdcouVMpglOzdd9fJn9fWLqBF78A1um/IrsOLOOAbsDDyodQ0Y/hoefhS2n1\nQfaA\r\n=NSJi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/rtl":"12.0.0-canary.5631828e1.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/density":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/elevation":"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/switch_12.0.0-canary.5631828e1.0_1618645608223_0.801513974727724","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/switch","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.bd685395b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c62fe1e2cd48cd133b04fa61e8b118fd3a99badd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.bd685395b.0.tgz","fileCount":63,"integrity":"sha512-HcmAdKb8si5+untOGGRutD4wDzrl+dDkNIR1FSYxdJDNBPov99FemMg7DLa3aAYICgxm51GWknIbx9MU3QsDmA==","signatures":[{"sig":"MEYCIQCdWZ0tGKD7p9pOD8oeEAq7n9LjjKR7jLRRv4umkpjEDwIhAN+zt3GIbiM4WjyyGaoMdEeXeu1Hq07bO2axXWjKJz44","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":624519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7PCRA9TVsSAnZWagAAhPQP/2W8KaBUXQ9UNRYid+MK\nxR51ofGsCJXnbhEE9FomvvgOxPPFige5Uk0cdLLSbd7wtkW3mkBJCiThvfoe\n8OeWmBYurmmcDYsMRvBxh2ainUUWdBLH5ivIuLDEnIT/SsZQFG/eJkPmpVbu\nXtO+ydinZnyhz4J9J1XXkAq9Xb6hl7Ddtce+M0M0qhH/f7shoAIFW+I+4Dyp\n3fpi//yPw5NgVJN6ZEQMebz/Su/OZf6rvfvHsNy7bUtkBJQRmsEpiuTXiNlQ\nvn+yahI9wF7bCf6F3BUUpJXH9qucHd7Pfg8Fy2E66vxHXaexduh2F+mTYrVg\nsfhZ/Sbb+fzVv0811bZVw8awGIRaYW3oPnZkR68B9AwA1GzlDDq1emY9eGW8\ny64eMSire/5LkhufQWRop9lrqQCEuDePYyC/3AOYpf7MU078mtHMuhhRwX+m\noQTkCZiiO9V54QKGZtRvO4K44aVhjeJkfFH22V/GcuIjoMF87fKdJekGWmsr\nq4rmL6KiKWZ9KTUTAG2sKFsQ0hC1o1BqfLgxkyoxf0Yt/kgcTtuuT9jwuXb5\nWoQHrjPWeY4HtC857RTFKMmVbfkIGUq5njztdB2MKQgGnHQUgr7Cwb/gOGyM\nV22STsgUP9faLSQP9M7mhVKeduhjSEM1O1VSL70WXZ2MzSxb2iWDqP2iRRNI\nHFic\r\n=ZXYb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/rtl":"12.0.0-canary.bd685395b.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/density":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/elevation":"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/switch_12.0.0-canary.bd685395b.0_1618857679276_0.2957570312874982","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/switch","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.b52196498.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3084258b5b3f27f60e0dcc124c0ac1e1e35fe938","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.b52196498.0.tgz","fileCount":63,"integrity":"sha512-lcLGdpd67mMbpd9ODn71BZnUIv3Z9aVAiNVZzPFBHgmrcPBW2fL72eptniBISWkgTCng2UpzmhyBuUCkj9Tp3Q==","signatures":[{"sig":"MEQCIGvjj/vkKAjw1bif4RFsbTMabmpe4oIPmkqr99+/CSIEAiAgdINae+/3RcPUsdSCj1roq0wMDtVrANSfvNIkLXsMnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":624519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeC+CRA9TVsSAnZWagAALf4P/AhWScT0/BsOkcs8HjRY\nn1DVXgnaz3/yLyuQRbNT6Nxl0ArLybmcnG9bto1DBlvWmjJ14Nd2NTZYzxqe\necmc/urXBlJG1mmGgzIpZS69xHksJuRxcQO0fPS63tW8hxxgG+V0E8CrnA0B\nXzB1kIrcTdAcfiTfMk20zR26BSMMLtPXdVnvEf6YMyPShC2FivqlPn0bX6ws\nTTeHs83tb5SmTLoziwtg8MlP7/IUhNBMtxE1qpuuoHlhuVCPGGaeO4zlXtkP\nmz9866l8iY39QatC0LP9RnaH8E4wm6C6UtNgqTBkMwf9cOUBlS2U+sCw3hRC\nceLNK9MYfsFWCwcWqMOU4rxeA5xaa4cylXQWCdEJrDWLjkMUcKwSXLhA9+fo\n9u1cdzct21h/XRizKrvFThs2hdJOyQ1w7yTPNNplwGBOcRNm+CIkl6kIHGWW\nk8ZucQ89jhGu+EBvNxZ6NwLwx560hQKUjY23dVDwBPKauTH+sgh7R3aRUOuU\nrE055qYZ34OPa04PGqaVbu/dqkJiv/XwLlvJgbutXZZooR1yxjrIo21Url8Y\naGzBv+YcbtW5wncpP/NQ7rMor9v4wzN9/qlu/OzyFfHqtPP5/2nlsWVQKw2J\n8alaxklhxFe4pchh2NEjawO2Udz7qDxm81thFWv/8U92sEjURf9hCtZo1o7Z\nSpvp\r\n=IHKD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/rtl":"12.0.0-canary.b52196498.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/density":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/elevation":"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/switch_12.0.0-canary.b52196498.0_1618862269645_0.7784704904390065","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/switch","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b76d77387844b97548c89d279d4176e4fc04e3dc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8ba3e298c.0.tgz","fileCount":63,"integrity":"sha512-fgBPvH8WRr6owiX+9DQUTR7wwC/ccZmVYbis2hpaY+PzDOFmQhYZWKjklBFxQ2Aewm6du608nOuz/gNxDOyAvA==","signatures":[{"sig":"MEYCIQDR/4wTNnWSqrEvwJhDT3XdczItjwOs/IquCeMSzrnuoQIhALC8OWThw4tnF88nUPqzgY4zYytoOkGfjjtFdJb5/kwG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":624519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHfCRA9TVsSAnZWagAAjnMP/i9Tb/A9rBR/laCtiocq\ntNulQQzIjUGFAWHyRcSihr2FOMOcwBGc58+tkiqSEYMuSZtDZFS8LAUud7Pg\nfayanHMmoQ4R+NJAT7FIulPsOc3/N5kJ7e+fdOjRlDVCT/HvkLI4UOPEls/P\nB7fYsGm8rxMfR3h6R4FQllsQ0Oh7MnoVoofEdvzHi0XlIanHP7oHRGCHsaQq\nhB/SytBvZ1zw4nzVxOS85uE5gZtPKtVEo37ol4SAE037VaoP0ufcpXME4qOP\na1qdJd4q/+yTY1nxpsJ+WVnISznq1M9t+RV1VYgG7mM/gVY7nOvcdEixij78\nFP/2J+GHIYOBmXrpTXXNErOlnlESTcJItDdbz4hOHoPKvvZsSVDxGL4+z1FE\n0z2scjkUE5wAwb/x6Uu98Zs4scxlgKFr0qNLcDvcEzpDHvCi5Xa6ePJ4hXIk\nzoCBfeOmJLHe2fof6qJk3UGr7I/z4f+Ua14ofybTQTfSEqC1fHBWXJXNYgJk\nhVMuhNdMjMxwFQdTtZekDTRHU3W5vE08yVWil93PiVSQKXOn0PQnCwJVKmIR\nZX24vKyMjoHHigpiZ1s6IZJfNUx9y0+w3/TR6VeIcSrADKww+0g71qBt5ixp\ngL8GV/v+cAAwM/1Eznf5Vcw+uqfLp6yEbudrpBTKlk2iIg4zNRBv3MJ0Llsu\nIpz6\r\n=DIc8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/rtl":"12.0.0-canary.8ba3e298c.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/density":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/elevation":"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/switch_12.0.0-canary.8ba3e298c.0_1619014111327_0.02204654500050718","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/switch","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.c629eab71.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14a0550f824c857f3b3ba5ad068ecb4fe866c80f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.c629eab71.0.tgz","fileCount":63,"integrity":"sha512-ZtJpP/lFhBkAct7sh1sA4EcQED7TKerq2xXIma98dpf3EZtFdPHEYBCdsoLNCodlM+EDlP4/W+8tq4JO3LWUKg==","signatures":[{"sig":"MEUCIQCwAEcLkTaHjbzUiSFN0SHwfFAXOC3CIMZUQoPM5qV0MwIgE0o8KIHz++s3htIFE3XUmP1uUgfq1ve9lIu6cIpCXJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":624519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOXCRA9TVsSAnZWagAAj4MP/2qE78C84NvdT5eU9PgW\nCQecQ/tgoroIFLlRqodv/Cq7E2o7VWeL2Il1eWUoT/Aif54NZxnIiqdYSKXY\n+bQqTg8zsn7Iy64MaMR2JADUWoBa5SKkeJozYIvQvO06y9Ux5aU4ZWWfAEVy\nkiT8BIliNKWhpapldw75iH71et9ns36Mwy44WNC9xH8Y/fGvMgrr6NGihuft\nWr5RByfmfsCFI/bwulbgCvI6GL5IY7j+Y4djhTvqjcFNxtWVEEQ8XZhj4mNV\nhZUmHRRYUjW1rTSAeyqm5Petuoneyc5uaqMhDNsSKqu3PvhlNtmmuyFUxqSA\nJga/7PWBTRjBkgUG/zy3l30INUxHlZ8pg5z2ObSBuuS7nrBEFSizD1lQ8F2+\ntBEc6hMnbcme0T/2n1L6toQ3vzzaFZ4lDekKvdwn7qZ/Hq1kBVDErDRfcMOG\nZ5D8LB53abzmRfr8Yc+U1pn/HpCovxkcntHqYd/pTmBtPrmrW171x6sCD+45\n9bfQGPDT8zm3eBEDdF7jRb0/yJHuTsXZUE//4kNbZEnmrl3Udt6ib/KIrFOA\ntXtFfPX1+sghXOm9of2xRJHhrZAAkmN41vArTnjX7rAL/muF+iHqSuIEwpL2\npoz8RBhiYTb+2APZ+Su4uJl0hDss7Ko8DjK7nyhQJpGeNooVIT6HtxjGrfBt\nmKwU\r\n=TBCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/rtl":"12.0.0-canary.c629eab71.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/density":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/elevation":"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/switch_12.0.0-canary.c629eab71.0_1619035031076_0.9524587829715179","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/switch","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dbac64c7dbe7815af7a38e5675805c7ee9814a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8ace3b810.0.tgz","fileCount":63,"integrity":"sha512-sagNZiOt2zak2VITUZ39nTp20sJFObNyV56Vasti090NxP1bw8d5PRyYuZBW55ocBXbp7R9qNCpH1+d4nfGa6g==","signatures":[{"sig":"MEQCIErMOiWSQtQdXJ0PJ9ZerYWj/PuuF40rlSOcSRHl3uB1AiBQvBZkqU5nuy8JD1sy4nPFTB5MCTbxhJxrPvG/Yjxp8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":624519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0fCRA9TVsSAnZWagAAl0UP/1s+PJrx+91xc8v7iOAq\ni7CkuKirURXBr8LtNmiaSFAunItO51bSibXOGq8XK3eVnCefrGvmUftJYKPL\nA3K7aAbo2+cd1AcO1K4g42w2oIwJpXv0IokKKvKsjUg+lM5UHus5QXWu33xq\nauyiKIAzed6MGImi6Vsi3dNYl/gTv0b6vXSPzKOK5jmSgCR4ukj4kl6HPn54\nsfRMK7Ov/1SI7PlQU2Vz/yaapWjOIjRQT/QxzRXP1nNO9kOA3UzQwRfB00KH\nz1AbW+WVxiYrYiCV87hLrvH+geh2bBhMOxc+2+kvjjkGJxzsRHNSb7Atk4XU\nLRxsMds0Z1dikWKdsyuNzS+pq7rkA5WwT3cHNCMjsHOcsqSjjiId/2P63Boo\nuDg2Z+vcBhWQ0CO04FVug2jo7zH5Sm/bMf+2s3Daa8mvvDOdjbvVfpOy2hU0\nvczyoaH9idcVcF3WBLevtGcg90Ly43cyZ+8FAvH9ijpNdqEGzul4lY9XOU4D\nrG+p9Gg+E83sDKWuMzD4uULeQtTaP3ZheHnMCHXZoDk93Zil0pTrsPwBhpUU\nu2e7pmx8ld9jgcvRtv80FXFJpgQ2VVny7QkZ10mbn8krhgDYvTDrU2oqZwKJ\nz5B/97zODEvKOVgg0I+u+VqXsaXyuddGXvZEU/dKi1Ln6rK3xB0K+/5MUuig\nnVcm\r\n=eqsz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/rtl":"12.0.0-canary.8ace3b810.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/density":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/elevation":"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/switch_12.0.0-canary.8ace3b810.0_1619037470974_0.035869896997812845","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/switch","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d27c00f1c7e2b8c6b194f7a35799aa053002a5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.70beaf42d.0.tgz","fileCount":63,"integrity":"sha512-gqOk7PRIKc52yDABD37uraym95MmbrxvefUtQEecG6OjjcwYVh2pgvZnrCeMyOBeXBHB3ibB6WuBn6vizK87Jw==","signatures":[{"sig":"MEUCIHWzH5WtCPx+95UxYsM49FfgjvGaEpWgojEJP9dFmGVPAiEAuCaz3dV4yOgwFKtUJPhBCNRe0UI8DNVBdQih+jIEjbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":624519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/WCRA9TVsSAnZWagAAYEgP/jwaKNcR0GxVKAyK9lQc\nDFQjfMHiIAbzRPg2vsf40JQB6EzSdFsL/oZEv3WNaq+YIqM3Lqyx4dyBPYGW\nTkgp8eVSro7eTQ8QAbOM2ay3otV3QN9FFDMbSEVFr6ryHmXbUhLzr38SgjmW\nJIsLAi1EGSvQ8LNNMu1CE0le1tUEBrTEzXhOtFVveOC8uqEzGwahH/afKC7Q\na4dHJqFcRfWcYx3aK2tYoBtRhFytUbZFlePUluDhvdcQelLVqvPjmFGZTwmX\nnLMzAvkVbFnSImE5hRsyBHRp2wikYuX4n07Fkxr53d3oE0LUxljQuieIq2Nw\nRBng4YE7nnQ5Y5i6tvw3513iYnrFN7RzyMn11j3JcoHSYOfI0U2E9hw5KmDp\noLFqpMPadmDnD9HrqJ0B/A65+IrrySWmOfLLB1guyz3dkKEXaxAID83b3JuA\nBBS/ZtE+P4PlTdsdWc4xvOYFQT01zeMFNwElFXcnYthP1wrwHg/JHaFs7vX3\nG1/8TPxjl1Tv8kYRiMPEznNiG9Jf+8qQMwS7HEpHI7XifD8xI0QB02mADlGn\nFWQd+UpjU94bneXefWqrUMJPwpKROK1ZiUDG/OAxPvjrhxlTUdXY13tWQ89q\n3rb7S0+7AwGKnW3/J9fQFps0G3doomPIU/29CM7Euz3ikOynTOVvfYRpaxRB\nWg5s\r\n=9r4N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/rtl":"12.0.0-canary.70beaf42d.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/density":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/elevation":"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/switch_12.0.0-canary.70beaf42d.0_1619038165749_0.9759469171512003","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/switch","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.cad489689.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b1eb1156619c505384eeada82158b1211fdc8b3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.cad489689.0.tgz","fileCount":63,"integrity":"sha512-biZV4Q6X1q+SppvCp/owJWl82UsW2m6ACYRKYiKf6bD8PGfMaSuwsICMft8pFFwqyARmNT8nWPvs2wcZ7H+ZQA==","signatures":[{"sig":"MEYCIQCO3LcosDo41zG7HtTkrhRmWAFeuCMxV2NOAb7OLoeuhQIhANlmWiVGyTNzz2gtbiGhEqXmIohgLV6cYWjO72nmYFE1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":624519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakZCRA9TVsSAnZWagAASxoP/37O6ErbVW/8qTnvRdkX\nHgWqfnUdpTuSqA4aKB6WsZ/+BCndnfdFWJDVKBdGnUfSZZlCaEIagC2u0mI+\nupYj0sstR0vmCm9Q4pGkzz2zty4RE8iU7xpDR3kE198XyWlFl+qHWaGAJkEq\nCh2Jm1lLP7imXCh+W34ayr3WTUPS8qMfXd+c5Bg2W6L5SnNYN39Hh2O+A4p0\nJK8gSaXrKEMSsOFhiybQaE3UOqekZRPU5AufNqT4jvuCwomsLrlz/SkKbUY8\nJ1++4lkPokrhrHvkTyge7FyN2WIMMuQO4ym/S9mL9M69/yy7d686HYVyFpJE\ntjkGW1dud47Zo0Rhuj/1wyeRHQbymwz4FmrTpGtw+qbcbJ6xfgFvX3TqdqZb\nA1FrRNIxykag9ebJnjvJxlu+aYFoitcZpJlbgMcJdTZ6aXhMKJ+ZoqX0GqM5\na6O0TytVwZSRJixh02+Oejo6jgyhshQYF+a4/I2RgApIG67YIRu+Dzsku1IU\n1rupEpcSnZ1uH8K5kSA81YeMo++1yliIjUwb5wnEumGfN0rd/nYOx2RrhZ6s\n9KWFykBnVs57FFsMTH6PrsoZDQsYEfCqKY44QzXjhfyrnD8foAO5vobzmIwv\nmsQao9J0j0ztubNiUGNWMfWik3DaGCeaxqATalbdAlY9ZBqoxvXSA+MOtm9p\n36ZL\r\n=Nfz3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/rtl":"12.0.0-canary.cad489689.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/density":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/elevation":"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/switch_12.0.0-canary.cad489689.0_1619110168577_0.3213138346467832","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/switch","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.d928692b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"435c9ce057ef0eced9e482ad21b5733837a2f480","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.d928692b5.0.tgz","fileCount":63,"integrity":"sha512-kzmX8kauYUqJ8J5hH5EA/1n24859b4v0dPxrKHInHHtzRMmPAskSVaguUuKksN73gtQ4GzvxuE6dt5//SnEWjQ==","signatures":[{"sig":"MEUCIQCnsx/CHV07SdtYhIJ4YsjPP8Pjl9EXZAFBzRwkqZNnigIgI1M7VzM8H5OD/zOQBm7vwXnxQAN/4n+yh/7rYjuiYZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":624552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwUkCRA9TVsSAnZWagAAkpYP/2JjSDpk+U92EPaLASst\ndMb6w4FvFNNTjSLvMEJ9soEHlV2jo/Fa98dyBCEQ7pFWPVNyArMmqcF02+9V\n19s8pD8ckjqUwfa2q7fPXwdbYxXE5l+3mdC5MvY9QmsFV9kIav48VQug4Jc9\nos+P/zekWBQ7YGXufG0rF1Y2X8h74SoM91FfSZnlj4vaLVWVrTW3CgZheB3q\nBZXTRbdBBO+iBFgifc88++fgRBKLZXSaZSgQ5akZGys033Qz+Xk1DTPTnbPb\nfXXM9z40CBDfvyk7iwrnFQB/mUcUx3IAZxETQivR0aXRDbMNmJZkeD56oWkZ\n6nK6wYM4Zxxt7GP76UzQUBbHZkXXlNZn6Xwus/fAbgD5QDn2KYwozbn+Ou2j\nEwA6rZyrOBJel94LsQ10NL6KEY+fQdBQT57tuZOr8fP+DRu0OG/21Qyc4R9C\ndV0rN843tTtEyDSRCYfndPy+Kdpd6aZkdbMJ55ptJqboPUGv8GDNBiWlOkGE\n3A7LClU3LjGpZtrKA86yI1hd6dfsT/+8X8QC/ziIqiUh7hdAuLN7Y1SJJRy/\niFSmU5+awfdiRYFcXv2LRh3qmTkZtgfC/C0tq7Tqk0zSMpcqFmD6MjRsOzcS\nGzEfKqX8tsavUzOQ3tJvp50bAv0ZDn2jxgmYq+pnyn57o1xod8PL/FSrBK8w\nIDqN\r\n=oJDH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch\";\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/rtl":"12.0.0-canary.d928692b5.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/density":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/elevation":"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/switch_12.0.0-canary.d928692b5.0_1619199267946_0.41843846526191264","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/switch","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4237512a9a2d127f5c8db86954859ed1473cbd61","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8f68de8f3.0.tgz","fileCount":58,"integrity":"sha512-V7jO9C9VpTYfHe22uz+T1WlCaCs9lUqjnBhHnAMKY1Hma5H2H2VVS0gurGGrkbVXHGz2MHt9S6PecPqmPLKd6g==","signatures":[{"sig":"MEUCIQDEtyw0l5yQgxCDH0nrkMfTAPFfWyDS4xVmXWnY1SSCrgIgE9BNAYgblPojnqGyqtf5qRPZCK2WmE6M4juW0d2Uhas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw46CRA9TVsSAnZWagAAxdsP/2BrXS99tySnsF2yqpuB\njzv6ONdEmvzLv4Vj+2kRSoT0JZrDshbBsXeEZOo6j6ZFx39rDcgMiwWZfUjb\nQjxME9znjKH82DDuZeQ7RbWp21mwYDmO2OgddygEr4iT542sA08IflLV89Oo\n5d6oNDbZF3nf5Kl97I7oUzIxPlbnWi07f3KdwYgBe5/9mUhu/scmqbuRhRVH\n31VCKsPLHNKCVJJgDhEqs32mWvlQTopMgrLnTqo0UF7GqudqzW55bLtxYV9v\n8R58aPVMbfK2s2yzc0WxdlBvJ2knMi0B8TyVtgd4XUeFc/HdRKzNP+fl3QoH\nJMd+XN8vBTS7CJF+H7XxJxaue3epaCEg8IdPO+j2gT+kw1sUbffOc0DK4XFW\nmtGS4W5SJOXDhvbz/YmsP0fnWGMDU/kghrlkzXc3CVfUPawegPCss/w4yovA\nz165ePVPIX0r75mWT8Qwdg7nWX3lpBNaN4o9yDq84yO8o+9d5SdqqdskFeU+\n21p367s/Vn5xHx8ZlRGTokAUvNTh7GRKUK1g5QHoDOzM2IXww/5F0tBU/bfy\nkotnhTmcLbsvFvBVFtVKZTcEylx8NjxqllY5nDoKRHIoH3Lppfz5XpcRBloP\nQwe9no//BU1y6ys2jBrY4CphFU1YT2GNvYqnlH1F/+LVZz60H7Pi0hIlK5H2\n+T/C\r\n=gltL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/rtl":"12.0.0-canary.8f68de8f3.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/density":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/elevation":"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/switch_12.0.0-canary.8f68de8f3.0_1619201593650_0.16696089077755305","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/switch","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.05753cf77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"531088bfce5be29cef49ea4b0168dc2ba3de5a3e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.05753cf77.0.tgz","fileCount":58,"integrity":"sha512-/7uBs9a1OlsrL9FXTyTH5bBGKpQeqATl6M5Jx/fEbJPIDjIRdoMXRNAl2GrQ59HSZmiUUaeRkfmZ8uoRmXHP9g==","signatures":[{"sig":"MEYCIQDR4rYjjcu06zfkVFdbadj+1hL+QKmz6ZWxdG7ZHVTSUgIhAPpZzQYHdBHJOIZGifYRV27YX7Li/7NeONGXuCM5QvBZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1uMCRA9TVsSAnZWagAAXFAP/0p5Uj1LoPvyPR8xGRY1\nDkIiKb2BvQ0q/GUosfaq/+J7NAIVG82DnRsMzUAHL4+l1ocFucGGvhVv2YMw\nBuRDj9KHKhUlPxUwA/2OnRxHZQesxzBTsQ0AaBENriOwGXzY6+APFyTLHi4D\npnrvZhfMWj+GhDRG7rndOv4O7J0J/nFsEftm7OnwmMr03bTZwiW0BmSKaYav\nRAca2iGYOqMasTqQfaiNo5fjmSDCHXIcubyIhXQg0GRafCjUmM+l5blOrX8r\n0/KxBY1Px0eaC++iHW9v/0Zk6sdA4++HU6EeGgE9tf/0kjNKNChBaRvvGrTJ\nlHuOisd8hX17SJNk1YmICCbOURN07eym2aTyrMLP/7jl9QarjaYWn4B0mX3o\nj0xbFBwQMOuAMEOTMydqJ9aX29+rQ0WmGvWcxImARpJIlwWX4P26gXK1w19O\n6aS+jpLUIqtOtjLGU24IdFiFp9PDVFOuBZV2I/aTJK3JApbVld8N1Y6kVw91\n6Htz9ZDo6RhpDl1c5YR7M3MNSwNCR09fDLj+0WYf+y+65c23mO7ShmBwdP3p\n6ggM35zwnhQDmj3LUh1Bod5Nfd52+YZPfRxqSNayOCSwD51RIrIbseaFAuHJ\n86bTEQAYrKRlnrm/6tFWXR73uvSqRoUjCCwBsnPJEUSEbQHK2SApOb78B1Wb\nseWy\r\n=pJKP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/rtl":"12.0.0-canary.05753cf77.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/density":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/elevation":"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/switch_12.0.0-canary.05753cf77.0_1619221388141_0.1513792197764383","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/switch","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f06cf10664f07da2ddac6b27e3c37bebe569e6f8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.ef43e6d96.0.tgz","fileCount":58,"integrity":"sha512-ubTrYqDcrls4cnVri3QUGCGm43K+yrr1NAiiareQCynuOBMppQHwRj6ko3TS4DJRYXp82xs78AII7xFb0A6Epg==","signatures":[{"sig":"MEQCICmZCjNMtmhpiJgwKS2sYqeUJAilJRacybH7xHjQjajTAiAk/aIoxIedwt76CiWIiXjhfGODPDHp/aFf30L5IIgXRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":622374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg10ICRA9TVsSAnZWagAABpEP/0aO92WoG4MSGi3w4tWd\ngWMPOEclwChf3Wvps2LS5eWAs4YjnsbHOU5EOtghY2SBuZ93pfYdLdmI+Cbf\n0vyE/u84D2y1iJ2B5rjgqME6VQEOvrkhUPhaQVPfcWdQqKGjtSoQgIv0YEHC\nHGa4lXphj3rmLH8uHnOeDtrIS7yaCD6XIyNozUJ84AqbVwPLiIbhHKjBjExh\n5TwRwbd0BTMx1S7q7/vacG2LsQdZvvnrIAppD2cv1YXwQlnfBh8OzIJrVny5\n3DUDlK+k6A+TlHzNTC3gj06ut4oM4oVUlwKo//s9MXy6OWOf6kbsGMB1ddrv\nHlnCVkaW6awN6Vl5yIVW+urePghF5bvm6ldYKteonrIHiPFz5DR2gL2Oihcw\n3wQRGz3W8/tEOy1aoRElxVpom0udvF4taBZVjKC4Jzu8N180BcU7LPAdNBVa\nJLKXJ+tFK0WaOuUedVQ2KBDgAZ6KPZwuOclgwk0kMTPzAkC4UEQ4FkItGplW\n8ss0OL+pQOBAwiE3b33LQSK7YfJZuTrgovwcPqTYpAswMVVTijG5Vwkq6aiu\nR0OX/xezcOAfqVDpC/AgNxD3pTyawYCBKfbENO79zXvrFXUxnkez7C2duh2x\nYjM3n05gHbo+NlUK1lc9MrCcZs8z1exEz4O1LRYhods5lUaPXm5qOeoruA96\nXz2w\r\n=ucyk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/rtl":"12.0.0-canary.ef43e6d96.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/density":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/elevation":"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/switch_12.0.0-canary.ef43e6d96.0_1619221767877_0.18759868462218598","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/switch","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac5f2835f480604199a5a6a4f0790b0de578f236","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.197f64fa2.0.tgz","fileCount":58,"integrity":"sha512-f7al6QKAudd1JNppXtwRgvD3qBC83thFLTxMdRKuEm+MgHh6U1SWNpOldIngSfIWze2dn5OFzig9A7eAuh7wlw==","signatures":[{"sig":"MEQCIEj0xCvIIzD8Ywo5GpjhuiOCYtwDj4CVGAOsbA0rfV2RAiBivbdSogrjnC7VjcuUwwASSipwGiQHOxovxvI8n98mTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":622374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvPiCRA9TVsSAnZWagAA8ksP/A1Qw8/UEW+byWy7zely\nLafQBVZFLY7Zl/7XFjqC7BIqIEHbziYbX44pMKyNsg/Ebqe+bfXBQ7p3yAzG\nRNCAj67vW/igHo74bA6iHzbuzn2aooPx2Jz6Ra1RYrmuddthY2JdiswqwuJj\nuqb6R5mbA7hlGU0bL6nfev6ALocijRJjgAQRGlZELgXxVAKd5o2ubFVp4DYf\nLsxRZGBqc1NU3XvgP6VNFmHjjHwuQKnWALvSBZ/XY0c1uFqBeL131wsA2nCg\nQRbsvukC8b/BGVTYsUa/qAe2wspk/AlcGN7kXJZRE4hApRoWBCFR8xVb/UVT\nnFAqHN1OQxhOkZXt+/Ck5xlWRZwwp92rOsqzkx9ZSDgXFwxSgucVOuBMaWfC\nrylK6ABO2ROVZOjmQgLo72rTdLd4u0rxRngtiHSopVEQS+9pDejqvOZTw2D4\n9/nsOp5Ht9cSiT9YcEMfUqrE6jPJgN8PbMPBLpBFqYTOHB5dNwUbkXpXlLEs\nnrulkkDFxlTx1XggkfFyd6fN7I9U5hMOHvpEEV/cB/BKW9J2sEwK5kWraY19\nvUMNS+iyGSeyjheNQ5G+usdc96MQyTXvN/goKgrIcX8rTj6jSmwjmrbfCPJr\nOwsEXjW8i9O/HZk4vC8K53pB1a1U/sE8WlOZGAGyL5jgrDt1v+kbaAToAaTN\nLEZR\r\n=zNNc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/rtl":"12.0.0-canary.197f64fa2.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/density":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/elevation":"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/switch_12.0.0-canary.197f64fa2.0_1619456993996_0.32585917056207436","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/switch","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"108e1d873160d3d70ca687adbca43beb941a04c0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":58,"integrity":"sha512-dJgYnfonzy3guA2+Ko7uGxIxDTmqdzQT3rvDjOX9yFW7cRjr3f/iOyjT9tUd7BCNLzsWf935jlZJ2mG7XWFIog==","signatures":[{"sig":"MEQCIGK/ouNqSg3aHbAQUS/Mb7fG9zZhdmT7cH5x6WbdPF6BAiBMPtt5C3tWUQGnlF+UhYQ1MLp8goA3gj+xJSdFPTxPzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":622374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2a4CRA9TVsSAnZWagAAOYoP/RK/XuDQVaVVvigmYRud\ngpcWKu4A+53sCEEBHU5x95CDNzvMNPfu5nIqK88XY4/afqdYB2CI3UVHErzL\nlrxsJ3cfkmiN/Qbg/yHTkg7L+i+xMyvwB1OnhbV4yHS529X6lUbQKwrpjPjg\nA/+iSF67cTA1Q+p3+Ry09pqfDQffgUs3AnwCA1fXG+ihhGYYW+EavBhK3WQH\nIB9wZra8ABWI9pvB/D4Oq2R7z9KEGuUC9bHvQ2jM1UuPCJ0ECwCgtpgMdrW0\nGr2jOYAHFnW6DWpkrAGvijb0zdR8XpfAByeEfQnVYJ4xRXjx48vcCfEH5aEm\nR072Y5K1mSRgww3aJMJqtwm05Cq8MqQjSJknuigG+hBqbnskoo9EmhvftC1A\nuEdwb+qP2fB9c4FBubGvGocIXBQE2qBekON/tDhxcj5/5nDz4BL+g5ZI+Ph1\ns2acZpAj4RwzREpzXjT0VasPYjd181VARzuBmqZ3cvJOil03UFH/RIzxyeeu\nR6v2uxC2AQJ//LNjtJdamDN5AxKzu73UAs70SEKLPGkYe69/ySUKOC5qmBYU\nCPHobznXyD6kRsBhvAWMC5N/GEf4lBWtiN9ma0e6m98vtHRB0R0a1Oq8FJIT\nyJn9UddE04hoSkeBtiYaVyRc2g7QNxf2VmAJ16tNhIWMZ7rxv7gntlYbj1hu\nKnDs\r\n=T6Gn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/rtl":"12.0.0-canary.55ad2d7d8.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/density":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"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/switch_12.0.0-canary.55ad2d7d8.0_1619486391404_0.4330815105625976","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/switch","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f48d59191de86f67436293139b3deaeb6580c87","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.ec4ac5234.0.tgz","fileCount":58,"integrity":"sha512-k8hoMMeut6mGZpxmPmxR9AWrPj2gWgyT9S1KMAZ4soBI9C10MZM6NRJyrwIxIzrxv3Gx/KdMC9fsrF0/9Jux9Q==","signatures":[{"sig":"MEUCIDXLEq+kmEWO2Hu7g7t6vCksJZB9hyraWSyqIRkNl8o4AiEAlIFWBzidZuE0+w5/Ew48MaD0GNNfcI7V5gAe9KTKnxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8QuCRA9TVsSAnZWagAA6BEP/00PgqRZ22GWirnj1zLJ\na7ZI0o4sgY/vzeSM872ikZ6AfpB8mk6XT5SHtYJXMRE0XWAKwZtdSp1gR6fD\nsv2gNaoei527KziIXEbVo+t0d32zBupncjGYOLtPfg9aMUjb+pSvfzftpOID\nTqVXDdjFRh+60WMtIAETCg/gj9PLi3tK+wYde7ARFGvDWd7BwLL8WjT6+0Ns\nERLj2Y5moXrTkZLhOkN3mqoN13cB26aAWqgZWqh6L693WCEGFivMl5lcbWZx\nI0w9xih6zvaeTIDJDfYsKPYY4hIfXH9kaHyT/CqW1WKrFoePMa95ostaZLX1\nV+xhkU0fAM3WGfFjNgwDQny5R7Ub1Jmuf5y7u7zi0LNE/lQGf3TlDCigGizI\nazFQfqvNPGIqe+vZJOJm2IbKvP+FrI7KbDCA6euplkTJWBaae9oZg7in67Sd\ngZgNsDtvk0zSF+75syR3/RWeSB6B0TsDqhQQ6oJxynPM/O1DePUh4ks1RGWu\nuLB/VZ3BTzmnA4n9X2wSHt55VtvLiRzqRYiPrcl5kmQC6iMVy1drhgiKIp9i\nmvKBtTza+aIIGQF+Z+nL83fVPZNRFeBgQthqiA2/x8L9+wManmMQL8aBHn+J\nW6JRs0atEN+q+4vacyewau//bMASfHwzqWRZpXZzEtCv+S108XUlWNMbH404\nDwr6\r\n=K7sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/rtl":"12.0.0-canary.ec4ac5234.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/density":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/elevation":"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/switch_12.0.0-canary.ec4ac5234.0_1619510317933_0.38615841997943035","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/switch","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e02fbc23621e3a0f70f0790857bcf5852b830b85","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.b0579acdb.0.tgz","fileCount":58,"integrity":"sha512-fk5ZKw1RqNjG8ywjsrkVbYvgFWfSLrTe2LB7204iCMMip1IrNhDmcic2pif/scCOjEMGC7EbpM3FmijiOGiXxw==","signatures":[{"sig":"MEQCIGJWeJuX3A4WmoTRUxYiOEGFzdTrQByefY+WWD1Mx5rDAiAZdBu45v0fkY3X+pLarj0C/gu13tx6Eq/CiXsGuLd0vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh80KCRA9TVsSAnZWagAA7JoP/2OZeAhJHiaq4aOx6MXN\ne7eQNbaXOihFDs0bdSQLmdAnh9+4f2jkLfDI//K9uCtNk34GwNFMf+oFN2Le\nQ06FcR9DuRcvMjF/LgQCv0SVZHF17z/4QIjhk2p66deP+nUhZwEn0nm5LoYT\nXdEXjT0gs7169p3drAXdR0vRJOZUX1pvPS71i4dcKRfUfHqpQbnQv2YsM7CP\n0URiPUHmrpHHIwrewHv24dd9NpKI5T7YKzbVR54FC/fhYS59iiQ8Pj/DOa2z\n5qlAorBvjFJjP3iK3avM2Hn94y1ivUdqJw3T6qsLs+lkbqai44yrehWvAFFm\n3XhYB66YDiKjnd1rFNs/OlQEwZngSOiqRjypWaljxA0ikd8USvuiEdSJtBZ5\nubAWVsLQaIp3RNb9LZKmqI3KDQmbZ9+pyks3Ze/0+tan5y0C2dJGKYYqZQBs\nvyvty++QaVYe2Hk7Itb6fUWXEj6yyl0EfZ4BECSJvR3KYOSqHKWR3BrB2vdL\nqKGVdQ5UaJkPbU4+EXJbietIXDvBP1I7jDLRQzaKWD1yTvJp+7x/R8UilkWF\no0eiAmB5S/1x6vLj5BpwTHfiDipvkwDkxGjC6dr1ErHVSKfJGP/GPEKkRpc2\n6LZUS8tQMdbemwssvfSNQ/lzs0r7Jfgk45gxHimp8+63kVUv65TFYHykSwh3\neCgk\r\n=jEMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/rtl":"12.0.0-canary.b0579acdb.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/density":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/elevation":"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/switch_12.0.0-canary.b0579acdb.0_1619512586254_0.041516030440466034","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/switch","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1c25a00cf42d54e40877f179b6a28973e041d3c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":58,"integrity":"sha512-b5bNsgQNiRqyfkCLbaD662cNHRiKPxxywfLj6p68ekyMMwmyXWnMJj94XcR2R9qpUcDAnW7fkgodYTMAcB1fdA==","signatures":[{"sig":"MEUCIQCGHVnIkpTXvONQ115s3rPV3GOGiQthHJQe6nGw8fWrhwIgU86EK2A07acBvyndQouVOCJCsJKE+Yeund7B1jlnzPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHrJCRA9TVsSAnZWagAAYhMP/RTijpmOG+IpUNNjtxst\n8TxzH1wo4Ygw7vK6DnojOVQF9gaqt7x58Sy1x6tiaJ85SQrXemhtQ7pkpjee\nGMpCH8kfOUz73zXRgSw45AQOE+B68KwNK7FXqoQbfqIgwB9Pt0McZ538mfcZ\nsBFdORFv4XBYS0jGWwxUn5VWODFMo1+E7Zgm0i+2C+/7u+4JQQ5HQk3YhhFj\nfMsl2ay3mgng7BHyhcaSA+MbYXYpJyF1/zQCHgQLQU3gMy3/dNo/ZbKN9/tg\nxiyN/Mi7bWuTzwdgZdRQA6SLWOkIy94fCHxC3EQ+GKGrCvlaFYThASV3YaaZ\nMfeKlzEVC1RCaPZvnAN3rompgZYiYumCU4U0C5m2irW45tLb8XK3uNPAvd43\nQjcjPkgZVY/dKSbId5NqYgFYJ4QmfQsVfLeb8xP2S71lPt/N8X85DwE7M+8m\n34joUJWSNq9yppnQQ/rwh2N1BjtO1/NiTuQfb9CiVZSAnJqciDIzAkJCM1Na\n+1EOoTowJ1Ueh6k+igVFRscNmWxdsGfoQ6E3pmxQS9tLZU+jH3zLGUOxhJBM\nIY0j8IJDWMe1u+FAzll8woMZzdsprwCvpeLZr4PNJjFq0kxH4LbU3VRrEtIZ\nNpGi/ELBLFZi1KCDRtW6JRztDqC+leXpLkV4uF+iRhRbL4aH4gfNEcc6KHaD\nkz5V\r\n=SPem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/rtl":"12.0.0-canary.81e2d4ff3.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/density":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"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/switch_12.0.0-canary.81e2d4ff3.0_1619557064844_0.42099828648710425","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/switch","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acfe8cc333c286a494c793d9a03e6b1dea5207ff","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.c8edee52c.0.tgz","fileCount":58,"integrity":"sha512-XrKGISJ+TzS7j4JfRQma8+hMeTi5BjCNr9C/KmZ8e5RaQ5ufyDIrTFphcFsFSZz/V0PA03enbLJrYIH/dZNoRQ==","signatures":[{"sig":"MEQCIEYxHE+8929ZD2mMLsOSruJX4Mm8ZjeZcuR5iCF5CdeQAiBU8HVny6+Y0utjLfR8A4d3WFlMnSIM8C1Io6w84/Oodg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYgCRA9TVsSAnZWagAAY/AP/igwNP819nC2wtKJrQOI\nqbZZqq7jeOTyef3nD/Nk+sZFo6G16ouA+GwPvqR6bZIkJbfa03f81fe5PUda\n7xa6yj/KD/uuEDR0xaFTBLfgOg1YcUIS0veoGQbQOa6FW2GS0K8YlxmNmCZF\nDi2hf6ZFlrzKevJGKLS8+QoOxvElImY4bCuwb3tcL/Rq1OA1kLnyKKa4Aunm\nNudsIZuZnK8dVELTeo39AqMc09x2gYT4UXllW2FH6gyt0FDTqE3t1gT6uVF2\nisgpE+/iACIehO1aq1Mw23bIaBpbre+ivHeHOxMZ/7mklMxmyxfc6RMzrnka\nNM2P7/ZvBbXb1XVN786F5aUmBo/U63K0YBe1yrv0iQpyTcAD9yAmF+Xd1QPG\nZ53cxivl3rgXoLAYD2l6ZrYBVtaGKm3aAiiSoIoVqbHS7clTz5J5n5Wo6WJB\nUAwsKcgU/sQzYpRJpGX0+i/jwJySfbXWVMbLtUD4DhNST1fBW2U72ZEK6Lh2\nIY8bPJFgDEyXqHIQ8YJWOCp7B3QWtZlNrcYzQXq8Wtd2jvizoKfcp8OkjkJR\nmP15mOJ59VkBEmGpOT3AIqkkpX26F9azP0uEgLBHC3fsiSg9og0KjSEMWFb9\nSPgdjsInZ/Oi6p4QF9BM8KVHXeGCF12xcWZ3vUJGAsjolDxlBAqeAnxOsBM4\nSNbY\r\n=THVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/rtl":"12.0.0-canary.c8edee52c.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/density":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/elevation":"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/switch_12.0.0-canary.c8edee52c.0_1619559968194_0.9901983041673015","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/switch","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"202687916cecc2f27da5298900a5144536bb87e3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.f5b6110d6.0.tgz","fileCount":58,"integrity":"sha512-soV0ZKjA74RN4VBe7gO898N98p6yb9qLnulgeAJVA9hPQxPIIDCgBYpyBRotq1heMVa24epI+eQFpQFowOAk0Q==","signatures":[{"sig":"MEUCIH3TN6tHhkkP79ay9aeP06F8axRKzYmwcIpLSbEtFWZUAiEA2jjIRJE7i1vpyiFZ6zcEAtnmAtLxRzSJNIw5NPuJGkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIskCRA9TVsSAnZWagAAjA0QAJ3Y7YUyY98jLjjT+KH3\nFMKhE8jaZ6/lI1rzaQ+V5/ZNHjA+h/F8sU+yAhyQ27wp07GXeTwmjUPdlQvQ\n0oSYvL2g64uIdciQsZ1JX45K4Z3ReV4bzZb3wCQa3qa8sLMTXfo0DfUIXiGl\nyDVytrs3ydgLFDA35P0KZsLtQ8bGgHaKlAY4+2BB48iVc610ihVs7RuDGMfL\nBScq5trNxJW9a1yCgIFyEYMcZs+xqCHw8vBco07TkzERDm5aoLWYjlmwPfHv\nn1PDIdzM3IGdOAvveGiaPprqA+dol396XZH8710vsiGzSWEPitYdafgnfgnx\nzWPRS09tUYbvIpjH8wzp6UNBl4RF8aceevAFDxKy/3a4C72xefjadd7wqjAA\nO6bwvtem6+/OtvdoLO8i9V32BOW28fba3Haa/6iajZw4eW9+J/E5wVB2VU0k\nTEZ33isvE2HJ7OuQpV/BEyVHiN4Ael/0eI3TG0Bz3BhKHeoZmdCk6tqNaRYV\nXl762YxSUgiYqhxQBKqpc8IeqpenHukhERg9kt4D2UuaTGg3SwM+Jecr5Rnj\nzmI1u7awcHt4vo2nXwxgYQECCb/rS/XVAzvv7AUmDfK/wn6+MburANVFQJv0\nnlRM+xlHdlggp4vkMMmRCyfgFSSHr9zU2qP25mKNkxC59RTCV61YyYx6u7yp\nLyTU\r\n=M1+R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/rtl":"12.0.0-canary.f5b6110d6.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/density":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/elevation":"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/switch_12.0.0-canary.f5b6110d6.0_1619561252374_0.9728105769868267","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/switch","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffcdf09dc110345ae1b4b676f4334e25455b8594","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.cee9b9e22.0.tgz","fileCount":58,"integrity":"sha512-QlV+jyOPUk9Jg+jqyC5pPFAMNDc0wG7IMksWg3XjzPNAcLNWxV1yWVtC9L2vMhjDBhlzh5Ab8qhqPT40MQbP9Q==","signatures":[{"sig":"MEUCIFZL+fzlTRcJeW8lemGFVVivNfpoaTUbMAeesknMBVEHAiEAnJmithkfRle6GNI79k/e1Plm7gYJyrfcMspxpDkg+iI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKiLCRA9TVsSAnZWagAAUAAP/iGxIsVMJukj/7wSeAdU\nTEXWdTAyz7CBzbS9tecR+ZB8V7TSuTlv6PeHX6WVzmAWhta4BaXcO5Na1qlQ\n3v4r7D5oggfIlVTA/HQI+9T4ESU4WehqHxMJBqMEdOL6jn6+2ERn1+cvQXCL\nS8RqzAaZCUAP7jRV6XZaZ0hRfMjMstBKLKz9Sp34t2nT9DIligygtlJQR7I6\nERVWBZ441grlk94BqwJX34jp7trdRoDaFukVlxoM0WJv9AS1Rnn8JgZfK/d6\nrETaax5fngeOqYUvKlAJv3c5Toar+N7mnkRbyQY1BucrJWZ8Vc3lI9hBM58H\nIGRgT8+q+yZ0rQkpLOaZ/MqDSJ8ifTZUUttEP1QBx6FV6XMWUFhqdB6pDsw+\nFDYi73HrHkO7YISCu9OfJHQRhLMFLsIVQJP7qw1eej6sUqWdLGWfYQFo6++Q\nxXIRIqQFRiSqHGczYYFuF3U9R7B2Kl1fZgmKfhhDsBQHbmkjpezq7pjQNMQz\nSaIK6oi0fBNmNhbY1OED2ENV7r/tKuj6UJhO2tHk7NtyjkxUscS+EE1Vv8EU\nVS00b0KzwVMHJM9DajFAcg2oNhpyPc+KHWCyJLDrMiWUaY8jqwSk3PSkpoUx\njveJUwJ3lemXDUXnpRl57rsLfHt52KxWlTBJVkXJCCxnXmpO9QTcTTqvvg+6\neW2c\r\n=nMzX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/rtl":"12.0.0-canary.cee9b9e22.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/density":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/elevation":"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/switch_12.0.0-canary.cee9b9e22.0_1619568779008_0.6630244865078874","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/switch","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20acd43ba98d23c8fcd011cecf27f0dd35227f02","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.96e83fca7.0.tgz","fileCount":58,"integrity":"sha512-/JQBnl9vxaYfo0lw5xG4kBpjcFu1yexzCwJ4ewc6md1dYyDwJ1sfRVFDduV6L7ZcXJbw6OOWmBeL9AMpw7GjPw==","signatures":[{"sig":"MEQCIHBGpXcQcFKozXvJv+NUaQ5ewU8YyLJuAYjNsNTnJf3lAiAuLck/UJE4Lu/FShhuPwPGn32i7HCSuAtX8o2E7hpDFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMzdCRA9TVsSAnZWagAAsYcP/1Dm0irSOhoDmgvvtRS4\nC6TQZGpMd/QzT9mBi69QonYTwQuibOFned0bMNCGJaddnc14SLQVhSas/mh9\ngsrOWsdlc5Er7FCtimks/usGnECm9K9ZxY/zDZudMckJyVYHelkhq40TKnWo\nmQ+7/NE3IpL5HRKNn0QEptex24MPLUboOViVp/IbRo1mYKGIz4KlbQVdVvQu\nLATGj93sRk2H5Rba1kCeCxuG9dl/WT6dfm472B+DXaYw+Xme4zFviXAo4GP8\nXQsmJIcB/YLk8vZYhLYw0lzfdb7ex8ziWxurBo0pXzFtT8s1lRCnqoPjxqbJ\nfBsG+X/bPO8+Weap0myYjtIVAonfenuiqXuEu6gDVTHP9Et4NbMj6rDTAccO\nMas5IZpcCCW4SVsWeyxP16vELEObMue9IWh/8W129GUzn82qtcbccbfiFAc4\no5kOmplI35II6YNHNTSDFqa51ucILxS/oHoqdQ/oGT3tR4t+V7aagms3CJxR\nVdJw/mazS9f0wxEbVsSTgKJ0XgKEQlmAz6PT/t6w+yG0rRTbhmFqY4C5QoJb\naot+Ti4KNpvgPG52nUnWjn8D1mb4ay0F061xpyTqEhmcvjfSh7YVFfTUejhm\n9/uSswkY6Q3wGuljjU/vj4TGDd/TD0UIZ5NHavjQ+gT6Wcy3kLhHJx0zzD5x\noPpB\r\n=/aKy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/rtl":"12.0.0-canary.96e83fca7.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/density":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/elevation":"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/switch_12.0.0-canary.96e83fca7.0_1619578077321_0.6008659807707861","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/switch","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"917705df696b03a8cfa97772f9eeb369f38aef0c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.4c497bd19.0.tgz","fileCount":58,"integrity":"sha512-P49d+WyayBW+P186x4uW2MvqjOop9KVOVSKjfQThMNV56ua3/u9b/FHZUdv1TAogmU2on02dd6moXhZiKtRkqQ==","signatures":[{"sig":"MEYCIQC9aXxNEQJfFRwdck0V7vgoK/Ks/yAIeGOifH1GBjeF7AIhAIQaBuJCXskmLN/U7t5gxM4KBSW+XqRIkRMY1wUNkZJs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEgCRA9TVsSAnZWagAAGjYQAJG+MHlsb73VseGVq8ah\nhnQMU/md1clylH5RGLWvee/UEmA0gVwu8oDOX/T9Tj1Mul2x5Ld5VkbUe1il\nwylPW4o36G98lNCfHQqw3f5wYAjnQgeateMN6mxnOzq7SWiHTVnc9SJup9EU\nLFecktyBbLsEBILBqc/Gd9qmoi20R/Be1DP8dIH3Bwk6HNoqEvYMNYBbfqsW\ntGS9ZcOmzJaGmj+JBl30h9nLYvsOiqf0Glz3tyDwCF/NVtUwD7tyWr1GW/kZ\nNx3FAjPiArOmchGNB0Y0i30JgK0IwYuHGFc4dBWbYm9psaXiFzDDsBd19DRq\nYm2Ij89ecP50RhWT+jndt4Qf3SBIxT+/WKZhMC5GP/EKvwi+N5+vaDQd/p/k\n7GvCLwI1jD2zYZZglr772/L5Qx2/GisJdwtJRpN/WrE5hy5gRInzIxp5SiWv\nYgkYCnh71H0HlRSXnh38x7BOSJQiaubSg7pje1YW1Q6SaB98hIoDyodE4X9K\nT4hYk6zxdhD1KYWG9gQh0VSMO+7AXTbTi5ZMkSanS4hANMWPvZcA/OiV3hlM\nzreNGqym2GYdOKhph3N42kzqxEHV6Y8pOKUDjTTLFfF1Vj4gCYXmT12fGeOB\nqH6ooxaJwhcty1YUkNP/sqqdGde1xpw5g+Azla/xPoAo04R8s50o9hbmRYdJ\nT69/\r\n=0H2e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/rtl":"12.0.0-canary.4c497bd19.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/density":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/elevation":"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/switch_12.0.0-canary.4c497bd19.0_1619632416096_0.28181223046375536","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/switch","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.105b15b96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b255fdb1af74e34b3f5402bd36922fdfcc880c2b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.105b15b96.0.tgz","fileCount":58,"integrity":"sha512-yks7pstSR9zJBmuhs5JDE3IUyUCiWHnzGASfMTBKepNURZIlVmCwk6v3CewvUqpPqsiBfxHyNvOzTCfFAMZpCQ==","signatures":[{"sig":"MEUCIQDD2P+o6nL2HRVyuQAYKkz4KY0S7O0YV6FfbBrW7eqAEAIgDTD/KuLL3MQo+zTRYaMxd3eYdft081wN9sBDmiazVfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiddPCRA9TVsSAnZWagAAI7EP/30q4yBITu2ldNMyCmlU\nadqfZtbY2h9OFeNzHDBMDNF5ImbRUpen1YKAbxbFhgRus+TXbLAVnYUhyli+\n1ikzV+/jrnQ2NbTVmBpoJ9DDIiZoQEunDz+4XkVPljcjegYABqUZV7x3yk3Z\nPUtGrmA4HJgyAlzh/6OifRaRgDzUAbbEb3tX3sjXNQL9T5e2Lnsjw+2ibFGi\nvKDIgtI7fa4ly0paCjxNVuTKq98IWn5olS9LilIerDk8Sjc163WA3cOiu0+u\nODTYlmHL71dpSBQy7a871WZ7k8Yxpniu1C5cZnbYxv1UxzXG/nUN4IBTFqEO\nhRrs7E6Mg49q8qeKvVjBzoo3Sq4MNtg/Vx38fR2GuxQB64nRaX2MQGgLzRuS\nLgwhLCv0ju5PW0IEq4b2d1iGi1AFsIlLUpUsy0YfmUMCkPuQ1sSbwfZ6NHNJ\nrdCgB8+mj5F6c8ZqH+/lehfRQAj+jq71nkcp9q843ZUERJ6O34kg2c8NWkq0\n9CiatiNMuh66VsQPMbp678RRPQ2Ty3CA4GHjXXmx0Lv1gF7DvJArM7UHV4WY\npibILyGb22FpYZl4jVP9BdLN+ZCnfXJfrRHS4Kfq/6MpoEyMASWyj6LJ+9Rs\n+xTbWFZHimMehx6qJVwtMLgloNhtFoTqYaRSjD0tKQVHTg3Baa2LjpdPTkUj\nYVBX\r\n=rQhO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/rtl":"12.0.0-canary.105b15b96.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/density":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/elevation":"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/switch_12.0.0-canary.105b15b96.0_1619646286258_0.43517083071827845","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/switch","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"919121ad722a9d225cba05b51109266873181168","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.6e20259e3.0.tgz","fileCount":58,"integrity":"sha512-eAP48FGhDFwvVwNlOfKEzESNpwgrl8kttaFvODsd4bCDbpYRaiMvJ++2DuPDirEfrbB2r/356hQgDnYkLx5gkA==","signatures":[{"sig":"MEUCIAzUpPfoQ4gUXlMKsrInsLfzEnTcLl+9r6sQMfGsGCODAiEA/HlVM5G4wlN+xKcEcZnY9cQMFpajEws5ht/4tkcEMsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhdCRA9TVsSAnZWagAALd4P/jKYNkkbRocghw0H8OfG\nOB8P5d6jQrTrQ1xOAsfVDLHHpOBvgkrWIgt1qZlPJtStxvedJq2iOgR4FzGJ\n5UxxnenLXJz6iyggE2XqIKPa75frtl9Ycc/vd8v7oVT13XAYF7t58jGXwR1p\n09c3UBeL9DRDPt07IEjZl9Sv1F7RGnGwv8MgddHVPFLOLJBNBrMRxjFfRbCf\n360aVDDX6GU1BNNZKXoGxBZaUgsRJiBZKxxLjrE2ZHllJknXmyAZyo/JzkZ/\n4FkKGlTcITL0BN1jhmZOrXtP8U3MQjRWllYPVSLPfL4H9eYt7M1RT9DxNnhD\nKOUYP46V5EzypOsVWXBnsS21qjDfL33fyTN+60rvtz9S0QPFiblZvl4oqBGN\nkaOoliTiFNyS0XeDtNjlVxdkUa704ViED6EYQVVzaWGmT8OjYF4YdSUrdkQN\n19uZOEBwhFyF7phFzIJgtx4T/wiOQv2rJCrAVzxJZ9beRZCJBF6ryhRz3Nha\n1LZbcXTFHavpT98+QhjqRkV/+hBV36jVhnmIHiwCeD+U0erVIqEHYazPVhYS\nDFY5dDNbSPV1Z02eEz/AGi99HUi/gawwFKL9u2RcKmAJBBfH7iFeyJeqwav2\npIz2Qx4s1qZwxgnF+y/UK49+89nvHCts/BlWFsyZob/15MlggSPrVFwf43vC\nKBrH\r\n=XZft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/rtl":"12.0.0-canary.6e20259e3.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/density":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/elevation":"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/switch_12.0.0-canary.6e20259e3.0_1619646557022_0.7424601365230001","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/switch","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4947d411313a2a5e2cca2ba746fb8211d58cce2f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.0f79a5d74.0.tgz","fileCount":58,"integrity":"sha512-Q8olkRAaA3+OxI1NGUBOiK3m7GgF/Z9bQAUZJneGdYKk6SjswSeRBjQicoFsAaLMLjBWt30xNrsPNwZ5SJjq3Q==","signatures":[{"sig":"MEYCIQCByyGGzbAbtlqUMpCcKppy9RI4u5t/Qk+Oj5JsS8TXRQIhAJyxYPQR4Za/muas3kHrkHnxeSDQB2UKtyB7f8b4wHE6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieT4CRA9TVsSAnZWagAAbwQP/Rsl7OQldr9Ah2rliQOb\nmgKHQATz6COWHKXhHv6NCvJlmlUyxySGkDLAGG04T6nsHu23UjL+zHjdmpKj\nlKislct5jtz87Pa0NFAIj18oNJpk1tTIr9MprNfAo9YE4xmzwrZ47nX1kxRt\nGjpzC8ZHDLdhmtQad8rwPZMLylXfjqRM9H67IPq6AVj6uhiwG4U4OeApxCwH\nqCDo4OaJboCdYr2zLOztPUJ5S3f6fKwxE7ZlAyV8dTZH+TdxtbfqE/xfyMEW\nmwg7gx1Ek3GflqSxM9yM0yF6N1kw0qhrGz1DDgwBQAn7SYfvISZERBGVO/vC\nUYgapR/wbVEFl4Aay68KllMOhP6xHCbAbSBgQ+5I8t3olMLZssxkH50Zn93U\n5+QlOn7ViL7QM/KkoIg/+czgVDQRbEQFaYnxBqDFuw4YuHxFFtEMgyDM0br9\nlR6LHvYRDrMXbAoHrEGlcFidJL7/xYM/UfAnKoPHluJ9dsIYbGoexeUoiMjN\nZ3gj2EIYC88j/cqW7Q+R+236jXdDgth0jHw+S6L8xvHefawMPS6ROwKu2KI6\njT1E0t+jMIajhUh9l/x/uhEqOkeJZG/qE9AWVoE5C5MdI7nUGc3Er4JMF0aw\nvIJfK00lwv2iETnguhqTi8ljVccOayUZzkLLOgMsG0fVGlOmp1sHxyGHIgWi\ncF7k\r\n=S9b1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/rtl":"12.0.0-canary.0f79a5d74.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/density":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/elevation":"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/switch_12.0.0-canary.0f79a5d74.0_1619649783552_0.503171847193244","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/switch","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc09cd4cfe6882faf724c48e6e2ba6c1a9ef28bf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.84f3db9ed.0.tgz","fileCount":58,"integrity":"sha512-FQVAb0wR6jDs3T4Joq62/yj72BDFWQDN1K3hGbqiZZKpJPWtD3P+rcejswJhTbQjBD9HYhXOIw2+xY9tywhJ1w==","signatures":[{"sig":"MEUCIQDUF6LOCeNP17XzLw2nF4WuXcE4c3Ga4OJFEzuNgQP1kgIgeJglV7F46ilv+Jb7vzOLSC03uclqlh8zmq1DtkoU2Co=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisAYCRA9TVsSAnZWagAAKtQP/3k9ot6LJ6Im2sGpe6+T\neZGt3ZJLSUVzdxL+pFbJFgnMaeaJpR/UD+301i07ux8vSQyC9dil6UrKZQhy\nQNdTM+XtjaceLSDBFEMeg2D4naTLrRWuYegfnLiwzolo0n8tXhH6nrowNGQ8\nIZ0dUCJ1BvsPLVoEbXjxCk69eBeskbY0p73Rwi2iIP3v2xoCn5jWH+YDQ7xm\nGHNBTJm//UCKcQFD33F7YkbWrDhLngqyh0S1GsjS84uFQD2hd/RWVbPxrddz\n8kJjRVAvcxF9GhvR/hNMykluiqXBsE7ASjSnckycy7/MxTTG4fuHMNKC6v0h\n8p9XRorqfz0m+irZ2QEA5TsSIYeyq8+oE5Sl/mPlfEate7mg304jtKOm2cL8\nrAe2U10IG+/A4MelP+yCe/cDwOCI9B7CfJ9I8lWMYtlm4TL7clqdX8eDi2Wd\ncG9v+mScnzZTUAAdn3wuq/j0kKx6XfNf1tRrIjNmE4sASC2jaXvzaKjQjyUA\nFwuPdmw39X5tLJKtbUbIdljUXzMlkiPqzRs3mU614gIsXude666PKaHwq0Uc\npbdhZuBcEXU7UmoTN+URxkwypwGlbL1A6XqofeLeA7Te9kwlr3kzr/GDdEa7\nEaptuXHEy5lFcYM+rT+VTbL2UVegG6c0thLY0dr3uaRX6gB2F3Y+WHuPF8W5\nRKM/\r\n=NnsT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/rtl":"12.0.0-canary.84f3db9ed.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/density":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/elevation":"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/switch_12.0.0-canary.84f3db9ed.0_1619705880129_0.8929730294590148","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/switch","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f594e63ebcb1c1c0ea3aab4af4355258ac51df88","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8fc29273c.0.tgz","fileCount":58,"integrity":"sha512-8yWzL6YDGzbnHB9dluie/iXkVvv5ho1diVVSTuXrOT6kCJ0/hBrtQALuVPEKZ7TOX/g9xY8z6ReXZCCTs6omZg==","signatures":[{"sig":"MEUCIQC0a2e0B8VFWx4KOX6C5wnVSTVrvWjXxdTnpuHam5YOswIgcY8GvG7GvPhp+njE9mDxxgucp7QGY/Pnw+fe8J6+O3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyPkCRA9TVsSAnZWagAABuMQAJcYr7l5Hm6qEZ0l/3Go\nmiQ2SN9C58egK43BEUJ572SZwiJ/so+bDD8ORjikIUxkOg0iM0PvtcrJm9xc\nzUVSafZC/RNts/pVps+TCajBjPH01ZGJv3JwwoQ6B8h/OnyqaYZC49wb4CfJ\n6i4CFPlqVQ6OQxpaox9jcn9QR3qyamHxp58HU4tLq/OVgfBQGzKsAvnuYAD8\nBwiUAcsHBwRQL6QnIAjWHaX5flg9TbobskJ9M6oh1idoFBN1xYqMTEG8JzGx\nTauYI3jxHfb+4x0ePU7qzN0cNpP6rKspPgLBigLet96lRcTAblDwGrB87YAf\nKEokyBXfdgXRA1zixMpRceAC2y6v4C5TsC3ySvJzGnqOEJ1pSZYztMNjN/FI\nCpMx55ON+tEwjN+gkSRe7dPP1zSDVmcW0N4QSkRmhdOC5ddwCxiz3o7slnYr\ntFdhIjtEMbvrD0mfdQ5DU0qp5uVRvK4PWoNO4Q7cff8W+f46H1T3ce8qlexX\nJfSYUKsHowoaqx6aU+CvFiH5krioYNKwKL6JqFRKUl8Ecry2jaMiIpXHZtA5\nKAyeAT2K1f9y7odTyxze99dHI2m0A/Nq97oHFyVV3FMbVEhdJnH4yhXhMeqP\nQTcUR5GrbQzhv+uF8KB3CrLXoe6uzd5xkiSJSbLtIUW1AYe2rxWFDtaGrlbe\nLCDl\r\n=nLRh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/rtl":"12.0.0-canary.8fc29273c.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/density":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/elevation":"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/switch_12.0.0-canary.8fc29273c.0_1619731427543_0.22246741837493533","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/switch","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64319e40c9564a0e91ca716408caf70cc7ecbe6b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.c50d20bab.0.tgz","fileCount":58,"integrity":"sha512-1zVKjiOQto4vz89SqtJ7rs6hGr0Hgpfm9qmUb/uhbqCqyTS5S/6Kp8lkkhh/r391R0kDnitxgCU9HNZqNH52Sw==","signatures":[{"sig":"MEUCIDS3JhqVuYTl34G93dFJJiCX3hvxkGMWfPIS2jUcZUaYAiEA8IIxLjGE+Aez3oN0P+Lbda7vP7ftSk/Q+6fmKYnGeCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizrqCRA9TVsSAnZWagAAMHcP/0XL0V8GsA3nSpBnlGv+\nIN/o+MqjsNq8Zn1nPAy7C0hFPI0RPnIipirILRRzKKpAEY7tb5odQOhomFN7\nVQkVNQ0/lBYNqGzfZOgzflizek73UMdpSxQW+YZoCEV16VM2Nb59NBxBdCY0\nI9qQQ6G1MK7GErJds6Nbh1DbsBskBbgsMnmAyEpi++fpZSeKbS04A/ALo9jq\nTqiB+6uEIJYQv/hT0MVJ/AckXUomnR7X+QvH+FbXIijXYKgICYSKBXLtQq0n\nRsvtDBEgXrGEgxgubAxvVMWFvJrHD05J9QlZU4xkuJOVTde8i5Usv1WVqMWM\nob1s3kYK0mkQhvLg7DjLeBNQVzkD3k7/AlQbecLFRwT/tMlr4xIYRZvpYA0v\nbSdKQf+hJUhXIfLBc5TJpHlfUUGWnVlYcmVl8/mDFz4UTbwdhootTNNUIWiC\n1rYufCYOyZKLqIaryZrt2ZvVzFyIbTrHFs1U5Yb087+A7KaWaMoGoCMNyc1X\nw/RqRVJRfWALzecEyIMtLvrVPBpSJ8THS61Srnf2xUHuE2ttm3cf2Hb1GXR6\nT/+/FEMAn0zUqCVYDE60vK0evzr1i9ggM4ltQGYvJqJrK6L2nsoX5ppmUOTl\njgQIOXwkuvWY62nET/4UgUhnek7FDQBXhjWukYtYrxjM6EMIXbpiUEh93nKZ\noGhb\r\n=xEFU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/rtl":"12.0.0-canary.c50d20bab.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/density":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/elevation":"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/switch_12.0.0-canary.c50d20bab.0_1619737321684_0.09187305234438514","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/switch","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.474836ad0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69e0a9e373c44dcc0de1b38061ee3b26ed7dd629","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.474836ad0.0.tgz","fileCount":58,"integrity":"sha512-deCWg9jxLZOEgZ2IXNFpLOKqUpWovpxfhCqDapW1+24+epd4SZLdRvd4vBUqmW/aMYGfrOKHuqKtU0Kc5Xzj9w==","signatures":[{"sig":"MEUCIC3x+KUtlNMoPFI2JkPLQHLtQY0xsZHYx9+WKG3AjP2ZAiEAjgOp3Oxdtyyiq8e12gz70NM8XjO1P2+XkOYwfbHJ3A4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0LCRA9TVsSAnZWagAAj+MQAJNW7gS6iNOCISbRTI2N\nwuR6cJKX75gsooCpKJmOfSz38u9XtaqYW3Qcr2Uy07JMB6mIceZG/Gk79ikz\ne1G1kZf15lKtWNcxY4TicVraMxiQnQum9+6EB7qnNvpyjjjQNrn/0pXiGHkN\nDwn99hDgd6Hf4LdUys4LUZ0JpvbVOTIOCbYi1FNhvcriYFDMo8g5xh+aHYXT\nB8h78ZA6E6dqteE9kwEPr4p7QMkxp3ghAjuO6sdY9x4TnQQEfFdaroEymwxW\nismYUKB9CyvjgB088M9tVgKMR3JJEEafWrRFhVhY4wf9Y9uC/isBglNdAFEp\nZ1BebUvP0tFwCecI5ORBjXvhKUbc1o6qN3+tBGh2oHMCugBvfKMWLiWg4uoW\nXK8LoCU5FZq8WMOebXQRNaIOZIM/HfV8DNFa3gu38ww9h6flqkS7C6CP+0JW\nD6819M+Stk8YSgJ0M8ARPck8dEn8BenvCWi7rSxYvf3mBLf6F5t0iH7Qdv/m\n0irLelvuRw7ocZc0utdSS6l9v06CRqAMCvRd1ByU11r7dLbNgFxUqvfcQ4QC\nqCe+dGsAQl83RiX82TqAjXuIlWcQ/Qx6RsGHnWkiJx8XVTc6QiZQmYn17Xk1\nM5K9KVX+RIEYESEbZ5qb2HloNHqIAZuAdpdvRa0MjZfJcny1nXLyWW2NTtmN\nPKiP\r\n=QzLH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/rtl":"12.0.0-canary.474836ad0.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/density":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/elevation":"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/switch_12.0.0-canary.474836ad0.0_1619840266590_0.8991253280739158","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/switch","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c16f621909ed42152ce4aafb4ecb382496804ff1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.f5ad92287.0.tgz","fileCount":58,"integrity":"sha512-0/xfP6RO/6JjBkEKnvCAQ0gP2arC6npHsLSCz7nmVRO00odnHw8ywnLyTvexSj509BjaeZIXa/W83a2BW7BKFg==","signatures":[{"sig":"MEUCIQCMBMN/CztTFlaakwIdy/XBrDT8TEUNtrS8ggxu2kpOsgIgMHSuW/fdTeX+xVu/OvYbx5ZqSxmebEry/twhjZRaV4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9dCRA9TVsSAnZWagAAuRgQAI8aZ9CRM/ld3z1ryuXF\nouBR0fF1YW6gWteTCfxkcLrp3sxcPXccuU3CUlv8Duq1n4p5imOv8I+oZY6N\nPD1JlldchTjfF3+Qh8u7fT1UbYwtjHqIse9UzCEE4T6jc87kAptH3ktpgMeo\nYDAhCIIzAsCq7ZQPLEdo+UcgZTweO+DLAZYLZ9M8feYNPdzcm5D0KxY9hAPB\n+ROxt/v4TP+FwQy7uGJ+Nl4BJk7+4TRsxQsP+nTVoZCNE0VmnJVSsJgHTaMc\nW+roduaQoMv93CwvCBHdUO2Ll9zfasX2KhA2qo7EKJjNjmoF6cOjFV2nDMkt\nmmND6GH70IZZVkheGbsQVVX2TimnsCeJXt7kbqTug0eyPBiJBHEy0wY5Tfhj\ncHwepmKPDCptvLbc+lyznuKpQbrO2RWX8f/arIiGT3jz+OsKx+CeicQuQA9i\nCmV0GHr7WMW3KdXTm25zyr5w4VO9pbD8HQQXpHNHZTtfdqqng/kX9/wAgXYW\nzqp9vilcJqowDB5IgVcytuy9WPdOPrAPGUokg9JMGu6k8I/ze/f5SwyUqCp0\nczFeVRR8otUSWDguRoa5zkjYGScBatPiBqFWwThOwpR9Mj6ZL6LA7OzF2BzK\n6bmxHTogFIv+AQjpjCcmYfNnusPm04pEwi2xIx66qPP5EQ19tGuvBYprHeUK\nbTOb\r\n=UD8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/rtl":"12.0.0-canary.f5ad92287.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/density":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/elevation":"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/switch_12.0.0-canary.f5ad92287.0_1620066140724_0.0221098556959074","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/switch","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.af453daf8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e70ee01e2ff2829be1c69793c4ad73e756f0c7f8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.af453daf8.0.tgz","fileCount":58,"integrity":"sha512-ylRC6MCTGz2ODom6j3MSAiu+/mIe82ybZjjStefFvdyQxslYKBL0Eb6CJyvgNwZlpXMnAvQbXOfSFR4XiTqVKw==","signatures":[{"sig":"MEUCIQC3UrUX6PQ9GnXQe8ec/UXNyzYhJUb7d7/9sZ1DGV4hvQIgQEVTC1S/lF0ru+wxQmvGfZe1bSr1i9bk+igH1H3SLdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEasCRA9TVsSAnZWagAAGHIP/Rbsb+odpnBzhb2eCP+o\ns0M2N/aAmibNegS7fchs3A7aqT+CsqaNdWRvUyoayQHspb69rSLSWXUiFmJm\nXppyTo0tgMNVYRc39TPjGlzXf7UXnrmrYYVZOd6RYTUdSnbR0STmHSHKWC2c\nZ9w4PIIlzAzCNv6K+JQ0H+5jTdl4t2xLHJM1FiRuKt+Dmlefu7B4HINKGdcd\nnjnAeoIjFZWeQ04eOg38861vLt7eCOT5LZQSh5bx8jYh1RG7p95RndDz/FYR\nHTdLMnFrZ4bNGzURVqKOh9fJDK6bTaBz+og+Db5vDDErRUwErhsS14P9Ouj3\n9ikunZtgoUq8BSyyhy79otr+ukLWqAYgEXGO2LfguJR0w8ntLfCXpGkf8FNq\nNkmDXk90Fse06CJ6X7cWlgsuOJ22yOh8W/r3usv8zsfreVNru+zXDfzmjZge\nJ3iYO4KnQNomMSGLULWqtG5vb/Ss5gvioXDI/5PYsHqjABPkXltY/Qnn7Y95\n5o8yy7nzw+FEBqTia4CSPyXgUEvUKfoYBTvJCzDAYrXBfjaiEV9QWcG1/PFj\ns/IPABlybphPR5tI9H2UuziRcEAmB5ovIJ6/7GUSwpzTX+jBOqPqZiDNpa60\nrxG8YB5LRb3Vy9vFYcmcHkHJ9+F2EjsP2QRll7SqsqwIdnjAg8YQrr+xHw4V\nZnZs\r\n=3M0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/rtl":"12.0.0-canary.af453daf8.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/density":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/elevation":"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/switch_12.0.0-canary.af453daf8.0_1620068011378_0.3918858180928273","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/switch","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c937583b5911cfde935340d1faf9603de7852c4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.1f1918c24.0.tgz","fileCount":58,"integrity":"sha512-E8xXSyK6p/ocgyNhi/tTPkxGfSSePalnMf7camEwpHaLqZoxHtab3FgjtIvrQpArdjAhd5ihHXDdIW1iMK/0yQ==","signatures":[{"sig":"MEUCIQC0GSb+La/glLYybJYzssDZ87D1dIgwli/61l/1YHEWzgIgd31Kck0XtJfgU5Wuh17U7Ph7Mtn7Jf21Wy+kD+n4GHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE18CRA9TVsSAnZWagAAV9IP+gJuN8S9WzuzGyPGDyXl\nKnkaV7ibcTStW4y911LajRFLSNGlGh9c0WFw8x2Y96lm1U9i0W4Jdbh9ftqR\nfWD1SGfVr4hX2M6YvMgFblAP0OLt24ieAmfrmCFD4VhVpDch4s51UMqJeDc7\nZN3FI6fPuIrirwSb76tY8rHOwG9q9e33penTF99Ip2wSIpm8p+J5f+NRKEyq\npTfhhnS5lZe9KK54HNgqKQG8p6Fcrm1mH/94wqH3Axu4U9tK/6V4RJuC91JC\nSGM1RPLiTArrpl8h/wnYg0Nu4+P0lD6d1cwccM6v8H9bIa5QBMBdAEyORlqK\npXa5yxfb8BzrGM2zpr92/Ziq7XJygtSzDf7BDiT1T+QWYBhRNppUMm3DsgLa\n6RtKMGub1jXZHjJtvz7AnZb8b5GSaccns6hcVMQ9fgIIgMp+7YiLhUG3WCkm\nJkOo3/KETH93jj+k50wNqSa7RZRE8BvbGMVCm3dp8VmRr5gtbHetQgfgVvgy\njOWdoqxeQLGxN1pkdn+WyG7JEQRGz9ljBTsf4oJhS2OalTBgaB1pNB2HQYdA\n7WTt79P0uMBLcdtThq2shRP/zl+8GRxI0EVOcJykdFWFiGo/PAzpxy4Z+dCk\nMobyhGHmcGmhLvMmUXixHVUAZQnVsE3DM+NcAwQV7fWY55D5l22E/gyPwRa/\nCUJ7\r\n=Bsej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/rtl":"12.0.0-canary.1f1918c24.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/density":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/elevation":"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/switch_12.0.0-canary.1f1918c24.0_1620069755713_0.7582445930697093","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/switch","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.33148231f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1507d88ed6c37dbbb499afc1876ce5b3bd238592","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.33148231f.0.tgz","fileCount":58,"integrity":"sha512-/urwXYyKTWHTvg3P/VcKvy8K09SnxK6WjAYddy9hXvBGUtQ5FbnBCoUfk3PNriw8DqTRoeLzLcDmWk7EYRlBUQ==","signatures":[{"sig":"MEQCIHoOsuBceW1JHMSrq/cddD3B0R7FuroSEdsJF3vGaAjSAiBC6zHaGSiB9UgzqaoabI29gtFKW3wOZ79c7Jyyp6QJ0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFLCRA9TVsSAnZWagAAeEYP/i9FxUHkzMSUrZUfbrBf\nsmeJ3nwKMzw82v4Z6b/XYZzeIfujdf1dS+cNwxeveFV++WwU/wGCab4BiDEZ\n1BXpGMcCUNU1o1qRD0WmamXzFt4bTYkrWU39PQRnel9q6TFOFrsmr/w4CEqi\ncWOcIRaJ3CDXHQ5z2GydyBA09IE1vpgLmhdYHd5w6xroxtPtSXCmi6A5OoxT\n4VTZB0k51XFgyGlHg1cG9VVNZpefCYvZYB1guOlPobBczVXZM7otiK77kp0o\nzuw8Kuc56GHLNXx/tlXC0UVHa4qnuty1Rx8HZUlYyRYkvnkyUzDXYXey1qka\nGqezFIAgY2dhxTCf+UbUILNKv5d2HIjUcG23IL3qYpm0lKndIIJ6AX9u+eXq\nYhVprjIfxQ3Ru10MZY5H9l50Bu+zu0C8huepIdVv1AsgM38mUu9ICpPul2Ur\niGfxPUVD3YFp+ykrxblPOE1SnYDP+9kdLnMZa2KbHPLYrIDA//EQGxkqJdvz\ngczysciHh3hDbuRati9adkNne7hu9rHvWpBfuZG6onO4A+CeE3cs6rVMeFmC\nCl1WmdYPQHr4DC3+0vPRmFJSX7SweI3JmPdihXN2PNxe3viLpie9xu+X6Rbs\nwVzpFIAKpfCZa2Gf37sqEmg7B5+aw+6BRBxd4akqgDklyED7n/+dA0za/7vx\n7wtS\r\n=9ehx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/rtl":"12.0.0-canary.33148231f.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/density":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/elevation":"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/switch_12.0.0-canary.33148231f.0_1620070730762_0.9319231674086648","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/switch","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04254783d8c05c5ed2dd88e8de5989501f075ffb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.06b76fa74.0.tgz","fileCount":58,"integrity":"sha512-89A6RZvvxhiOkdCXXDL/fNmDoqbxi4B3VuDqg6+4B711vE0oHfWtiRwN5Bs4O9YnldcHYlfg73m9GUagKNP74Q==","signatures":[{"sig":"MEYCIQCF6dQ7+BDWX1pMcP5YJLT4Uqggfjxom6iMiYpxtY8anwIhAMuyB6+ZQt6j1a7+EkwiyMYhpIysZ5q28OQCkoPHxS34","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMGCRA9TVsSAnZWagAA7ugP/3EPcbvfXWmhwyv+ghmd\ns7sBGQuPng2UDBrqIRbEqBhHuvxJyUSXwkBliX05uUWyp554UFczuxiNGCt0\nT6XgCEO9/be+G5OsDvaFOLjADUzZCxzHIVjMmGZURUTuDGcEiG6QCLDZL9kd\nY/GdScDqFWwHvtQuZJjKsYScCXP/i0NxjkBGro4W04Gjr3XtTE3tQLZ6amlh\n2bbK1OmH4WAFegGJ4KWlA3li+GoxLNPsTEW38fyRGlzs/3aQb1kX0QuvziaJ\no0nA+ajTlSZw66J0slEW1z58Ci2obC6re/gbpYblUMjInNWIFbi02MWWAdu0\nqkqt9fkZ33pv/sVEgMxKoZaxHS+W3GHp94UCjQayyUrFZWxfCr5MfmAYFJP+\n8pxRAgw7tJTVXZK4WWqcem9VsZiNC0/EcRnQVTkICPk/j4CaP0US1lR6+KV9\nmsA25j+cwfr1JoHiGeEjdY3TceCLSheSaIHkzOGTROJlSJB7ok6Xd5x6Pmay\nEzmnm5TlXsdysFlmGOpaU1mDTAR5SBom3qLqM9frw7wuILCFIAhjbNH7PzFw\nA89HZ+B/ABIn812CMrRPoc4ICwfd94F01EVUYqRt3VqewIpt4zif1cwedh57\nzvGSSQPqU56ToyFzVQd9BND+MeV9FskIncFaQvFXHajXx6fUc9c3FB84l0/R\n/7L5\r\n=yWeg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/rtl":"12.0.0-canary.06b76fa74.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/density":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/elevation":"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/switch_12.0.0-canary.06b76fa74.0_1620071174338_0.33149340759666357","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/switch","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.7c5000473.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03b55e3ce708f77f897a88aea4a12b6261411663","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.7c5000473.0.tgz","fileCount":58,"integrity":"sha512-2+cfKbuEoJ98l+ZLFiNAwAw14eznEZrBOB0M3lVA0vE3MBi599lBh14WQUgpGUuyCS7ib6awPWGCnboW7ytMAg==","signatures":[{"sig":"MEYCIQDRabXq3/GnptVY/H3bDUajyV+VTdBdj63JCZzQrQvvbAIhAN1ZLjLRF60mgBslp5gE4BSQUvpw2ZqG2hAszyk86IpY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwpCRA9TVsSAnZWagAAeqsQAJaGEFhO85cEd1oqfCue\nK0u6HONSv1SeKVOzgZUk9ux47EQPX99O3jr5z/3MvT8k52T0HsZyCWz3gXyS\nziF8fyLxppI6RP8B5pIOaZ9ky8rlZdx7F605SRq/LcomTO5tmVm+01O4Nkqp\nCxF7hd/BWCijH03R0l1IRqXF+3UKhRch6ZksqV+RP8VvEXL6ApC7Yh+7B8T5\nwcX/tGRosvqBNqdtvVkyDv5AStHnOrtG32kA5Zq9fyL9+WuA6gVrVOqd//iY\nz2nbjZx2W/7qo/UU/ZZWFSxo6uEALr5DWNBh4rxlbKtP1Aj3slutIS67I+op\nIh1sEOgWkU2UG1H4m1WVMJDCZtIsq+mnlmUi/7jSk8LKf2DEnTLLytF790Ty\nomwI4Ov8uBpF2t1Bdqfk6oRQemqPLyQkc/YhDXsnSyw6ZlEgmbWwZiwu6VX6\nacPguAXKmtx2mWvxpkG5K2qIcs5Bgxp0rX+ySh3Q+pDiBteCR03Vg/TXLGQG\nA4ua1Ln5o7BSA5GITdufrwdyH/XgOfezfhL1Dmj8M2Qip6PnFJyBFAORi3e9\noWNLX+N9g5o/DgxgmUY+IHcZNFiR0SiTmlDouN9sFxSW0ldI0mITREeluwig\nQEWT+qRgQwFnIY/zpVxQ/NZJ2Zurl/1ELRbO+t2tO+OpluLxNwzefTt1lr7D\nuVPL\r\n=BmW0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/rtl":"12.0.0-canary.7c5000473.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/density":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/elevation":"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/switch_12.0.0-canary.7c5000473.0_1620081704923_0.45835579261791226","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/switch","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.de997644b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"820f6f5713a6fcb8879d691112f40586e98acab2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.de997644b.0.tgz","fileCount":58,"integrity":"sha512-LFc9hTZ0O2Bilz1USelVKi4i9DAYsQ/WwXEFsmobTOwM2TNWo6YWyNA+cYRPpazGGvcoFAt7G0f0297SseHn2A==","signatures":[{"sig":"MEUCIQCtig8yd8RE7oLlNnCZ0/9P2S8ZBUeNyYrxGvw254mODwIgTSBEsq2j45BeUbCRQ36PaT6Rcq42AiwthWrK4lDwrD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQwCRA9TVsSAnZWagAAcqYQAJKV9NzRm7PbTefuf8Pu\nQCLoFN0vCJIeFHm9IzvVbF9ABeSH+uhkPVd8bDKh4N9nwG0krPzpsF8TbCAn\ndnU8pGVWQI0uthxTKRu4ry7S9MFsS8j+kZ8x20rnaNklKju++HorlbymCTdU\n0Mgfj9p8uy3hDbl66Cef0e13m/ZkCrSqJj3CV7TwlC1oBTYRycXKLudo1gCp\n+8BrcyW1QnHYevlwgLP58cyt0O7ATuTNaiVsqzRPEOQse0YTkEH/tEJh4ncJ\nKiuozJCXWcJo3mFyuuRNuM97WTvc7M8TfnGENbb38GE04cNCYUClf0CJno4L\nLDMBNvdwGNgbnnDzzLmG2UheP3yHm/2V5b5MySVV+s7k99qnwXYTsOy/21lr\nRfcRaMqE3z5bvhw6mLCjggl3xdHo35v+f1NLXeIumoSBe5u4qoo4uRhA+dO0\n3xzs9kNVuRRIYpPcgvcp4PKaYsZ+YeCnZoJ6QZvVmMp1DGdfJ94zcdkG7+cv\ndyhrW62ra4HOqjdTlskw+g9CXWxeTm0Ox2AwSP5B5aDQq/LHNLMAowu2Ga0V\nB2MsoeDIwzjZLz4XnwEtQFr6oylxzXWaHlWNNa1q1UVAElt9MNMcysLFjzYF\ne4w4/KSqJ4XMcY3TUKUz0msBVnNHU6NAAQSQq+IRp8eoDkCEo8y5e9PzD7lg\nvJv7\r\n=w9Xb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/rtl":"12.0.0-canary.de997644b.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/density":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/elevation":"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/switch_12.0.0-canary.de997644b.0_1620149296467_0.6784911853958584","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/switch","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"867ecac8b288d8d7438af508141dbb23ebfd7de7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":58,"integrity":"sha512-+V5bK9lPexyfu/wAP50EwSiX80avB9eVSSE8q7NQM3zzXHARbiQbeEJZs7ap92ufMprZAGOoADb/rmGLX0eLTg==","signatures":[{"sig":"MEQCIHYRhh8HAtJBHwol+au7CgBVQZdz8xk7xOCWhcP5VGSeAiBnZ5ISeFaNyGDNFaJ7h083tBAEX0MSm7JHN7QiRfjb1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYp5CRA9TVsSAnZWagAA8z0P/2p+MhCyLEd/eAyYCTQl\ngLOxTo362PwiD5nM2d2iV2U0dcmGELKSCLisUu2WLHyNdrCR0FNaOK+p5N+E\ntfqLshGkG7VlIcc6gQzRdaLW9U4/415nHNLhS3G+9lHuSAY48KbfvO6AGYLg\nOLfVXL0DIQ0WM8LHmvU1B0N1AVr2C2xbbBxh208Zga7KRCAK2OaO8rT2jmn+\nO6xV4/B51eSI7kmu995mAyh2WqCBmimtea9dhc2wagvcJsZhyQkUALTV7Z4R\ndoWxS2pI1tAknd4+FgonU+6+HQkNJokLNPt/Ce95D8nXYoAom+xHZTJBQA5e\n29JfFIYXTYnzL62SLcIV/60U/6vf3vcyd7o/WG3lPq1kCjxDP+BuacDmPz/M\nd0wTg/hQf2uPA7aBU/mKgiON20e5lHxwYhPHHbuJn6rLtWJEqueyQ8RaulYx\n7y0lG6C4BfdWWCU5QInD3Bm5Aq5FDEkWzxILizs1Q1492wahD3If9LRVKe2e\nt5DEN57drm6a+eOWjOxQylLmc9Eh6b5ZAm77GV1ww2Sh4CXcVCYfZEvAWIx2\nmbGxAPUtumB5xzAXQVQcaVe2J3JdNdjLCpoP/Cycke/9Ao2CwnwylGpZYqC5\nVRTPSKpqB6iiB5Scx6UAzZp8SuwHrQcjHGgyGstu4MuZ2ru7cDenz211wDlh\n6Lcv\r\n=g71s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.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/density":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"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/switch_12.0.0-canary.d4d7f1cc2.0_1620150905135_0.6104687923371728","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/switch","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.be999eb08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0211cbf10989d24daeb13b5af2ec0c415656d852","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.be999eb08.0.tgz","fileCount":58,"integrity":"sha512-l4d3xhagd7mVhjKTRZ8enBX6fktb5vD9hay0Nu9QAWm4H8PCLvsuBeMXGmyRqLqXcKOeAgu1Af7/JKxYW22pVg==","signatures":[{"sig":"MEUCIQD3hpvSj4BQN4KdOiMh6VXJGNFTc93VE0yVftFKQykcMQIgIgV+100JuFKMt0mh37oNd87C+iI791OADlccGRTTVRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYvICRA9TVsSAnZWagAA4HkQAJ0XNMk3rOtpSAnCmUD3\nLQiu7zcENgevQpwN3cw69G86wcUum6MraiewrXCW8LkzURo2gzQpQqQWJbQG\nrJuxgq3LejxMhrd6E7OWVVOLcq+kIzWif0nL4jFIqeWrXJagWvZV/FFyRkaU\nq/6OvXb43lXJ69AInhied2csVxOVuowl/Ms3UBcboIhG929UfHjqmzVh53Ez\ngXlCZH93vjTmL2tKmtRyJqm9a6+NJVtoLJyIYLVRkra8RqzuGyPf/6aVeyvZ\nlHRiKa3Bgn1zOtgmNYj76f1pW1lslXA3yDoI8kpZgLEgtBXelM8x6Os9S/DY\nJvYULhg2nb6whQO2akGRErExKol+tB+7uYRuGTYPDbiLosmSTID7MDccEjT8\n5cFbcH3kMJmemqWkf292Rjqc7D3YIQvDfGGSwtcR/EnTg+Kda/tQYWkV69tZ\nKLm2RqF3yUoxJUL27jHDWHBbafhQvKM5O2UtRcKae4KiiH34xaonuJN3kq0T\nXUOtmxBzenTWzfrJ9iiQNPSsaySo/3HMewvcWcUGjZ1jcqfDFQ0r2RAMWBXJ\nGu7/ux55ie/ieq6ppzkxx9hES0aCXQmOyGRAfszxI4VKphsdCsv4wyBw43Fh\n2BWUjualnuxalZYOTDEznBdVqGA9hNS0ijDqShyTl12k3CpHM5PtVmFY08cD\nG5hX\r\n=oF8m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/rtl":"12.0.0-canary.be999eb08.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/density":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/elevation":"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/switch_12.0.0-canary.be999eb08.0_1620151239996_0.1652851043861039","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/switch","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ebe0bbc9c05d19cd100e1fcc0cacf4d08194354","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.eda1705fc.0.tgz","fileCount":58,"integrity":"sha512-SLhL10OMuGn3vxYlh1Q26f6Z7/Mfi2w1ycv+lsyGsBA2onCFMfJzX53VJsZ1xdWV3guYqtJQd7H7D9sTJX1Szg==","signatures":[{"sig":"MEUCIQCPrLfacOTAYoI3n1Yh1Zy4IUIVHd9TWtGF0wmCMLCVQgIgSqlSBTyDk9oso31bICNC/WCTN43BCXfC/32P0ar1PVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwlCRA9TVsSAnZWagAAGu8QAI9tHK8qhx20Ms55STIj\nMkNYYukgkYgauNQs8kZ5PtQD4QOn7QzvFtEHV8Ja59Wqkh1tLyq2cIpYv+98\nYfeC6nBpKDjblQ0n0iJk/yvcvedTM80hUJ8yQci5HZhdY3W8akeI8veq4OVM\nEG+ZDCWuG2Cc337xx4WWyqi14H4ghDqFnw8jCc92JU4omnFHalvbx2CTgaik\na697AmSF/YskL6cQkKeuChT+/rCBLpkZp/vBtyS62MYjQDY5hxGEzS3g57yY\nquxnNigBlHD0O2P9rSNp2ecZpVPCwizT6V9Na11lNANo4Q3VuoDnwjSBnWz4\nCDpqnep5AD3mPXXSowFO02fBqBNHlY8Hapj6P/zPEMSgoy3hqS0Aul6kHMNw\nQTvnqYTlAirAJxPGpwEiW3GxE9YDfz3TmaC5Nqfdbt0l5Xz1JmkDY4Ck9Dog\nlhEZgA2Q6G2j9XenUXegU5+CEkkuP2D1QYNyfOCqbBvH0r5A0tAMRydwiJBf\nXcJlS47FBzVdFENWSAtNCV9JrsBsj8RcdKmOb1FV3S8GV0S1pab982cfdzhH\ngzGLctUQbhkOre4wSiLgXPmv6tj52X0Xzb8n2zbwRUnBpZzSNkYbR91vSTWI\nJO3AF7VYGjECit+kFUXS0Xaji1QH7CQJKWO0t1U9l4jmmIqh4jwKHCjtaUeO\nrDxG\r\n=ykFg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/rtl":"12.0.0-canary.eda1705fc.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/density":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/elevation":"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/switch_12.0.0-canary.eda1705fc.0_1620155429396_0.5856620560726356","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/switch","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.718c90178.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f2dfef96549efb76e142c22b257337831ae439","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.718c90178.0.tgz","fileCount":58,"integrity":"sha512-bXGCY35iJZroJCYax7TJE4NFL6dxI2wH9hlLlZXZDveYNh5sgOHev2HBNIuQDJKuX3wtg+Spxh1A1SHigC4qcw==","signatures":[{"sig":"MEUCIFAJz/k2NLfWfVMTH2TnDgGeD2q5KT2GESU90sHRoocCAiEAw6aMWGy6zPueshRGOJMN86eEyZlRDQUNtrvowMQoeRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaA4CRA9TVsSAnZWagAAhloP/3esrc6y6I7gJSXBRqSy\n1+5THjOaSdQE0vZMU43hzsGRruEahIwA9SO3E/VfUCELR3O3HHC9lOGXhzvt\nKt2NAdFzNaXHPhZWLNyioZjtg9HG4YFNsisK3TVI8GOtCDcg+Gb9O4EOAxp5\n74PjMQZtjo992wzG3/+yttAC5BXilFodhy5cQSoY8LbAITys4MjaZXsrnr9O\nSudvGwVdSaSGcqYREONIV/pxrGf2fxF0Ca1pXYMOjBmZrKhvkgAxYLh3poKX\nT+xtOIWZeALPqWlz7Y+iqjGsrp5u21pwHB/LiOyRr22lFfsDboTHAZl7D/tW\nvNfJR8JoD9RrQdRYPLZYqUwiui6OZmRJK+c9YasCP1yUGOFIPyPFRXTybDh7\nL+65A9cU7VbUduuqYa+3TWKS0ONK9TXIiK6fHYwhxlSmLZhkxsBj1mEE40Uw\n4IVm3EpnxGzE3cERpipXmx3SZwM/Oqz44yoBnHzf/2rdMQGGf7fz5zpLk8G+\nRnwwg13n5Q5X4qA+aLxwww0NwLaa4lYqurHkAZ9HxuVz99PdgTcPgr1L21F2\n7rYOHQWj2GNpl9ozzfVghop+1Ka8QzyoS94H4Rmghjx541DgHwDbuOFksdeS\ngaKMxsbftoLVtgnL5D5cC2xsO9h67QG/pKoT00X946cVndePYB+zgGmzSoMT\nqwIF\r\n=D9Y6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/rtl":"12.0.0-canary.718c90178.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/density":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/elevation":"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/switch_12.0.0-canary.718c90178.0_1620156472359_0.8963162143147427","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/switch","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.0e3917299.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f571326143e78e30ea41230b498730818a37951","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.0e3917299.0.tgz","fileCount":58,"integrity":"sha512-Iw10pt2AOzjclVV1oSKb+x+/NAZsEDqq+IKro3liDFAxzDH3hwg6Vw8364t98aebxrGcwgTKNat+hLEPqCCV5g==","signatures":[{"sig":"MEYCIQDQA670DIyXg8/P+bCp5PjoH70SEVARxWyBBVHrTTAeJQIhAKmsxEBrHi70CiEIGJDE89oz7Ucgbgb4U+wMDX5tCfuw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDWCRA9TVsSAnZWagAA1oAQAJZk02Z9nF/7j5Jra1KE\n5Rw89OVAm7LzKEYUKHYxE4BMLW8NDYkZpnMDpD4SJ4Qp8c/0zJJUTUHHCll6\nF2H/St3jbmzvPkGwmvwF+ATCn7PaajsyORqQnC15E5lX7XQnKYZPvOclJvTG\nTdkU6wLtrgyjDRRG7DsWFmaBZ0z9j5elEGy469AvWEHUgFIEWRc0kMDz6X6Q\ncNw7Ch68ZWPbVD8SZpApupKOR9R/r8StQ9hj/7sGNYal8jgrds4jBLZSCcdj\nWD/c8iKNmS+9pIPcnPIuaoQHaAMvDBTQDejEBmlGO8eVRFfXM1YkufjrVhD4\nqo0VLF1A/N+6bGCODig+U/Ceh2EtAzooOBOrqgovITANiCGEnQh2RVLzchlg\nUVfKPjEsd8uO77caNMcsXQxv9iNRBF7vhU/irYAs6Y5ORBMoY7af3VAEGOY1\nlmjw+WexiPGVQ1HTOEEM3zQYUzSPo0zXvytWBt3I8mng+CBm//djuLJL6mz+\nWwolJKkzqorWsixMsku59MHeQiPxOgH17lMH5ITUeWv/VUb2KDPmO9xT6pp8\ngdqgbgt6fBj/keaG1ILlXJPC4oHVvcUBUtS2xJjXzMaAeuzsiCtBhzHo9Y4y\nEJneYSvqreQK2CZguTBWFCo3LuDMCr6r1OAOgKNDcSrMPblnlLivNrkjQ21Y\nAWJr\r\n=euqu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/rtl":"12.0.0-canary.0e3917299.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/density":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/elevation":"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/switch_12.0.0-canary.0e3917299.0_1620156629611_0.25786496779379386","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/switch","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fa69a811fa82d8b8f255042564051b1fbb4d8d0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.836b3c7db.0.tgz","fileCount":58,"integrity":"sha512-g79YmMyFI8+hqsG41fenuZWK53zBmg6tpJUCSB1XV0PvSD/MqngVKnzCjjCzD1elgWsOaxvCOgYUnDp1F7yP1g==","signatures":[{"sig":"MEUCIQDsuZ04FoZElstvHowWXs9PBBQq+NTizQvXtEpUl81Y2gIgTwtrZJIWCBfxEKrSIeTBUr9H5Fp9DhKCSSAn4uJ8BBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+0CRA9TVsSAnZWagAACnIP/1CvEt2ztRWB4M7TFYaf\n4S5CiDXSmART9sXi54Uj0yO4GYbwot9spx6wpIz73yQqh/vJ7S0CvAT/rzqy\nJHxc3U9N77VlYlY06NCD+LdVlYYu3DJXb+UVWuOniS6s7prTb5YtVLgys8P3\nHtgqO1p8EpQ5FyLBnp4L6iIOk8sZ1U/WqmZbuoizqTNaS/ku7Uk1klu1HT3o\nuFwklCYDhvebS6w2tApYGn4IwmO1K1xYuqetxrE9iNNwCx2Xn+3VKGL2JJ/i\nEKnYbEGcDGKwTaw9GZFEhXVM3Hxjb60AkdfNKpIgIMVvYWuyqaizk8MWuvmO\nU+jJQMCOyQfUV4ku1YMzdNvwuWWZzv5ENqgPMARquUg78hKqLG/ktrXwdoTx\nbxxTxkBnFmlUKR6jnu9EVYKa/ES0wLH2UzM+NqRgGH9hPQPQiLsrV+DH3o57\nZxCD5Q7IRl8GGK2IqgF0MChOglA//4GO71zQnkinKuiY/wy8+XHxvWBVJfSw\nmaAhZMFNp8Z4WjlNCGUHl0ZCM7+W2VWbmfE9zR38SMpRDjFI2/QoW+udnGI3\nLk/tNFAaA7NFfJqv7QSGiYHPgdp4s2HcpA3FYg5Oq/mXZ8Qm0cpFqE7YZ7DC\n/xL/JIFQ+jThMCqUjBTPjsfS93t4BUsIeQlxpj3b2qwA02dfZAXprq+wDWa0\npZI1\r\n=dz+g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/rtl":"12.0.0-canary.836b3c7db.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/density":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/elevation":"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/switch_12.0.0-canary.836b3c7db.0_1620160436192_0.5659140181104012","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/switch","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2f3e78ed909b61e1bea5568ffd0c52c64f96abe","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.53d4e6d59.0.tgz","fileCount":58,"integrity":"sha512-4mC7dsF/I0U4Z8L8olpXjLxsxkbmJLMWhLtvugPXi9nHm8Q0wAhFBqbYiQ546Thej1urvFGgIWo1Br1SRqObbA==","signatures":[{"sig":"MEQCIGZ4tpB6SkCvrbWVGRE9krTu1319d0ONn4BCoW7dSX8VAiBNFUYHxE9CZ0+cKGV7WPCwHcfA8/ucNVERl4/ak8Uusw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNjCRA9TVsSAnZWagAAmS8P/jlBvaL6P5iAPYatZUC1\nV+P969DnT5G0vxaYlwcVXBp7JhZImEw6kEiI53CIgvjLdBsbiFQ3Uq0f4XNL\nPevTd3bB8Pc70PE52yNtYfptY7gJdokRjdiTA1TT3pRXC4+5hjNqvqcQmY2L\nFGYy1QImdZXE3mzzoJo3ccTa9ptVjJOP8GjLH5mlyiuFOLRdltXhjnIGcflB\nJntQ68LKjhPwRnQ+gZNJgco7WatAoJHfoelIS456ubxss8TlK4nXRzrAOL94\ngZdtjwAKJWOZOaMExPlVP2gSJADiy5pcRs4FLTCT+TPb8vHNUxV17FCD8SNk\noy8uXFTKMyjr+w3SN1UZkqEDyn6Brn0eycZy4kZR+630IT6UTM2vG4A0alfR\n2Aj+GJMpiwMbC2Z6cZtV7BZzpdn5jsJfDGasw22/h/gCb8cP/mRXKX2zKrz7\nalmxiDb6UySQgHqHukzX94palG81jl/kOCQpbB6mo10SGE8KjzvbADDdobcM\nMQX1ETUSYQl4P18J9LvoP7H/iU51v+dv4aNws+Ab0qTMz4GEc5MgMLrdiGl7\nUWlQKnjlpdpLolP4771xDRNyTiK1fVCmTEuiwKo0DgIuF74T4M+5BzanNIzZ\nmh6ESiX9EY8qNeUiaIqDwUB4av3n7ZMCJKYNKGua0GDVPWh7ajTpoVJb5vni\nOe9o\r\n=b7Zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/rtl":"12.0.0-canary.53d4e6d59.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/density":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/elevation":"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/switch_12.0.0-canary.53d4e6d59.0_1620161379012_0.56878197426446","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/switch","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.18d147e27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f605e24126ce5564ae50e5261ef3d3158df4d532","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.18d147e27.0.tgz","fileCount":58,"integrity":"sha512-hSZPVGoxkUUtktZvsomEOEx2G3D3ypILIXlhSGBK6LZk3F1N/L7sDTuY2qGYK9/ts7pUSqpFnqX8IK+wtriz2A==","signatures":[{"sig":"MEYCIQDM77sx9kUBUVnJMufB7xuWaeCfQsQLZdHdLGqVqE508gIhAK11WTuqDFL4AxwtoDRMhRekwymmTmPQIkt8fz6x/tdU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVgCRA9TVsSAnZWagAAUA4P/i6Tvj9Yq0a+b+M/F+hr\n4tlHDaCEENuLL5Rlzv6JG1T63xgqoX4DHhqziOxHd6SDvgXz4w6icdEuM3c+\n8K2arTEEZ0fpGDD+nkquvMWf9VAvjIzJSPI/y1eqCmvIRl0/Jdy+36G2unfL\nP0ovwor3qSj+cu8pEClIy7uRVWOKxx094dELuFohzHBLNtrIfk+I7hzFkcsR\nLTW3s1gfqQ0cXhp19SBSQvbZFoM43/Li+E77FHezLduUh33I6o89B5e//N7Y\n3fOSAoyFtSOnMCc0cB7tDosojpHf/SHAdON/BXPnNxwY3VErhVZTI/sMod/S\n7Tly995ZW9FEj/+9ZCUpI9eID2K2Pk2QlYoQxexrR71GR+z0ZAjsht9prPR8\nvFRzZECaTgf+GqAhEfBYF+R9RGQ92cDe7udH0N2HmZ6hlEZmTcx+aLg+mMRq\nV1PQlYtBz+MgwmBIBDqJsWCzMK/g5T7FU2aUsVezbIKgsybZHiTy8LdiShyo\nPsTlzqxIzNyO1/i2HI6rPxZKS5MpevDR5KTltTSwNG5j9pcOZjy8UoSn6y8O\nVimXuMihlivPQPUY6R6UAWhvEmYoE04H21ZVCZNq79dA1iCJGU8vySRZdjWC\nPGD+oFU4lQCY7iT2KMg5pz/ag95b00ci1qOt9DqvD+0DUslte0sgyo92DvKC\n3HZF\r\n=syW1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/rtl":"12.0.0-canary.18d147e27.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/density":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/elevation":"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/switch_12.0.0-canary.18d147e27.0_1620161887771_0.5415647556193448","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/switch","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.b9984794e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73a5e85ac2a388d331ce9ea48d2aadd0f401b61c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.b9984794e.0.tgz","fileCount":58,"integrity":"sha512-ono6eeyey8gNrPkCnTv85LJ8FmdvtOMcHgV20UXcPGhYee/w6NDaeDjDeOBkJDcAKqynNsRvt4OuFWfXZWHqQA==","signatures":[{"sig":"MEQCIFVGbxSK0P4zCTZzba8tuADMl1uZSM/N3e9ioIxTU2SHAiB1XraHJiU3woQ1d/S7VCpWrdjsiZIJpOVqgx5OL+YtJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdKwCRA9TVsSAnZWagAAzUsP/RgweVdnrxOp1S3CsyxS\nDi8dPzY2iFmI7qjOrOyuaOJJ1Cia55ps4I6xKCI3IZ+9ZDK7FCQAICPM5ac9\nZARYKloQL9KlQOth434vusqaGFhFhWr9HpBuh8NikrnKHsmRqVmjI2/hHweC\n2/Y7zWBIYu5+gY2c3U4pCxJPYRGW3zY5FS2qff7V12zPFuqx1yZE1Jqp8IAi\nWkOGx3E0YlzrL3oqX3sqL+31HnCJsjRiGcjF7khehK6N5tg9ZHOMY4HvaTkT\naJiUM4PRVdtUgR8Tih1xiHYk2wJwEBG505fHAlJneZdS5SsQXH+szKTcmh5a\nlN4LhG6h6qFUiK352lH/eVqTl/hEomgvGTOWfn9+X+4LWWWR2eyowS1QPb7d\n9aG+4wW8VeHUYcLp9wbewdFuU/5ZrU/fUdpdG/xJIFnc4g8FfRctqawlUyGd\nE0l1y9dNrawSbvwRD35ub1c0uxYpWuPXc4KZY9scZHWfOtpDn/ioXZotkPD+\nmoOnZo2GX0I1t0pNjM3mvMoH4R5867nmECLePCUl+HTZUYwDhyzaWuKTY6uB\nlVs5e7Xdt/wzdUKg1NjCj3hStXuiedAr/4KhMNrii+TfPMAkRCZsEJpJTW1b\nQVsFsKOOIqo0PpD6Egthj5OLMCxihhkPfz60Vtk0BejspFdPt9kezfMWKFnO\nwXyW\r\n=OQXM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/rtl":"12.0.0-canary.b9984794e.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/density":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/elevation":"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/switch_12.0.0-canary.b9984794e.0_1620169391643_0.2118250846617522","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/switch","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b06c2780fe3af1f84fe86ca69d7b456b0efbf248","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":58,"integrity":"sha512-1t2OYs6i4xybxocT6mvuyplnA9OFj0D+CjOB4a9EWMTvt7wHwmwkYGIylspUHNjqo0PmjqB7toNZR7ioLkkkHg==","signatures":[{"sig":"MEUCIQDpDhLZM8a0H4uzVGl3q8VIe/W3OMZpYeS6E5NmfdDTLAIgcorOubjZ8miMthHvItq2e2PuCzWCWC+osumxDgXRO10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdN6CRA9TVsSAnZWagAA+ogP/i53cc8Zpdpy0rCs5we5\nJQdxWOAxj44xvfatOHfnXTYr5TddX6vt0e25+9u3t/vMBGeyyP5J70iok+Fi\nEpd0pwf8R5vkJ4TvwyMltTu12YxCQWHCfD6j4H62wzaZ0dPsVQjyD63Uh+TP\nt7vAgysiH/Sph4XCY0zwhkbpz0RgFkvGeMHBnr/LYWXHmV4H7JX9IRy9YO+W\np2cquWMRz2SP+2myGMCBqLm2dqiQwJIu2cP1gw3F8ZhoV7MHHku5hWOcRUVU\nyCsyUObhy241pHDe5emLYdre+9b/esw1u/XSMEdrpoR3kJoO7GATU4k0A2UO\nyoRTJw5uUalR86rmwEYa15utBy64v0G560jWvbd9SLKMdiNC5kSzxqplktsD\nfJrVfPfSrrbHOJaQK7YpWDeohSbCm8mKwx6E+0s/BbPE0ef+D0n5J7RoQGjh\nZ3XOOjVXP71pqIlucKFRTgyxQAwT77NGBV5AbGfX5Q1UMIey3lhG2nG8Atv6\n5Ludci6fP2aP85I+FrXlbCRnIuHznGpSiLVzey3rU7xmTEPVnHtNOtjWv+P7\n+/TzZ1XFf2aaWasMg/NlmKiI9rVjj7qtYjnfHVEcBnfUZ96wAeLLIXyp8ecX\nJkNxDPw5suOa76JY3+OX3rqbJLyRIo5vRX3HLwezCO5M3lPA2hA6OL3QNIaT\n6epK\r\n=6XfE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/rtl":"12.0.0-canary.b76f5fc9d.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/density":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"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/switch_12.0.0-canary.b76f5fc9d.0_1620169593987_0.5079774824826295","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/switch","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac4279a01e1f77f282e043f4822e4194e67161de","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.055d4f10a.0.tgz","fileCount":58,"integrity":"sha512-JpVc23HYpGxsyh51aaS1At8EsSqxSCEWoZg3KtRQpHpclBthUzwTJ+N+DHNv8TYtF7UjFsEBW7JlHvV8YzgDxw==","signatures":[{"sig":"MEQCIG6Hllt349fbBzwyp0qnuZRI2gP5CsWtrkkiXPA9PlYIAiB9VprKNqzYMaJk7sWqCtgQe+wtFqhKq+TwvPdHzEiIGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdcECRA9TVsSAnZWagAAfB8P/id7znwogD3VgP1FemtM\naEec57NO/oqKCEI4mjnfKWrjdpJJHi7y4WAsX++eFn/SP6QIFVX1B9FYfgR9\nD48nVotCSEB9TpFl8luqRuG805KOu5FT8z0KyqoFxtW7iLXWlwoiWAKB1dsq\nY94JyGyc3MHT34TJj+bjECzR+mQexewnHvj9qNuzhXVPV4KDFSCXKxeInM2t\nHRtFf8XrwwTT62bILsqIWfHde+qd96aFYJWOdKn2MuR/W8sI6IdOJsJFVnvj\naBWZctT8RIXfKeVGFKMmFjSUqzOx8OUT+mcp8hSVfZ5op2vS33jIXRHjqGyv\nziGDQdG+U86IYrsf2vEqKqc4WrsfmAAFslEsHnFji9dfrJ/QR15FAFumdP71\n7rR36S3xKei4D0TUUIs+RFv5YpfeS76gJcqUWdYfg3YwP7W9zcgmAAm/DU09\ng8dFgOZOuOHOnxKIBcmHlw9Zfpq4JwzzDCKXePxUOUJG6vC2ulXFaplyY9If\nZsx0zeUIZ81iKybXptoQPayR+u4fPJqBpaLP55vLsB/DGIMWowJpimK4LF19\n1uNaEDU8wGTvNI1YVXHBLie5K2aJWAAK3so5juLAqZsGqc4hhkLKesbIhb70\n9P489tslsD9VeTIm1atjUuNyOn4HUvGjHfL0BHaHabnA5Gj8JMzklKVmgKq/\np60h\r\n=jLQ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/rtl":"12.0.0-canary.055d4f10a.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/density":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/elevation":"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/switch_12.0.0-canary.055d4f10a.0_1620170500483_0.3910167011681698","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/switch","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf5061a162fb072b7666043b2dda02f9f9542535","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.5b6a46016.0.tgz","fileCount":58,"integrity":"sha512-tN508KrQIVJBRCCjDfIl6O2xnFJVAx6HEOZu7rDpTNoO1qr09ONl4PxKh40/cEyO8jH0Scdnk2/+DuNvp6vDew==","signatures":[{"sig":"MEQCIHqfT4gVQq382Aty98DQ0qsyCKnpIe7zqfgRwz9Uw/wYAiBX9Kf1990/8eJcJ/uzX+Tp8W3anJdqQSw9Vnl10MSi8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTYCRA9TVsSAnZWagAAVbEP/36cjYAW0VxEoa0Wjqlj\ngmfP2tK8Sf4kwP7HvTBZ3Aw+FRvZb7Azexe4mJMNomIEDkWVJSQst0dBrXo5\nLz59evDR/Xo+H8p0R2nLUzdtqpF3BXt/r3z6INXlTskiTvvx0o2G3w48mF9y\ndfLY1bZaaAnpF+6XUPex4IWsBh9s2Ha58tGU2GrP4QmdGwSFxG7UX+cL6/Gk\nt91zRIaK3zBkWkwb76C/Xm4SLOSCxxlsU1YilsxAXhaOdvJH05rZN1r3hhtM\n7NBlbANycSsAgo9voiewsrE62ePNxhox6ZroBhUPzJDUb2Dksk34Gfm/HCNK\nveLtv6G3k5DEzpfgEKHjIxUz3UXsGWxAq44k10BPUr9fkwh3LkjM5W7LFxHb\nmNE//267ClkacT0hmdZtTgC21XuYhMu/m3gIQ0jsq63sNMiFbRu57oO0xFWP\n6oGuatbUcQR9W+CUlwuikO8owb/eoR05G2pcPs8hZBHijVZwTcX+n5CnAU/e\nyMM04MdArvV9FMfaJXUjgg9xSYt0GJGQ8b5zfQAlzkdt8WHmRAdaRByq/D1P\nJLFP/OQ/4JpgltCT8eLUhnZrRJBCPzfdSgoRs/046tUPHeDKnb+Nk6hDBsMR\nMCkgyLytXry1OxBtWexp5xKOJsEzz3KZ0NM75kDu47/ijn5L+FIW8QZFMmWK\nE9si\r\n=nuKn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/rtl":"12.0.0-canary.5b6a46016.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/density":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/elevation":"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/switch_12.0.0-canary.5b6a46016.0_1620231383637_0.15634235113613437","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/switch","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf34df693fe63f433d91d14e5f06db083617e362","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.33c9a737a.0.tgz","fileCount":58,"integrity":"sha512-5IWQb0S9g7Uu8lbF01EV5uUaslaX/eO9hJ7fQpPpHsiPHTt+GqPZDwwFSkYNhZqf1ZvoKJIDrAuAE0WVBjDWqQ==","signatures":[{"sig":"MEQCIEN70V5+8sDIiq6v/b5hFNq92lIEkjIJLfPUzsaf0twKAiAM8PDYOd1ZKUMgKnZB7Nl6N795b9L+xpaTmDHQxIkmHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktV0CRA9TVsSAnZWagAA1VAQAI1ertLIRNOAGetYgiw8\niP/itgzkZYKh/q21VaIElKK74l3fLN1XXLp2R++4Jw2dmefG6uwLLKMU7pn2\n0qYu+ULNKxQypduFpapsyIyPfNUaicV7wzmHehOmT3jjRPOBb36eJYHOeqiI\nH6+FFm3cdj2OJ8tN709v0jj45kAH5+GYCSOHr3Gf7LZNNgu8TzR2i+lNY/86\nTdY1FfpO8B8zq7Phr+O9YHelBMpXMIwoN2kgsinz9v1+odMT8tXFILrf0/Tm\ndvnXaqIpyX4qppTzqDsH/tmTToF+MtaCsg+++0Y93ZfsTPwl96VgAq8osv0K\nb83ISolMHd+eOMyN1Zz8iNT/VbtOeGS9446UdCol67x282qQWRBi86QryddG\nGVjwQO/79r7xUumhbcDiWxqIHaPu6WIJsuz+nEx3a7yTBlV9UvaYRpGRepQO\n6tTQeEqxJfV1YiSeR3pn/KSAJzrk/tylQIzm8kN1KC417Hrw5zt2BGWlhHUy\nUa17S54qrjmyo4IzlGpQb5QmknHEVlMeGbP9AGJLyhHjMMslzgeyfnCrKDHn\nHIIei/xtbsoShLMn52LB56fZN7FxpkPoPtwD8Hu/1JV4+jUpRMbC5MhAaAYA\nofogINrmlwE//951eAk5bfC/nr/Jcd2Q+A8ibJ1NwUY4SvjNA9O8T84S7W72\nCzgC\r\n=PTUL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/rtl":"12.0.0-canary.33c9a737a.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/density":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/elevation":"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/switch_12.0.0-canary.33c9a737a.0_1620235636487_0.7292596599865349","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/switch","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19779bade2ef31fb75887a34ff20bf90b2582d39","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.9bc0effaf.0.tgz","fileCount":58,"integrity":"sha512-Taw4/gtz6YUeTRJr2a/TDbuX9wp4uH/8YOOCZSrHORWrwvcqleebcMfkglftVlwUbjggTfNaEAwRFkjihOenug==","signatures":[{"sig":"MEYCIQCYIZOLmEhxFe8ljfirscHBAQrdVSz0RPF1Cg9L5P9JEgIhAOiHqw4fCspniKcOxwcT7kU13/i0rUEYnw2fXjzvKrfJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwdXCRA9TVsSAnZWagAAKdgP/0TtGHi2RE6eoicxTxiB\ndsbg/vVwnl8V/kuO+ofQ+K3gjvbqcF5dgIGuFKbaPYrDaDhxB6ozA8XXY2dt\ndHN0bpBa8OoY4VXCe0zNFQY3H0qCSRmT5pOO4YbtHKLL/zuwt+fIyMV0PgwP\nEoBFX5XhvkfDVqHCyzeXoS4/r3jlV8mJT77rOI4JEDInt8PlXyBDEoopzs9Q\nz3mZIrLTAyRKYzocoeRWwwI3e7/4V1IeUU6G8yhc1vQ8qCgdoeh/Y1V8RFdA\n+GeF/1vpxNw1ZaVU1keNxZgxhsUP+wXNwC8nodMRpiVbFq7CQFKhdsR7O6PU\nk3cNst82m45vRoVyog5kQKC1VeSWvlzelYRapFoIBfvbRq5u/DqD9ReD3PlZ\nkG7fE4XmzuWA49FcpoYPpDsE3DfAclwwVUY/gZAn5iGN7RgQczuyiChbL1sG\njRIE1PXzFYJx/XC4qCaCZVR+VqICqH4p87xhZwjKZFoyhEjL9hVvYeHt7lBg\nzxcQJCDU2DzI+MvkwA/uAcbsIzD/1db0u3vOfwWowVdpytbDzi69QzLYOGnK\nFlF8C7d/MV9c3oFAr4HZWDvXl1qCT+KXcwGiHSJHXx3d3HnmHDQnREt12zZU\nX37Z5fv4FyKi3SqBZ+oXRqyt3It4bBBiBRSr3YYNf4nT/mgs2HopoRJjHZc/\n6dfy\r\n=ZFWM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/rtl":"12.0.0-canary.9bc0effaf.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/density":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/elevation":"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/switch_12.0.0-canary.9bc0effaf.0_1620248406586_0.706660721777036","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/switch","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28bf0ddcc9e218ae7607263508aa8100aec3da1d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":58,"integrity":"sha512-Bsemg/X99ZuFUDzjO2GbQz+J+RS+uWhI+s1TkxfXnRYbxEjexzXn2N3On0v1165noJyyLqGO8Y/usoeie/lvMQ==","signatures":[{"sig":"MEQCIBthUcLnCf8vl5rmfsZBF5TLqvRemPB2jm2+vT5NcHWtAiAlAbFrrzOnEQu5y0K56BzeRYbnv01zyAgll3L1MmW/Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDqCRA9TVsSAnZWagAAxIQP/3krHVJdHYlYPLQTFxZT\nipV0pqiGvzIEIgMWwoOsNSzXU+EfvMfcP8tFrwmMSpU/lcxciks2UybScLuT\nbA5psGgGi0K+DjCsxUZ2zcNHttZFXqn1lxFRgpgl0dJhJxPNCnS/c5IvUdTB\n9EUi1KS4i4sy1UsN1bEDfq2J0XUVq4IBviYOMwl5uozR2adf9QMEFBUo16el\nDH7Hup+mzlTxNkpvt6XmuMxCO01FSaQxwHiqcdLmApWVw3bbrOYLyHFyuqdz\nKr20jeBl9KUNGhHC/lPb9ZvoXGWbBYPjxBHorEqsMou1cGbmq7y5MrU6pKfI\nTbBy8AxuupWK4wQHS9UcJYx2O/d0PTHvyYZ1DnWzjrnbAwRrU5CJ/RxA0zCD\nUCAoP+a0e7QDS/TEVU0fHdIXQokt2/5vfeVwfhWtgIpGEpghWKMBQoQSwFLb\nJcwZx0NxEW/TABALfg1Rtp7380Hx0MmNozzd0p6YV9QhNoKBluhfaI2wPvjk\nrBo2J8M7NI2jurmGp63d4oRIy2Sdr5In2KYvZvnsAzMkFAkpm0hSv8Xp1HvG\nRxfH6OPn9RQpFIhjpiBa1Dil7r0mB5OVVBKGI5O7m3+eBYpzCBoBG/WA4KcB\nmfdMr5CWIO5ST8jf+ibtNHkMCGbkUAKIGiUwLqJrlqjKXju7023O6Ukfopn1\nv+jT\r\n=0FOh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/rtl":"12.0.0-canary.a1e0f2af5.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/density":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"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/switch_12.0.0-canary.a1e0f2af5.0_1620250858094_0.7400703888178946","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/switch","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.06930c96b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e496fb82dbc8c34709e811e420a24461dab6616","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.06930c96b.0.tgz","fileCount":58,"integrity":"sha512-xr7lcQWnbLMDodse0yevkjfFwRQPM6og0NOAP975ov2UP2Ac6RYM5CdT7F8p2CwIYaPJZZ6acBY4qkIXQcZxZg==","signatures":[{"sig":"MEQCIHQJf44ynGpOY6yEasm4lUGHnqnJFazAlQdSX4cR0xDoAiByfXUPKURcGZ47ngYSOfafry3fPEtQg4b/QqjeEf7UEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyyqCRA9TVsSAnZWagAAP1YQAIshxSkiCAMELQ4/ocsP\n7bfTmCVjS6wYpipkAoao6uszSPZwtP/BJlyXOLKIquaNjRrd2g9hbr9fq10e\n9Md8z1Ksn2VS5vez2VM0mGsGcISoncRzdQL0lYQgtfyyCzeQoe855UR7+Ekg\nUZqg2tCE4jYXh0CPgmsvm2gATzt1805dBMYv7XxJDrieiCh35WcrnoMSy+zc\nfxpsSWH80K6pm88x5L7AJFcz8oQ5sdxv6MYMOsUGFa5kJ0ZF1n8gWXs0JtAC\n5aBU2w1iCb7CQphxRTxUFeu+zYWqAM/h/mxGWo02BB89lazXZbMELu6dlEke\nL2CQu7BzK0i6NjnNjEfSOK8YxkCgDF/Vkj4dZ+ge7YLCg+30dSNCgXVD7i1m\nXAWSSO6EWYSsS2yOoexGuGoN7CumpibVM1nXrhG59s97p4LiZgXH/3qP8dvY\n+uzg4E8hk9Xzz0SDSxw3f5IYacGKCBIlkFSg5FaN9l4m3HsYdBedgtMLeAcg\npjG6peIo+N+vHFyadEpIi3kQ5SgbmH9CRMOLcVJytxXyi5+NGXU7c+Qqa0Oi\nblOLWLmJxGqiU8bUSQnOibbV+Z3TSrkmOzOUHOySeA92bIuGuVjr3dFYfC5l\nqm0mQDqaS8JDgDAkRX+EhDeSU/1TSUALFgjmOxPtrp9Dl/OqyZ0DC0CMm7rp\nEegL\r\n=3Vs5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/rtl":"12.0.0-canary.06930c96b.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/density":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/elevation":"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/switch_12.0.0-canary.06930c96b.0_1620257961550_0.8724665470609612","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/switch","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"973dbef3dec6652b4e5f4a2bcb76d44638c932d4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.03f525f9f.0.tgz","fileCount":58,"integrity":"sha512-9kFrZ+Tyb2swyvpZolfFuzelad4WlAsdlzexYYAnTGU0mlmnKeYKCwuNeHAIghKitf8dn/a6sXHH83mJh/Y4bw==","signatures":[{"sig":"MEYCIQCPI5gqfWVgu3pZuoy21nz5y4uFx1tC+RB3AHkZje1YkAIhAPiCeI00HzmEEp5asFjvfvRAs3LiLRxHyqPnjOtwnbQd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkziNCRA9TVsSAnZWagAAASkP/R33Mmm/aZClMsSO6a1S\n1R3QLrQIS5ikBXlR/MiIUWyZmpTHVKNMtHMtXoHOmopPwen0CWSJrGOptvpw\nZUBLOeX4DHju9kwtnp4yNemgIh74spQpL6bsiuZ8KcI5jkkLw9lCzLavEqbv\nSYqo8kTdMPGZmyLA1kaIrd4OfYKXwPPb7JzvoaMuOBqyt4jbg5WF8/mVjp0Z\n1xmbo2B/MYi17WqtS46g2Vhj05uXcGt96rQxib7LDjfJ8a3NX8THcRXQIZsX\nZuVjJxBTZ3ivyts+0stkJdKy2m6NInsC6fSJwTAyV/sESQd8Ev+wqU5KjVIl\nblmW1Ex7C80C6ACpzxQp5n8TCwWCLlJULyrKXSoGS6dKK5ADC97ROgRzehDN\nb28FN02eRtYUIIJvoFfJR7F62YouOLZrk/1HHwwcJHIV7Eii9ow/cWFfU7Bp\niR2N6KMbHgFCyUXmvXZgh0HXGg81bBjldk09CkMn2wzYjOYzxJL7FYk9Hpqz\n5WQIEmoI8LgkGCLPPMe8op4o+IPKoUaeYfolis2pzn2E/jZLnR3zFIXoI+UB\nHfgAonI6vpCg528oPWPBqpgnCO190zrVjX6+26sXkQwskc8ybPDBO8dXUgQt\nDsYLIKklNKMcJHCVU3ejGK0H76cLOthrURLtwfw2adrM14uPOkb9GVlaXMgG\nlHM0\r\n=yLWQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/rtl":"12.0.0-canary.03f525f9f.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/density":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/elevation":"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/switch_12.0.0-canary.03f525f9f.0_1620261004674_0.753160537349137","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/switch","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b794c444bf81628f9204a138df4a6c24fcd9e55c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.e82ba2a26.0.tgz","fileCount":58,"integrity":"sha512-nOe/CKO840NjiNPLssvtnpfDks4ZyESs8aSbPKssuDB3pb2SV5OOdDaK7A3k7matNEx1u4Y5EkUX4QHFM/8+qw==","signatures":[{"sig":"MEQCIC31OGcnQSsHaJWtNSKPVnvV6lbwUm9WROFErrSKX0PeAiBLvbzEVmAzndcRmwBrILRISKDj5Hqc1CaoB5D/GZpzCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGqCRA9TVsSAnZWagAAGJsP/08Y06QLnYJJZoCw9yNT\nIaMNcSMSrLhfwe/lLdrAXQtUUWBj6pEn0sJxqwUZ847yk+jpR4DDXVdtUO8a\nx79jajsAt16K3ciDvKN37lEVIjz/zE5QNDDfOCNgeeJLTD1RKmC1DS7O1QbN\nqIhAvKSeIqOdOLuj8ykDGpNBR5t46yCUld1OzYWeH4wxhGQjHCHL713S7g6r\n2EP/sUwq+sDfcYf2pjvWaYoDHhiqk+ncEW60H3GcXIb1XMjSaNrhhlWl9Io9\nLP4wAXAkJeSkZQTUVk/Tjur/ve9qudxdvA6Szryzu+rSPBnvcHt0yf8PBn7O\n/dqw5dndy3XtkuLTn6EStfvC4ZzuBERXgxn0CoWegH10/Kg0xtEfv9f8MKfB\nEMOaMvbiQiHpl5Qmy7VWyM4nkXf8yCfY0ZOlp5zVj6y/r1NkfK0dDoQhiQWW\nG/7pdm9OV6vcqnUuKD88/zsiUMsWWudeYiP5dppJF0bXmoXxenKEvCqL9Khh\nXqwTYXlZwhFNPjZZJhIRNXprg/T9DvivSEaO9W4p3UxVp1k4dnqvNjXj5N7o\nEO/dX6wcyDAcoTi3w0bMKSktulGN+L1YF8PNVWDVYbD1XhHDmI9vnK16LkSY\nV/bE14zTEpoQ1F5Bcs4sEqbMoD36d4NfQDcBByiWBPiMqRiL7PBCCFqzcEe5\n0eNN\r\n=Ovwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/rtl":"12.0.0-canary.e82ba2a26.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/density":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/elevation":"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/switch_12.0.0-canary.e82ba2a26.0_1620316585550_0.558783100489999","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/switch","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"668cd2e9ec722c588f84b707266454b1961b48c3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":58,"integrity":"sha512-RmLCNJFXBCfkxpHzQSrXrirsWoPcWrPasgO+/yUqETXkT9PB1s6ZVpRH9Q67GfQV4NVy1FrR1+HW4rk1TiRmHw==","signatures":[{"sig":"MEYCIQDYuiap8TtcYVdbnsmlKQSAp7Bzk+cyrHu07vKHCZ/5rwIhAMle4dgRB/5qSB0hNoEGB541GFXED5hfh9RacW/u0J7y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":627931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCd3CRA9TVsSAnZWagAATBIP/3Lo2Y9YAdraOqAvlk9R\nxC736pxzfogdy6Vww0+ICLvNdC99Lwk7d0oX/6/0ca86MJHacifv95X/WUdq\nWiq6SixMQxlvBqznKTUw91BPs/G4Yit3dgwPWbcfweznq65WHwRNCaB1hQKI\nc97H1SJ4U75+hOIoetVBgULDzzOgIW86tW/ah4gTIpeeBOzS+f18+zkO87St\no3OuMQTTI7X/O5m/bhIUlaT0aRYVA51MzlOcXWJh+93U1Ro/+FJPr/pSX1DS\nmXmHoDDIffTEqPSqud7uDBKs5hDgg5UQZGZKoPtwJaD36GBSICTc3ULRFhjM\nIOgMR1l5xtyfK58b5jMexDAxQRlyO9QgS9OHHR7Q35n+Q655LmcCK/tAUnyj\nLL2XfVmOB4MdiVYYHRKFD34KJphSjZJVZoTj/uBni4ikh3PAGl0NKRsSmr0R\nwWjqQ574Ca55JeONpp1gZbXLo+u6M98IehV/3TmNxJ4rZDH+vieWBfJmdwYF\n7I7mRiCVc33DYnkIhQ3f9IOTKfTp1DOoSsMKLnKdXSysSkuihycgPcmCeIKA\nSiEpUAEwdg1kuVr7WtslbJZM7XJiyk4Meo7tWVz6qLihTEqbO4kUbcMA39oD\n2XNpSmzzGFz5QguGhWGn7RKIf6+Ah6kfUMUXa29kbafz3fkLsKk3e1oVVlFH\nKXyR\r\n=Btb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.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/density":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"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/switch_12.0.0-canary.fc7c4e5ce.0_1620322167509_0.5526152238322408","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/switch","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.65c04514d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"331dd2b4265fd0df7da1531d88ac20339397df18","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.65c04514d.0.tgz","fileCount":58,"integrity":"sha512-SthDOHwfYpvkpb9WT8V6Ve2QtRriuzgeoWUm0pjQE5cZxMqwaAPfni2/pW4s+s02qMWLY5RGXErUfgrVOp8KwA==","signatures":[{"sig":"MEYCIQDEcV9lxXG0erni7WQ8Pc/z7Yyu75RdeLz5GWtrlAA5agIhAK/XQCVVcCDH/yMCgg42QlThMhGX9H75nCLJNGB7+XcM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDjUCRA9TVsSAnZWagAAz/sP/3p5MpXNJ0rgaQRje8xl\nUxPOMWs5lu1tSb5+MgzUJeukhSUoQ2U6K4lMDWigAJu7dS1wjaHGDSH3CFjJ\nnlhyGMSSY6dbkWJaFOFAssrJvBSDh/S165x9LQtgSr26T2Jos8okKkAJCPVe\nf1krL9iN5exYN0UGDCRX0bSNoIqRMVjYs8v9nf0olZjpAFO1XYro3hpTgv7I\nJuLQ5iMxn9yDgyZgPCoysYbh+o25nm7F8cFj8NK8rmy3HMgLMASiAIqUa3a9\nJDrs4qx+jOPttMbDyIGiMk3lMmWvoVt5xusBEZGU4TtHr5CT8Z7Fxz/KSP/r\nYl0Clj5LkZuzSBhWNccWxlsu4f5wnM2aenmgNHIKNE2XW8QwyaHoMK7E3Vwc\nv9F+XP0fAXc+1VGYln4wJrfsZ6Znb1I/t4oaC1AZrr8xZ1CwKFRdShPUQAwl\nfMNZjtoW6PXuaWVaS2hJgB1bd7sLv0EpaFEex6A0xZOpEIfXKXvaGA/+TjsR\nM6IR+S9HH3VPnEPCvnKyGHPMDpQqA4wX9X1eQTGx5Ooo5VatBA0EV/iyGOpg\n/bgIoavpe9k2t94CEu9gZCCCdxUUsQ5hcgjhieUm1i/KSPS0iCPVBpOO91QM\nMUHq36ZNUxMGS7aedTRVfYy/oIV1CNzA2nc1vBTqOLXC8NRs/jj33PNS3cOQ\nPB50\r\n=rqSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/rtl":"12.0.0-canary.65c04514d.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/density":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/elevation":"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/switch_12.0.0-canary.65c04514d.0_1620326612279_0.7588802473182581","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/switch","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c758f70699db4fc03efc788bb90a353e5fb1c6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.c97779ca6.0.tgz","fileCount":58,"integrity":"sha512-oa66eJogMapHPM+x2b6wx4F4eCn4sefsgMFMmRGudf4lu5sgSyeb9PzVeFPQwngp4VjsTVHi4HgDGGRcmIAhJQ==","signatures":[{"sig":"MEUCIQDH2L7o3Xub4/G4FyyESVFeqAThYS5JyhJZn6Uy5rnpZQIgXwnCFeEPNQNZ961qWlX1dnnUHmN+JTxO0Sz+6Vx8D7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGLvCRA9TVsSAnZWagAA8gAQAJ2HFMasTflDFWpYPpSO\ns/iCK5VySB7ATfY87bHVNjnI+ojDFHRgp3qdhqbPItL/KFNneUquqYggwzhn\nk5b6PHAjhM3NXZTSBTa/E8mkSoKlwHNvzrjxX9dW/1IXlStd7X/cwtRt1PFt\nkh3IrufTPJZWfyB0R/uR6HfJ36wr5QtNhdjzKoDWmg4B0ctzTtTwblYyIxho\nskGLfCkTgFxbWRPYDz6x5t/qPHKifaNpFEHSOXfNO+3Do7NHDtVYTE49d1PC\n7Zbr5lNputm+O0eXO/DhmjFXCHIC7HGXivahtKLt+5BvKAzJSF4K5Tf0JQRX\neWOuubwr8lxSBEu9ViEeZKW6o5ahMVVO1/gOOcN+/PI5gh43mLNB42c7ty7S\nIDlO09psewUwWs7d7MLZ4toaebKGSbYmFhMhg53iUls5XshEVejaFNik7Rks\nfB5Z8jHgpmj1O5dDdHP6vJDUTiECnDLJcB0jIJDHfEWIsht4tBHTN8myRncO\nmUWMs4bg0Ulgetcr00flzPYwyiV7VkYdG8EoShQQF+uKXrnI9ATJjmovcEjK\nn2dTeNw/jP8MQadDMFlWbCmNL6SATHwUAcUjQhl3iA8Zd4BHfsc4Oe7Tahfk\n70t2S9ap2O+cUDjSUl5br+yvnn6C0q+Ho00HDcKjCeYTpLZmTVK81crIW8if\n0T2h\r\n=ai2q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/rtl":"12.0.0-canary.c97779ca6.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/density":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/elevation":"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/switch_12.0.0-canary.c97779ca6.0_1620337390735_0.6975037590715014","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/switch","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.869d890d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b73841966d7b6398176fe96dd2fb678e6b43c1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.869d890d4.0.tgz","fileCount":58,"integrity":"sha512-IjBO+xibCOtZmeDa2OdVeswCRrE5FIdjE5HYJVgqA5RS0+LXv32FqBYtVDwsZtAQ7gbxFKOfeTcPUnihgVTNjw==","signatures":[{"sig":"MEUCIEVpGzWQDqPMs4tF0i3S5treI2QGij6MweLIeukX0RPVAiEAm5vSGGkjQVpGBovk3P6ArQ2RVO7UKUOlvHS6PdgwkeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpgCRA9TVsSAnZWagAAxv8P+QBymZ50Us0Pak9kWnli\n8MN6AKwtZUHa62BbOCZHCB1Nkpbs9kqCbI//lXkClvbm4a4Cu7hIY8HEDbZy\nPA0zEF/YYd/GgDzU96TGH0Qv/g2sxHN/WHZ1fa7ATN1/xfWAVDT+w4OxKo9X\nvDFFzTPLmLfzScRXtVhhvxBTdWYw4SfmTA9ziRJnXgqfex+lFq5PDQx5FxQ8\n1HoMmWPS6c4kJyqhJs9DVRN7fazo06FhtwpdwcCWdiRXlMaek2brjJjSw/xU\n5kXKkSWa87itUhs/fC3v3Y6Hlg5PF2e2z4QkuXSpU7FeuaTwzYznjrLDA0vH\nw7p7Bc4W11aCB4ju68niVI0vF+m/EjCUcX0eZYmDgk6964Z61es1zgb9zikH\nAlLDq4yKlzaT+rs0kTKxyIj44y/VbXkpsJvZl3taIv4q7lKFrs0GXOsFOf22\nhLcRz3q4IyU9O+a8Ef0fRgzY9s3EHoRyEiqi5a0YePvyToFKYN3ni2w/UD2C\n7KQuR++M5iaL70tpzgObTZkv9/tlpEDhutVWwO8Gn+hsc1bGVJlznQVTd2ai\n/TbufR45kLg7KHdtssqwhNsOCRkIFlgqjtwiORuG2P7T03f1X7rLKTLmY4k3\nUJ1ky9GAPPfTOhHcVPH+OTJYdR3gO45J8ZRleKhu6B5vb0p1aBPXrE5iG2DF\nygsO\r\n=AMym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/rtl":"12.0.0-canary.869d890d4.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/density":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/elevation":"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/switch_12.0.0-canary.869d890d4.0_1620400736142_0.07346610018453048","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/switch","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db015248acf50baaae6e44ed8a6845ba2da9eee","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.ec22e1da9.0.tgz","fileCount":58,"integrity":"sha512-PPl5i45nJK+YPQ6QI67Eybw7KDcv5F1BHn/8kQXOnz12Y4kDo3cvAmpUXVKFpcP+TJQoaa7oU7G4x85kCxgJNA==","signatures":[{"sig":"MEUCIEY6yf4mLHLi5ozHfEWNlPrgtwkXL9bX1sacnw+qdzO+AiEA7yWLHlh//XmnkxmKK3aHe8f+1OrOrMmsGvg9ni4sxnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXonCRA9TVsSAnZWagAAo+MP/iG9sRryziiOq0DbmtGM\n7ZqX2lwlGAYsoEpkRinfw0kzHWRoQroNLMs/o0eGMJCwd0naXEaTFb6uAjkw\nKrA8mb+wrPeIjSNoYptA7rtqMErB7OlhG/p3kwj4j9dKcXwqSaE224RdNK28\n4crh66SOoTNtuvEYYje2z/CxcoknNH8WHCvlpSKUCZ8RDUS15QbQVidl3jEl\nFXMfPOrScK62kP9H48jLD9TvlJw3Zf35hcqTzOS5SUWo0NZdXk8/vDbkd4/2\ngYIJHVNsREZAUqIRSd4Hk2O3Edftq1vaifF3gf0Jhrq5My1KzdHuQH/Wa+kN\nJe2WDI4ZiIP399lUFybFq+YO3QVb/yI/s3mEj8n38SKbRLTsPhY35IjRo5ym\nazrzrkEk5fd//tSV5R0gZLYq4ozTB2/S7vo2VhaKliKRS+xtOqJCcSoDrjDm\nSe8e6O3kVWSP2GB/KRF/LHy1Kq7TKE5LbI9aPi52eEDZ9Qufn3q6n3I1sxCx\nxfQXOcBIzNTdqRDX8XiBXR31W4qHrbNIkCFW5rDKXQV928+r9Ygo4LS6rKSo\nVqP9M897YPlZz5JzD7HRyjret7hu85FsyvHbUzGw9x7FVUUb8RdzrpPEiKYk\ngJB7xlXdP575a1sJSz20YQGoQIThxaC2H0cQrGxESiaORoeR1s3KoU5j/wsJ\nG2C0\r\n=ymAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/rtl":"12.0.0-canary.ec22e1da9.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/density":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/elevation":"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/switch_12.0.0-canary.ec22e1da9.0_1620671015442_0.5845036946776379","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/switch","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d41f1825fffeb5fbb0ef2beeb3df8bf4e2168484","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-nightly.7427449f0.0.tgz","fileCount":59,"integrity":"sha512-vE5wUzRtdrsG3UqX345Sw+ugXb6q4wmMyj3uL12Stmen4fxu5gZ8FAEdEgVR4mVCVCT5f1RaTlj2Bgyd+p3F2A==","signatures":[{"sig":"MEUCIQDi5KmwrHHIoXi842nc7IxOpBkvoWmNcJyDf0O9fBPcVQIgHfG+OmXYQSZ7XsZL3NeNa7u9LGtBe+QmJbNO/4TkWdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8yCRA9TVsSAnZWagAAoVYP/1OT4sTKXM5YuCRV00Za\npJw7FCAeKaqLIyAxxOOe2ZGLQIN40dDNj4yvAkxy3GqGtPMaCXGTULSQSwMC\nGHlIVtqqzCjkQRCZKe4QWOAX+mBUWXaAjveS1F/hLF4tCjaI5/K+keuGDUae\nj+A7jmygJNBCEn8e7n1syitt62bP7Igaea8utzSb123BuU2MFw67U3XvgOq/\nQb2OcHbaPDTJrnM90GNXIJ6lIy8eLZyDFkC9l7lpzUqpyjP5ZjaCQxN7MRwT\n3Qpbf5fvAbqTighzGbyWJGeelB6NS+JOAm2zHl52HDwqHiQ8OAZJwkHPVJQa\nV2Ts3+rUfQqxL0bAwn4c7+hQeUQSsYWKfWMeEdiOgZD7AcaPxJ36Ge7yz/Ku\nACVfZiT7uuGGalFTrAjJbsxxnqg2eu6ZhzYm7QU3tTAa1qopg34egs99UYcW\nz7chiE/QUbbX10SwinVxieYMCw8kKOqJVbTpLinoLOH0Mx6Rqyxhr/eW4r8j\nVT4md0IWSKmBjk9s6+IHWLqroIOqrzL54S9gTysLjIaTaG3jnZiHjKQ0d2UA\nIeLN7Fg0r+AroWeQpDaDU9mG2hPI+pUoYiJcuLiz6NprJ3As1oRuz0VrX091\ndgaO8FbH7fvEb9dZK0Mpa5UO0H7yghrEniqtHISOezgPhYeOg5NO8oVGSkh8\npWcY\r\n=UXOE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/rtl":"12.0.0-nightly.7427449f0.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/density":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/elevation":"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/switch_12.0.0-nightly.7427449f0.0_1620672305717_0.44981735153343494","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/switch","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee892972227e4efb81502d41b8fa7a7d8d9da5ed","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.957cc3bf5.0.tgz","fileCount":58,"integrity":"sha512-1sSOszkgoPjwmueoAh3KMUozh/GWOZmqt/46mqVvP/gLPeb2q8K0UEP9gOS8eWk0USuGhUmdGJOX0V9Wjkdd8Q==","signatures":[{"sig":"MEQCIEp0SMC8SifSlqQ+Du/k7nfew5ctwm/tQO2spZrPsP69AiBIw9u8KoJQeD1rwpBE6oTjkSDhpquET2sl2strcQG4pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":628668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawiCRA9TVsSAnZWagAAdFAP+wbQul9CgKLbKEVZ/3h8\nhXOlANlUInFbCMddlGcA6YupUuKaU1zuaet2YgXV2zaJPLUcHVSiashi4cGP\ndygU0CswhHfXHU0BEdRJ4N9LwM5sXiK52BnSEkW9VfjbRIRITeJeheNJCmUD\nEkmmiAeMsP5ardGR4xE9E9FYZb3V3xVudArUWBNdRjS+n4j8jZbbCo8LuFXw\nOxSwN13+e7ZwMzmN3Uvc8SRKfyARAbB6iAuZZ2LyjZNiZp+TDK8UrOUvXAnz\noF3PRjew84GvOrc8v2TTDlKAhE8xpp4c0YZbyel/ZFM5HiDku9jXxp5ETdiW\nq3/O54+sRjU58q6Ja8ulyRD8Z3PM82yzKBO6kcYjbap0kiiPk2J8V9RDNEEd\nBHXdA7VtHtRLSbmYcOsDA/yG7LnnYaO6z1fAVBDFLB0W6ExC+j4PSCq7DXxS\nHxRP6iWck6WdI42SlRQjJ9q+3YZlr/YKEUOwsxoGufY/spDZnxKcps/Z00jU\nfZMIVbmdCG7IrVng5TgYIGlGSJjn6oqLXPEcnId5ysPl8+Y2KMl0j/R0De7m\nqIp95s89ExiwG50OBZVFAdLkeVl1nE5eZ7owTHOn63+YPRCR4Zr8+OsQbVuW\nclGZye2LDwivsSmdPSVCBIkH7/S0CeUJB2sI0S5NwtM6WY0X20An82i2gJH6\nnhf6\r\n=sNBg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/rtl":"12.0.0-canary.957cc3bf5.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/density":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/elevation":"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/switch_12.0.0-canary.957cc3bf5.0_1620683810443_0.10394271308149983","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/switch","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f37bf2e4ccb27f580ab5742fc16116baf1a11340","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.88a33cd70.0.tgz","fileCount":58,"integrity":"sha512-DVT+7dhLmpKWl3ztVt5lxwiBFIVSXncH+cCY2/qXS4z+shN46E27y8E3kS6yOrcxOJlukuiOQBywasMqYTkKWg==","signatures":[{"sig":"MEQCIDpFPtniBYvTzJhRnfGVFf02TpSYxJB9AneAjEPdi5TXAiAgAwUwzBwca7tM2Q3saeOiBIIxDDXoS0q8SPICA3lUcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":630187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcsdCRA9TVsSAnZWagAA8e8P/iPNb6vpm1brzuAnuXr1\nOXYBvki3AQwlHR5q2CWrWkrAHEZH8mbLidVJ81cIW3E223rcfO8tQ3KoCHuQ\nwrzzzT3d6asIMNFLAD//vhIfqrwG1SEr4HH8j3JSJys8KwuaomuId6wMb5mG\n6FwfPoL52dmOF88q7XTPL4NuGsMHik8aeKB6kxPWmL6gmvUc85SOrX7IIhs5\nEcmN2FxOwq3q8BtmdVBf5e6KCYiDMLI481DcYgk8rU19d1pS2oIYz3A8wHt1\n6UZMvl2qKqQKxhufG25qbXJuzNm8ZD32NM+woKU+cSN4OozslMN3JkkEk1v4\nTzAUGMf7vFSARRx0utUFGkOoRfwyzexG1DFTF9/RHGA14xiNbmGET6FpXr+3\nYRTakJPkxGPsXRgK/0KQNrTdkitzPFa8YVmtt/Do3i2WWOWlJ90cMh93mDY8\nUTpeAOUPRETTXFEjoiAXFWBi55XR+HLH44TxCFZ2Y6whnWuM5goHAQUhN9gq\nrsWDwu9JgXnfqV819zYo8h4xLPFLnhqHYuwWkL+cB2ggLv+NMQCGmPWceOi/\n2KbG19k5U3L+DrCi4JIAByF1XYkO5xKO+TDWmAV5WlK46yjciyT/9/YzDIeG\nHAv3pAag9NxVASlgDn2wJAzUmzfLkF4NFUl2EMBruYhxvKQHk3vrS3Y2DiY5\noRLp\r\n=/JjU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/rtl":"12.0.0-canary.88a33cd70.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/density":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/elevation":"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/switch_12.0.0-canary.88a33cd70.0_1620691740527_0.5963876921981437","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/switch","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95c05d6c04aa729aa876e96024cc50f377fa32fa","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.d20dc6dba.0.tgz","fileCount":58,"integrity":"sha512-p6xGNrxoPMudQADIzu22zhwU4+6HWm3PENBCp7h37riV07k9j7DLNG15OEfngLQux346SSx4BD9ZUVVq7ufl4w==","signatures":[{"sig":"MEUCIQCu+8HvMTT/Get6OBXNYxjlC5vBIIXyd2cTnDTWHoQrFAIgT21XHQU2Wf1GoZ+FN9ZpwpePVLtKho3Q0Tn1cS9y3EY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":630187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7UCRA9TVsSAnZWagAAMU8P/18pPp9DyyHjyuMCMrae\nJevzIQKcVNLOgyyDTbYz3Rfft1lHzM/O7YWj5Z1+mDE7zVYR8SMCqsys1s03\n1w2zVznAod9LEz0QYY69La9kXIOA7waQ2X445M5SakPYHWXRI0otJCjdBqZx\nOeg0TaDZqG5YcHXqDg3uUJaGMxEanMwGwiHFxYQOAL3te4bD9NFp1KHvQXMe\nVZ7sOXDgjYYs7/tln2v9SBprTbDlSwFrDXB5Cj1Oua0/YKNeS0ktzRJiIgpr\n2PAi57WdSnFfRwemDEHRdF2rP05aGLMm5qyRC4RudDsLpzgWHetbPW6Jab3I\nxgkrnhROJlYUBAyni6IIMNgN3uLI+1VRp6lhg4+9dviPKasP2Rs3m7gwcqY/\nPpC0jUrqcjAsoTKZyQPYO9aOOsO4kRxXetHSkwuRdH6OVlsCIQWoSx4tMGmS\nP36ViZIluTazrFbiz8H+1tXnPBN1fbOZe18VNdO/PdckcmP/hEEfIh583Kmi\nzzM9ilfMKR3GKv03HBEyviFRauFz3CLnpN7lJf3o0FJpHbGXJ97E3tkNZKfO\nyrApT9qCnT7kxkgBM4f20BqQrwJIwQqyM2PrAM9HHKoh6GrILMuWfO14/Dgm\nzWRrb9c0jGRijCyvaPpwmKyIsVKfx4KHUQvuDqM7UrnMw/Te5hNKCqQBmtlv\n++ZB\r\n=1xdY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/rtl":"12.0.0-canary.d20dc6dba.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/density":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/elevation":"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/switch_12.0.0-canary.d20dc6dba.0_1620692692079_0.8365475036377952","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/switch","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5739dda329521b844101ae67d00939e1a4ec8872","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":58,"integrity":"sha512-8oT3M78AzXwkS3xE91jVECpBKVGdMN/IjgESq4PeHx+pEG/VzWrlPGg4uxabZn+9RN7ytFg6G44/JYm5DW3uYQ==","signatures":[{"sig":"MEQCIB65kAC7slktHmsltWeqqE13y3V7G/wLN+VZdmAq5hJWAiAvjKUOoO4basjEYSIQdCrlvU10FztLZVDdmoDOl/9W6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":660069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdb6CRA9TVsSAnZWagAA2BoP/Rkg16eltwQd7U41SxT1\nfu2JtfsfU9xFDXTlzMrt7ySYUA2Wb9YxVkq2ymetNKy9wVGSXkN48yGU4xCR\ndrjebTukExAbc79fK1FSwId1glBwGEI5KY1Z+EYzMNlCWGGWanHh2A8J7oor\nKY1qntSn8n+cok/b3Ixk+KjzSrKjkIOrcR387OBNPPPVLzl2dOsRbYg1CCpz\nOBbjoEdezWyLEUxhoP8DP0zxg8HccFZObhNttc0NszULhKrwtzA3pcJRTjS7\n+KuUduFy4esOqihYveB75O7sa34F31ii0KP9lF7XuelAgS2kRgM+ix0I6yks\nmdM7L7eLhOTH6H5n/nMZE8ODGOlrylGAfnY60CrAUbznvYqpfJxT3pwxeyMX\nGksDk/GD7D7w8WqYwJSLN1N1RM9ioSWZU+QzEIIZrDIeGgHFi8MLytZ3bqWx\nq22ZDQqyX2IsrmpeZilUcyVjCRHCjhMacGAVtpwmcw72xJC28FEm18HJXlkk\n4ZX33YJPsxrB0RBG27vZ2bURL0r/H7xO/zXRRO0MnMUn2ujpAYAQWnXWI5RS\nt8KZtb8pxrzo23oE0w931Q1trV/flhBMidCkclZOeBJIq5sB8CI0LY9KlMcP\niKquSVJix0q6Fetwi3mOawcaJufBfCnWiynEEtxNR7Cqv2VunYF6vNEC+bhR\n4XBv\r\n=Kzd6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/density":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"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/switch_12.0.0-canary.0ce2fdb02.0_1620694777985_0.7763146690309126","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/switch","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.cb162da37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2eff76951d45337484d078283437c151dff1fda","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.cb162da37.0.tgz","fileCount":58,"integrity":"sha512-QzH2/7mfqp6lW0ATCgMVFwY+RHc6GDVGxKsMzTdBeN8UaiE1UKB702qih/KPAxCIJGgmH8+wKPrOacfq/IQT9A==","signatures":[{"sig":"MEUCIQDUVJXS8+3x/P+7eXEeiu/VPLQARZFewVMfAB/eHV615AIgdMhanHtxUsQhaCWWjDHxGC8EQuArkOIckA7s4nxU3pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":660780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeUJCRA9TVsSAnZWagAAGtoP/1uop4zdciXEZkxfMF9S\n24rw8Btbf8c7w6ltOuwWdCvS7pixxhWAJJdEfNXy9Vly6dtdVIyFbAak1RiG\na5hjW6prDFr9TH9LiY7EO25D723DBICeV2SH3jUY0k1+eomnTfHCQ8xie2Z+\nvv+9dF6kAmAay1vPRNa3dTP1rU/yio5tie3r8KMdSQMxBZgo9lZIbLYZqZJo\n2O+x70UKIf+eS202vYoRZCdM+0awAvQOWRnZFwWqP6ZvDQYNlwY2YOE6Ol1c\na6+Vm1258bNpjHF3MFD164140uY+uc0vGilLNkminh1t1EOU58f73ygq0VEu\nRyIw8YjNNXQhWwx6WKnuz7e/mGV6PH3qTITtgl0jueNypBEJsyqliWgfhXvG\n7kK1Oj6gZIFx4mzQBhcnct+E6VMXffdqbWRJn8OgJxsoWp8WccL1+7n/i08i\nNj1mrfj7/gP2rTl1dXiRe3BHO4pFDXgbe7Smovtcz4m7wJKdE1uSjXOofuut\ndYRhaW0e9dDzX67G0xxXIaGf6dMV+IiSq8RMOKpLgnxLWojdc0hb9T41y56l\nzrTTtV4JNN/yTdOjHBwJ7bNa81NFKsrAiFoo/7gPZ2/k/23pAPpldJlbzuPP\nO5VW/0nJWJ9Um+F9e2DJCkymvejjUquWMZ+JanFmPNSFITBL1NFmsKaA4fxK\n1PeB\r\n=RKDC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/density":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/elevation":"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/switch_12.0.0-canary.cb162da37.0_1620698376621_0.9418303170232536","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/switch","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f84cb503145c99cd151aed09135bbea5fc613766","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.573dc7ffd.0.tgz","fileCount":58,"integrity":"sha512-uCWr6C+niAFvrvAtIsxrq3sEUEG9HfF75yzU9I6STpTkXS/Cv30xd7FM5s81FFqmS1USYfd1i/0eShL+4RSVPg==","signatures":[{"sig":"MEQCIFx/Iwh05dl0jZ9gtZz0oKre9UIXgmKfhQKOmHBPoVfdAiAj2fEDLyeLo9C4v7dhUaV1a2Y8lfVXysD8h7UHZosCAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":661502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmelwCRA9TVsSAnZWagAABUcQAIHylkE7KmMuS8XeKVCr\n8UBB0ANhYn6VldfHsXET3DXooTqwln+rx4oONJc8iQ4FukFRmh6NckijS8ko\nj+co7QaWS8e+R+ullXJm2ER3iCNSS+7qkeogN2DqyEiKtGG3ZKHYJr1as/n2\nRwvq3I0g4Qzj62JmqqzQ8D6H9jBfyKAdatACQzoWq8X4rE4TxG3tNFyKM6id\nvoVv7O8Ngmnavymj+8IVpvQ8hV34TicZLYK6/1v37EOmAYRtqQy5qx6wH7RT\ntP/Psj1jWugMoPD1VieN56wftW5uwRheBOP7zVP3rils4Fa+3zD6HkEZXfxR\nIve6jwyMPDil7XV3NlFH5EJ+MnzWVXsOQOlVfhHU6Lk23KMGhQsh2ad88OV5\nXEF2u8K0fyW5oRmqyOFKT+VTuv18lf9nqJ5MzacEo+TUDSVRPszCIdr/xOig\nVdj/ssqfAlzb6DEutl+p6OiFrvWPENtuIAdG5mfGuTnedvQs+NLoOdaNBcSp\nds02izYyO4Gv1tXPVt8uB0XOuDcZM21puNKfDYI9NAAYoPyV5dK/AAMalqjw\n6pV/obeySVLC/x4qKoqw8v54y57zOvTanUwi/doRuMSfqptBVS5YZkmU8tiH\npIGCiKWDXNE86/qwBGrhkZiK4KMcq/pM95ZtKn/wHzB4+/b7PhM/FQlTwLGT\nfGGx\r\n=cs4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/density":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/elevation":"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/switch_12.0.0-canary.573dc7ffd.0_1620699503560_0.6147478758612115","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/switch","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9756d02982af8e3da2438cbe1eb078d8c9f4644f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":58,"integrity":"sha512-nek8Etp4/cdMaO+Kpp7pfAnYKhUC1md2HeA7ZrrgnV/5bTzyy+Dg0GMxarRAfIEmaflB16xrWZJK5fBf5nuWcg==","signatures":[{"sig":"MEUCIDdKRclFvLu/LKTY0Fs52rUU80n/FjYcbGRqIwfgW2U2AiEAu6XbwNpzGr5ys103hgTmva9Y1VW4p0lRua3mB06OH34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxHyCRA9TVsSAnZWagAA9TwQAJP4d9sHvsnFBh0v8eo5\nURdkd1zjjGfoAif86WFVJUH21VlgBIvSvQl5xADWEb0li/ZKgXvHifYqX94n\n6XE18DO+GAaTgedI4lRIInmlM/velKeN60LL7v+PX8HWpltB0GK2Ut6Yla3C\n6NeMlsh7oHI8uMk/pr+7dWseqwic9GB7kjZpCTUq07PLlc4E4XiTo9NEt/ee\nGz0gZ4KkhaDmm/UgokJ1lggDDuvbJ3Rt4n0kBIltE326lQWR0a75358yCG4a\nE6js4WF+WpiHKH/CEk2mjUbOdtF/jsdBG/yczSKbrt4bQl7BR6zpvafGXnRe\nz6x6alth9S7gmpJovDBaYGq3n6R8T/wCrWZXb3EDdeernFy8EzQrZwxJhYME\n0Qdc6RyynR5MVRzm4D9zcshAar/6WL8xGoMc+XEYiWs8poJdkWMK9Rcsipxy\ni33B1Uh+7LzBErMi0vYV86MEiXdU8xPnD3oq/c5GN5rqz/EEdUdV10RjVcFx\njt2XfUp53gr9vJ+fZclCQaqZsMG8BFxsxpIi4NRiGYjdGVHoITx5Z+rH+q2g\nIOHXH55W51ouC/Q+VXkY5kbpoDzE/FcSeqyFGIUooyImdajil8TY/Wulb02I\nCmMJ8RqNElgTHyjqFi6KsdNL/HnCGTOCvtPFy6sp4oOopFx5VDEvJNBiDchV\nFYYc\r\n=xKFA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/density":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"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/switch_12.0.0-canary.d5f6ad3fe.0_1620775410095_0.9124272772748023","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/switch","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0955df38b4380d39d2bd1e2827ffb820cbc91ed","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.25751d2ed.0.tgz","fileCount":58,"integrity":"sha512-Wq82Sadhun/oWV2Y4tvHq6zDEGX4yuk1kUZVV2AVyiI5AE5NgdR+a+hd0mK7+TFYyqSEPeQLGMGv+UCnxA8a0g==","signatures":[{"sig":"MEYCIQDYjxfTXYGBxgN//kHyPg0b+tVhVob529RsZJUySSlmPQIhAJBtBSqFmMAIV0qx/zGy//P7rgqISuyoUIhnlF06UtzD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":662014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnABjCRA9TVsSAnZWagAASpYP/0IyZsPDiyIQxcdGIT28\nK4Mz8cbeOffVbFmw7k4wx3FEwq5ZU7fE4LQ0mlfewClmJQqpV49/c4T9qvGW\n5Hw/Bij4O69RtOuwXPmsxXizfCxC0coJl6IztOWsNdxG4giYwa0jYu8t+fQn\nD2lNahannk3PcZQtDollbnt9Ykogmv8tB+GNSRZ5iqPWFTNtCQpIwqV9ngh3\nKMSxMOz+C57lawMggvuGr469B+uKaqKsRs+1vUhQ0lTwciyhNnXoX/eOrHDO\nNxhTd27pqHAq8qEqLmaMFHKEY+on0OQ5woxwZinJvS1fqN4XSPdoVhxsEQfR\nscw6KZaW6qmDtNKRkQcJlGgiKewKkWPrhPSL3w4hJeZFbAjJeWu5DmZQApW5\nfDcbye3PFrTerZuHrAtuh1svxW7U6B1GlKLGIqbYQhQtlHkhZnLehpbVtQEx\nG2zgkOdvI4gi5p+3TLAqGBYnIEnjC+LXchpSwmOV4XXpiAxZ02R0c8ubP2H7\nXQAIXibPz/u04jh11PGH3wHV+cWEXsxddGHWk9l2V7BqTuWs991J7aqyjz8L\nraZQpaMCAM/Xrerg0XlcEiUdgelIDhmgIm/VguLkyOj5nz7HOkgp6eW1N8EE\nAI3ZBDM4QM3vguVnBN6WVWH7wpnN+2i024owaMZ7GBRKqqQh3Y3+LIR87FlE\nCFEa\r\n=1XDf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/density":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/elevation":"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/switch_12.0.0-canary.25751d2ed.0_1620836450578_0.6321884492393235","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/switch","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a55a9f5d826538b3c628d7995aeb43c66ef586e8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.a23ecb682.0.tgz","fileCount":59,"integrity":"sha512-BfAeFyJlkWHlJRB5dfI+GDHsP+9RDzUM8SljhYjEiMAyLYD3liJvZ7vxQbXRQndymYbViGBlz2RO3ox/d7Yesw==","signatures":[{"sig":"MEQCIGfXX3FC7anZiBSvPpXWItRbk1NBmKryanE6OT/EAS5NAiAx+wD2q8p2XojBqFsmbSWmzeH2GPCYn4nKhF/BEr6OfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB1NCRA9TVsSAnZWagAAlCkP/2Hl/BixsaArzgD24DlW\nU1meqU3CGtk9vXsc7+Q1vUyAB/vZmQERVS/D+nvvSQmAa+fXnvF42FOZYmya\ncVV+E52pnl7vS3o3UElvI2pVE3s5qMU928Du37DXhrjyJMXiBbXYVOHVAUg3\nJYfhWtTebtPj++JABlsy0nn4zgIq9O7l9n1tXVVdAvmrnfcHR9FVD65E2z73\n+vp8vT5cOWeI0MMOdHAuEcfc7vTwUVeZR5/bYyjeP6ZnnQTwHy+F0tMSIPmi\nPH7Sf1BaZ5uTXCI8kKaZPWjxiLM4YnpRcOrP7UvsoQ2jbi33cZCxLsXdAed4\nOQhsON3C6YOeuJAGSqZqGOmlFuChgYhZLDV5REwYeUyqce8aZr/3E8pd3sOd\nFyccmMbw3ddky26f2l2Zcu8FTomIGXqqbZcMi4k3q1Fx9RhABbACraGQbflV\no5NQeiiWN++oAfzCkssPJo9cM6PyisQJpwbNyWEANbY2wfFvrkiRq3S9LMO1\n+QuWInbATqImoD9IVPfGEZZEVfteSsBy42Ed2glRvGg7XF14pKmirQLa54Jg\nwIEaFGxWzfn5Hu0aKq11hwg9irhSWva+dFzC2Xsa06qmhLSfQnZSsHNGsRub\nbL2f2/2NDsVrwOpLJgAh4uFtWQt3tNsM+q5P4WeZ+eqmiVpVd/a4sdBpF7dn\nVTfs\r\n=+OUK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/shape":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/density":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/elevation":"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/switch_12.0.0-canary.a23ecb682.0_1620843852536_0.5749253271731041","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/switch","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.33a954852.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a72c18a69895d6e3eccf7f9956bf6b1585436457","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.33a954852.0.tgz","fileCount":59,"integrity":"sha512-u66xpZkQ3TKfMrSoyi6wk/7Zwat2whmkiKyReZKDPeUyyq7/QH7BlouL6xtmpr41ejhcAKjIu/h6i+E+tQtVvw==","signatures":[{"sig":"MEYCIQDTM1DIPY+zuwn55uewbMPdPCDBYUMC00t/rlgpOPbWkgIhAOR5RDD2xqvrAex6BusYcgmr6loFBML08faqnfa0djp1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUD5CRA9TVsSAnZWagAA5vkP/2lEhPnPDyL0omdFGHMa\nnL54GF2B3OzcjTDMm8zoT/WZPo4o8USHZiJyi8FsYmFJnwv1YCiW+PmcbZpJ\nITIdgb4G9urjna8KJNtJonTJLqNEzJW0Kkmk6IYyyunKPkJYuFBFm3cUaRzj\n0YjJ06cpYY2H+KstfkYVGurqdrhPg99BJp3mpoFkc55uML39J1OHs+2PHku0\nC+t67284yDcNKmTA/LpgU4FqReJNWm/ZNrO2sytXr2NOP4qtr+VOO/WlS4CN\nWRO3fiBnXYdgbPqlVRdFar5P8L7bue2Pg5SFf4CdbC54F4oe4YwRBdWnWekh\ndqvcw5IzZHe3ylIHIuaQ347AKi2/vbgN5r9a7Ndt5Y8PXlvcRNtm83AcQ231\nWC2xlKpUatrCdKzCs/Tpu00iyLvIee5yx9wDyyAGbz1lp0lJGHYE8oqQnAZr\nQmWvEin0/LYjqo7edDAQJkblzOKcbmXGZ0N3qODlmTVoKWoY2lh3DgrPVYq4\nnQteStnXyExPEm+CokMd8uMTGA/CQPqRfkCsVEeLpUdtxYdvkfmFz9M9THix\niHHxorddcDy09f2M8Xq7i0Bl0FyJcB+iF2K+2oXAlJTgF/xohd1Lbw0yY8GN\nc6F9NPV4UdCinGJWDFND+D9UcZoViY5AVVVjsI0AdyIUVk8rP2zHVd29/Sa9\nhaBO\r\n=kkZA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/density":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/elevation":"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/switch_12.0.0-canary.33a954852.0_1620918521095_0.2360595027224004","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/switch","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.a4484849b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"235028a46c133bcb356a974cc05eadc8ec9b2575","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.a4484849b.0.tgz","fileCount":59,"integrity":"sha512-zrioGUGNcHqBeNblZVyII5XcUX6KkrRj1d2JXZPuKjp2lgl0czlLFFFDj9RBzPJM/h6wUMkJWxslWBDoMrHS2A==","signatures":[{"sig":"MEUCIBg7pQSOBhE6qsrVno1Yo+284I3+6yXUiuG4/R/6S0VSAiEAtOdls7ZbmcvOUIgJJntxmYBk/ZXt8uAO3R9Z3EamWdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUZyCRA9TVsSAnZWagAAvM4P+wQwK88ofsAqgvga5l5N\n9ORig0Dr4CX85iSp1uqTRGPrWQYbUueVn0ienigUMK2zkWO/GT6LG8G+8Zfg\nDexKVW+e3kxg+UayB29+Q1mD3VWg545iZzw7AD7WAF4aQf4skcQ57zNTMPiF\nHgCzmdM9oLX1Od7sQFv6QipnCHHElmy7oOaAUmSuzUdnEr9j3V8T4iskQacs\ncwDyz49Rz5AqWkGvXKKnkYurEmAtX3SAh4ChyuhLWOzR2eMmmpGRrMyGWXl5\nZGsnHeLA6wUubKfuqlC+0Mm9HWQ84q4coSBRcTTpM8j9OWS6FU3pcnWrmIgi\njYMLZvZoqN2Aq5scIW6oD8swOJlG3YmxyieuhTM0dZKFDNfyjOuGZAVBooYr\nnkkNRkrrQojl2klubgGGdeqZnJtNmHvpB0xuQJPqxKFaResczlS/YcR9uKdX\nOhNxOtXnbJ+043xewmjWW6FoD8x1SpktUw5EiIJXmqXWF5MCztTOOI6My5ad\nhAXVrU8LTpb6k+nCL/fsEfFQOtTIebwf1RIVJIvTt6aJTFDgQ/aoNc7eB0cA\nPIDu/f+j7faBnsh9VI46mP3Q8sGMx85xjrKvR/GiKn37cyOS4+gAzILAebSA\nDTi3pcH5J6PW6x1lRlmHlFyViiD9oO4w3Hc69EX9YXpEhj4jeJR3mvyVdv2r\nJbV9\r\n=aXw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/density":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/elevation":"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/switch_12.0.0-canary.a4484849b.0_1620919921411_0.3106637424338181","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/switch","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfd0b67d4241128e66d5be16bc41fdbc409fbf97","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.b4c3f513e.0.tgz","fileCount":59,"integrity":"sha512-qSa+Fz1hdyMJy+iE2UaA065Oq3xuoc+S4jhyFOkZhsdaq0gkY9sz7oGt2XeueyoSpIIm+5WSsbxoKojqgWgecg==","signatures":[{"sig":"MEUCIGXxgadIh4g1SNAbQjQhrfTtBYsBkVF4broWBDugryclAiEAqwVMghzQ43gav84kDhLEyl76Go2q+B667joRyuT8jrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU8ZCRA9TVsSAnZWagAA/l0P/0T4LjhJYmBBA4MVjWop\nvvq+hOcx4N75ggOeBj1H7W4n3NcOw4PFFOoxr+15Kt4DvRt5uEwB9ePGRyvJ\nNaTLm4Se8xzJGbB9encI1t70I3EA/qfsOWOtRM6TapfTTH+TIArZZFw2jIzv\n8FAC6zNJC/5EcmSc5aG1BdFBQJBf/nSt3fgLiYdJxQCpwH+Go73NyxdDI5o/\nW9WJ4ZZJwMP6sxH9uuH3Ok/1urGlhHENhs1CIXhEsBbU6IE28vfrmu3R10Fr\n8c4nek5189rKOdL8Espt6PoIR6mbbT94BrjQRniLIL/X1aERpCiUuoR5e3Eq\naERwRMZZLptf4QpTZZx8HBULIxWvsjDFbFWrjkWIom0BMsPtV+zIlZVTulc2\ngLRfhf4QOhKpNwj/0b171nMDFBihf8RZ8LUxVVx4jzR6SU7Av0Gb53xHNGIk\nYjkZouooC9jG0V9onhNuNGKyUnluy+LwuprFpAQck4fRRVis1JvQIUvTw8Xn\n6fq5EKWh6lk6bI4/MRHiKY1nlln9vby86zmn3xAOGzQD7+GMGi3yZucyuKKt\nYxw8JE6GgP1iywcB/6oWxl117xEBrzKv2Oz95uIDCzhb1zD3U2nPNlKqMnXx\n3P5wMonYte1HJ7dMNs5v3MMyMBV3oTUAL7l5sF4V3TUU6Pbcuu5ge75fLGha\nfB9u\r\n=J09X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/density":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/elevation":"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/switch_12.0.0-canary.b4c3f513e.0_1620922137187_0.6627665480299452","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/switch","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ebd6ff0f5b4e4373da496b225eaacf423b983a6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.1a8d06483.0.tgz","fileCount":59,"integrity":"sha512-pYCKMdu8L6zNePrAESkDUyCAjFMXrtk9WmkigzRkku9E0NEvm4ippajmpAX5zKUAS9OhllsZfVIP0TfyEYNGTA==","signatures":[{"sig":"MEUCIQDUY0bQrHe6KhLUZ/Tln+N2gsvEmQP1Jdr0alOpaHX3qQIgNuZ6U+/C1H3T1PHRd1rfLjcnOmjTTBxCbr0wk+uaWHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVBzCRA9TVsSAnZWagAAihwQAIOEy5ZOjotTJt1O0lYq\nNFXohlL5jzF/wEdXxoXUwgkKk4ekH8qAPHRyyN8jnAUv/Hwd1zIl+3Zsw6ip\nMNL2tV3xD3r1hug1Po8a9y42JWgHJ+kHVeRxwbyOQUTyYEy48Xr88uvkEMzd\ntduJC3QSIjSYUkdJJb+GWPzwbz/4LJDPyixsT37KFvUqLdM6Zk9N6AyHqMPR\nEbcde4m/KyvUumFDQrmoNytbLXBWZaP7k806vnewAHsNRvRNwb4Dofdyprb9\n9PZ9bKu6W1cekh+4G3cNxwbdqmPrkbxA7Gvlr2fD7faDidHP8HIRoasfUD5R\nEH9E5KicGRrQQDlezTGMsYBdGw4URh3RTivJhK4pPpgnixsQ3TKXMisDymGZ\nSeFSomA0hTdaI8gJuZTwhDPk1i3SparDT3STUDsuU2RbD1cpIJPC5r3B5rbF\nPLTZSwk958iqhRo+ZiuQR06vcfXZr/ipjwc7MVwWZ/2yy1f8izKVSsk5N/pc\nDmYWijlwU2jz9AFw44x7wh5AhioLIx6FrvA8/BvpETKah8b7E7RoibOOgGxc\nmQ8Or2vneRZrIjq8OJvwh+9D923OXkgigsUvTGtybbuhDjaDsHWTkvzCi0Yr\nNFxkdsKFEQYDckkSAuuKMssfVumpfQut/rIgivrwQBDzc+n7Ikhaaii4BBpZ\nH8Kj\r\n=xEdH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/shape":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/density":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/elevation":"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/switch_12.0.0-canary.1a8d06483.0_1620922483218_0.38997337497059426","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/switch","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8e6081836.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9d111e2ea5a20c2769c8934e362593a3e40441a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8e6081836.0.tgz","fileCount":59,"integrity":"sha512-lGaANqqwxS+jk2xF89TtewgigHxtava58W+DJ/71/xZJwccPzCwMb4VBnaqfACCKvdcZ5LaYJ1QSJYJ31MbPXw==","signatures":[{"sig":"MEUCIQDmuAalKVYj6o/+JsnTDpJ34FGtuK9wVWyKbQO+LO1VUAIgZGeYuowVtlWY0oHEz+Orr1gzguEvyM2jPrBlEFBTcUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":664072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu6RCRA9TVsSAnZWagAAoPwQAJYJ7mFZ6JCjJIXvyEiU\nDxd+PFnq0ocYsZK2ZO1G+f/xIKQBG8VOaX5broEE0Y9swDZJUheqNNb05TOL\n+PTH9zN2a3jiHBsIT+k3rFGMYBZx/F/x0bIqim/ZXSZqmWAXvq56Cw2qmfAq\nZuZQpyV0VDNQx1Sd3AgCyDpwqXKOa6O8GTULwK9pvXEBBE6hUatFPSgJqFZS\nSCWA19aXQOQjHmWDx8RXU5Pu5dE+6aHsYDOZ3/G2C2Lj0deskA4EZwBdOyOL\n7B0dLi9lB0LqJkG7m3d8Y54B39aXaQdZlKHYIMpAwyO/e5DDrwiySG/J6faO\nBaV7XU55z5gvyCnv3mhxJGVnePLOCaNbQSNJuWuvIJXtpwU0zhhh/tbXK5t3\niKcvwSke3fH/fBZOMh//Q8vDYrUOt1P6lwzDV1uwaXK6mPtwogBNK6Ca5ic2\nyp+gxPdqeWEhb4RRJk3zVLAyxi6boJ40JjZXfP3LaTowVMNz32nE0tc/OzIy\n0cdG3r64yjX7Boq4jtChd5aOQeZCC5Kf/RcP8Gq7JGzdPWSIb2DwFN3ypUMm\nlRCQXmy1Xwzm+Z9KQs+DmhV6q4G5UESUqgN9pDlBiz+o9dPUMBEypuJkJz5Q\nNJ4S5rBEo4oa7MsUQPbpAXFB47/ZUH1HzG1d0yFyneK00bCg7WJ6/hRxQ/kk\nQD+h\r\n=l1LH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/density":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/elevation":"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/switch_12.0.0-canary.8e6081836.0_1621028497136_0.8670222487763855","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/switch","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e09d5cfc268abdd98ac9b10a5a2daa7de9df407a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":59,"integrity":"sha512-rsEM27MSB/3YDJDlsPd4gMOiHBb1AWhcGZrqQclJ83JHA+ltFZI6xPAyZRHU5s+CXU2b6k40Ty0UZd+UUr+dFA==","signatures":[{"sig":"MEQCIDcQehM2zMU5u9Xv+9yK1XeyGjxk+dljORk8bBMO2/FEAiA7hbleeDhtQTcGuwWAN+lphfsB9PBC7d0jc6HUCxD05g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvGsCRA9TVsSAnZWagAAQVUP/ia+vIxo3L9sayWI8oSk\nDQpjA68Jyl0hPrvaU4nTWY3xLvwkurDc1GPgDHM1i0oeEjLt5EIdF6OEDQ9q\n1KXjXhrnwUKMQyeb1UjWQJ25sd+KjN6d58ftExPmB+zNs9DZxWMto7l83nOf\nZSofajr2SijIR6oeLoJywFwnlOFHthCnJqZZyeboYfNRlTpQz3WP+rVfWQwo\nSREUg5o/tY9HusmRGrHfpjqM9Cnvp1O63qZ7GktUWf1qVXBw3hJEyO96/Pwo\ns609TR9OmGbSjywW9g/yPSrI9cIdvYH1ttydqLpHNkmXf9stVrpJ0PRNBGIv\neuBwoSzgCN5Le4T2JLbWLr03Yenni7SoUiqwm/6hIiCFxKtVYPlo14HhTgnP\nZSoYW5byFRcbvYxc17pGNeqaBeO/NPtbBTyT7mwnJ8fit9sGz7MBisg73b/i\nwrqMPiprlQOWo7XF8ecxjqkTsTbLqXJdakJzy6iNi85zzkq/d1vHqfFmerWS\ntlxF2OO6ztLiv8knE5FUBGHuI/8lS7sxXYq2yceelNILyanDdE6iEcY8mxvO\njI/H3kANdNePf1T0YTn2NqNcvv9IhQMDFmH6C4Ea1EGOcTdhUKiCBLSEYZdB\nYvL0bi1uAwY3SL+A0b6OUhAvt8JTj09Vyb810hU4NQq/2waTJfaP/gf0fbjm\nF7Ac\r\n=dRnJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/density":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"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/switch_12.0.0-canary.a2b0f4cee.0_1621029292194_0.7269238965889073","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/switch","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97b9e2ef30d1f8faee835620d11fd01cc75f32c0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.e8e39ad19.0.tgz","fileCount":59,"integrity":"sha512-M7aIIPZhgTfqud4hw6hljfvllUA1xGxYWuUEL7biFZMyYs+v8KEL0vgTwaFFiaB4bGPZLiJUyox0p0YQkT/t6A==","signatures":[{"sig":"MEUCIAoTQKFxWSkS6IUKFIckcwxghpUHj4NSn8JRSI5x1PMyAiEAmXlzyO3QT96t3V9gHZiGBMVvw78bdcWBMIZkD2pvk/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCAPCRA9TVsSAnZWagAAn/sP/3xV95wZTtmapUKgW/bq\nCbW/0eBqgCH8eCsYmaW6V6/FXC5XO/rR7RTK9uyoN9wJsuAI3Gm9Ap1OnbA/\nQl2kMahkN0cityWSjZ4y65nNGfx7DWrZRN8qfJw/syOkWwd/TI33qcrK6QAQ\n7nN8U8tw/+B3fOoENDcEjke+9aOjVruSZj9/4MbyoyqrPwNe5VR4/TzKqb1Y\nigMV6H36pHQVg/J6jcIfOtO+Z/jZ5hGrsgcelvmk0U88IuaRoiiRmWZgwau+\nSJYYleDwxhNfTukk5F4nU48ukXFjsfxDxGntipYVDHpQn32+K1t9mlGBsiha\n3IKxahXeanvjjSHLN9OzccHNrQ+UYhc7t/BVT21VhFEmN+vAmxZU+LpMmdiH\nAywSrFsDQDK7k5dqlNxS+EcXcilk/zJTqNRJsImvFxpKgNpJWiLhE4HzYk75\n2MAiP1f1bM8Sn7IHUMv2uPZYoyzA+94/6d05GxMFUNuz/pFjvSgpEhOlhVdE\nosH3mzx9V3cT4C0Rz2Z80rBeRX6VhPtxk37MF9u3yq9krjH3qES9mFOU6Nzp\nA8uuGf8JsmQzYqr2aoxa9BbMDErZJO6GBz8DKnArclj/TROglL5etR63dRqG\nTXYzqeYgyVZ6m3ZSPIdPXGOYNniYI7Fo1LSkYo13qWjrIpXMq7hYULB/xxGb\nDzIf\r\n=LqIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/density":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/elevation":"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/switch_12.0.0-canary.e8e39ad19.0_1621368846974_0.2813914160772404","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/switch","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e0adea3a1e35fffe6904f5dca78467cd91c138d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":59,"integrity":"sha512-jlNzbcSMLIlILorcF5EsPZjnKESGb7FEhR70LO3FFYJAmI8eIEEqLbKJw48Oh7A7Oec/q54i/fzQ/B2bOK/woQ==","signatures":[{"sig":"MEUCIQC1HhNB2kwsZFi1CcCOqJ5RWJTjmwBWhzo8uOhukrr8nAIgHQQ1FBsCgk9/OMnayUqdJpGFhaHJC0K/6VfTNTBQROM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS7RCRA9TVsSAnZWagAAkFIP/jAYH0/2UVanL/mgkByG\n2ZkPug2I5yxMWSueO23fixAjv4MqG7DtBshcAwuDFuj18PNxpkZrBYDBCpYP\nq4v9umt5Zxv4tHr6tQsqMBgawqZXo4c/QRPVnjhM3EvZ5bRM75PrvitR/PPP\nSncaN7RBQCsyYz40bxSpoHLxr+nFkDkTa0p5qCyLr3C9L5Yh0DDYWAHAQREZ\nR+8lSFVrD1thH2d/+bJTG6Jh1RJgL3amuA76c+Y/KB6GUYMceuyp/4qlGOMe\nkJJXDz90yz5CEZMm9XBao4qFDJW8Aqhs3BW02zdeP7upHbxk+FZ5NqTXDXW4\n5R9QqcEolMx4f1X10R2pDCwMAkkDK30z9ikC2H5iB0F/o17bYFnQTIe9/yLV\nbdfqIipAq6Tqw8NrrpDZiYIWVWQRuX6zQroNc3r86IV3LKdy2F2r95AbL1/e\nmsAzDYywoJoyC0BPk1zaT1ukfUh6BqjVRWhpdffNFzpN+DwbZa87CvP80gAm\ne4P9FrbGJtha0qrDHQYtAOcepkLK6nWZ+dQZ/0ny6vc0VPGbXW1dq9vxKqf8\ns0pRx8R0ydX00jtSkm+8QwdvvAxp77iMaSlnpqs8O/dvhGrmVetlMisv6LW0\nESoGKeVm39ppjCGW1jR7JZe3ynVE0WbLTGJfXS+zZqMkYKtnCQmbOqAUOx/4\nQNxy\r\n=So9h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/shape":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/density":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"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/switch_12.0.0-canary.4bb5eea2b.0_1621438161200_0.4790853432423732","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/switch","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a7420abe9fdef3b63513d5ec1052ec134b2e0a6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.ccce99cd6.0.tgz","fileCount":59,"integrity":"sha512-XtC7xHpZ1o/RzgkZL968TX4CBaY9Zu5zG36k8a6mp8MHUIOPuLugRl6FjSu4FPOK4PeZltcn6ShGBWGJKzsyLA==","signatures":[{"sig":"MEQCICsE0FLFLkgcl5v752/HMh7jejePO+/ZcH0PJhnygcPRAiAFz9CFZ0XJNe85Yj0iSMT3UKqD+KH9uUS/+1FEHmPKyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":666504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQLCRA9TVsSAnZWagAAU5YP/ja718qCUt6Ed4nsxG+V\nURyC8wdWMq6PoZEFn8OLSowGjs8KjTJ6tF2VVoj/T+eTBTEutTpL0t9z5+XQ\nKFhBynGWDyc9lq7lxyc83gSAK2LHFUQtz0vs2oQOUvc5vgRKlG8MDGIoWB7V\nDsx/52RxCu/Fz4GTw0I6ibuwRvSUIlSUQjMPe6E5IIJrQ9Qt9Zf6hFLSD4co\nMbiJqQRGMCHOdg03cmo13qALQzuyNiYCqfdSaHXI7gAlsXMquuBVsnw2xuJl\ngVDrPQqo8cd0r7jXGy2gmM1V+FEbG959xUZGYuoeQwR9pgdVgwqjmMhLDTvB\n0byNt1jbT0ORhld6H50Fhsx1+nd5VXZf/H3UPkK1HmFTbwltGKs830faJjWC\nYSRIRKfCwwXMLsaN3HYFuEP3TQBUJB3stGIQ7VPqs8PoVbegPjjB6l2RSFxL\nLt+GOpJixsE8Gix6n9SD8lGAE4E/YHC02cEY/gSQHEXcXMH9PlXQxlkm6KBa\nvWfKQ4lxfNp6nVK82AXQgNrFmJmkUl/4NxGY8jLmco86Rw3pTrlQ5tkFLlp0\nEKnj6jwcBaxxlKU8Lis9kVHVODcUs+pYWhmXLEI8VJjPbMzozNtVvo5SsKYk\ndT92qrEFNYNicGxBDy3/0KUVB/cHw5lBT0WW4cuteN+sbZYT+pN3uL0qhnh0\nv9O2\r\n=PcOB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/density":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/elevation":"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/switch_12.0.0-canary.ccce99cd6.0_1621472266832_0.05550178503536585","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/switch","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.14767a8db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6ebe51e091791daaf28ed5479224e23cf68fbce","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.14767a8db.0.tgz","fileCount":59,"integrity":"sha512-huaeTQJREnW6fd0X3xOHjrvoTXHD6p9HOVkpLmdfrLNZR4sqD/pUDQ898e0qmFBZFfb512bFq9aurCKKsBwZrQ==","signatures":[{"sig":"MEUCIQDBz20zbJdml0WT9AZbyvBcnPYNMwZu+tWNwAzwNYyrXAIgMKMqE9DzLZCj5ds7YBZAIpJ12PG6YhqRgg9q2FFIK2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":656490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsvuCRA9TVsSAnZWagAAMVgP+gKmYvWrcNo0oi46Rxwa\neFHrm5WP7fCesK2a2fqlTDo7AjPEdUR7JziNJmJgoVb9HHKIk9+jTLtSN+yz\nk70Zh2QBIhU44tlkGaEIeutaSekatdELVFeuOQFmPcCWyAVQKHyKxMn/K1HC\nbC2IqaSgp179PaNR8tDNygrBHXdwg6bfGvuFLmERKPifIJg59whPcVZbj6JH\nXpDKkjAaCr6ELegOzhIXBtI3lVtkdTm3xXGTYZJUTIUrctNfIGDTuetgq3d2\n9JlLX8GWyE0DAk8Sa+ZamqZEUNsM59GHgqUedbnhbs71Grjq08ZFmj0AKu9c\nYjB49H03dxzTv0Xme6l9QfJrNSm0koe9TIifCka0GZi0WiCVY+RxLxxR2Els\n7FQZWIwZos4UK6yBaxpwmsoGoa4XUDPjDGkxnIFGGMGle/QsNYkxVSLveZDi\nflFe+XSbGq2gvfjXrwRxBwdxrVTa0M7EVsqqGQw7FDq5c7lS5b8H2+FxKzDV\nSPE7Nf9Dgkk/Nnf648ZY/yyNDqfEaHOWMvx4V2pGk+XilL5A4M7aF5n5HoXW\nys+Ajj63w8HyXKsPcPih9GG4GmcjgNH1adBtX1Jz0dLy49zh9q/K96tnqay5\n6fhyjC38GBbskJJkpAcC2Lbp52JWkj0hA/xfjguXhnz3gePaOrltBNQ9Oe6n\nc6Xw\r\n=SCEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/density":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/elevation":"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/switch_12.0.0-canary.14767a8db.0_1621543917543_0.6919596516277726","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/switch","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af33dbb93d42770a02e6912744e93eab2e56be93","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.22c6dcff9.0.tgz","fileCount":59,"integrity":"sha512-XF3HQRYucpCMpqkxGVbpiH0bvRtm0ww2sXPYTH/7jye0HsCrq4VzTyTnR9mhw3SEd9g1ZOuH2OtCe8LmCyct3g==","signatures":[{"sig":"MEYCIQD2aJKWwQRENPpB7ApWYQJkwNfSNStxfmCxLTuZyj5BBwIhANmmty/UHgdszc5tn7JcsFLmdeIpC6SD/OGvOqcmPuIm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":656490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8QKCRA9TVsSAnZWagAAP+0P/1Q60XHlPl82ud23z94O\nLtPG/BGOzqgB/rCA6yw6g1RtK3osYUsMF0KGJTo5qrBt3NSDghmyoAVCs3lF\nTNmFUayHLbN5cZsXv+a0QRdj072BX+oNmlpPhzYFP/PxqW1/X0u2zU4zGaft\nF2zVTQJAaBizPLXZbrftu3hBzHiPFyFK0NgMI8sGnWePiDvw7qAAhssJijI0\n1AAQZ9DmM3VyI6wT1NGmn0XFhcXbgUPaKLvBPJ1gBYydKrordFip3TqIGoAG\nt+73KCqZUlMh29NkPFb2DCRI8bXBooJjw4TKedGZpcfZvFwdUax4WYCD2dsp\nAPIA45KJGIF8P2PYBZs33MO7Jm1gw4x9b7JeHh57Ccz91DiTsqJ5Asv4tuU8\nygQwHf9t/ypIXe7vcESUyfwiA5l/t7bpwfvfKSibdlM5j+uulsbLph7iFc1s\naSmg03B49Rv9IMxe5RunFFR68u7Cu/bje4BiQLpNNWL81GQ6YK7gDvxsKPiN\nPc5+IPxuOQ8sfor+LgMpVLbVLwmVW0sPOonz6cEM30vWerF3fD0cT4cgjxUg\nLL3+n4Ay4uAG3Q8kefNEbF0IjCsDd1Lnsm24YLJkrMLDttRhNeLsp6Fd9Wyb\nPR1TXl3dRqUA/9Y/9RMs7LBxetsGRhnB+Q19aBucpsyaOohjqWz4HskpaS+d\nogyy\r\n=2ggM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/density":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/elevation":"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/switch_12.0.0-canary.22c6dcff9.0_1621869578128_0.6981729099228904","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/switch","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.fadab3372.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2307afbed70fb11df058252dfa4f99d4577ee7b3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.fadab3372.0.tgz","fileCount":59,"integrity":"sha512-NBKzXZClpERjubDad53EWoNTLR969O1J0u68fgvsOv0Zti4f4JjzSbLkXd87krmGPIJv8DulBeVKN/svkj+BnA==","signatures":[{"sig":"MEUCIB1hb7JEaCejywhOrvb2oJor/vaJRicQ7xTHs4CLgZDlAiEAttWugD1o3tCH5GV7m1VtnjixxqhpZRamzYOI1UL/jBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":656832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88aCRA9TVsSAnZWagAABb8QAISq9Ng24I2b86G/qeio\n616HyRnDyxQ49f2YcwGd7/WBun0M4+6iGugPoiF1bhwEIO1ObxhG61n56LLN\nOm5A5yEEGSCNYKCk/HK6Wh6TMN/8JQ7cZ+f6VD2z0DdNAZ//b58YVGPni3b8\n+CeZV/yGoDhlWXgC0xoTktnOT9b6q+0jQanXhdXmK9oiFzEvzXfHXzeTG3bP\nuBQ1t4lyKOfPEAy2BConeP+k945DwBd37eSaaMXztQ+7KV3fE0OhFRHyCOWE\nQzV68gmtIKqH8V1AwXVw7OVW/4xpZ+r2rBoirlW8QK83MkuByRcdYivK1UIw\n+67neQbQ+AlvKEVOkCR6JvlzEQmA9llh+oMBAvZDfB4stk+7O0lK5A0TeS0X\nD4sw2Ojf5hs8JwY6qfDuIoFzhnzZRUcGP6TUhsaP1p5P1IaNTlLmYSLJfqX0\nSrIvZQdQyeL8aUvGPTzuB12jO1oY2qeanXbE70i197tkVik6I1CqBxkudpT9\nfMZuMchPjUcW/fRDonfh6gn9QtNvMLy3tu9aFfqzVPUHWFcnRYJ3dHl3IzP/\nsrUj/TyC29ZGlhYwl7asa5YWc2DJrH9NrHtaCiOEaq+62eF+nCUcAoN6HN7S\ndlErj+38qyKVcon8ZdBggp/XreFbj5LRjv0wF2SbEEF0umpAeFbIjxlkSodK\ny/r5\r\n=7Iv6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/shape":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/density":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/elevation":"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/switch_12.0.0-canary.fadab3372.0_1621872410086_0.2043395454076431","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/switch","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b07e9483637ac9bdfa757c784313d5f64879bce2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.caa73aeee.0.tgz","fileCount":59,"integrity":"sha512-I36VMbSqm/OG34dl8bK0W/e75H9vI+VtWn+ADVm+7/rbXotC9J0kBANXU6B1C7y5WsWfy84MqkSbFPbiRDSIdA==","signatures":[{"sig":"MEQCIFBDo5IuC/6c+WAxDuD4Z0awWGi7u636nm3M7YmhE1jxAiAv3Lf4dV5rH0HrsgLTGhuAOVWTUuMka4LsmN7mMJzbbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZ8CRA9TVsSAnZWagAAFzcP+wTyTXFfVGPy/tLnm2JP\n0makZRgN8OLLVakemTpsbMdWTrEeODT3PEpXfTEOySxan64S2IoXtn44fOfc\nhwdZR+/BhLijssIlp8tmKWDlGEhYgxMdEHbNASDPiz95+XzS1H/K01IYBNnd\n9xKa617UuNSKf7U1/Oe9Op3lXlT5dRPxIBI+GfuHaVvsrSEQEZ2WoPzvr9RB\n90koakDzG4tOiUuzU+CqBSeD+I8ll2cJb1+NGEC8sj8lvvzGBO2yTUhBKpZs\nV5PJBmeIC0WOKKlGXi8sulo9SDCTpHxFbkBxf4s7oY75wACAGIOyWwsGMYnd\nW/rIQI1pn4o5nGKcgK778l6MpH+LtC13ACuSImpLzQ4OFk/9kynVUuqbuWti\naBV/ERktxFN9YSirY1Rv1BERFUX01RPE8ymJe7RU7gDEeXekfbI8v9bAoboI\neZVybQTeTQ5P149+gAKc6BBoJ3WMIcvC8Pv5ui52hEbD2ar/4qpH4BH97dd/\nFv14pY7n8Q9sEDNMj64FOjLgygkPWEncDY3NV7i/lBkHIPnm2fS/NFiVKuov\n56uz56N1bY4JLILtfuOqQPI5Hon7slWIQY4BwAvvK9Gu9yjoDNbqdn1pug4f\nnKOBeMIRqEmMpcdjtXr17E1ZiAC1XVaCh878qCgivTAMVkZLNnFFPsFinv21\n4CYZ\r\n=E8yA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/density":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/elevation":"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/switch_12.0.0-canary.caa73aeee.0_1621952123630_0.8429046406037004","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/switch","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c172bbc6c00f90152cb3ba98f750cb2a432f0a3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":59,"integrity":"sha512-DWKVIQIHGMIbVHizVZhTcCn97uUfT3REpDDT+Wv32mqHjhIgv6wyl6b6EPm+VS+IgZz8LZo5nGI4NEnaUfsl6g==","signatures":[{"sig":"MEQCIDvX9IHZ00kBEh/BZFUdbwWnIofsk6nBU7gTKlTblGoEAiAfQ7LUm8bmZARsnZaMy1FU9FDGTZd5l21VBlf3W/+NIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":657402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/KCRA9TVsSAnZWagAAB7EP/3m07UHG6xHzKniO+h7L\ndhpyNdGWu6TK5fGW0Jqv4KjYY1no+zLfT00I9slDLMFE2RXFA0kmFilfr0oJ\npy8e3M2CB4EYnSA+o9SV0bVW5yJFYPa6jgCrNZ+puPpC21WuEihQmsBmehpu\njwMwOgCHFVrBbya3/P/7ZYGtOuxCJBF2aNqjPFDTgrV2/L7zMRvT/cviZ1eg\nkQ6GZMrbdyayD5BS3rz9lRcJ9DFbOADhGtHz1G5lZbxHUkE14I7vW7VX3xS4\n1S76z/y4HOzBlVtMru5IO7/1QopzOh8S/s+gh5ttXeW+Uhm0dmXQ1WuZL7XO\nR0McGhYeYLIUXRNC8q5hqL+ZIQrNsKNQ/jlQtPBqkffeRiye27pWy81E1rxZ\nBo8hVB3TqLSOZmhixve7z5XHl71wj+B94eNOlbXO+59ompI6+HnE1x/RHZQj\nAWT34zN30nqCYsOrvtfEmRULhYMAV5g64ZKh7NZtcF3iO3JTbOWDJmkLx+bK\nyq/WujLds84lW2LhbJayXQ8Qt/tZqTS6KToLLvk5zwMH26BpoHohMDafZ+Az\n+nlueKlkpbZa4dHmeRkjucQnl+g9sIfQsu+6EOf1MLecJFa2hU5aAwFyr3Ge\nRmtKnWbqCB5+QUYL3l+1HtE/vXko0z4mnSOV5DRM04El5Shxl5H9HEIQlPNL\ne3Er\r\n=HQVW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/shape":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/density":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"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/switch_12.0.0-canary.ec31ae1ed.0_1621974985604_0.1354067407141628","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/switch","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8530d3514.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06ed09688f7f4ee7eee968c154d679e0457fa39e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8530d3514.0.tgz","fileCount":59,"integrity":"sha512-Low+z6wFZSDe4PdFbtLTv8ijVo6NpF73WO4CYHZO92ikpm8TFjn5EBQGP5r9gdekwF2qNjlqV5d+NL2TkPKhSQ==","signatures":[{"sig":"MEYCIQC5/aYfVFrPbtEBmbz1ZoCoZExNG6KN5JaWMrxALuxI1QIhAM2pGyv2wUKSoxOFzJDbVec0qPOGf+zlnRPXXtiAaidf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8NeCRA9TVsSAnZWagAAHtUQAJW2taYWqaXWsBPFT64i\nnZ5pbppKncQKrJl0LpYkFUgRsOqryYtYoMp89VvON/PLoBoVGvnFu3Hq6+YG\nn2UUtDB0iRgxRqHXP8nMB9J30KTdSoVM5tZqncOM+zhBF3p6d7MYPOLJ2T47\nhIAWG95d8WNkSNMpRLOp+PFkTcK15ouCyFCKR2nNKtB1Wzwd8qJLumrphEcs\nfhhdwe8AdUifqPiIdEFXeiDsacOaxtuRdAjLRGUKTgVNAu63IboiYNpxeiJL\nISyvOmhVh9QJmkipD9SP9jzC9c9MJtXMX7pwmM/J6bplIjNzyR2aqC6YNgg1\n9KG6BhaDkMFbi+fRnqIkv2RAeYy7Z6Z8AkPE7x4E+y3E/rTc0+9EzTZz59Yc\n/vNhSWUQw2Xhp6jqvgzSHGM97tr1r7lVcmfgDlZX1W01cuN5qE5UQ/gjj43S\nJYHUFTLDpDlkyEbPgDmRwyZ2vb37opqRCb0unsLWAjR764jcg81lJzTq+Xq1\nVHty/Wf24MGEdjpXstCOn/M2/01zbiRQBrmbZRdM/6QUeilRxtcSkHCuXIav\ntEWJ6t1Bl+0pFjcfmHuJ6ZTuntezPk0SWgXrjfChbPBv8ZNToTpUGAJF6spH\nKC4piF9nmVcjlsysdWHx9IUSH/P9uNdQSK+NyHn1x92r3wLD7m5JOK13nj0t\n9SBl\r\n=JUd2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/shape":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/density":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/elevation":"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/switch_12.0.0-canary.8530d3514.0_1622131549898_0.7591223208269133","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/switch","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8cf1cbc03fbc2c9a72366566d565d35182f6983","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.00b5899dc.0.tgz","fileCount":59,"integrity":"sha512-Yy0IKnONPt5DDO9aI8GP5jKC/6VTcC6EIr3Odxwt0UnRgMFvtzVHLkevalvdFVdFQ1oUcifmpmAHNNaHbNeFAw==","signatures":[{"sig":"MEUCICvZ01BLqCglSh0BT8RD6II4JcAc80J/TgNcjtcKglN5AiEA2TvzOaDZ4bIyNN3o/LwdXFvOrXz51nnBAU4/irbA3lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrjJCRA9TVsSAnZWagAA5Y4P/AkPEpAym6Zv/XdWcq2w\n2jpsp2CgBSz9kpJpO3dmbkxdrcNz6uHfLsjrudM8lS4MUPt09hnL7VDsYV4a\ntcQkmc9ys4wtOOX10UvJny97ljpripl+mi/tUJdydi9JYHlmumgY2IdtQvte\nF+cbNyEnXd3vyzvKMDhEfx/YH+l5OvFg6rc4ycaLzJB8sDrl+kaPQYqVjrGU\nPNfo9BinPjtzF4XyZsLwE3e8YFxkcieWIj8dvSvQmJxfkU9w2N6asDAntvLO\nj5Q9sEmXKacn17Ewzs5Q5o326XB3+9BpwnsWiyuz9XmWmM/dGU3EVzDP+q+z\nIbCz4fk71brQKfEupQltwmS4IrcgsAYTtNyHUmr6PLjiQ/kffq3fhv5bFnXv\nxt92EvQCz/qo8nIKqvC7f1ykPZu6/IgQ0ypJoC7luspFZAdE824PimyZQdET\n0yKTSAfAuKNQwFpyyPrTIKKEDT5gBhhlp8FND7cF8MXe7XsUOR7vipc+rhSL\nNCVYTssKNMYZ032bi+goXcEd2kg67KB5WWS2QLaXNHZeqnXz2JR/5/rnseMB\nF3CuCBRAXAcTxKBOAsi8NexaxdfqTsmA7uwAFgpSoO9oTNy/hEf/UyGrRUnz\nckG+HiiWDa749aFGH5H2O4z2ThiZaPSF92JbXXDM8vWdZ7F60XFFNKqyfHjl\nep+k\r\n=0mvq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/shape":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/density":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/elevation":"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/switch_12.0.0-canary.00b5899dc.0_1622587593090_0.8115988961952316","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/switch","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36d5ea75d6e95196883a0b41b9f89e70816cbd3b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.f1525ea3e.0.tgz","fileCount":59,"integrity":"sha512-Y61d6K+8TfO+SSstJ8Lup6jTMOJUnukdcP5Y/MCkjmE/w8fukzrZUKvFrpODJqav2jKJKvJrooXPDMw/PCaVyw==","signatures":[{"sig":"MEQCIEmGPdM8z5E1iX3xNWi5sCu1R2aTqZbTAClwoIDQAj0PAiBXYRJ2J5zPpi856PO0XNG7uyvoRMoPFP+Hu4OlS56UoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN9MCRA9TVsSAnZWagAAP/kP/0u1/STCg+RFk3TSqdAz\nBoF5lNlOBHviqI+J3gHSlrFNdj8CIdVuEHWGvhj1pcFRRgnYc7+JjwIspvil\ntfABWFgMeKzSsQ86Y6U6MDL6+Dwl2rl2DVqMXH1dB89IUU3zRpMTu5dic//p\nshG4Smj+9Jdf3+RxxwONs2ou/wzECYxh6w8tBOxHAcFWK7hdR0M0hj42hoMH\nTzjWLuEMv6EgwL4OhOchbZx41PPT5rKr80D+Hi4NEuD3+G2FgvkN4Kx5NuEI\nFesIDAwSVZbBzWpvUk9JjnQyZb4vqV0/fnVU+TysIIqyvb9bC2v6aAjA5zuJ\nF/n6W+rJhdK5Al5vVnG2Xrxw1QC3ZbFiw+w8BWiJwhwkjSbMoVi/sOE8AtQv\nVZfG+VhcA2V66Jd3zhtPjxiyyBOzuO4etkokzua4+X38FpXa0nWqLX59xVaa\nfQ8zCAf6jnVjhxM2Koto3gfPByGdgNMqM4sATxD0dAxiG+lrJ6xLhD2tqsQX\nRd7+CurdTDjOTUjaTPjwYTyBfEtow9eLhayna5pKQ1wOH55Dck5q3q2nliCY\nY60EF9cZ3J9F5fvGhyOb07Onc6+lV3zgg/dfFW1UmJC4/dVt452CfErfR8XR\nd7uXp06hYJAPuLp8VyZb7HsIuDZwFaRgglDah+nx2V4s+V19owzp7UQ6ym8P\nkBMS\r\n=35lw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/density":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/elevation":"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/switch_12.0.0-canary.f1525ea3e.0_1622728524368_0.340939934843272","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/switch","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.464a00286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c50c27b2b360438871dbeb0bad8982d3fc1fd2bc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.464a00286.0.tgz","fileCount":59,"integrity":"sha512-3jQlqVW1/HnZxhXguKFEsuDkiECdAaLm9cr/Rn8kbumSpCSdulNYLljFUoOxUySlSXqflWg/KkMXW5joJrz9Uw==","signatures":[{"sig":"MEQCIEUQrsldLO85C6VXmkLryvZhlgEY3/NRAOx++YQv8QbRAiADbgbs+YcEVe4yhEhrmihZFLxHLCw5CIhI2qfo4Z9bvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOtxCRA9TVsSAnZWagAAnf8P/idCzHsjzGLi7I6S8Ksx\nd8S9FigvbuiPsGWW2Hxt7iP8cq+hODAT2U73qjLnpJ1yEOQ/16FdRcAPerSA\n7vtzMzhlYxDajxtZmIuKK4ZAkQeBcWG/7nO3Z+JE9fCJBY5H1rGrjwaxOOCW\nfYCmjheTxKRzmkRr+PGO0VH0iC7ZsskHT9KxuzEpfcphZ2UyXRjYFCBIfD/P\n5kJ0R7ND0kZg072IEqLNRfX2ATTWHGaHOJK5fgUYW1I9D73e9TjFb9bv9zV/\nAFWXKy/gASRIghovohrivrsj+PRyB9jZ/xz3nIujhdvcK3zBxZLDkhq0AiIu\nXayBrbCC8y8QRITSio1SOnqr/VphvJ7m3QTmZvlhmmzHEKrnIeMLnszm5CmF\nN1t3Bnv+EQ1MFmkgOelSJngOpP2s4FQfIjrgLO+wB5pPgrvfuZ/Sq3wizRuA\npd8A5/sOJfu6ZN6uFbFGLcklk32KpuvBDA01C4YElujupCGgBbdq+Bv7pbPE\nkGlUQMhyx24IKCTlEHWwoozpNkCWyqKL9y+zF8ZI8NScAOd+6eihZZFzoQcl\naEdCuo/8/MK4QJu8gvUA7+kSo+ZZAQPZdtHvdQ9bimALler6JgiyJi12mNJP\n2EsQXGzWISpclB8ebVOgP/Z7lm6DIlyPTSzjezOuefNsChTwIclw2ICHZLYK\no775\r\n=Us98\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/density":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/elevation":"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/switch_12.0.0-canary.464a00286.0_1622731633200_0.31862219347584486","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/switch","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.474de7878.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fee77272df298040ef30dde524e067c0a3efed2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.474de7878.0.tgz","fileCount":59,"integrity":"sha512-JPb+AqCX2S5Gk5ouppUHcXK1UzAs9oz66B9+IUJsmqJF35AqGYiEcQI7LgtChNyvKeTqX+wlCh0gAaeOteKqaw==","signatures":[{"sig":"MEUCICMloejVZNGXrjguF5eVzLQ5bzEw4zYrCd7L6hGoV3mHAiEAmF9C4m431zycYhgWlyR9rF2ZRJmX8LfAeTBLMJdqHT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPIACRA9TVsSAnZWagAAL9AQAKLjrjHTaR9cA2PI6J+3\nN1AkqqeuucasGVBYCR15IWyechmOzpOWHbbmG3F6/MrIINCm8J5qIJThEcBc\ny6dDaJ9jGXkwTYLHaiHur/VAM2faBQAFWKIpoL1BK7FQYwPPK8t0ofrx93pK\nlx3Ev+WuutBZ+MF9ZIqEMBXwgqT6doEnEPqqqAYxzlqmz0jGp69G9cW7zOuV\nThV1yJqJKtaCmDgSYISbWqpg3bMkWtSK6kb47gBPfyNcBphAWfAmpNIq4iFx\nWWs5NzgbllLzxOEwdPEJ25S37O0uguglHlkBNBEFifHKhCKH4x+d/NUAqEIR\nbW4JK5aKKLKkxSg0KkluAUDvj4jxGKbsQe2L/vWygnVKHxa6SPFBMU0ozV6K\nwEdH1ncOS7IMykzF5gu/oKkQECrtnh8RY2+MARSUeEXK0/EvDiexykqCnfEI\nGdwh4N493ru4Ib7R67x8D1yrsZBqneNsoMud19WGThDHgkBshcmt3aQKs5SJ\nztM3vP+aSTMnqPacUFb6zdIJ0sV6/Mm/tueqEi4VLchkahRw6Zf4F52g0P9H\nJYEgn6QIm+HfD6hR8kCPYBNbqr6YzD1raCBNkWRbbzQbNWap5Bc27Ih2Ca2y\nLdhufytJ7YZPxF0yUn64JnkFPOj3T6a7LSt9jHe6TTppSOFEWrO4dH2+9i8s\nqj29\r\n=vEny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/shape":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/density":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/elevation":"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/switch_12.0.0-canary.474de7878.0_1622733312521_0.3251798103756183","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/switch","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b72969d817b5d9a36120869cbfe23ac9b872af61","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.b87ebf74d.0.tgz","fileCount":59,"integrity":"sha512-y6CRx8htgWTcfJ3Y3hvgy4SA8IoarbEfYNgmD5sBdmnOBfDAAjz2RND154zS+u3rfoegfBrQOSXjcGnGIAZkVQ==","signatures":[{"sig":"MEUCIQChdkezFeutPYgZN54+Jzn65r1ejrDt/GHN9NkVi4gWXwIgaE/TBjyt/xliDRAtp/BQWd9RkJYvn+5BBFsY/B8rFWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWjCRA9TVsSAnZWagAAYnwQAIkVzfUzCF2wqE9gAGsd\nzdp0RJi0RDdZv7TXSX+pP/UeXsunDuBQUb4uX9ObO/VRkECE4LagsRbzfPYT\nHzNjsvE5QLElQSqUtJoPBWkqzV+G19TzJih80c60FohrIEkl2NQln7prxsL4\nHc5GfbUNQyOxUCM8qTHPmU7Gfj2rAZz++Mf7ka3WEdzXDBLg67IJQ8HM760+\n+z2Huuhy3Tgh+nWLD8YnsAxCEGZBfaPOcyX2L1qAr1F2aQxG8uQ9PJiexeQg\nG7s44CnzPh0kBX308x28EwnNwUMmrhBlMk5WmvOqg2jexNjiOFH1RBUiR+u3\nUoerk39xLPcDI+Q5MCIMucU57AJjhSJ4DSW2421z47HhVq5oSPFteeLDgkwL\nmeGXER1OoGJAAelbye9LXMtwKWS9GxID6DsmaxUW7nHpJx+c0eMdO6Rq9RC/\nED3EsHE4BswhIsJuAAWgLPtq6G3orkYc+t7UqJDrz7Vj4yEDAfgR/zEoz5ET\nXn6uGBoDDDKXV2FWc4JbCBhI+VOuaNwQg1n6h/yBLCD2YL4rGwsPnikNPFFX\nkUJyFtFy85rIiX4kQLYYxhAIeyAWnJuWaA9WEAt+fsvP10zymMkEGNv0G4YB\nl7X8rWriD56gDv1Q/eA5zIvWJ9vuTL0SKulOwWrryk1XbTrjY1M2Cik1qck+\n8Tk3\r\n=5BLz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/density":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/elevation":"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/switch_12.0.0-canary.b87ebf74d.0_1622742435463_0.23381261991367963","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/switch","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a52c63c4e1a8893eab4fb83d1ca27f61698c7e75","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.2daa49b35.0.tgz","fileCount":59,"integrity":"sha512-u1I4k+pVmJsZCmPGS7blnPaEwhkSJ1iAfMZWG24KVBpSGuofzc7NXXpZ0l/SCQgGQcsCWa+JEqv03FjSEcKMVw==","signatures":[{"sig":"MEQCIHwXyYXUqJENNnJXPgAMUaYmo2IHnVMOD3nY8WekTpK8AiAFV2ysmua1Yhk2uRCWmZGGBdv8OjKrvO2cfLzdQiZr8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulGNCRA9TVsSAnZWagAAToYP+wfJ5mw5mhEruwUHR9H1\n+cyYguds4VSWATmbWICVCuTR8EDDa/YvXkNKUOxljKPd5GQqmg6Z565+K12o\nS9MqzH2u4BiZHfaT35I4WSWS3zyS4Jqpca5BgScxZGZg0LBSX3O6/dxNIZ9a\nJPPCILQYCgeynvftfZa+4GsFj4Sgrcw99JdM2bSEB9RVymxR6zRxyQtpmqBa\n47CRmbJ7lwK2Uc7wFlkeB2M9uaBB/zzHTM+6kNtMRAuRDfZjWf3qefu1wn21\nVaNl6MNfZNZmYqaUY5k7ljGg1FPM8Zvxc9jnwz9BKRYcNw0PQ1F/L57+97h5\n+rT2M2lYDsTJbwa4VX24EN/CfnlhRSLIJSeIciMk7rOwlxZvMFJy5iS27JUw\nUkt4Bp6K637pEukgwOOH7sZOQVNsq5/oeiMoBqoOJ51tJPDIgRVA6rGei4xl\n/mTF2Td6YfhPadmIlfHIMYKW9h1WXO65++MCdgMrCkfe5+/FJ8zGeoTiJ+XD\nqOGupOyNicFhXqaeRx/LWWuEdpCJ/1yUe4Vp2bU+x5E2Cc2FJsfMUX4zcSDo\n4wsxELmjrznipUrQH8BdrLIlYqrzfNQfb68wBjavE0jkV/ZJ4eq4q8Y1gJ3n\nWVUb+8/gjSDUnx5xRPqVUMK5BB3aeB1VtBZTgroDtergIuyyV1G0F5JaMmvY\nRsrT\r\n=6X3K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/density":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/elevation":"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/switch_12.0.0-canary.2daa49b35.0_1622823309450_0.7856752060731842","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/switch","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.08db3d737.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07634f7992ea3b2d1cadcc754c956877e290fd5a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.08db3d737.0.tgz","fileCount":59,"integrity":"sha512-ST4tkdkw/rByLxTdYGNv02p6rd8ihEZkWJuMHa93K2Uj559lYTkCQh3T4bMD8naHJn3LIlhT/aUp8OAx6/4p9Q==","signatures":[{"sig":"MEUCIQCbD4AqHiIwrqhJb1KtoYNzZRAkTjFa0dqptfVE4YR3RQIgbi1OPHS7CtVQxCoJlMLmHyrrlHcjZtNabvFq2laSJec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoIpCRA9TVsSAnZWagAAx1gP/j9KhWAuzO8nRTJXXmtJ\nUqNnSsCr+l2/CGrwrrSp1HRju2OyQDL5ebk6mwaVJKdG2cTPgW8V7C7hSn9z\nhmIIgLG4IRbD9YbwkHphcU53WfHsryCdJAahYnlFvFUUyLYMrpNy7aettiyU\nibzN6zYqj4HFbEFqqVDRhrPZS5+hw75GxVfIOzGZfdG9XooqHgG1fK4ccwxp\nhFcnWvX34f/RCFxqXc4trMM+W/RhtEvuKyznDrWLwKMAGSuVfA/301rIUFlw\nX/utVkS9UKqCWTlKIYgeXf9+NENyok2+NpZMSB534gaQ4A4VKHNhtjKpUJfh\nCT43Zzx6HNL++GfRWWlywVoLMntKIgrMv+e0VUn3y7hs691K6FXn3gSDR4zy\nOPY+6ePHcGIGp9rhnhpEwbuVxTmJWjl2batLDcy9WbjZgZjj0LsG7q4R7WZJ\n1r9o6O38Fz14QPNPwX5AQ5isy9LbToItqLOWzsSbgS+5u8Gj/0cEGesOB6Jk\nlBLsXQwKWpJJ4aYo/freZ+DDWvZVCg9uNTlpPSwVW8u1JTtty+UrmLQDcCwS\nbTC7PO1raT6Q7PtJKRZZ0V2zKM67+//tOEt0MxwdRq2ikGHs3YyOeYyV7FYO\nacgLCE8ZffONMXl34M5CcVu3iGEmRSAG9ndZdYoK5OxD00JQeHVGrOCFnGfv\nGHvW\r\n=Tefj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage) allow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use \"@material/switch/deprecated\" as switch;\n\n@include switch.core-styles;\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate `MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch/deprecated';\n\nconst switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed states.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused, pressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disabled` attribute to the `mdc-switch__native-control` element to disable the switch. This logic is handled by the `MDCSwitchFoundation.setDisabled` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--checked` class to the `mdc-switch` element, and the `checked` attribute to the `mdc-switch__native-control` element to toggle the switch to \"on\". This logic is handled by the `MDCSwitchFoundation.setChecked` method, but you'll want to avoid a FOUC by initially adding this class and attribute.\n\n```html\n
\n
\n
\n
\n \n
\n
\n\n```\n\n## API\n\n### CSS classes\n\nCSS Class | Description\n--- | ---\n`mdc-switch` | Mandatory, for the parent element.\n`mdc-switch--disabled` | Optional, styles the switch as disabled\n`mdc-switch--checked` | Optional, styles the switch as checked (\"on\")\n`mdc-switch__track` | Mandatory, for the track element.\n`mdc-switch__thumb-underlay` | Mandatory, for the ripple effect.\n`mdc-switch__thumb` | Mandatory, for the thumb element.\n`mdc-switch__native-control` | Mandatory, for the hidden input checkbox.\n\n### Sass mixins\n\nMDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.\nUse the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a\n _disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.\n\nMixin | Description\n--- | ---\n`toggled-on-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled on.\n`toggled-off-color($color)` | Sets the base color of the track, thumb, and ripple when the switch is toggled off.\n`toggled-on-track-color($color)` | Sets color of the track when the switch is toggled on.\n`toggled-off-track-color($color)` | Sets color of the track when the switch is toggled off.\n`toggled-on-thumb-color($color)` | Sets color of the thumb when the switch is toggled on.\n`toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.\n`toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.\n`toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.\n`ripple-size($ripple-size)` | Sets the ripple size of the switch.\n`density($density-scale)` | Sets density scale for switch. Supported density scales are `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).\n`ripple-states-opacity($opacity-map)` | Sets the opacity of the ripple surrounding the thumb in any of the `hover`, `focus`, or `press` states. The `opacity-map` can specify any of these states as keys. States not specified in the map resort to default opacity values.\n\n### `MDCSwitch` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`checked` | Boolean | Setter/getter for the switch's checked state\n`disabled` | Boolean | Setter/getter for the switch's disabled state\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCSwitchAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `setNativeControlChecked(checked: boolean)` | Sets the checked state of the native control. |\n| `setNativeControlDisabled(disabled: boolean)` | Sets the disabled state of the native control. |\n| `setNativeControlAttr(attr: string, value: string)` | Sets an HTML attribute to the given value on the native input element. |\n\n### `MDCSwitchFoundation`\n\n| Method Signature | Description |\n| --- | --- |\n| `setChecked(checked: boolean) => void` | Sets the checked value of the native control and updates styling to reflect the checked state. |\n| `setDisabled(disabled: boolean) => void` | Sets the disabled value of the native control and updates styling to reflect the disabled state. |\n| `handleChange(evt: Event) => void` | Handles a change event from the native control. |\n\n### `MDCSwitchFoundation` event handlers\n\nIf wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [`MDCSwitch`](component.ts) component's `initialSyncWithDOM` method.\n\n| Event | Element Selector | Foundation Handler |\n| --- | --- | --- |\n| `change` | `.mdc-switch__native-control` | `handleChange()` |\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/density":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/elevation":"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/switch_12.0.0-canary.08db3d737.0_1622835753220_0.5772351205703086","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/switch","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.5823407a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"612a87f6f22553e4b39c87470eac1534c9060081","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.5823407a7.0.tgz","fileCount":59,"integrity":"sha512-NpOyROKv4eGKDRahTwlL1uRoFXlPUuMe4v0WuqbClmow25U9ckkRHjlFFHD5awjej7+DcDToKcpbfwor+0k1dA==","signatures":[{"sig":"MEUCIE6v9Y78iEpCCDixNrMvHlhPfeFr77SCYRLp1a7rCfppAiEAocs/b2i9xTpG5PhNquhZubU3pmv41SUVD8sV7lo38VU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr6TCRA9TVsSAnZWagAAJeQP/RZ5TCAYY7tsvtzTZIEl\nYMRQ5AWuRlkVpvYj9n1O3tDZcU8gQjmOr8ZQykHz1Q9kASqeG9pKRD3GFDqS\n5fyKaTax9mT6dcZqZhIdnToAkenk4mv1N6e7PN+Ed8qMqBZIgrFDK8dR8vhm\nsmGEsDeIXZNyVAx+LQQE1yBsm2qQ3EtrCtKDNptoWxXBtYMYzZ2r4tqf2Qew\n6boFY5oIhJiHcAfnf1UlstvrDpGBf7GDYGRFfX78TfRPw5dX5xAzQ/2fFg7N\nq7+3r2wF+K/LefYG3Z7taWlYJtfS3xT12YrJWZPmOZ8uPMhohmNh53UtuvYr\nh82QIErHc/N5CHDmCI6+BudZFwss+MBP5iMnc/2bEFNingNFlk3nPoa6tH9l\nZLebvpcxTerYWywTZEDVADh6GkXGcLd56bSAZLfDP9O4tndkmzOyWZxnJOZj\nValTzAxQewH2haEknj5kikIRiIGvueM5utwlt98d5AAitcwsZS4sQyJ3CTYm\nz0c5qIM6JK3GmW0x30dAn+jg948rUfPKcVSp4EobWRnq+KtdZWdOq20ouDIz\nroCLf3WY2+vTjbwhQCOtKdv3i7+jLS1pr2Eb2nsKo1nfDwK8sGeJZj6hszYM\njL8k6ZcTw7tNcpOpUuewUZSseGGaWeNgZVXRaTyHHhX7MIvmHIrXYPoRZrWj\nRWfQ\r\n=xfON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/density":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/elevation":"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/switch_12.0.0-canary.5823407a7.0_1623113363106_0.19474926074014554","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/switch","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"408c4dbccbdf4cd254d1226cbffb7e750914d9fa","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.23b0c5e22.0.tgz","fileCount":59,"integrity":"sha512-vbfbhn9J2KqOFD6AVFiqT12pjEoHmWKJcI9aweLe3RZq/1dU9+qLTpnuhagVD7Rfmj2s0QvvhqeB32sqPpwGxw==","signatures":[{"sig":"MEYCIQCCZrDAOavsyLSMYaoRV7/AlOfFl6gB3Y13y6lDWAEzEgIhANPWG1EvxF+qVqRxhg/bVrIKbptv72sHc1RgwsCBZTWf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5lvCRA9TVsSAnZWagAAPhQP/0mXGN2/4CAiNYT0j9/2\nvI3n3UQKE5lBX1DX39JvIfIvR+ul7ICSjBvBAsnWehR5gfxfv8D2PIw2zQOz\n+Pi7d8jXR5DTikd9YdErQPI+tLrOjswj+FjkTo3LMv36xCY2nP/h1QQF6iSd\nzw1CqcY0DXYlzuaCcXqkBc1VIXo2GmDz+QWhOsZsEhmF9XjcdV2NQgPcdGTA\n/YZiW5uu8t6XIHlFR2tL+vXFoLW/RybJ81jkAusYeMPE9CgNYErVgL4QnFuF\ngnpet/V8CRwk8vzGGknTjDopLjJc56OdocXtUWZZCF0Nh1bT9vb1EqpH6XTG\n61lyJrXf8WeCZebGwGSvmK2SOauJDPjY2+rUWlfPGAsBX22xDgcZS8n2FzfW\nT60YP+hrD9+7bN0S7ZgdNVkQMCp57TqK1nXpHDe8qSLtTnoBEbkSRR9F0L4G\nyZI9bZerh965El8Y3X6y0IEt60IfFjXC4M00c6J2q+q4Pq4jEuya4vhAX1YD\nFBHAAFq6Y9vEPxUtY9i/gXuveX9RmAWraBlJu5AHiYgBoIVqXqaeDNMREglV\n+f6bw/+FIHlMtmyRFkIXL8GfVIo4MFr5v2VVmgJ8KJvtoTdBRBr7bhWHm5lJ\nFC3fbRIw5GgH1o3jHpiXe1bUiwKgoo4my3fZG0P3sEnqP5++uy01P3pIldi6\nxuQ6\r\n=Q1sO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/density":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/elevation":"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/switch_12.0.0-canary.23b0c5e22.0_1623169391623_0.9791230601688756","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/switch","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d54f9169fa7826c429be811bb3bb6b9114826a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.2952c6a76.0.tgz","fileCount":59,"integrity":"sha512-HiPc/91mjecmkK+53hh3BdlhpRkVQhrXQgoMzC62Km0oV86kAcQTDhBqVCeYMSEnmjxn0hMXq7lrlohcfGc0fw==","signatures":[{"sig":"MEUCIQDnMbYvO6dkqBQK7HJNI2gOmJoVpzm7hB63y8hZR5S6VAIgfU+oqO+sSvofwxzAYuQ/h2Lppc5CSKe3zRyO5KP5qx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6vdCRA9TVsSAnZWagAAENYP/jg2nawLEEAvaNX3WHP4\n3xXtGeiqrJGyv1GlAZGXqHXse+vLpVaUURtIh49glJpZWDhfsvoZzI3j/aJp\n662OsSr1XwAf8trNCqbfhpdgtdVaVjbvd5W60cSUesWBSJaEDD9d+YXk4VmW\nywD3fgs5ult+jaLyW2anbAgM2x6vndTdEbRQ3Md58KoMYZEYNOxlGoGI23uw\nX9miW3xm+C97VPOsNDq2XPdB3sMyzNDdKTFnlIDs7QMx1oyCCfR1/GrdupAS\nXYRfgVKpvKfYz7ox2jGu8IoCJSWsJnXrsihbpYiqalRO36N1XL5o7UA0HC9e\nAp0FAwLcDKlNgFhM5vgK2Nhu+qMPWVpkuAy/2/SVa9xfmFIOetf+Wb/XvqjI\nwqJvzcK4kH4+ruf51Oukfl8UoFSKOP4zDOheXooqAhUOO25QIDav7OFTDEq2\nVlLFZ2h1RIFxLjS+uRCTpCOnPr+VD4WQeN7hBICh2uEPYM980HG2Wl4go2zC\nqfFvsETlQAm2Otzm5e0FMJzwvriQiQQymshyKUPJdupk5Nd7vAm0cJwU+ddM\nl/kHXvyBhi4StKAFA++SbKt637n8/qxIjXsdMLJ6QC7Gs/DQ57aIsUn3FYcC\nBNLXHX0n5+JY5dnZftpl/zkQF83Emcy/pn/6AxQbB2YWhZFo5yUaowCflkZN\na5sU\r\n=t5dy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/density":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/elevation":"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/switch_12.0.0-canary.2952c6a76.0_1623174108779_0.29494027209609786","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/switch","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.f12425f88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2030dae4b2d362a35eabdd3ca9ce2a0e7424ecf2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.f12425f88.0.tgz","fileCount":59,"integrity":"sha512-ZsJAq8qIy1ol9YY/4qok46oJoQ5Sb4HeB5ik3K5IoVfdN+GNocuCQlK7781eLGaYYtzkkW210vcYYdaUeQaEkw==","signatures":[{"sig":"MEQCIAk6KV3G/WM7wG5w0gukiXho+qO+1UxO75sl3kUXDWCrAiBmcXcDtHQwQtiMDAmAidaRynwE4/yZ94IVjDvn60hBpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXGCRA9TVsSAnZWagAAz4UP/3TClhcQ/7FKjNXfMG6r\nXsBOEwF7y/LjIK2tWSwH7KkBuGSQTYAXyV2seJSJ8ygULbSXqPX/W52qvJXD\nb1sFEDMZKkv8ZjujUu72iwgXFeO8gWD87ILupRRhrjkZu7CVQnPVZvixgKS8\nu9lB+qc0Lc4lR2TfeR9kXfD+69TyKfMQwRcj8PT2mqqkS/HFQH11zzHoQcVM\nCeDm6Of1UPBx0QidR/kp6an1IzvblIhyQRc9YEZmZGgzIIzEZKbhqH5wML1d\n0/4XVDwCYafe6QIriDLS5+6AZbeUrv/onxFmhuOKqZo7nBNYdIR7+04gl1oM\nDt3ixmiHkJclCETN5ugcP/vaPNDw74U9LHhYjbQ5vuTjiYGnP2ffd/GBC7q+\n+AFZBo5B8CUK9vSU3RXsO8dALe07LIOVPKZAYQ2eCvbvX46cwQGefB1dKqVj\ndzezAetq4SOPgGYMmpAvD+fqgOYgdAySp8yIFGw/SFDIpm9qpVhTFhPHE58J\nEtOTYDwvui1OZNuZhBtzJ3b84i8IAw25gjaSuLKYMAf0GIzscjuYRI5KDfjk\nxSLWAlHaOnNmA4B2nFSiWYVNz9+7AO3BQMrRDZAGVM10SMPugN5luAynwFd2\nHcUgaZpq1jE1pOIEFq48LurF/pED0/t4kv0C4p1APEwSiws9Ajz7qxZ9gdXa\nz9io\r\n=/Wh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/density":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/elevation":"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/switch_12.0.0-canary.f12425f88.0_1623287238734_0.973018453780514","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/switch","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.e543628c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c27df0dc477a0aa7cd44f63b8db3ae3d0987ecf0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.e543628c3.0.tgz","fileCount":59,"integrity":"sha512-iRTEiRECtGT7ImelVANo6vSgwDA+zujTHj12e+5erSFlYyoeeDpM76gpo6ZuR+w2mbP+Ospw9ck7CHNoVdDx0g==","signatures":[{"sig":"MEUCICXvP9sQ9v/V8JB9D3ACWY3U55baQfVjyet2atLcNk3YAiEAtPRYG1mtIhH6sKI0dG6DFWQjZ9IyjTLenE8pMGXdiJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWYACRA9TVsSAnZWagAAbqAP/1Pqlm7/BYAWTdI/YV5j\neYypF/nQjlACCsudSxvxCFmVeUShM52iTYCsPhajD6zhTVm87RHyhqEBFkFR\n0phnT8BjsXb9bWMaS+gRDW646yHWLT5daR9D5HsIfO6FGbteqCB+eznNO3dv\nzKuj04Dm+vnW/ZB1w8uJr8Bi/7PVvIADG/lcLJ8+Ityd35FiKrt646WhfpYU\nLUS+YfXc7rzPDLZgFVjHaK0jFHa6Ps15w+rYE6hG5ds7bUFl/RxTs4TwhbJf\nAiXIzBb7EjoOBpdHKFhIgmdHCDHPzoRBMsKZHv84oeo73J4PbLlUMR9076No\nCkQX1bu9yS+Fj/hWD19Mkrmu488Q+ZkshbJKNHVOn4FN1SMGir9mSyWMhnvm\nowtwT+HBpwKX5bnKsie6Sa8gE5ZdqcN8WNpVdPoBBa0Tp4V6BSYiWJMb4REE\ndHRN6EUtN+zpa9P5rxljrwl/lRz5on4PsegZKui01rat+9Ozkk4DhHfPSEWA\nJ42sMGjdgZ4Jb/d+FAsKcFCrrEs4ZoRCm9zCo9jqYoiRj6POuvxJl4PGH87O\n+/le8Z824wh7jYnfRTIBphn/5BnVMdfuw8Pk3y5i6QEkXHRp0WKSrnZgCYVU\ny9ZzuC9PyuetoYWbYF/WuISLpEizd2EjEMa4KQWUJ7rCYTbgEMWis1MNtoe2\nX43a\r\n=JwK2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/density":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/elevation":"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/switch_12.0.0-canary.e543628c3.0_1623287296088_0.8385017933311105","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/switch","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.e0c346286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4795385e9e786de46cd579d4fec9b9ef086c9634","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.e0c346286.0.tgz","fileCount":59,"integrity":"sha512-acXXElT8WS15hAp02Wf7ADnS+MisquLY2Ypm5FLp8lRLp7bFJuS8yZl8nEhO651fjTMq3tgAT1Wu0OGn+QBPIw==","signatures":[{"sig":"MEUCIHnBxdAuwrbLmj+lPUOY1Tgk8bAa7K6NijYn153gxVtqAiEA80tN96zrOVJ2QSzL6fjICFUXlVEWgRp3WPkTzTTqV4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+dCRA9TVsSAnZWagAArcwP/RfSzzTsn/aenfi7vLIs\n2lFfWFJPCE+Nt5saLaGBvGiLVf1XMt5SBo7T9eb/fxIgnWq/eS3CDfExE3XC\nuGeJLlopufSZOCYRWKT/dvyI5cjsdwSgK5u+RThBWEiH7FxvAX0gXxAoruPZ\nfjAwtiOzKtpcYxuHZ1mG+hJoi3l3821qpS+1ziXqaA1ARCv5bfiGGecnVLuK\n6YbpBMyxD6D112k4BD0s7/6D2eb7OM3DDAgmJvxYIapvW9Se+KiQcKwIk4XY\nx23JugxnGOPZtdRk9ehbjaMt1aflmH5Y2OuxDEXy9msVd1QJVLgk7d1lz6mA\nONOLlVJazG4t8VTx85l/8BJvMntDFkaJ90DrUdSqgolfbYjYj5knuxDH1xYg\nkZSAV8eNWzp4x1fZvO25U8QRoKhaN+OQ+XS2J2IsJ6R8SHSKsAMd0xT/yVd0\nPxcl9daNvfEcNGSU1DShxOCv5nvsFgLBwljnnTHUFrG/MGrBHF8qYjLsENnP\ncdnHxGBE4sGIUG2r+u+vQ6RK8Flhsb7IJBvtB0Ym+RZ1MaIyUmErO9M+Xdir\nX1YDKCm+nuQPAiHlqoIWxOe9B5cKlMB7PxgK3jrS4TPsvyipYCuqn9TOM9Wg\naufJcreic79Wm5lZXBuTpR5lhB3aa/8UI/g7Ekc9AiLlzlZdxFZn8bYv0ieN\nnEgb\r\n=z6pb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/density":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/elevation":"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/switch_12.0.0-canary.e0c346286.0_1623343004898_0.9023354079194883","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/switch","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.f43af5633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"053bd1de1521cbc29da7a8459ca85f36875b22da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.f43af5633.0.tgz","fileCount":59,"integrity":"sha512-Hmq3wnXFkE6NMrikXoJ7vkY2HxeOK5DkpaseKejMaTAsJXPvxZy5OdqcbnkCMhQns9ntA6vfQOsfM5h42EqhhQ==","signatures":[{"sig":"MEUCIErFuuVbYciOoMqQBCh6Q0R+xyymybOKfmEjgguKy5uQAiEA+Yf9c2bF44OAOZeguNQKVOBIJ8uQABY8EfWIi1HetPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnfaCRA9TVsSAnZWagAAbKwP/1ZFoQhcPo4hiDvxkBf0\n1n4gjX5/hTUiqHm4wwVIiEI2Vn1YmdphZ4jpTY1xVIqSG3m3lIYgxa1t9HjW\nod0bLP4HhNGobMI3GKQvDDcZCuoW1YypNiBp6p327xM80pXlE+NpLnbGXoX2\nQQbfSkdq0hdRUXp8IwYv1Q3j44rLuawAu9JytnFvRuG4Lp9SwSZVLzNpMwdP\ns7uGO6iSuCnijpuTP5prgYfxrAbEi3pf5pSar+psiWI06unVIaWqYYwnbieN\n/X2Iv13L3o0ELmyyI5eBF8NYfSnht/zEtRPLbwe8dIgS7B2bBhK1Y3/UcO2b\neQ8Z0qoWMBFYoTb69mdjOmNbio+nV/uGinFZudq4W4U1Jf5wn85Ett6KbZ/v\nEXhyKelPcJHqDCKLSDM+X3xZLhb9ZDADDKUQFgnh7QOCB1+fahM8KZliqOXV\nFhPa7URkogN89GNFaAwb1LooqEApVIhxzWDmTkXpdv5gPtItmU01A9D72LZI\nDqLYT78XqGinRwj67Xz0JPa9UJG+3osPCECrDPspmhzksSvm1AwzLpZgcYhg\nc41gR3kRzPQEndhxDr/kP2wLPtKUIjuwRheYCbN14pMT/H26c3kpQDMBQPQm\nmo6SBEGLXm+4kDY9uDs8iK4pjEKnRtPjGYybsdkpxRLSlDeiC95U8X+44Br/\npW6l\r\n=qeQo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/density":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/elevation":"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/switch_12.0.0-canary.f43af5633.0_1623357402619_0.38657297318119155","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/switch","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8415ae585.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0da782ca74796adf7d18a534db3de98c4594a21d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8415ae585.0.tgz","fileCount":59,"integrity":"sha512-UYGuDoGKb9zxmNQOMjOGVvVXotFpvlXMDaT6ZdT7h58CzSkGJXwhf6pFQuYBtvze1WjXd/gZhtER9TxLqUSENA==","signatures":[{"sig":"MEYCIQC5V/eAFjeOO7+peDFRaXQxfq2HMnPcXJflFXan7EEncgIhAKgupn0F0WSnlAuL055ex92o0nzRa7yudYUxful1rxRZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4oXCRA9TVsSAnZWagAASSgP/RdoQ7HCaBypzE85M94O\nv5qyWw7DbYUDiPWX8nnju/PIbtywf4gRiWfjdMaNHbmk2lSnJBtz52y4lQ7S\nDRzWf243jvzo98epAtQp6HMvQaF3RtGCCLeKcdg0Hp/8visGgSspeFh5L8CC\nFnrzcoqoJu9IPFvV6D/WN3RQrtGNvHq39aHBWt9HOR7NCGfySp5hULa2enPZ\nBCHq5Yb4212TqRDU/Gk/mRDEcaMVDN6Qv4ObalfOxjHLJI4AW+at0bnAmxNK\nBU6vfkQchLBTU+jxnd/i+jh85CjnTD7GZ0FCn9O2s2Y1IozS7vdWVNycf+Q/\nFEpTOFIz9NepuZrJzweR7ByiutgGzEmGZIqd2Xnx5ZXVnJ2KLzvnb6YNXYRm\nj8HuI4ViHF8TNShJGe/HBU94lrIBJlkQMWlHOUTxsyMCaEcqMoMaOFVUEz2E\nfBM/AgfLkcS10yXrb/C6EEQflsCaeI0GVup+c3SXOcoYBzdenLGtOcxwUlUU\nzaux2yeemaFlo2S0VJhOuMmkinpFVmK3cptdhf4MgCNsgCWyDHN6u8N8XxiF\nJvpI55Weh6NGSM3kpIovVAqA5Vh9dd4qoU0ijyE2Yu+WQ9xhq40nZRertT/Q\n5v+JZqiSjcdnitu/3i2nosq2jTybP+oB1fzXbBikO41+BybeJe9rwU9zOgmv\nbmtv\r\n=FyDe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/shape":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/density":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/elevation":"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/switch_12.0.0-canary.8415ae585.0_1623427607092_0.7285267917382465","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/switch","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e822dbd9ad047c6438ff571623bdaabdf6c3ab75","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.598fcccc8.0.tgz","fileCount":59,"integrity":"sha512-b9z0/je2OTjltgYC/ymNlCsHwN/u6X9ElvcAk8RIxpua+X4PIKlTnBjwE5BbsbZVWzuwtsv4VBsIwVM/J8t5sA==","signatures":[{"sig":"MEUCID5KIPcmKplKeooXe8X45RI7jqk8M2E0ty8vKTzlIFKuAiEAkF/h2m5shU8fiNWLQfFL5H9roMabPjL0byCjDWpAqLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9nhCRA9TVsSAnZWagAAeTMP/jgTg7AxlEVr4GKyhmsy\nOoVSNutLHHpDB9pPk8xKCWgWA8WiejG/ZE1l5FcSfKeYOzIoEyQ7MhcXcq3J\n6jVaExeIs8kwIpIAQDBzuoRIml7/5qFIXVN1ByWIwl1+cR7wZsZ0UiXg2+b+\noD3r3Edo00/4xXAt7qozuCEFmnh39cBZQWh6MnSvetglCVjMTmgmEWDLc5y1\nTpGyobH5Ay7DZGlVIACbHW9PhYQPKRymGSgOINXdOYubOwhVu9RBaPDx9Q+O\nIuhGiR/R099OznB/+MeTp472nowQLNEl0M+VV7XCGKNxHI3UIAaLlNSqQvQo\ntNFELLJ+KilekU6iN0D4Ihlmpb82duKDZPh4l61icoo5RD9/ctdyi9vYyA5m\n2E8MqinhpeFIZbava1cIsJfdzDL9yRlok1Z9Z2ignPgOHx++paePqapPttV3\nS8kocahdEjdSflJpTTz6hVBjtsW3VJGnJ/n250hSc2WEzbsAIkJYyRd2icx8\nJKbCh/jrHNiwketweIps8ruw9g2hIiWnw/SWboyjKXOLWvzhoVVkKYQQCM9t\nvbhZ/hau6V/acR69EYpX5V69mWAO6DTMR7kGN2/WdHYgNcVGG4+X/lqUVpnx\n5Z2oXlK3mf6Dn69BEosnBw9ld36joMEADI2y2tUXF0tqIzdEzp4dOQwbNzZe\nU6hB\r\n=LkS3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/density":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/elevation":"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/switch_12.0.0-canary.598fcccc8.0_1623448033238_0.9764270137962625","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/switch","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.5d0605188.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7edcbfa53224a0ccfbfc97534f00d6686befdca","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.5d0605188.0.tgz","fileCount":59,"integrity":"sha512-3n5zCKsd+hg08u+erlDHmRL89+1Y6v5AKoKjJuAmLhlO/buRjfox9K6JtiogsiU9Mv2b2jENQt5IWmegN/3MiA==","signatures":[{"sig":"MEQCIGd0BflKfe6xQLB8LNCuaqaRxzFH7ha6WveksctfZQhcAiBfaIsi695e+u1hnaF5vVNvDiA75wg/yWQaM600BoP9nQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5R6CRA9TVsSAnZWagAAUo4P/jfQCW4MUJhu8B0eF+aL\n2BVN2nJa5EttqAyPZbI9nl+TJngcIVwEIidVmfZAjqQCeDkURLFXIjtXhiEg\njwCzRixnERCZkIhzx+UTT6IFmA2HwBAxgRRaMMvDOa6LHVlB/EI6jAp8EObv\nLeJ2GGAfPBk7LjgoGQyw2akK67UBMNDae2nsofsrlvXRsl1j/kOx+sHa2lWl\nmInvXnwobvfzq4KrUp5kZpFT7hYHPXkGPxg7OgIYHBbVxCNC5ztUjpFB3iyz\n0MJL060mWXvIme4tetqeX1i4qeWjl0UgNU5J9pdaGMCA+3xk+g9oRhs4O4Dv\nKso8BYg1v9vW9qYMwyuI9Hgfg4JqizOLC12tfJHc3WW/VZ1dAmtuDWUk5ztS\ne5GUfBs2F30xPqsLyCnWsqONM7aDWK6/QHq4Z7kNgzGY3Yc2wGg3OLo2hyOi\n0eTovFlKefZ4tGUTs1ghMah0y1oxPQ2UTn7ZNdQs5KQkeD8sjZiWhQiTX5+f\nEJeofPmxNScar1gTS9WrmUL9ojfM9ihD/I6whyZKdURUiSXyZ3qskXuBTcys\nVcGEWbL3j4+1CcOeQXpt7fUV3GZGSk5ZW0mP4/1sGHiXaiLuFviCDByCP/Mg\nT+nSyDk//wCelEGmpu5/cnUaZmUDJzcSoZV/R4MUYA3XLbwTjzoguv5oDh9O\nocFX\r\n=xIHO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/density":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/elevation":"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/switch_12.0.0-canary.5d0605188.0_1623692410227_0.9294128593973987","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/switch","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.f147a2271.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"195f93ec76f10e0c43ff27bdbdee9bdb37ce47fe","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.f147a2271.0.tgz","fileCount":59,"integrity":"sha512-k3IuQE6SNSDfM32cljfRkuXOD89wEcqn3Kmx/fZPFxxRwMXfiTvpHWJz/1IFwqjeEFPjUdQGE9eKnHK0D7ClDg==","signatures":[{"sig":"MEUCIBIYvTQ35E23sfi13TRaQjK3shyhmsdvgU5CzCcO5w4ZAiEAul2WRRIIIRpKEV0CMLF5mTyRGAmwUiQjx8UIwZNWEl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6upCRA9TVsSAnZWagAAoHAP/1UUegLmoidBtwcNyqBm\na+oAkS62Yqng0SH/W2YjDHl4mU9F+5UlKz2BETFxCjd3l8n6qXh0RNHpdSlO\nm+AllSCmxIBiPIPYpH2dfzhWqcgTrkjvipxvro/1NlUtWmWr87zBhCrtCt6p\nCVVRftdTpZSLVHLCIglQoaDrpTel1gyL64vLCVUPYZSEM+6Hbgk9Mem0doFH\nKgL+R8c3jCp2aQZ9/IrKt1PpoLL92nKSOntZBmNGLHhDdhvkTom0TZBKThxh\nQCg9BFhtQfANBiCu7FcaCvWetc5cslTYKWtGPm4TFP8EFDukIFzuSbzGGehf\nk1Srf+GbKh2lM0KLVJna18b/4Xshy1rD+7+xt23JSplt4UHEpXkFps6viRFo\nlFsU6btVpILx5096v1w66tk4bkpO2qUh6RYYmBL9cXOfnPwqqgIlEWPs0YLJ\nq2sTUK6cEjSo9Q+myJ1RjGOFHfAdl0aENKd+S1m7rFU3Hg+UqfH456XHBa6K\nfPFe7W35vF2ncWJ4d6hV6pZS8wflahce1AQ5Uqkv/f4X5RdyyZsKpzsouiMh\nDvjRJqW8Z45ZozTCUjGmIC3mf42rcUD9DX6y7H/XtLw0HvvZl+59+mCmGY+m\n56FnuTV98n0NXxrrbKrPWTgA03bbQmVtXOft8AkcZ9n1byYSyB0jUREvuuXE\nMQ7C\r\n=X6ig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/density":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/elevation":"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/switch_12.0.0-canary.f147a2271.0_1623698344906_0.5765104145566824","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/switch","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.33579e00b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1996f8f334bed1de11e8f5749cd4e74c3f733488","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.33579e00b.0.tgz","fileCount":59,"integrity":"sha512-WPakLyzOURP/pmMwtrMU4GUffXAAQl2wETKsaEQsQY9fwElYEnWCeT4EGa6vCRRMbuFOGNTdFwvHK6GW+bGd4w==","signatures":[{"sig":"MEUCIECs/c3XVj/ViY8EDO3fDhsV1Q3spOJpVtxcXNrlmWd3AiEAw/uh6gOglAclB7Z6HOvEZP+c5eLpLAG0LL0mk4G1rpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/LiCRA9TVsSAnZWagAATWAP/3txhIha0k5XMbBIz26B\nXqChP2mRsGi1+48YHS4g+YGPO12TzthzEY27IxzMO9D0ehNankwm84ixNQ9l\nWgf2FVp3dm7MF7ceivMwsPZ38dPMZYguM7IZ2Wms+t7/58l3mJPyjXQXJQ91\n31lfR60boH8pwJk1h7Yd1N03hUAQmjtBA3hbx/kete+Dxy4zUgp05tN949Kj\neENA/iWHFBsXq/+UHmeSMtyBbW+c+TiKQ/+hewNrWcYIobDUAVXtz/xKvn3m\nzdK8XGmk6oSSh+GPZRMQ2ZPao26Qb7i7JvOCdljht+cTVL1j/evG/3sGiJzZ\nM/jVXIs+OmGGCma0hGBFF6bV4SYO/r7AOKNfMMtjQnoL4MNnxqHRzJfLOhHt\nRPZz/hxxurnOQ1uyyIjH5LhRvzFFCM6+1wBgT7zSd05zeJ0J/4IpgzWrbKET\nl/iGOxd9vjQ6X6eOEX00IPx9mQqGdT/7ABOBP0U6p20/pAkKQSZP2a4TIcEe\n01MFGqX2Q/E68ezlDKRLrEfFh85Exn7zr+qD2q5wK0JVhTtoTItIZlKhP5iH\ngNPVHdIVZ1tIXl3bIOrFKSmhXAGUObw0ULV5kRmKrKhSnFPkpviq7iHAdS5o\nJTe7KlWuTAa4C9DM+BVmq2h4tYycZSfe7y8sOPrwlwuuOSKuggcPIjTOLP9s\nxgZL\r\n=2qel\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/density":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/elevation":"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/switch_12.0.0-canary.33579e00b.0_1623716578358_0.8785149558712384","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/switch","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"809bf8caff172826b2fc3386654d662b54d92252","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.a6909c0e6.0.tgz","fileCount":59,"integrity":"sha512-S756WTRdFjffpR8zdObOTlTwU1wvgyeMloLG/kNZjZi3oG8EwHGxEqU4nv0d5kYZfVrfHcfq0sSmfQ1z4TCrNw==","signatures":[{"sig":"MEUCIHN0zm5SYvIo1TBoxdtC7v+w2yXCSIV1RkDEOEYYTvzWAiEApf5dM5aWIdcP/QMdEVI+XWWN9iCDtpXBC2SQVRG0+cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":639469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPHhCRA9TVsSAnZWagAAVDAP/RLCIM+QFndfyVolajAx\nV0w6ocZZ6UvgzTVXrHhp9UeGEeJpczp5Ovjsr6Mbuy891VPaaBfXmkIaFQJd\n+ZX+X+ZwGgarLa9r6tgunhU/dXrt+vK8Rn7sAOQmzazG/18DLaGkZumd/7iY\n3WmT40NC4CaK20gXohxOmb5C7qO5PE3tFSNtGYCGRSuIKyrbBSH623hoASAj\nbuFFjM0hMDS6mVJw3dXgSFMLIIs5P9Xb/JfqOc4BnaP/sPPkuE86v7xZz4S/\nbmuugwSMqeiKQugTdOtF1YNZUoaLPVvomdvduETuFv5SVwrEFrkrjEuVsD1R\nrZKrrpg+i0wuEKQrqNGN8D5sDFar+ZtP/a8D8YGNYZB9QPtA5B7Nnn05ipEr\nb0OVtSIOqB5kaFMzYE/qh6Y+pUYZgYKIF+owhU5E8AJDdN93tSg5jR6jewR6\nT7UW0MLmMwhB/wxKrAfDnALDWmif+9d0TF6K4VUzcezT1dLI3GuN5eASw51X\nckgi8EcXJcqtP82VOfYFPaQntgQ9Z1h6zbFzF7POL9Gzq7D09pFFeO+Z+2e5\nwFxIWvG2BsEKy1hA9E80wld1SpFYiK/hOrZXpLs8nwXw6Ggle9xdShc3nj4G\nWHqk74WRMuxTY1ow8sEzLJBLHk/ZLllHMcgOvqZx+QhV8+FZNIFrFTQL57/7\nk5zl\r\n=K2zC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/density":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/elevation":"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/switch_12.0.0-canary.a6909c0e6.0_1623781857442_0.14835213122305935","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/switch","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd477ceef26e1960093b90c447932ccd1b66124","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.c18b5925b.0.tgz","fileCount":59,"integrity":"sha512-mEmBYDskuwDiislXGxFzGHBv4ssHKmbRRtxHmpS2+k3ggmd22a4MoEPMjCNO3dtBgb1aalqDtIVkf6O4ttLTZA==","signatures":[{"sig":"MEUCIHGPBAhjCNShIGlKYMvVJ24S03rARLO6rKsC4MRSE9KoAiEAuGxvcpquBzSfo4nNxnkjBsn0cjb7juoEKSCMPMJml44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":644882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRXgCRA9TVsSAnZWagAA3DoP/AlkmHaL4Oe5CaemHBWI\nEROxccle8Qp/nULEnUJ3hEXd1cXhe0lndLtu78BfezesO/jZCCKLZWrE/dRY\nUCxNsTE29n++R0zaKx7mCdQS+YPNwCxwNjvK8jHEpOge0yQQAUalCLbPSj+o\nRV1TdbCOP8dJCf+SwTfqgRwrVdzgBimwqrhw+Yq6jbU++zlpjMrZt3jK1hT9\nNsLcRKAhfWMkShlFkZG7HBsLQnQX9+fGDje2kbShIFW03Jls2qwcYUCW4qsb\npQJ3hvqDX2QOBA9xniiWw9MK1HD+3Je1RhxDSDzMaRZMteHG6O1MXGePaesj\n6kDDuaQd+lejZQ8mCEv0KCEifEUsij6tnc+r4rbLCPx/bPHEOIo22m3HyPiP\nOl17ibqNl2PbimwUosUcea8XGhMhzsj2fJ0l2zpkCjes1iooVOp1tWe6ojrl\nvDmaVAzzl7x1L2NxFxz5SOLvT/ASRqrgaggRbT30wg1gIEbF7yNGMrSCvQ1e\ngTf3njsOHvuqippuq5/m6GRmKuZLXF6n8Pc7BPL9oEgHaH8EMMujhKQSOblN\nXHd4V/bk+Um+m275lBx1d8QI9Qb+81ljlbsh7rK4y0Bxtcr0hCT9EPvcolWN\nNam/Ki96HAFNcJcLCq6U6tvlsHBDne6INq8UmuIe78TwdAWdsntl/Uz033Wi\nM/FB\r\n=Dujn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/density":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/elevation":"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/switch_12.0.0-canary.c18b5925b.0_1623791071918_0.23930458958678713","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/switch","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35be271420fc9afca54f234020e49d0f0e302ee4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.7ea2e830d.0.tgz","fileCount":59,"integrity":"sha512-rw+H2KPagtfn4QzGb5fUIh3MY5g+xT86PBE4w/6zmG/vjFbz4MFLkQRRjBSdfwzDJtuo2iXTOLS9mVEFnMA6mg==","signatures":[{"sig":"MEYCIQD9SNx5EXEB3t1yXwu8WhL4axW8PWi2YOE72S4Vm4Z6gwIhAIqS0ZmAwICHimf2tygGXLHv1SWZGNL/viqGzhi7urFj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7qCRA9TVsSAnZWagAATKoP/j6ktt5o1UlLkZe5UATj\ng7+1gUZ2uOo/TSIRqXezAEp08koMxw5M8comibLnSmIDl3lUBief1445YbJy\nFpL476/yTusfEFCxeENpC0Y9X4jLzhxHxyhHTFfpCulQQLwISxynNxvZVfv8\n9tU7moZnV9qrmZk5ZWE41jVdre3o5aOC7Rmd4w+Jai88F7v44G00FsaMUcXS\nFFie/9GCHIM8xuRX83NZVFQIgEe2r8BIYHROF9NwLCiNMf/R1xK5q3L+eUza\nora0jhn9RwyYtBxWsF8cL5ffaRH3JTkHIzg9wmVI5wsxLrfSJ011W2ufAtrK\n4NW3ZymhfgK68PqtS/avCf7RgvTz+EQbCkf7TOlqWpd4Uro5QYZKjlZsoTfB\n8DuxkorSrsWpvdkWnOxvgkU0c/KeKyUMYJypADLjRFOe3QqS4fvKZF6C04qW\nepDNaDy7J6hpcZ/T6II9SqV8e9HWBvhrd388QI4Dd/ApURYgjUwqC5PDPUwv\nfVKJ64Ri5cpebT7hPL87SNM92vlSC9o/xy7xfrzX4Izedc6MN0jxBxUB9naH\nWutU6k0iOOjby0PXZm3OsPSjtT7kt74YcHIhmEQWC3uO9YcSE7EYUilqZ0f4\nizjJBUoHpvI4EU5FIbepEcJbo67dA96wg0HsZMC0jaF/CHhKce2RKMhiggO1\nfKgC\r\n=T1ww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/density":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/elevation":"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/switch_12.0.0-canary.7ea2e830d.0_1623797481720_0.455123541110662","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/switch","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.271fff902.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38fb19d339846bef699903eb1d60c49331111832","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.271fff902.0.tgz","fileCount":59,"integrity":"sha512-mEwDemYh+bhpuWc7UsvyF+WwubZwiltoJxU3Bk2vRTHcXDgySNY50uqW21Ar/XdxlI1oj2PdoOZFRQ/laGauaw==","signatures":[{"sig":"MEYCIQCZB7oBaW8ZuTtwvWv8FnB6gNM5u5xu2XAkF/87hLCg7gIhAPWi5iRP2wcPZJL0bHjXLFyETfc9Htj0OFgkxyiUP07H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8PCRA9TVsSAnZWagAAzisQAIU6oKoZM0e8NV2NvdXx\nBPtkcJ7d1OgCMCL6E9B9pj4j1JJ5Y8RvGx4cKq6/fjhJ0vEZfetLpgE4PKWP\n7HpqsEhwK2KMGKCECKlNjz9ktLw/QwAAhFJ3S5k5P2Bw509OVh5FKRbArTSF\n/0VZqqkIFvhILAmh4uG/oCXtV/8NOsbUUb5xbnPUOTu3FvIfq0YeA0EnPMLk\nO8wuaaeJOvjyb9AtrM4Ba3EYjX7zhP4s39viZPbkMKyMs3NI+XTC+YUglKGJ\ndBwM3OkeWzjI39exd5EVLNd0xMxNEKq2rGEwxE5BdyhVu5shMwqM386UjRlD\nHT86Ly8s3Ggj/bonK1V890wLBXqKAlCIW1CBxdItnYzzqi1cLPXEL01Wayt3\ntmK1EvqEcSi1iLDfknaA63XJ2N9pTAKExDVDrutCZPEpzxi50QdHkiZZ2KRd\nhZVVZQen4TD7gwhRAH7FfwjeME2/SzmHHpZ5aQQqHOXqzu5aZwDLXkJnYCZF\nMiwweENYJmXQq3dXpCK4mlImXd31ZTYbCHBt20e6wRFy1NVsrKLBtvdLFaAb\n5JYNkDDtQDy3G6uj6u3h/ZnNmVTrEC0NqW1qThu55DMRk/7I9Wtq9wx/qbEL\nDELH4lvy6dcZZHNY4G7nYk3gxkjUg8wba6zzL4WmWsXHxmAb2GHTAizhJSXW\n0YkV\r\n=l7CN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/density":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/elevation":"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/switch_12.0.0-canary.271fff902.0_1623797519649_0.3619824690021636","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/switch","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b5c22fc8c927e62db4c61116eb7fe07c20e2983","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":59,"integrity":"sha512-jnTYTesuh+YQU+v0+FSw4QmOvV6EU//QHWYaV0eRYo78FOlZoCHFtZW46AKEyrw933qRSrlR7PWLkp8Lxeb1gQ==","signatures":[{"sig":"MEUCIQDu9kh6YySv7FmC2Awx2L3TpGjQrd9wB96IKByERsL3igIgagVwjWeIO7lUJjQo0z0qONdEYF5mtULvAqkO2JWikjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymgICRA9TVsSAnZWagAAb+UQAIjAKLRMwBn1aMm4R0EI\nN7g8U5HwI1pzf5x0T6tWluPmFkV4a1FPHGlPtdvoif3ADfHch5xi/FneYbqW\n2ztLuMKQlk1A4fY6Ft9m3JbzDag+x4zrpNHrkKKKjRfqGIXOlUfK441bBHgf\nk5qoPxm4TNV0D5FE501cm4OXs8Qu+lOD3i+S4ccbeW01JSkXuQD9/yFpeavv\nA59wAnKF3374ZbV898YYYItpZKxdjmoeKT0EA+pgsJzAupthxO+bMNWKZzrK\nn8WSNwrm9yCGVAGBr03FhkqGLM5jD2Ds2pn8lTO3YPewgMCJAV9IcfDoueuw\nly8vv63QuW5gL9C3h8iyrkzByFyxGYuumhf0EFY7eH6b9PoKmmcQ/gvyAz4J\nCdgSxBEVVMBjwyFmHaFrlRFRVHaAhYf8M2avndXMJj06ceQWrs+4lME65WAm\nSMxf0ZV27JAq83OfINCHTNeQQmu0+HPVSc3GwMtXR3wQxPl1jC1fNzeq0/su\n3dy1qY/hc9pg0q9+QTn6E8z8O+tRPOYEWSmdbuiw4pPTmd1zNWvyetrkBQ/g\nJfJKodJ5GMS1XiPgk7eb3/2KD/1St3AzW1sLDSDi9W7osejvs4gSmO56Z9jf\n40jXE8NcUHCutCmHAd9rMgBfQBVe5sczKVhqR3FhADfTUUTqsk6Ui8pG1JUO\nQ92F\r\n=uDLL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/density":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"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/switch_12.0.0-canary.d96f0a1e0.0_1623877640086_0.5176815170814275","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/switch","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.a6183801a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4018709b67d1a4976ad02fe3f269a07ae7a0c8e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.a6183801a.0.tgz","fileCount":59,"integrity":"sha512-2Ltz7BlSQrJQ5PEg5y52BkM/ct39iNXh7XlSX45mfnONJASaN77w2DtdNyhZxETi5pZ6jaLn7d25goKbaIvpZg==","signatures":[{"sig":"MEUCIGCFwlelNakFCHxwvYm5e23qkoaLXMAE4cBmSC6niRrrAiEAzB5/bpocTIybWqe+oR1pYHw29nizVIgENGeZ4XzKz0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXhCRA9TVsSAnZWagAAH3IP+gKvL6cWizHdOdAwFijl\nJA0xEp8pVPfReJctpUxWFBhsxygtGxWNqbsFqA+N/Hxlx7BUxyN3KA1ZM3pO\nhTnPjNLW0dL+/5XJA62CbaFnTDuPLNTCPQfkxDOWzePgaVAshKgKb/w91gJG\n2YCvlW1UOq2OkZNIkjdaDyU9oABvhRFPzyVfiHGruQPxVqiTT/aFdZWRXt+w\n5dFtkBiyHL8TDIsnrAQNniJILpUmlQEYcgr5+mZKEUtOvNtnJJxzo5KzLz0v\njJzDjUyMPphecasS8xRkqe/N8+spRnWKUhGvbAqkMeiT25WIzKGHuYjzRgre\n8zJgUgAoDS34XPwx8tCgzl2Y6a/egK/1HTwoYB2s/c0nPFd1rsH3MbBisjzp\n1ZcAXnLYs5+poKtjk4dQMUSz3si88iZyGrQhGEeZXsIaRmaQh7Lzpd3EhLVc\neU26PotdrSK/D/MFXVVnAj/NIRFBrNm75HqMDp7lLk7i+sOQi3WxJLElzCi4\nqJyf9+Wzx6v/6Od/yqF/CqnWX+QP8NbG+PnurQndK2K56dTrB1cRY+iOqsJF\nFlF969i4FtC1LnBQkrtodfATqXxSIcNkZ6AbdBDnUetHr+KwMlIpUHg1+X4V\nPcMESsTdt0zQ/wdBk2hb3RIzIQdq7GzfMXMLyNSS2cYnOgdQvs2m8hIUCrfu\niDc+\r\n=ZshS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/density":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/elevation":"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/switch_12.0.0-canary.a6183801a.0_1623881184976_0.9342182151330076","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/switch","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.940550232.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fb3514708b58a165aed4763b9baa73a23fd3017","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.940550232.0.tgz","fileCount":59,"integrity":"sha512-Wrb89HyVuixrW/qpxhsRW5QEEopYf4Emb+eyWpHG/CvppbED+3afXQTq6zLNT/7YqJ5p6K2AbWLwoVScY/1pPQ==","signatures":[{"sig":"MEQCIEpL5t4eMfiFw343DsvP2b9c9Aopj3Jnki4Q6gBhxDnbAiBPAHc05F4vg5KuOih4H4EfujbWVtLpJmwFyKLcI7fX6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6VYCRA9TVsSAnZWagAAdKYP/iFXq2B9wvljWiCyf6zl\nCGUVUfzm+opm5jZjH2O+p+G4sOKylf9GKYt+OjUz/CiJnYUSg7XANVO9SBa8\nJb0A5ccYHspEbR2IOuDYA9QZ5nMHCvwdh/oU76IyhyZgAO9fnkhFzofGEh1p\nfg9ydOjPocFKcGB3DUPyipQleZ/m0lEkpA4EbF8nVexeyAicS4TaJ8WtzeHo\ntD4u/TzEs+kHUl2vTDRiCnAsCM4B9qSKDGjny80fwsHrse9aycOnumMKcHmL\nYPNZ+DCGNSfCrnNsQpXvb8G7y5T11d+HVxGi4RfLcGbkeOmR9zvmALRUw3ho\n5naKwVes2fgkPQC4p4yxE/OiQobr3NIfdO4YLHJb47vbXMwK6ue4DSSgsu7V\nljGduolsDVBlfY/wXmPFqo2qZKNA2VOHcnoQlNAYiceNMz5TVqqhvDdUuybb\npLdxfp4aF5TtImfQvshMCv+b3gEd0t71wubOpJsGmomnOC6pj4BuNWyTn6MA\nRFMeM+5W3FT78Oe1etYmkQFRZyQC0p3xeoOfyt5cEz8uAiXCcSwKslrltb8X\nHxUqOPqNfXLsNJJ1jfjMuPlG2/m3g+Mpl77qmtP+PpOhGUuTUkd3qQGpdtob\ntuLk0Z59M3fj+YRbLMGUqUp1KNU86qfycXItrk2Gmm3ueRSeYAczOo3Cwc9+\nhYY+\r\n=HSrP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/density":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/elevation":"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/switch_12.0.0-canary.940550232.0_1623958872327_0.03948431806405961","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/switch","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.f705e8048.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8d8daec7637cb30308deaa110d520cef2ca9ac8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.f705e8048.0.tgz","fileCount":59,"integrity":"sha512-GU2K6FngXio9BzIv0o1Oqwr5oxGIVqelbCUWAGn+a9GczKKscGErBVeTpa595KJI6LtSPNI0LAmcrVCwtFTWtg==","signatures":[{"sig":"MEUCIEFOtTmGRUoXSHRp+Mqg2mEejuNmSKoUrG4IpAycHHMtAiEA5bmwdTNA/894IZAWfvsc3yEvHMYEfhXlrbMd88vG6G4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLrpCRA9TVsSAnZWagAAiUMP+QFOQb4wwhi3/t/oSmib\nRdXf4hkCszE4g+VMiXFWwEoMjrPVWBkmzykTQhRbkSDZKy4E4y9nfen8UzfY\n8LxtdJYCiafUnvE1ZMDQMn1iMm1varaFN8yhoNcvmhekuAuV7OfGX/KSEt2X\nmHVQ6rwfxMQmUT6siUTuoVT6N5yomwv4NPMAh7QENgWNpnEjGcaztpcLeNuq\nOlxsenQGjlhmdWAP8/8CXCrnHcWhdLEcrhRvoMKxj+Y5Vvy3YZ0ROUv/ATnp\nWauUfkypdRN6Gjq4DqAOUR6Gu5PDTiDwVkjbSJzIhY4YtHScKj+HK/OOTAo9\nWPx9YNTO2sP7Ef/aigOuSOl7VHvKxK4h+eXb0WnnwgxF+griKlILdl6aeFlk\nkfWsQiqXpfttOJmBsoMWiq1xIEPxis3w8ybVdVaQGPhHzoaCt6S8uhkRRG98\n5cifS+0ZAPsfIvSuf75kXF10q6P0C6MbTG6QKpAvPscPkaaUlNbHTVa8RWPt\nuY9twn+7bTxS7UlxnmrDT3i5cfThSbwqSy5aVPD/fiqrEr+9CU/TcDrzmaeJ\n3iJ86krkPpeyLCtghRfvzqw00IGTL5uwL5dFcrXo2JEHw7rHZF6VhRVfI6qM\nW0mBaNKGJ7XA0UdhT0OirB8JW4NxxQBkdsSEbkAcplGXnON4ZDBYtfCmgIZQ\nEI0Q\r\n=IgkR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/shape":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/density":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/elevation":"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/switch_12.0.0-canary.f705e8048.0_1624029928734_0.08412706533661263","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/switch","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.08d791f37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faad1d2eb940f79726f91d8a083f795f98eac8ca","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.08d791f37.0.tgz","fileCount":59,"integrity":"sha512-3BUGDUItfrc82WU2wETpB5UZdQiufFtKrOvUTMyeKPuHGkJeJrHaZd+5kVj7yWM6HuwvfOR2L0w5Qi6nZFLyJw==","signatures":[{"sig":"MEUCIAEfRyXBx2fbUMvSCaCNtpduffQbLeTdGHXbjCTA2fWvAiEAqdRAaZsbEuZwQFi/A5D3f2Ij/QH4toO5rKffyQWKp3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQxJCRA9TVsSAnZWagAAOhkP/3S/nqKDFq/vsvcnJJfp\nTbJM1RCQhOEAmRw2ODSCjzCtTOS2ycpUQ0G46Hm9Mqm1rlOj8xCGqyHFc57C\nUlanXBVavupSpLrz9EjDkmvY5AaLNd78bmQsKvcZ7Oo/c1hpY/jQINIufFvC\nekIDg7FaEcejzoHz0ra2V89QDpyKBBIP09774D+q8wyBO/8FAK4JTnRdo2F8\nWgrnjjmPQHDau2WSPWqJlN7cdlunqxtk13CtTOcm1U0w13SziatBj3VnlRj7\nFQQvVdSNwl5hjIscQESJzCkT3BDX0H4wB5wudaX4x2FuEaTu8eaoKOcZyso8\nyEl1L0FQEz7Qf/luA2YJPnawgUkfsS6s9mfHctzG0nm1eKVz1lWIWkBO4O6P\n7ke8g7v5L2YqLeSykU0dbTvaHw5TpHTv2Yq+t9Dzu+MrTZ8btGfZUOjoulx+\ntFuAMSmPUg0qPqmncnfTAnfwodwpprQ4SudNyghEj7xUFSloZTSvx5uTvYk4\nvxKYp72ebf7l32taHJnqmFv+kpbNQHXGTPS4AhgcxP5hgHaviH3Z0htEq3Qf\nLH8B03BJY2Dcq3SSDYGCFr/wchtMYqr7P+2cAI91TCcaRP2/RZPXIAX2Zzsc\nMizCS+MEHAvxq76UGduMPb2HOYUn2ofZ1mf6zLbG9k3dA03vnYxAIzVkzm5y\nF1PO\r\n=mlNR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/density":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/elevation":"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/switch_12.0.0-canary.08d791f37.0_1624050760785_0.9269512534616529","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/switch","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd6ebe61449afdf5b352b9d4f701a2e1fc13357","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.e38d7440f.0.tgz","fileCount":59,"integrity":"sha512-cRZYScAlv1r/pXefeUpdIDYHlr0GxvVI+WOJiGp0bP1KQktlqTviFX0JLv9PPhZWPYtAWIdXNioeKrdo6NKuxQ==","signatures":[{"sig":"MEUCICRCwqB5My0kxn3P3SllcElXesU6buk9E/GaBC4eAoEOAiEA+KzNfU9W1HdC89vb2vh3O8zSQRQYo0Auw5mSPeO21ak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M9LCRA9TVsSAnZWagAAr7gP/RSnXH5wR7Bcoj3hROxd\nxNRN83xc4p2b6bYmTkYRBoZJq67dJ9h5n3TvMY/u2ietgBdrktt8v2MaqmTQ\niWGnMZ/1x0WXrtXlXoKYpT/kzryYWdwS7fD3c2/YBbp2H9iPf1uplDn4lcIh\nXzkC9Zuwcm5wy7HodXQ9rX25J59mL41K/s9ZR1DC6UDK7KqExHZcdDnXnC9g\nra6kV4+8KpouGpKlRLjRqb5Q6UU1Kgl4bJiLj+LFNhj+ENhKbyOJIevSa8F3\n22EB2Suujt3gjA+L0sKq9603wL9/BmrO3S2pWmv1dOM9TnMMRbg3juTtT66A\nJIX/xmlUei6IgJmO82nGi22G+hYygWjZh9YfUAlVAkzSsv+e31c0yIMQThfy\nqKM7joznm53iu3PZIrTnH5uTdfY+GOis0EAv4yf2mgnwVqv/JJ17Z9k7qhVi\nsZ+ZS/xQH8Ub+vAa2vGMutIbe8xhqzT/lsJZVxQC+7YQ5jHgaPyqKpvagf0R\noOyRU3B6DQ517cUtkYDPV80XnyUPzyl1su7ENfHqEtZcSPQkuFhXgC9vlKBg\nhyz4GBeYjGRrhuxU6SFV0affrTRB1f83ZtsTB0R7qrCR8XHr+0ZVNJmvhgIm\n9truQV4nxCw77tCpanPN1NdNZGfSvaymOGz7oxqOvtC0MlWCGcirxDMAjuhR\nM9ZR\r\n=P+UI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/density":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.e38d7440f.0_1624297291227_0.08302216258040995","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/switch","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"292ca9f3a133666566c25c29c6f7ce3d25ce6202","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.75900a5a9.0.tgz","fileCount":59,"integrity":"sha512-xnsxv+QpdEAHXg5jthoPWkBXej1n3uDj8pRe/PjVlLnupu3Og9qMdBEYhjHFVKjNxQVUYnGMWKCm9qYYxsh0Nw==","signatures":[{"sig":"MEYCIQDJwqiRpoYE6bC80xD32EmhVz/m77yPIAriT419C2+wiAIhANwjlMW4bhvDjVBv+pg4wua5xMd7XtiOfx+adQ5a3/ws","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":658136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NyMCRA9TVsSAnZWagAAHB0QAIIhu1oGDiqGC0zMVRrk\n3bYLUksYqYclEDVMWreyY4VU/Lng+zQi0xmCXKdlymrT8LqAgMJLkedr7mzt\nuFQ5CdHVZCikAGQAsFlxC3zSorctHEdygUmukWmYyDVJaT0Grmn/kupmSJfZ\nZvEGd9wHTxGOKwnd+tnVNLjWsP8374zvHfSIVYtsQMVzA26wcdB01S8Aee0E\n82GrJ5tfdSfXfoAOBu6ob3ibcsoLy7vcsEjNso/SscDgf9GvrAhe75WsNYGP\nDkqrdB2G79vmxUfeVE0IbIWgJnvYeVbvVvDiuF/pyPYjTXtXEbv72G1u6Ma2\n7QsOIrbHyC2SC4gT7xBD+6kvCAdkwaeb1SZjgfcs3hwxw5433q04HqAYlzTy\n18+D4g5GQ8uFniZwmmyLdbpiHvi/0NVYhUTRY+/YLx20+ECXpLNt/qu+zjIz\nfmA0tHyFJUrWZYPb5dqvEA/fhs8bsMndMfPvqt/7z8ZOvrXjErqZzNCio2UM\nToM7Y1lYpbgoaIBlfDJN3IoEAR9nDQ5LEr6z6OMUNpcHOq223SIH6yOyR4ry\nFgMHnF62bXbT03345VKULXASjxIh4CQbG7RaTTs2axXZ2AO7/OyzfQuofaFU\nys4Ak/QiNSpryLa2PvpNCGN0LMREKgNtfTtTaSAUdqSfTOPURzA6iex8CdH+\nyGMe\r\n=K3tY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/density":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.75900a5a9.0_1624300683558_0.6168485468260929","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/switch","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5f84f7682fe9654f23bfc77d5fcf623c489d496","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.33e6f50e9.0.tgz","fileCount":59,"integrity":"sha512-ffAz6qqhIVs+DQVUpRsIJy1n7FUhej/l3UzOkHL3JNlybjV3baQFIzUsZbEHJXpcGFWwLUtqzJd0bxa4ZfNTOw==","signatures":[{"sig":"MEYCIQCELnZ06cL2NSfdwVprc1w9GGlVdXjz2/5zRpJplpcXwQIhAP5rCVdSqLy85Fu+uAFf7gyMLa+bvmHRTaWlfgJs2oPR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nyNCRA9TVsSAnZWagAAHiwP/098jpESQQcjco1a+8eb\nOk3x5lc7UfydJVhg1K2whK1AP3UbTFJ4LqHLnn4vIf5+oS4RHUuHezFm7w2f\nmm7cANN3gkZMIMuoBZXZwXUoyqLs9HjYV1aRjb+ABT7r9V9GW1SIIkQBeMkW\nnmhv2QnN+q27aTAsPoX9k/VBQ2UVr5NlRT820ErJDwrNASKH6MCaPUBeQ8FK\nOW9Qt738/Q8cGF/g+E0f3yPseh0i5OC+NSfRexE8X+AhBFGWsTVC9DzEtrX3\nCxCN6qvLpRxcdpGs6c4S5PLPuIOAHpzw3cOLLxfkByI1veA5JlSdEAlC90jS\nKCgHNbIPK+XZEh84kYndIlHuV7TPQAWbYDiz7L7L6RCL9FRIcyxQ+GN0h8Rw\nUFwoDjNCkNGeUq/Qf8ZbrLUdGIAwpufVQtMmTiSsQ3wQUTtavOVTSLMpoZly\nIKnqG3CwGIhWx7sBP/SiOFwrZ/Ck9eZEhvHdaHf2JCiGFwhOavQoLeGRjKu3\nJqI9QWJIAsQvD+luriA7d9ZI91qtSvNKd/frCNc/xi87oM1qunti3RksxAs5\nweQ3v4MvyCDpoE7OHBgI21jucMdTJ0IXQ1CDcqv273uuNJlLQWybfLR4YQQi\n2gf0G20IjRxc1rEcdI21nqWYCphNONLSZrpXas5vl4Au86LPMW/RUHo5gR4/\npvCq\r\n=j3B2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/density":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.33e6f50e9.0_1624407181173_0.9018673361938458","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/switch","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8c685301d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27d55608ae3c059b1fa72c1c5844bfe56aef39ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8c685301d.0.tgz","fileCount":59,"integrity":"sha512-YMZjpnpp7psOpdaOSenCFqUrYwXygq7/iXNGkCWVlASaThV9JLI5T0aJWVyYVBt/cJl6uh9v86WWzMjzPgD0+w==","signatures":[{"sig":"MEUCIAkoS8vGqqEAsJzKaf6fWmjwWbeEj0XH1PvCziIcbSooAiEAs3zW28Bb+3Vsz7kEK11yJD/WxFnqZfBN9MRWcATVGHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03ycCRA9TVsSAnZWagAAAyIP/15fbh0gEcmZQ5nQ9yTD\nVIM0TV7qiUwibeD1c04V752A0dfpsNvqKWhB+Q7EJqT1HzWr0o9FiPU+N9Mu\nyWosmIzDRnLyzeLpHBYPoQ8RYI/RlMRULekiDp5GzVtLXHPpKcxFMXmlqhyI\n2tdCXh4hyDxhesBMpHxKcwmd7b8xSJ99gvM2WMOFGrQte71jOtY3bdf7Jwul\nUe/z5AQTIZrtX8k+fbxuIfi+nqe+XAhRvRuwaWupRb+pUjbuPIrPHZ6xPUO/\nIkJOwOAyXsmtSNTcxNP2HtqALXwvYlZutwQddF/MaySPfovt+Sv5wcBUQ8o1\nPAN7o5DJcO2NqBdOXE+NcqtmE1xnolDIJYqiNYjfqAmKGBFBX51RkOUFDMjm\n4jVAMelMFADpvTTgd8FcYS8H/UFLeC1e3X2o0+Q7UTKsDIuQ93wsFlUvWixQ\nxaEyUPC5ntDSGsWKyJ4MSIavEm2pjCCbAFq0mSx2FIrvutreU+Cx4bDfXyow\nqZ76yVz8rlSXWkhJcWRee8dcIB3L0XSv4l/m38k8YL8VBSWMIBxaIyrWk6GV\nBx5zVGXRyeCjRbGZb1TQJMFqer+p6iDRMiuS0dg2pH1XvOCrnDPUlYa4YWTo\nwOc7Xo0fOSJUiW9a1or2RQLi34RVNdblbIq4skKfMJ9RmbC+eXzARXm7nbLO\nVTaj\r\n=T56V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/density":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.8c685301d.0_1624472732243_0.8392250776174566","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/switch","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"332af753e6ca57a2331f0c9793e9d9c95214bb0d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.8c7d994ae.0.tgz","fileCount":59,"integrity":"sha512-3s3aT2sWYdB2obOjY/T9eqQwh2ovK7uHBeK5XXJcBgTXT2qWshluWHGny3C2/YurgfnmiupkHFXDhrb2YBeajg==","signatures":[{"sig":"MEYCIQD4ZI7OLhZjZAwMR01ODDK3cbJ0DkOesIMuHu6fE3BYfAIhAIkHlEc/3OvOdNod7kRay05f2KIIQ6ymOhlpsSUbX+cC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04tYCRA9TVsSAnZWagAAOMEQAJjhPDmh3BNpiWBPKNIm\nOV01vce6gZr8JNrKJvbukRXELsbYZRpSMYEGVIvAhpCXvsNx2hK9+AbSXF8D\nuZzB1YrInmFAbU/U0+1iUiAmgCxgr2XtGa1R+eW3dd/IhpqdU6U5Xe9Jt4q2\nY73t11EVmUvzQlWeuwYl01XTYxlSot+jomhIBDnLyD63+Mkzt0dq7cmmVJWv\nzZFJhItH2fmT+yLVmDYsIRgJXeIvcT33M5jfRmKSC+jDrmbXzBEFPWYHrFSS\nBZL5Jqm7TThSKVq44tLm0hfdO9SENjgLVjJTL/hnBxfSocImbRmkx9dGP136\ngn+wE0KRKH84EGEFlwHucFS6URUgr69vRjjwTbyqGcNlhaVdVHVALKHPmS8V\n+2LC6VBx5hOjJzx1XfccLibSvvGnPDZrCJQ6s0gHRo/xNRM6ESQeIvnQ1S0/\nncn6rnbPlzLW9k3ysxClRzA7429w1MHvJNr8he6hpC8GeSbiexyviFa4oHy+\nY3QqZZWaapnpnOSatWzO8R+7fQWMkQ40T/nJG2YzUO/R4qzeg+m8sDy9m2g3\ngzAo34ax/uQKo4YXweWWdOTJAPdmyj6F4AIRDjYKuGKmt+/OVM0cCSDOHU0U\nHyoPVAhtMrJfvd7LT7i6PgvVx39dte+j0/FmoIIb/PFV/VWn02UU1hu6h9w6\nqmHv\r\n=sjqx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/density":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.8c7d994ae.0_1624476503563_0.443350530181466","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/switch","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98251cbb55da182468da31ac062253257c005651","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":59,"integrity":"sha512-R7kBiisTf3EkV/F36cgIJ9OhonsxG/5CD4lSzNX5+g1dtTfZ1zNVOU+AOM6QSpGPTzvu6Jz4qYdVWPB15lzf6w==","signatures":[{"sig":"MEYCIQDW8+6i0bB9kKEg8RC6x9sIDAE0at9QCZlfUF5CKXjpnQIhAJgHrRRRkot37eor8TbuOxD34s0ThzIaHSKU6vfUjHCH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+7CRA9TVsSAnZWagAA21QP/jgrIRnFEDrPHaZQSCnz\n3rzNGulKKcxy4z6MgZO5NF1XnigRhK97CoRxJQoUbJNLnj5PJ7xKg5hMUyCj\niBqwb3UEljVa36RqkLpKfWkQyIrb1fui+6LZ3LXsnhoDIfm04UXjf3fDA76f\nARXPYJnQBBKJZYqZGpayKNIuKp3VhCKx15WW0NRVBiG5dsO40Col/C8Rn06+\nCDFZsZEJomZntzmlnuwJWgvWeMjj+8XHAwQPiu9ZjdeWizp+BaDomtzL9H6i\nni5RbETNYp/jzaHtOkJLc8bWE44lP5pts/DTP0UoB6520D+xVHMCMyVYdFwf\n+vunB7yFranup6+HFI/cTetLq6OLpe/2t3Ux56GnHGhG7RbULGEAHcwm/yHK\nzZtYMOD7sJFuTXWTqdcyjlduGjcs2armg//xnJCnw4m25HCOemn84mp1Ni77\nLdCJcb3LaMw09Dm9T2ER0oQA/8h0Rg3mtVdeqPs8XzZIfsBD90znStWnTnNS\nNe9xh5MhLR3X1eOPdrgPmlE7d38kd/7ZEtmuy0mG+5aO3Cb8MeUb9jKrjdbr\nBYsCINVUUG9V/Ey9UFWx1ZfrGAl2jM+GomYxoJGXlsipWWwItmC811/ogV9Y\nwNxmhMZenrANd9D0T68AVaH9vtCJIEkpLaf1CpxrHC8c56d7dAuQyfm8CiAA\np/mP\r\n=s75s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/shape":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/density":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.4ccd39bdd.0_1624551354710_0.3359286678639657","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/switch","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9cfe4c3abc069aaa69432d7b8db0ffd64502f1c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.17553e9f8.0.tgz","fileCount":59,"integrity":"sha512-H0iU0vnUj3I6c/JM+o9+lCa56FNgVzF4HtIRvo3i+GQm3AqUXXcuWB8V1X4JmGn2ehku+vq9CDiM8dOHGyEvSw==","signatures":[{"sig":"MEUCIQC8YZGu7DVO43ulWVqr3yX1H7K1QRzBST941Azi1kkyQgIgDrUwMU648Nul2tm5U8r6le9JODC1rBq4APR8sCIGTnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lLrCRA9TVsSAnZWagAAJhwP/j3KGNKR6Lot8rYGgL4g\nUpzisQ3M5H15ZhsquqhxTEtbKFcvTvPKdvJmkeyV9X7FogSJkCUclhdTHOle\nEt5zziF7F1Zmp2t2M+Jbu8CaDau5+uVRHVdr61MG+PxyxqYhsaCqBAW56HZV\nFP1WmoczLr4tkdhklQV4JPO5VN63dd3u6jdRZ+SF6BA0IqmJYQoOdUp3lXLK\nQ0FSDEfs6OF6GFZWCDfy3Anb2VHqTA6H6Xg28Yxx6B6ANAk0P814FYbRJpaa\nb9QZGw8Unm5pyVcARi9bk6Aq5JCotRlr7Dg1LaYANeskUGp4JfZ7bQgh11ap\n0d1EsgsSPXeCeuVq1/dN/jmTn9o+n8HfT/A3HFBU+7AqSBXAygXvLoNYhqnZ\nBH9JDd4BAxJ2plhbZHNG8CfV4/oLA6EDRzsKSijDpH1cUOJTALlGp6eeUoHt\neXQ7N8I01RNpo/Jwt/Rly96LbonarI0YNN+BvqulyZHsrAJj44lFpEtk85Ij\nbAKg6g6xblah9pDV+EVAfWHeEf5MCGgak3p13BWBnIZ/v7w1QqIB6ay7CSUO\nV+8K8cxlEG2O/wY+N/4YtqbD1txrLYEXET1mHw1fElJNAximrTKoDgnghqK/\n6Z50NZ6o3HJC8clYY3vBcaLPQRGUAChgcyZglM1sjnURPenHQvaZjx0GvBsW\nHdWz\r\n=GwD9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/density":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.17553e9f8.0_1624920810389_0.569123507834917","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/switch","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a2d7f1843f9a4d677edc9668cab619622d64e47","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.4c80072fd.0.tgz","fileCount":59,"integrity":"sha512-uxip3AUT72G87gTCDQMtlhPY4zo6haaGEAO01sq28yP3zIiku1eCqH5c/+XrB9PMR+CMC5QAkZVTJK+yIuwNzw==","signatures":[{"sig":"MEUCIQDv/MkoHGCEbCoE+Miv9gJlwsgPV45IXORwu6RvaBgmSAIgJgfpHePUs0GAlbfR+uVPDn3eH+h84LpblWEy+C9jINU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22lvCRA9TVsSAnZWagAAitEP/icfkl2kU/UuJPsWEnZz\nvk77O1iMPAl5PRjsMiJHXnrtM2zfl2yKgnQ73FYop4SzvALg2iBeeWhPsyz0\nTK5HkWawSpRFB5MqJSq8hn+q6lfmyQBWmXr5ta+KxmZc07X9WmINutka0RpC\n7GnFsk6FXtwvU2khDQJX2oAE582CSYVtDPOdXa3DUZXvahNa4sKdP7GTCfS2\nhtiXDYq1cdr4J2LdIf49Hb70wJN3WHWGd2IMz4KqSLuBHBKXdFR9I/uTOmps\nBN5Y+MVFt0o3i4fL3p9RiCO06/cMX/QNe46RND21i49/ELRUYuWZtP1XnbF4\ntSQBh4KHsQTlFiN4IzEtwK1of4TIpUF4ceN1TwiFkzycfDfdb+U0QcPUkKBn\n0IYEjQPI79us1SGytMyO333eJFjRRTjrP0P91f82S3r37GWjdVKP77IcCfLX\ncxKAl/hlzrYxR/QJJvKiAHQd7Elnzz3gUjRVEqPeMnkGADGPYsBZtlQYf3sV\nxPa0SQmMoszV2D4n6vXIQOwuaHJfFxfFIi3ItgYw2ujimNVooiVP95szFcwM\ndjH62rdQFzBYbhXn3yD9BClTsxcPieEiMAjm1gEZMgX5ZMHsG1E2T3Y3u+db\nmuJvWZwrWHjw+AvZJLvmIz4svHiupJ7CI+7qtzOBiAfkDRoBv8UhpwDKr6N9\ne9+4\r\n=VjRJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/shape":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/density":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.4c80072fd.0_1624992110931_0.26097856311030476","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/switch","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.796811db7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72fbf1c765c1a8bab121edba3d02868042d6ab47","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.796811db7.0.tgz","fileCount":59,"integrity":"sha512-tX6L4XignYjJQ7ia1CciHBe8Py4o0TSQ/8nbsfIpiizZrxQKZSWi/VeOeIo7rRAFHXAb0XPawbXw64G5AixNXA==","signatures":[{"sig":"MEQCIHyP7Ai1lnf8xAewlWFZ+HIZXai0QAatNL2l075VGxUEAiA4LgVZX5OELtskxNU5Bxjt8uPZL7XgJylNT3UVLoQ8Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QaACRA9TVsSAnZWagAAMssP/1w4xRCUWVaKQcFloirr\n1kwCzuVRWXRpnTMWYDZKxpVzi+5ZN6Paqf5p7UIS21034viInfUQgfrN24YJ\nrgjr9w77DxU0GWMv1RKla0DUgAz/NXWn4ftcm/jfxOoGyKT+WisUFDMdxTP+\nGFTVrvGotyrZuOT3McK6muFGLSuBy2ZnrIpM1+avr7vZjhe9wMJXXvvj/UCl\np77KGENjLevNddAl+f94lWcoG+kZxC3otyODA5qgMKqfmMnBktdJLykYNaYl\nZMBIrBgW9vTegnu46bkNqZkpLpxegHzypWcl7+JIVj6KFusLXtiwgSnYw+E6\n+jTQiJobprAfFOS8WFq6pkJ87qzdP7E2pol1snKtpwtikY0am4osuKte6GL5\n33aP2iPsIQ46NL/k86tdciLsStpn13OQpKzKtQn/c0JIu/q0lClO9fmWsOSU\nsSG4Sadz3/+EYoH5sLnhMGx+HtzCXgmA6hScsATYR1N543omoQASC0ep5QfB\n8PsBiMWSAZibAQbP7o3e46BJyB4V5lUHCXdrd/utCTU28wJ/ihtIPqXcwjBZ\neH0H+LbhDlWiSBWMJTq1pvGrVF+Xjd8MRdX8BCMzwz5FJ3ZjMTgvLASZNkQ8\nKa2KZ2qyj6rBmZKnGIjsOsoSF+A6vFJJOuVd88ABPmZ7SlbHWQ2euo5uhjiA\n45qT\r\n=j9DF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/density":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.796811db7.0_1625097856348_0.14589757111040247","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/switch","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d6419ac682df0d0783cbddfb27cc67153455eab","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.70e1efdca.0.tgz","fileCount":59,"integrity":"sha512-+Z8jasKPIze2oo6HZn1rFewAUiOuihIsNNdhPVATI8Po6txctyem5UtaJpPQ2hCvxSlGWk8jE0Vv0wLmeLwOhw==","signatures":[{"sig":"MEQCIFOxUrnzBOu4FK7ye2NtWCUE/QNypKriw/ciTxYVanigAiAHV+Ub0eXKf9ONOb3CFHUN65ztskWKfzcUpBtVmZw1sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fZVCRA9TVsSAnZWagAAgLUQAKOjtGFoSlWqOpO8Mrug\n8aMoRYl759euli6KaDc94v7XcnFLLsJy1EVGsE7DWsPMhui99RWqWRtkeaE5\nWYXdSNOLtysFKS2RiIZrnE+VG2OgZitfAMvVpQao1vxxJIYm1yX1SwVpBaBh\n7uBLqD9yK/biUV700sOjKQ4UzMf9zNDlziapDJgILfDh6QxOynvGRTRjhb2X\nMYbN1l/tSJfV139Pdt9IrNy/vPQYtmuHzI4utOtF1fr9YujQsBMxsoZdUXSx\nCOWIiTBQd1t2TacRS2G3NG/rb/WOjM4XEVu/CX2MXTlMzgWc3c29gOFzn/0z\n30k4dT1CDHeBO1vIbHi7E59Pw3ZT5yS19JrfMZf7naoHU6WJiVTz1P3qEiGP\ns5JNi5N43d1/oW/10ssS0mWP11fnc3cK457XuGmjn6pHA+wrfTnPTYBfwzrG\nqtnLeIm83UcrCIcFSryMNv85zIooBhSFVa5d6QNPdIgtILQ9CRRRhNpSqbb/\nOd2Dhg2udC5CoXscBm1TylJ4CBA/p7YjbUcZhenT8g3ykoXMZwLwpyzQHgJn\n7D9038kbD03uaywxNplZHcN5frLY2SC7/AouzlkqhjlYw72GeXC9o0y86ASG\nsgjgWel4tKDoL3KIpe4YdDSoA0u+uguh0aPsk4UIejEE6TsdNaSId0bbptOG\nWrS4\r\n=m9ti\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/density":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.70e1efdca.0_1625159252660_0.30932262386671816","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/switch","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.435866d32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"425247b3c5c2e3f015a400e7a07377d9c31d6ae7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.435866d32.0.tgz","fileCount":59,"integrity":"sha512-BqHOSnl+IKIkMBmUtWKETj5LJWft+CzhosCmKvVlEp64pIPqoqwN2Ke7xhiDv5LYv6RIyOtvkikL9wyGzUzdQA==","signatures":[{"sig":"MEQCICNFT/CdCafQyI5SLtqe0LzASEj4lT0SRmNT36gVnV7YAiAXNTxt/Zu4kOYaQT5GE+jnYQMw7Lyf6TYV1zrRYcdJZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31lSCRA9TVsSAnZWagAAVX8P/1p/EToTsQTK8US/r+KA\nnvg1uQCrRmtBXldApFOboawx4jxS8vQYyMqx/omSShbJ0qsvEuRNHscqxfcH\n4Yzhlq1InUqtjbpZvOlg6bbA2aVR9SXZyTu+xMmIbmHP0BYu+np034a1hNGI\n72Fmw0LV195127Q3/Ljmq6oMkQ6koEEglQaInHtIzLjA+ywcC5l2iWND8XVY\nic08rC3cEciM3tdC1CJnvXX5jMTe6zy97VT5PXB9i9iTLzLH4MiSOF8JlXmO\nrsfLW2r3o7EsP6bdjIrhJARTJGZTFY5Z8ESS/h9N9aptGud7zR15m9t1Lx5U\n8/np1oHjyakgpqImhrILHndB6DwwosZRxnZGo5xkTVGSy0mO/V7ZvR8WXZqr\nIfs032drvjRPUSIUYVWaxbW4nhAa7rqMpMTU8Ho7/jIuMLt7/7q8NQ1zG4g9\n1HpDQ0N0qwDLSVmFqduljpBKnYAKN7HEeUAqsmdaw6W876nTj/TDl1QY3JvF\nrLtv2bPLBCRwGC81w6JWsg1yGW0a3zQQRdoqOUIc2wpfnXp0/aWQgtm9yQ6g\nPg3u/eRbPv45Y6yw9khi1T23e2192cUPVR05q/a2NqwShBDIPckL+P1CnzSg\ngtf7DYL/CrrbBrEX6GXLwdBjS9BqH2U5v26xW+mwpIaRiA0ciAS70P2aOD9E\nBjB1\r\n=wiOb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/density":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.435866d32.0_1625250129786_0.6258616936739663","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/switch","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe91bf463653d318d580481614f62289d13c0bf7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":59,"integrity":"sha512-J4FLL3/m8Q6gPxdeGQTpzjE4T5J3Wuf8kZIPDGZcsDWjBKqjgHvQTQHksh2sZaugqFA/x3FT3+3msUHJ4gRaAg==","signatures":[{"sig":"MEQCIFeWPCFREdScXO1S5pPALs14KrampLEDCAHbyBTKP1x+AiB3rrsldc+Me7fqTtizWXg3rmMu2bNfCb5xpGriOkbW6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36i+CRA9TVsSAnZWagAAYowP/0+0Xns/oJAj5hkN3Ey6\n1P5fW/I9wy8uqya2T5EQHQhhA5sWOpVyy5Hcss+SwVsoM5vXtWa4PToAqJFD\nAT1Y1Cms4AC1vemoRNRgdJPJRWlK1Qv6J/sV2XjIYjnzgB3rAus/MZGhAkog\nrPWNbL1nQ5fZ912MZLdpXqkGIIgA4cV4DqK2F2EgVwJ2IPJUAPZbORYR6DXx\n8CmjVTFs8e2xVGm3ajzLvIT+xclf5Hcd2iuIcn7cq020OK8XgOPSnTsQvGLs\nk+XCXvcR3gj8FzkZdUhTvMb0oTjqMVbdBVl1jOF+ZoXRvXKqF1CYXXuItuw7\nh2XmDuv1nhYuf+M5E8vUbGlpQun0TlPKZuBYtkmsKhkSVkhIc2zXin8W+VU4\nuoE0xSvVq7vaQNA42Ar5ZMeD+FFd1jie1PEx82AlYxUSuojXs113gjmDSuwM\neIiLU91IiLCzUxqc3fYucaNXUw9YdnlXJbxOL1bt4eecWgM/rwp3cgon4z7m\ncW2ItZWZj+5jVKyNT+bNWB6wD4p39Yot3+M78aQPf0uZXvitcoiZghEztXiF\nmE4I3FYR9VkmB3TPr8fbC+7XEN2W53x/uZRPpyq4ZiOeowHygHKauoEbdEKX\nPqdRyIx6UjFoPCfX5ZXgWloAR2zYVmYkeExytH5ubHjDp3n8lx8z/c5pwVnj\nan5w\r\n=LQkG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/shape":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/density":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.d0f9f3f2e.0_1625270462109_0.5411818407335831","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/switch","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.adeac0549.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c78c1c05d00c8deedec829df6ebdeef931953a9a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.adeac0549.0.tgz","fileCount":59,"integrity":"sha512-g7cBVnZWZ3Y+EMBCPN4/RuEfyirpy+OjI8B8EaloBuRkO32LUcPXVdZQys2TI7tlDfPYEwRF0UR10HE4MZEQqw==","signatures":[{"sig":"MEYCIQD2RSR/JM42GC7QfLEQlWtDDSojeLrxHW25CPCvKX83pAIhAKaoqR2MyAu3R80Gh8pR20l0NeTulU46CGWFYoE6HHVV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xVoCRA9TVsSAnZWagAAcDgP/RjhcBAzI0VRg0SiRvfq\nAsZdA/f/g1XbNCU3+oMV9NSV4OzoxA4YszwDV+hTKUaLQN8BzaoMeTNWmBns\ns6k7ujk9HOcwgs/9ddrq62Ytdt6hKrtU2GPVoukWfC7l2zxqFywRwr2+ZYoC\nq9pAzzxF+Jmqeb++EIoJmVnFiS6RLeNDBL/Lt+ROdKweP98l+aHJWdrABv02\nXi+qmcoZJ5nW7N/kl7zqS6ZXD9GmmgcsRzqEafD49stWYVzuUomZWuLdMJou\nZU3+E1hG6OdgAfMUuwXOlBE0DFJNrpw2g8t9ropih1A8p1xzQQr/bumje2Dk\nEE/UYTJbuoP7G7SzqFAnZ0hX2kLdjGBycUgcdN4PQxCXVNMfbkn/NVHOnLfo\nUXciAYqogueJBmqldSo4me0lOfT9UeONX8s9AnHVO23I4yTCWcmT9hg3x00l\nA3ERRgaeAUNV2Eug8zGULYr6cH5ajmzzJ0+ft5qgcIPW7xAk94ftGnA85LCA\nj+y0ZIP1b3GLxM1tGGXUplyGPysNPkRrb6AMQes8jtDcKkIm9u8JX4WfFW2i\n1As4gtZsRHt7JwdFwhv3yYy0NfZgelBsUBN34ofgFM7h6xfGEDtJPTD2bP5Q\nMHnpvu6joZVs0uGC7t/fP/HJFdsvwWsOsJHc6Se17ZwsR9R50DN2Bp/PvquZ\n0Zmd\r\n=qJCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/shape":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/density":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.adeac0549.0_1625757031561_0.6689786063900458","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/switch","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.068fd5028.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3e6ac83aad710926cb5015f1fb7fe7970a0c872","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.068fd5028.0.tgz","fileCount":59,"integrity":"sha512-xdasU9kkNBsxNyTlEzypUqc9iGcpHAL13hh09E/sMA0IEsC9SCAQA7FyXbgtBxzTzOLUCuyE9ODOoPNds/Jrmg==","signatures":[{"sig":"MEQCIHhbclgyutm0B3M/Y2Pb7fAWL9n6b5qvZ5XQLDtnP3+MAiBTYngbv1uIWtQcsFQNiTmowGycYzaD1keDihDilovkSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50xNCRA9TVsSAnZWagAAYxsQAIlXOkD3tD3WB+e+7eAV\na67BU5EWwXdVB4Urv45LL/K4gfKX9TOaqMouwfhiFMnxgdLMdjJ+xCZOFW+i\nNcwVg+abd5DPk8SpmszJx2hE7pST7CjqMFliBNN2W5X8HwNnUfcBnPOoWZ5d\n6wm6J4nZqCGUI0y9bKiIMxNL33GhVcdTehRBwqV41bEoPMXI/pqlGj4HoDvt\nT56qwsH2O0FeKADf+CKpAImGwRT22Cmof1JiWQiOE+EnZOtGV3lhAbj/vT2v\nbFjTYsHR/p9dyDN4LQcntEAXC4OBDyIQTkypWVkS1U6qsqNVFJUp3DIz+4Yh\nnhCGMzrF8IAIaIq/X7NRHZ/DuWNBZ/22/0gRCE2Nb44C/Cx4C6Eq7OYf3HUP\nEN1TCfU2qOyfSiCLFmxBSbBzsXYYbXvKKNYvfqrtgGoJOEe+wSK9jAzqdrN1\n96MEkEZ7q0qxtBz07hxeKjb2Kn5kag1+ks/PEh2LPcrOeuzMjlLQoG5tWgNY\ng33nn9OpJMblSdw63QemvU4eLoXV2t24SOjb/K6Om+0GCrHLxgDLWVYUtijh\nIzUzN29BNEXW9Dl8S9YRyUY7a8u/MXtLSSfCEcVWt3LDVyesv4i3gYQte0yQ\nDCuGxIZEGWxT9g7/kD4QOQGLO9k0uZAPKeAG36DEM1DvmvfDCqh9AtBC1gyf\n/IIs\r\n=mp+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/shape":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/density":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.068fd5028.0_1625771085267_0.7291860270898656","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/switch","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b942e06fe8e60e6f277beefc7b0bd0501ba6a1ff","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.5dfec7a14.0.tgz","fileCount":59,"integrity":"sha512-gop6vseG6ejeuEj7xBSfxVH0MszNX6byc3BYfvjGQYf5x2Fo82RNWr9R8XPJqdMchLHHXxmlpdULsHpXRl4e1w==","signatures":[{"sig":"MEUCIQDQf3IM7D9/1oRAhkLmlD75jEXduOyRhzCZkBYGLbdo6AIgb8hMvYXzqBCIml+usHfQTJeztxmmeCVN3O17juXGHBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KBwCRA9TVsSAnZWagAAb5YP/R6eXND6w2V4qSprKIuK\nrSR0++2ykpkB+AqCqPRS/u8yVFOl52Q0snfKTMYAJGtG+4MXlJwTo9/toIbr\ndWgTcES/ZfH1E7XwA/pYl6/DNwWNEv6hylq+xq3BW31wrLssmaF5UO3/PT+9\nAKOOl3Xyasxr/OKGy/qQpceRDirLIufiLJ0NdJVGj0h7/3YI9Ft1ng9tvNV9\noC9OGaztm3/O3ltmuvCf1uibROZumIpsj4Fi4Xd4zCicO1kbzXyZkQ4k9CKH\nUXuwwbsQrqNty6NMvCk9vN6b9VD4YQfyqrIQw13VgwLfRUGEK89HNzeAuO6u\nMGWnGhAYlUH+v4jKdI8J5HyNsoTwmB2aaXE8dSsAqV7iox2MuRVCiD8HjvQx\ntVk/4JtSQWfcjTtiTEmZD8ro1eZ/jXop1m6SxiUNNLjH/FnSctQmc6c1vJlj\nKeOXpkHUjWUM3X5zqp5Q5Uqub0GLtebDQifLKrjg/8Hfgb0fzYQR6owk0kA9\nJYNEv5aOZojNCVitZ59homMWS9BjY7ojSzBnrZm2VMRC6/jO+uEXKRNwGO/J\n0yRBRMtmN0FAkEZBTiODxH53j726zx8uwuraVzWZkNEMeq27N7a1o6yTwe0v\nJ4S+yGPkmJ0awDqByhLXewc3vsBC5hog+KZLbqwKJTf0QItLV2xMx5D5dVQv\nXA+K\r\n=6c7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/density":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.5dfec7a14.0_1626120303956_0.6844276341049849","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/switch","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.07a73750c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd2407b1bb74e0c9d371679ffb2914c047d4dd18","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.07a73750c.0.tgz","fileCount":59,"integrity":"sha512-eYobvEXbOYbMipR6nrj16B/hC6BeAcR4ujBxz4oAKDmn1Saxskew7BSwi2/8Ugij22NhuDxHrUefnJ4+vfSpYA==","signatures":[{"sig":"MEQCIHQuuLmEvwLQedzDbczmYwgmCj1zUikzY+wF2sC0fAu6AiBX3SgJuGfI7X09uIakLlyiamT7Btp/rb+T6u5/+5yM/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KV0CRA9TVsSAnZWagAAxfoP/2boq6qPRUIKbKriFO69\n6b9OBIj6at7W0hKQih/raUelE/Hnae6ryPkNJfHAsjhyV1JhdYTky21a4lK0\nVG4LnwfWhxxdObFkuzsYqBLr07PMnmqnO4K7cuyZXkm8C4BycGcTyqxGq6bv\nEe3NIoY3SOqdVlSi/AvHBcJYAcnxuErGL5ymTyjrwk1ts/+T6D7sFVCxYuFV\n0Pkfywyz2n10h9jmLD9eeiPtdUHxgRBsHY/bYXKfREbBF1USjQ5lziZxf6ax\ndwggvoTu/c4E597p64Exz/er0YvtFxy8e5buElGzXnG7LXLKcBfcM1EtUrwu\nYPKpFFsGJhHEDMUCynCh2jU3WFtxe7quWieFeFpxg39puxtJFyri1NbAi9ON\nVVsEpdH2VJT33YM6G/OElE80V5I3UXIAtrI23+TEB9uFfyhAswn8A6eFrqOP\n+0YSwiDhQyN2YtO//W4zprqa1EEv6qnYPko6ejYt5MSJtZY3VDme4a+Soo/u\nfUCjaSHTZnCqPFFBFDRXcgcDtNgm/5R3tc8UjHULW2mIxsJr7Ls2MDP0FS6R\nexv3fRF+NneAW4qbexXZLjz+ijcj7zftOvrpWWNK1tf/keQKd+s6136gVMoX\nNLvPcncTkcW4zs5o8SE7a6Sc7jd+jXX8kDDB02YyBBTfIWMFO4LM8CvKmZCT\nPRuE\r\n=AQm7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/density":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.07a73750c.0_1626121588022_0.8550221478003572","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/switch","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81036a5eb57499a1f2a6852eea0c24aefa7647b4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":59,"integrity":"sha512-DRlqY2Lk4cSPRKAV0onOYedCdJvgKT+kWFsPSpNlKmhpEDzmZC0FqEOmSA3lQpGK9Xii8YpflOp+KywxhQP2rA==","signatures":[{"sig":"MEYCIQD2c+AKfedEfARBlKG7aVUS8PPcASuB+JKDq8hSljbCXgIhAL+nkxqZNgzcUgiF6LgzEMwU0MZx0yCdqprP047xaY2/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PHZCRA9TVsSAnZWagAAdL0P/ihdTVn1qzV538TElsFR\nuxYsffr7/q9zupBR49dyahszGt0MzcT6Okd1oD043iPVC77t0wfrCMrzy0WS\nFGJkRTJwoEg3InoYVLCf5NyilgKBzQ5Q+vbAccLsNcfdyINK1+DiLaqc7JpB\nxJHB/cZpxFVwKh/+tFabCvo9yU7iJ2lnXhIGOIRxZKsu7Hd7UEus/x9e1th/\n8HzGBIKfJhVnv+tGx003u56KadzUBXzjQHgL1WjUSr5xdR9gY5Vf2H738Xnx\n3cTssjZxN5YDBAJWdUyhByxo1uXKNAsWAw0ajkRL+cdae3Qq/m0c0brC/2Hs\nh2XPSP/Y3HvicmIfdB+YjujlygdT0E2TGaIuwWDT7obf0cXMmsWC/GB7EcMw\ntRUKqRz/1yI6cdO1lbcQGfvtWvRjhQy0tEwaiEoAC2ZhctjuKxPvHusnKRt/\nvqdU5f2clvcOtHwr82v9TNtWJmBVKtOLc9EEaTPCoZ1GXobmldaLF5DEASDs\nhky67GZI7NLn5L2m3mP7/AjP6UH4g9GlSW7hCdkaKhiBbKaIVI2urP0SLVsQ\nwR4wo9y/Zp3G4Vuz+L6w5v1G9QIorB91rZJv7y63qWwHEKDHqPW8DV2DXu2E\n5Ra+KT6PscAH/6HvLrgRoWewzaa6T12+rBk4k6X3ylG98sogx83soZoJW0XX\nXgq+\r\n=mv1s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/density":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.3e4c6dca1.0_1626141145159_0.3374262819571716","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/switch","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2192c042ab68253aa2def9761b5908e303e67de8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.ea77795b1.0.tgz","fileCount":59,"integrity":"sha512-iRPmy4qfV9haO5T2RXE5Lh0fIxpDiNn0dqRADUo2DMFxV9dN6Q6Hw90SLhi0VHIHv6MYju68EsaFs76oBr9OOg==","signatures":[{"sig":"MEYCIQDZiO3EwYHklH7DnlxVre/lF2CFt2g66Ro56pJ2O/CJOQIhANHDLoD327clIoZ2DdW6ti37Y9nMbz8ZUuauB655q0WA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bZBCRA9TVsSAnZWagAA7pMP/iYGbPDHOG0x1X9/Yf4R\nhPvxyLYmeDfUikZhZfn+Q3uTqU56w5orn/vVg7OSt464YgyTuVseIuwt3Wr9\nbEsxQ5YiC8o72U5/gLh/7xKQxyaJGumotljd8SaaFoaQm+1hBPzK7Yr8Ou8Z\nKZcGzzCDEPhD9wpwIinEwhTBmaAUOxAPriO1K0sVWhZPQdl5oNhTkNKQLgnZ\naLSUNxkd/cbzgSC48eI2C2NmeKImF8QHRnwjJce/pkDKbiO/f4I14JwVXi+w\nrFeSlfbyddm1KW5UD5b8e9cQ3h9a6HqMQ/hzgIAcdsWdRzjk7Lybw29rgDGe\nz5CpUNydnej35EHDHnFfXstJpPsRT+/5GHdJqFKLjVbfpKExOwDnK/RUGUVQ\nulfgoIcgBKcTRgKNob0Ez+nRC8OEIYHyR1/fmPCHOTmZUcbhsT7c/m0fFEDx\nWppdNSwVEMS4TnbXILLxqKZMSWVZu+IieigHzN0l6/eWJezUx4P+LzgoR7LH\nLQAiIYIiDVVSqqbkp43zcEE3NlMb20aLCMjepLpHyrHTVxRezItcTcPeTxfG\n2MiBRdLRAwHF2AUq5ADlcBSlDh/59W5dBU7V8t0XU0zXEL50G4KJLVr1qQ2K\nkryaKyEwMsPZyFScDoauycIBQTWCHF3bjcbj5pqTHkF235lTPhvglzdrdHHe\n5Vnk\r\n=W8g5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/shape":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/density":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.ea77795b1.0_1626191424640_0.05529717808702017","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/switch","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.15a179fad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"494e60c3cc5524e6e0ac34f77e9788028a2bd1a5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.15a179fad.0.tgz","fileCount":59,"integrity":"sha512-6ffRBLFn4zkSSqrujSkiXEqwB2cLqGKBlNF+WvdJWJTp90lqvL7G9ANIZxmvVXfROL7+VQ2BJ3PqqjKIvjXv2w==","signatures":[{"sig":"MEYCIQDjDFTI0a3i4AlNh1/5lzNIPfZ4XWY+QKmYr9TrHUJo6gIhAJkZcDhUSfXjqkmO0h0ckWTWEgVNqDaWZFVWZwhpzrL8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dcVCRA9TVsSAnZWagAAzGIP/A2HAajYpOKomZO7FI7s\nOpKr4272mpqU1fpI2+iEf4xJtCOaKmo+AU2IUwql7NnIQe8Qs/KvB/HpxWiM\nJMF6/uh1Rwfct1/lIeMrwe89LhLCgtAFA5xJGVMV1jWDlkCd7T6JhpV3wG0+\n+dLKRecbG8/fJiR9v1NxXXNtEQsmST3EG/ZmrjquB1mCyti2PkQDLhJPGgS9\nMbPsGxMQlXKLUsAx3WgaEc12k0klDUAHsMUPPXSOzxn7iYrVdgxAyjDrUV9G\n+9g3m+vHnL4kQXK6MxKLMsy6g6hmhCvMZN2ivNULRqJqekmtWkMX7qPQo4U9\nKuCiRd1/LnziKaN/5ZjPdbgTuOF9+HbNinS3oXJXKkqKZt+NG3+LDZB3QWG9\nNjrDnc95Xkrb3+W4K9Y20tGNXZfE3SYkd88A1T9MnED6P913ARm7har6Ro7F\njbohHvEslWzbwRASRo42KeBEXblgBbuJeyWt+eDm46J+gtNCcOEcs72pAbU/\n0XieULciaqg25RhWJwHa3I9zuvwJX2cLMs93qXyhsGxO50WqelpbVBWR2qVM\n7r82+lTaxo81tnLxfCH7ezFesvx9K+L0KpKQeaB1x4NzQKhl+uRSdYZVQuyF\npsVezGuJl4RNoZ+/BzAP3skoKqq1eh4vTXQ7OO5TFFE6Q3YDhFrwuMwlZrvI\nPyOf\r\n=Lym0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/density":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.15a179fad.0_1626199829141_0.7813186668501597","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/switch","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61b1bd8315be69a59a6476fdbf39f415ef7851cb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.c73142a1b.0.tgz","fileCount":59,"integrity":"sha512-krIfszIN8tYFQkSPDicClbiK3QI9Q0vx3+WGIrqHNK0VNOg5nqnWe39HGKhXnwdoUpaKL7AuiVIiiXig68UuCA==","signatures":[{"sig":"MEYCIQCYYw8GT/IXgBCaGdRJF76iRcugkveQZqo0GhLJ7JBrhwIhAM2ZMWMgDZjcXmX1VD25Pahjd1AYxp1XLX32Hc3mmdEX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8/CRA9TVsSAnZWagAAWIwQAIhSuKMKCKKexp9FaPQq\n8HWgi0DDUopp1J2129XnAQvH1/A3CdvwlQZwj7Ri0+f1QZYyBSB6gnK4Ilua\nnC+c/k611+tMpAiR40X1LkkeqQ/hSkoFin8w3U+ZSlVo5XGlXg+A/V6idFug\nGyUmWPXNkgcpDjmTxbgtTxHZiOV3dgq1cSANCNjOY98zLrSALzo3Vd24D0is\nd3rE2JZWQ/Ev9lnzxS8pGYUUaYMsv7Oqz73VyOBJcuqjIh+V591ORbfqOq9S\nSlFxINaknGc9fMjb4FPhlr4VNKC2A6SHCpkAnVJD44Nq+YK/QclMqdceqHTo\nu1VDW3xi65BxbD9/0J3kP2T/uknKgSCdWorH6IlPir/VCCZT7sD6HlLCT5Hc\njsDBn8KoFgcWVXS+dSkbPNYhPuCQ4mjyVEsjFGI52jdlzyFUyukRzwXuRB9G\n6ZfvM8fjbZP4qjy0lUI439HoLqyi7f8Yf8Y+5FXw4cKSDCzT+WLDEoYNTTT9\nLR1Npp82ttbBu1DJUDA7tXp3qCT+w1HBwAsSzM/UJczzdc+ti3IqhlWV7KNS\nCU5ddSR1yJTn2Rc6/O4gBQPahmU0OVF+GYd+VLhm1HY53/rwCWH4+1CAIFed\nA4SGWA9LkjmNARGuKJvLLPueBFgxRCT7ll96qYk1NRedAKFv3kdFrk3JDLXo\nnA72\r\n=uo16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/density":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.c73142a1b.0_1626201918507_0.8273959459138269","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/switch","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.d923db73a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ab6d7b8d04417d2afa91b343fd324954c0e057f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.d923db73a.0.tgz","fileCount":59,"integrity":"sha512-2RzzFIWeduDz4pOzLxu+XSqKHZ2eND7LWcr40SfI5DhHQ0T9OAWK544UeZlX6Q1dloj4KYOpyEGfQzvPqoZmVw==","signatures":[{"sig":"MEUCIHAgPIAIEQV2M7U5d0iBkuMwMj75qHUWPU3CNiWG7mbYAiEAtn+9eHeR+zQtby4BsH/iwWmrpa7Fn6klfFGHEs9+VBc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2eCRA9TVsSAnZWagAA98wP/R/MOf69pDVWBVneLORS\nF57BvG+7ITvsNOTy4NiMWZJSVnudb0mEyjZWGxcCGwfiQnpGvGUX/e6c0Q5L\nwgm7A9VyV9jde9N2P4vToyMBev3mgCZBcFhpZpQrXP2z0J1dUMA8P4zM7elZ\nt93grKSGYerna3vHFwHWppA36UDmhUuXgCrPzMxYPeKLe2Oi5vSNgJ5IEdvC\nP5UJf2nQHqbY8qeC1Pd4IUN5OqUO3AT9YjjsoVk/G6ZuHpn6bZPYhDl3lSmv\n6Pa5mGcmgew2Xu6tnFTWCf0mAIw9OoHY4dV4a9GL66ULj39c7qcUpBEAAvFV\no5bivZXpG3ESWxV+gt5ncEarZikz/OxU52YACpNJURNgC1muVsw1nyMKFHNI\nw0y65E3gAEJm427gjBrC7CDC1RqQxG2Nvl8N9DHDCSYmQl/TqV/6T1aHO0R2\n8BDTAhIvFKkOtcKzvGj5t0wY9kxcv6Pg1m02ZFzP1HSN3q4PAwk/qw6zECdb\nb1qCgXa7fR2Z07joSq/ONHD7DheQd6jhLTZRcVRX+HCvDeRgtYXj7o9LQYVU\n/qiJr2N0lrhXWNI6d3m9eoet3Bhp/6Zwt3S1z7XAOa2e7GnV0Z1XH36iqF+P\nn+35DR035Yq1eWfxbsHopzlvFk1ohad2sqUlbFkbF/3Z389LnVIVVgr0ePvx\ntxEQ\r\n=ycqt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/density":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.d923db73a.0_1626209694062_0.63016948350532","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/switch","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70865a62c4ebb86080c1bb5429c5e9ed5c047b09","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.22d29cbb4.0.tgz","fileCount":59,"integrity":"sha512-kubSphtXl74TC/PAjp67lYi7Ngk0MEKTLzp1ZHiMHElew2Z9/IYHP0pPaQRTkBY0ddIx6hVdHMiMf8qB4zuz2w==","signatures":[{"sig":"MEUCIAZt+a9k1C4bL87Buukf0i2xrUxpW/QOj5GHqloFNCcCAiEA/Z9asoef9/U0jbAaRyF7VtwMxHCPV9nWdnTZonToIMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hj/CRA9TVsSAnZWagAADEUP/RM/aIXLPoKoJHBGR1Qp\ncF/9r61ZzzL4B2Vw/I3umEzjqZES8MDI7H3daCeVp2EKfK3/hkQUhrp6cB4f\nOlmDGoEcK3AqaP+Xc8NJvQHxRTHa0crUCH03yN9Dl5OduyAnsV3tL7PtKVD6\nisRYWlIAtDeXnZq6wkBDA8jPaLvxUlPvb59D5nr4a16xC+EnjESB3RxTePRD\naVEyEmYPUtoKEERDlk6i6zfz54DXBLyJoAcF0pmpgWn8DQnI5JUipfZVZ16z\nfgtOppdIFYROfC00b/yU2yl8d9q1/5+jYEXtyr/eVko2og5M3aM6+6yrQ1tt\nD8zFx4qvnHPrqHMF8qjN8YU0RoJbaFbJhMqYuvtXtdYI84o94m5iDNH3uQhd\n59RKbpNzr4mL1hGdgRaTRfU7+QJu+RHyV6ng5fAjvB6sPzUEoxS8FhygA3ty\nrbBbvqNZnNb5VlyqG3LfGMPCtQqmxGx/Di+UOuzWlXlqK6u7x1U3gdrvArNY\n4C0Qx7gqopPiisGbooAcitU9S2Mju3LegVbmtvdj7IOpy9OnFTAnKZlkG+Ky\nS9taStv/d8Dod985oGDU9mtYrVRVP6z09PehicwfFtaP3gwQzXw0G0gtgisH\nOA2d4HdkJwe6ZapSAvGAnOj1p1fZt+CcWuTLvXSKymZ85BE5B+3eoGAImbXq\no42z\r\n=03MC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/shape":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/density":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.22d29cbb4.0_1626216703144_0.5695719932281249","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/switch","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.2749604bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9623d43f89b9ccd37fb475608833cff4674a98d6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.2749604bc.0.tgz","fileCount":59,"integrity":"sha512-PJZR7e4zVasP4QSp/3+6Pyf9LVs/V/8S2pq4J6uTGZ0iPMJMKcEp0J1LlgQkEaUmRKLJkOrerEZQtDVezwhoOw==","signatures":[{"sig":"MEYCIQCdvePXAmV2cwwW9OIBS7HIiflDYsU1OO6nLesk9+k8xQIhAJFUlq7NF8Yac25OGKszmtbSfXl4ComPzMIcd2abx2dl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w+CCRA9TVsSAnZWagAA97QP/3zO7GUq4J7fM1atu1XO\nUASwaGtN9kT9BbZl9GQztJphwGsVXpn1Pg1dyvRlt2E3Fc3CqcFdRKF1fw+k\nr+gCB/tkGFXWTG7nLxyUAY/tGGjVDRmjMoHllMxEuCx6gwkMNxg2ieDPGB77\nwiZHy3Lt87H/TrWTBZgwCGJPCO7GIEWCeX94pcXnBSOY/zSGSneKRSWLUPK+\nfLYRLtkzuO0+9/2PXTGkqeTIEsN4QiJBIp+yLYV1ukZf8sDeLU768hVnsKT7\nAEKoSQNLXur/VD+FdwLLgzt8PJEOA8GxEeaVf3cOFa82fQHrIMA4ZthhJmLc\n57/TKV0umXV4xWoyecw66vA8j8jNB+AtF93xgOts55MWCGuYuqziZSvpgCCP\nqSOJTlFhsRYwIEinOL0CkugXjreaWcYdBDoelN8WsR9wVPNzoTLZ8yHu4Zx3\n5WBXKVSiLUCNVvifDuDUW6gUCA7Jjzv9Gh15LzdbawjlgtvokExGdfs2d5oZ\nE5B89GgUqlBjFvZ4UDC9SbKTtXrVwY51IBkTKn9O4083XzHn4INuHAku0Xs+\nacbc4iuhrPdGtwto4kUKf7pP7VDb+741e/ToSmZSwKnu2LUW/x2jW0xK5Sf4\nyfzW6V+9J4uobNv2paUaLw0vv0RmgOxqV6dJ2IkdeWTM1CP0tBCwMyUK2FKC\nLzuy\r\n=rtIq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/density":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.2749604bc.0_1626279810165_0.8759012873383356","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/switch","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5581ecd8e5ae8ccf0c8e122b320d064950a3fbef","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.e1703bed9.0.tgz","fileCount":59,"integrity":"sha512-i2jYSS/4zEG26gq2ZMYQvwdLbsTsYJhjUBAOfVpe5jGlaZht9Aqbcb2VMRGR98OpeJvy6dUMrmhtNQgaC4XZRQ==","signatures":[{"sig":"MEQCIEM1VEkt5ovsYKVkSQxVUwmXOycWPHWnEmnKKScFYOAaAiAB9nbyNf/afRHb5klnJy84U+yd9GbWsOBe3vnUMXWHMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71vTCRA9TVsSAnZWagAA5CUP/2ftBn8l6uFJxigwhydH\nj9Xw8puBlqH0/CpypRMxD02mQWqXr1DYTkar/kZkMdTOTcpHrUB43fED0l2n\nuBGdAqdXOQJs4JCCc/K5MWRs21w0LOnWZo+2o4GBmB3NevtP9+zaqWgr68Yx\nPVJc6jYWZBJPx+sl+fnNjBXMPZMT6fpDuxips/TpXGD08H2ik6MOmeNC8koF\nLfi70RvRLGd1AyXv3GkpXJghgdo0+l0E6iS2XnauZnz0c7OeLHgY5gKpB4ax\nQnj0w4RY5mE61qMjtecOlZbSRafdptSyK+1MU5qSXAVuQ0W/EUBKe1+BMYcB\ntzWO6vv+jSaTGW6snBKhzjkCaQiKgQpX3E7E+85CwXM2ALDPwiAQyFV1a4Zw\nt0GZBXPfQS7lZ8su6QEM2rTHuY1HHoo76c99RYHyZa20VKREs9ai4CokoI1u\n7dPeBnAQpjQWmW3mjbKh0jRideBSkqYz7cOOBcx6/Ab7FfnUcNL9sVVU2tcD\n8PDYOcUABGq8R9peiSAkpzFdT3bjkrrb9va+7mfNHfG2SIWSrI5Jl7Rzw6gD\nJDCOPkuk/V6SHOR7EPE43/Gkp6sOazxr/WZWBPqqRHN1tZm1VXrrJ+j96aI2\nc2Tg2+OKZOTGtkIKP5W+1YGpSp4ZwfCZtnxLGNCigokK+Sz1ziQfbFB1USwj\nqOYr\r\n=T3y4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/tokens":"12.0.0-canary.e1703bed9.0","@material/density":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.e1703bed9.0_1626299347050_0.7053237517428108","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/switch","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a396205fc727ec2a553d60ff2928974a9aa1963","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.de48eff0d.0.tgz","fileCount":59,"integrity":"sha512-T+RDCltK/dkYVlsxJ6vUpsn1M4s8HXqF1mFE/c6gNeP7+BGLVbdvqxZ65mqd5ZBZuKLjmprJmawskwBgowMRoA==","signatures":[{"sig":"MEUCIQCbG0rJTaiYh+J9aicIKWkB2NijT3G/IB26CSToZm8vMAIgJuCHIykKeo1umgO9un+Vo1ye6pJ+nWpK1bEdmmfJijQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Gu0CRA9TVsSAnZWagAAG6kP/3010IuCkAjmDpm6vlqA\nM1XPYTeQHGY67K5QIrFaPLJlvU7CbzI2MAuq/2heS+Mp4JyPnz6zXlEaCAHp\niEqZhdCpgnPKJdHBPnTcPSTNCGAVGsf8+GGdf+MUpkUzyzzFUHV/pLDaYW6v\nHI8kudyYciQDCbRroz8/yf0v9A8NmlOsThSOUNFQShWeqHKqNBzvHgmfC3Ht\nUCCskhQ7Rf311al38khgdy3qDRDJZ/JqS37dP0BmPRSt853WelQM+S0BCxRM\nSheyOEnUSvPgvXypgrBInIw4csHyGmgIKN7KU7QuWlgaeX8gcwDZnyjecHB/\n3+x4p6IVp8IlKQuKPbyK8WI8Z4q2xyNTutpYITm4Y+yb2/4mNOW4w5ETIuRk\ntGIb9IZ/HHHoqAsIzoTPBFoRQxM29/Vdp8EB1RigBgayi5GudAkgvl8fzlB7\nk1nWk6F8/ADU3VnN+HN4QBXsCfsWdbGENJ5pSnfQOqjbCtqqMt7ELAQqj31k\nlqkAh6ret27o7a+wZcICJUQEmQwIDfy7AaIVtPkBGtDCneYPjD3K93p9F9kY\nZtU70JOP6AiSu81o+pnO7FvKhip8Q/laRlLeiqRW8ttf5vShZtCiLM9n0Q1Z\nMcnfsEBeoXe4G+fOxT8BhXFbXYQ7OI4jUt8Er9LhN0iyBBCieMbMgN0mBNGc\nsJ0x\r\n=04zK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/tokens":"12.0.0-canary.de48eff0d.0","@material/density":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.de48eff0d.0_1626368948554_0.5599444440895804","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/switch","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bda570bf5469162d76aa7c53c534088f2f7fd1f7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.4f060adc5.0.tgz","fileCount":59,"integrity":"sha512-vniUAju5NmlkTm+m4AIJljqu+7FIIgVK4Tj30X5qM0vsqFCosTmh6ePGKDcHPc3O04wu4msmEblHEqvQpmvC2A==","signatures":[{"sig":"MEUCIGnAYH4TpO/bIODIt2LgdnvgpZq+VapcT3I9H6JZ5k9eAiEAx8XGe219OT/ib7Io+v2aHME9sE2LlY6sPlVVFrNeR74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IsQCRA9TVsSAnZWagAA5QwP/3GaXt0LJDDvSjBqscV9\nOnLQFmV7wzo5/StAjka1IYzzk+5bMqJTLP/mU4O6OzQEI6T2v+5jnYF7o9Kr\nVSJU44YtF5IkZQpJVY3DslNMHtsv4NfXOwvoL2Wvncj93abhm0aQ6SfuBHVi\n2d7wZvilRpSj+NQxkJ42UMTxXEftdp060xUleMxBbaBbE1+NygMnBFySX5K7\nn6uDipmRZzydm+5E2mVFJ/vKGMdLR81WVLCblk6GB3kAFl2N8BjHmgTFd+Uj\nn4dKI3sXlNpqDGRjV+KvzZG+Lfr9cvjO9bZo9u+3dpyPiiZjuL+aYfFI0CJH\nF9wOTOkweWXZhS6MoWZbgGlZkjsVezwhEKTr0bJp7Cq7ypcN38XI0WCSk1FI\nHMMmqfy2JAKv3Tq9WRmjDAM39Tp+spT5ae4n4eEqkgudSTwUGKNB2Ozp7U8j\neCbEO7TZOReyNIxFFkgUe0A2+n9m1Yn1NVKSgYCpWBgj8UDug4L//2hqU2Qv\n6MxngpUMaeEj0vr3gn/7P3lbx/JlhC1IvHkYOpqzOfoFvxrz41hoQQk0XPXN\nZ2+ZX2rt3xz3zBu2ZKHS0S0ek1gX1IYLmZocVVJHMa0Vpgc4uuryIQogxBXr\nWfJIC1qInoynYMntgceWAe1tF1Kzgpc+ZZNJ5PT1EDBKt4X5Sdw2rfQgH1Oo\nFh1G\r\n=h/9Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/tokens":"12.0.0-canary.4f060adc5.0","@material/density":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.4f060adc5.0_1626376976265_0.2111994348437829","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/switch","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2428596fc118cca3b0932c5a213ffa658e7785da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.bd25779b2.0.tgz","fileCount":59,"integrity":"sha512-/+CW/U5gR4FOH2mbvyCvA6fqKvAuV3tfLThI2elCFNoYZs+pvAXmUUJEWAtJw3Q+OHxyRPyjk+Nr+T8d4IlUSA==","signatures":[{"sig":"MEUCIQD9mVLtoFulUqk3BaQZG40MCHTrh8PdraVN29KVMPjxWAIgcBoJobCjBpVS16xr7yMbSUYTRo8i7ErT4/OhOXkl2hI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J3mCRA9TVsSAnZWagAAZrQQAJqWWAErutguh73NgcdA\nwyB9RB+aKM/5oPBLsEQInqF1589x5AwiYWBdNhXIMUvKT45sn990rI50E0Pj\nHMSqbHkFwnaFMizdRpZttACPD5amfkmPKrQczOaQJjJeVH3EWsoFtB2uZeSN\nOBLUrxuzdFEUUcY1RWe88W4l4P2MXN7LU41t/LAPSOAhw2i0PyWYBrLxeBmJ\nRvqBMpfGiKkfCVEbPUj/dcBaGLmkER6aCfghrZwQigVxb3P8nYrT6Fu6ybHu\nm2uWOn0cNzQfZqu4/HhW9qfEjB61ioFaYpirtR5FzQP5d0/TESs6qkPIzwvQ\nFbISTDDZ3wdS8OMCrlIjANPiOS+2YLysUIA92mJvcGg18Bv4wY1xJo7IOqQO\nvJKq4xsl2K9atcYFvJ6dHlr05wUMilGrfKFRNpbu3GRm1HEzke8qNlYBdX+C\nsh8mxas4AhBzhEwnAdzDDG+CDRYmSxuRiPfhm0/Uf/6Ac7Bj04/ZHN/KrL4N\nAWDijRqWyITyWiNoc5CFN9wLtTvRu7c461guXgVg7Z9xcuanfSBGO+2B25M+\nOUSQaotOXB2rDmWALhfxMKEefLR/HDykXHCKaFX/0edEgv0PkthMLJY0Xq+7\nj13sQKA5Stwc2rsG9PwOFjrTUDMsjhEWaaAKXS4sHPBoaYrW3C4VfMg1RMF1\ndfT3\r\n=8WpP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/tokens":"12.0.0-canary.bd25779b2.0","@material/density":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.bd25779b2.0_1626381798528_0.7101626078494914","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/switch","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2089bcad64039c7d93917faa321392f5dd7dc5cd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.9f68a932e.0.tgz","fileCount":59,"integrity":"sha512-U0jebHHIzTXFwXtqjnUnRV2Io64OQ1RsdquLAf19hzSJdEh+z7KVmTNuEpyxqf94/RrrNWRE/mkS+hxOSLYCAA==","signatures":[{"sig":"MEYCIQDJWICEGGI3cJsC5saCOJSySXU4rsfalj4Ze0LVeyiY6wIhANY6hSsb0Rx0IsWWzwfkiNePScnR9uwPTelCiKtHRlmn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LHDCRA9TVsSAnZWagAADcAP/3knlUrNKUwSrGUFk0rq\nhGjJT8lYOM7PQ5tW14n0UQQSyW8/i4hxhJa9t1EdUXbGN1nSys5i8jPzR0o4\nCskf4lIKuXdCOK2PEkAGHOpt4ZMsQc1ufLiM9a0+jpeYLCpAtpmGeFKvHG0r\nQG4N8qh9wB26K9KKaJ9HjW94CHjr6qPk9RSp0UrZ3OzN52ePo/cPu93m6yNq\nSutbTEAMZg+jKVxzBjgwHkKoZv2Crsd0Zq8nudN1HLeFQ6ZDmk45AE/y5crs\n7CxKl9YhOpjck8O3xNQzCBEPOD2L2gv3aSSzr9Ii+qa2R6WmgKRsmNrUfVGx\n3rMJvvZELUAKUZEdOCqn6PSk8hgwS0E0aIkFZXPdvS8KriJgZD0e8CfnRqhh\n/x1YEAuDBdbwKPori4wmsFzBL/YfOlo2r7+uYARJGniqjva23pwbU/PSEge3\nugPhG87GhYu9yP4s3hrAPqOVK5wlzoZsqz0Uk14fOEkVJRDyvFh7Yzch5uV8\n82orvybEEL0Kk4RU71e0RN/W/STXRk95qlLh+yJrafyoaoRA0AAkq1eSFESH\nCPVpZlVe9W0ObhAbRt+xkBVplWvQFZsOOTL5cECj5L1Z0ExyoLUQlj3uzxLM\n6aGZpUz1dTJIpEqPVR3AtZ/JvwAUVuK0Qfg0JO31iOkq5lw5lDyiWW1cJtB9\n0inG\r\n=sOy+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/shape":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/tokens":"12.0.0-canary.9f68a932e.0","@material/density":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.9f68a932e.0_1626386883505_0.14780675432769796","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/switch","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb2695ddac84a8323d9aaf10f3af32ac5f5ae27e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":59,"integrity":"sha512-QIV/L4OBZTCOG2hOUaucY3wX+6m8+xTKh/jknPxGpenoJKV5SX69rLN9FTlXcZA1vyFnjK3W/Sn1D90VXSeK3g==","signatures":[{"sig":"MEQCIDFS0mZX3phdbAVps/JBRqrNV691ttaVd53zrF/dgdU+AiB1Q5YbnGlxbhQ2LtV6pkIzxuZSmzUbIsQ84GA2ecZLqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z61CRA9TVsSAnZWagAA2JMP/j1VGj/3iZjI9/3Irx2V\nA6ffLJWl8pa5eM7raK2xPT1zMug/+1uISHqI/o83hS1VFw+uPdpfVqNpYlFV\nl7VxzwTCopcgtlojef38cypDZYzn8lblw1bYiBIqYtQjqaw35F1FlepY5Nj0\nWDzrlM8Tm8CIdA2hczlo4Ymt/VTsFhEE2WXugVc54WcTjIGbD/9Jd4jpy87a\nDTDBwDryUk1kI+ktRVBeSwG6Z9tiergc3693YaCOf+Bpmr8WkZrZn5J4FQBB\n58zum2MexeMn7T4i+KIK9zIqD2NyedcZSVi+o++Eu+9HlS2a8WMd/I8o6vF6\nZqlriVECuGKa3XnPB6z+Tm3Hj+9ZYZ4FkSQE/9RbsZQQFbfbtseo+yKjOz1F\nS/sUA4u829/cEJx/HU14rcn8zDc5eP/DYShNYkI0bPOUPif6R5jjGWYxfLPE\nBaJOLY7KsxKw3fjeKwyCoiElNPIgE50RJHg2Kg2cjDmYnR7auu+Puz4T95jH\nNTYKWaBRcsmsE19+V2RiXtAEDFZY1lDbRC7G4CC8omTaBH0nS6pnN8CeHe4A\nxqo34tX68qqvGel7v9RvluMcNiM2bbYRICiVg0VQhIL0elCdWp9kPo426v1v\nmbKi2EU27VeX+zEKkR3wNYUnza1sHcbdaLsfCvjM+Bhj4k2gxbz4n5wm61rX\nQ0+R\r\n=Az3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/tokens":"12.0.0-canary.4eecdeaf0.0","@material/density":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.4eecdeaf0.0_1626447541712_0.4480655251982857","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/switch","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.7239684d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"599ad77d2985a00dac3aa6ce705ebf03eca36c33","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.7239684d4.0.tgz","fileCount":59,"integrity":"sha512-z2UFa2pYz2w/Zua2oLh2Un29bH+V+ob4IjAOwt9zfL/Y3KuMMwOUze4R1xZY4DkdlQnkNUHkIjiNjUFiDd0CAg==","signatures":[{"sig":"MEUCIQCzF7ZmFxT7M2boWZESaMQ0f0zxVUXJHt3RmV/zZ/lBGAIgangujbdoZJFYZUpFbAUfTlaZKydahXaSH44Q2+jbJZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8a0GCRA9TVsSAnZWagAAxX8P/iohZ3AoH5ixzj61v3gq\n1/wypzcM6Lb2qEPbrta/HnD4eGGvuqOebLV+d0tlrTqtd+tMzvkzU474Xx6U\nuNozWNCLHz37u60Wo/XUkLh8OkR7aeHkRnka5d8f+AKWG5hGXfjltnVT8Qyu\nLeL4G1811HMS3Z+PP6H6TZTSvmyYc0+iK/StI3YxBbP9TUdKla3rvyu0/qeV\nvWG4qlO4VRZ52y+vIutRKR1f5aXZfjG7U4uFn4btxeiAjrHcg2ERF025iseM\nJ7M0ZGeQb6mqr16Rv4ES8v4KqCc8T9839uggGu9HuqExHTuazR1rhzkXGDVp\nlOx1KBabpncPCh4y/2oFKGObgL7YlnTbkC+uNEDJaW31DEWPPm2NgPeGRxNe\nzdIZiUfvdb4axeo1msWBBqy8FULJc82zu100rE9TdU7K83Ol6NUHI4a8eJ6v\nh9p2jbq1kupmd8Qvmw9OMsR7DVrVFj3YM54+/gYRp52m+cZHgG/p/R1c9pIl\n33qU9305Drwv+TK80AqcDSmYaFv/3/epP9OHkQ/EfPwOvzuPCK7EkuGkkfCJ\nnwsY6n5uxKPx9C3ZhERwSxO7zMMT3dYWH9Gf9z7W5z7rZdZZm/5jOpU0V5nV\nNBeCwrabEn1lgjRuL84/OrWWoojNGHJUkcUdGZDbxnPtHAPDV0UEW/2YKoGh\nyUUs\r\n=zfIa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/tokens":"12.0.0-canary.7239684d4.0","@material/density":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.7239684d4.0_1626451206146_0.5759133844021609","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/switch","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d41a9d93bd482709acbd71d2fac1227b383ab1cf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":59,"integrity":"sha512-Rbe2Njc+sYVkp9HsN3AJFa58oyd87FUi/AadvcpaI4AZbt7bajNK1GJOxP1iMl5WSDrftWRknuRAf32QYQWevw==","signatures":[{"sig":"MEQCIB1JvN/LoWzoPhZYTg2xkTLYiBgfeBiB1fLEpdvyZubUAiBZrSeIjUOGP9Id51fuu90R7s+e0hJwUQS87tf9F1A/gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bB/CRA9TVsSAnZWagAAdPgP/RPMwDojoB00sB6n48wo\nN1mXAQLMKrwKum9srL5M8k+YUkE73Vn4AUiZq+42HMytfo0S8ZfEHC9DoRS/\n0yYuwNgrb8emwYaKaiGjxJF/2tW83GZEqPIHVTWXE4RxLTcUx9fCavra3P7O\nN25x6JxkzgBltYR4bq7Y/9hdnDUK4YRwj/9+FXZYzK89vs5LK1xPLzG37GRZ\neVx6G7+IOdvFRkd0NW52GLbKPemjpk+s8Tzur68iaCOpKcwekyrbMBY/4+f0\nYiSoqcAUO7wWeo1mpFw4NW7ig3AjHK3CwVLw0he2PCF5TDh/0FQBK6oQpXB+\n+EHprEE+5mluR0trphh0dpQ4vp89Ie3pM2C7ldmhlQSxTIsiQSo5JQeKZd0b\nFrsO9entJX5nqn3FsaYqZJuiYFoPr7wtpAiaddz0HCQepdrdFbWK4fItoK0a\nvJqD29g7Y2FQZhoCelMkUHUf6aIB7aMwj5reil3lyBVXcbNnkj6p1J4Fq6DJ\nz5Qp111Qk5tnPwHGU4AHCkw0ZE/31M9K82M6QeITnFN7i4rP3UX8pQpiCF/k\nMkisRpH7sywitCYAitSK001KvLNqmhnUXqIs3QU0JFv+W+9vc1QJ36i7V3ij\n6a9B1EpZHGqh3gUvHS29QaYwS7H5Ruk1fPGSxDT8cIaGXYZ5PH7ce9v6jBPW\nc4xf\r\n=xLXN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/tokens":"12.0.0-canary.d5f1f7c72.0","@material/density":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.d5f1f7c72.0_1626452095501_0.980182006444303","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/switch","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc03c86b652875a5a0c22ff108257eb9833fc6bf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.4d95812f9.0.tgz","fileCount":59,"integrity":"sha512-iOOlpPn1O18YkNbxB3ikVIVao7mJLY8ZGpLrEq1VwOQvOTBF/SYuxFa+bydHNiTuoodOPx/2tHHUA5JtVNFKoQ==","signatures":[{"sig":"MEQCIEvCpRyIRl3vD/kfJiuGdAW/rfv4Kwma1iGDDwJPsY28AiBi255RXF/UDsxdlDjKPHxNhBzRc0Jq88kwn4CXZbsNHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eGECRA9TVsSAnZWagAAssQP/RhhIgdqkPN7xcapHtr5\nZxwRdg99JJUHv85VJ9JZ6yg4/RRi0Z64ALaS8yLTVL47d6KihBDolnXcgt4v\ntGk6I8O+eqy0y/fBZFqeY/VyUUi5CENo4EgbbhIH0+oo3suzwAitMh3/c/b6\nw/HN9DnsGKDnxRWPDbNKD6jNwAh/1Xda6meVz8x3149HxcI7+vyq0DQ7kM41\n3/8U6mcFZQf9ykRz5wVxLCIRDsXkixPDrt5DjCaklf5i6AIx2bz8UmOF2STY\nbM32r3tIjsNFBFxMQaD3y0swhTSFGclfNsNpYSShNlIn43EI8bCQ1OuuzSLV\n0gZXk/xA8WWEU/+UrJMB63hLs3bbYZw7G82TCwxeSUugtqEgRd15B3h4pNE6\nepYSFTMHoq1FhqgU+G5Ob5s8XV/bXWqY4H9dGMQZfXmBSzIpJLFpboQjH5dX\njRGVGGKv3WFVbZd3HP0CUQyTB6du8dVIiF5NkK37+COvF4r+UWdkuFftaIes\nzXagW2b5ftfy+eAVAI28+NEuRvL4b7hn95uyhn4qg2ssX8Zl1Kwsh0FQ5AV8\n9Thruv2NSg4UPzVM49uvn69tdJ5VOCqZb/NJW1dlZ4MYqHvlOGs1vmSb63+B\nviW7Uv1KPogkUtrdcNe2CDul1cajDxQTTnHApmYjZ2vxfI2qgC4Fad3j/Mwv\n2aXk\r\n=LQuk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/shape":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/tokens":"12.0.0-canary.4d95812f9.0","@material/density":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.4d95812f9.0_1626464644402_0.5013991037331151","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/switch","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b83d1d5f9cdd3a432f18b83f20ee6af0906c4670","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.38d1846cc.0.tgz","fileCount":59,"integrity":"sha512-08UM/7DU8tpMIRVNw8JD6Islx5ehcJ+DNHPr343N2A0SvQ0mkOdifyY0iFleR7XhyXKtfuavfWNXJFucTlz7Dg==","signatures":[{"sig":"MEUCIQCy6/NI9wCHICy1f8QgXEoQNVRiZ0iZ0p6rir1fn2uWywIgfop+lZg3CTUO5HgTk4mRor4iPBYaRoapSn+xTHI7mi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9ce0CRA9TVsSAnZWagAA5wcP/iqSAst+2jR3uLOz3tIJ\n6g/Ex2tgK+a6DxYeLedzuxNhcxpPbm389Ype6edlkXJ1ANyGT980jJAaETaM\nc1mYJ72dpdfLTbSVjPv3kqVAZKNeBA2odlvxyqyVbjghkjV+RrubCZerip8j\nbR+dUgmpJJKw7vWoghMWqyvaFczIvVoRi8Q6AhqWJALQIpxuYfCa3yVRBM+X\nxrwo4K5zX49NXY0ywtXNTGQKwjuY0e3cKj0KS6uWKkgEI+mTMg+cXxJBmCx+\nqGrC1lJ48xD4+htLGOcZRBW6SfsCLwMsgsM95fpHRbw5NeirRoDuQflAEQBC\nO6KwAD+l9lnfPpFxFEBBrF8tAdH4AFFcQzjG6xmXcgVmp/Keisegw86k/3b2\n8DlQByPXPpGLyPc0icvSR0lo7S4BiQ3T1ZF1xbdP/Jvf3hLUkB3PtCZBOwTM\nke/f0TAeXlGr4VgX0e21esXQKc9xQepC3DBvjEpkUgMldcd2/2Qdv2RtgPqo\nCTXg3JEOfKZ6s3uZfbqsgcPvj9jQeiClICW6wyhy4gKzVx1x+1l0PHA3O3o3\nnvKLOGCFirfRjNhH09ereJmb3X6NQtHmWisFqFRbD+tLnKtH4d+bZ45/WCe1\nm/88JgbNMs3fJw6MQNYw6z0cseZfYNIAwscPDQU/qLrIWrJFWsu3K6Tc1fR3\nBNha\r\n=0zB7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/shape":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/tokens":"12.0.0-canary.38d1846cc.0","@material/density":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.38d1846cc.0_1626720180414_0.09126810739398272","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/switch","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0c2ed0655ed972de8c530771aa08aeb3fffbdc9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.3f691eccf.0.tgz","fileCount":59,"integrity":"sha512-CO22JWm2NxDzHO3bia3MSIKBHohUCkksVfmZAOjGuD5wpw9+erj5e1rx/xMo5q/ET6mChbxJo/+1G95iTCMB5w==","signatures":[{"sig":"MEUCIEG4saCDRIntq7qpig8JEHc76J2Y6LxNwVG8wjZ71XLIAiEA5ZoU6wQaU4crwHWwXtZfqlK8FOgBemYQ++3vIZq4k94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vVbCRA9TVsSAnZWagAAIlAP/iEa2Blv0mlL6sZOH3s7\njSRyEI+FSdoCy/jaRQnUWVeYLk457ZOIGwwyV2hsaeotRJj8bk8Wxh/t2PIB\nMpX3tz/Q9xcLi9eRpgBnXDcZ6Z18V0LXborna4I26iF9DosUfhu8wjuwjtaP\ncwoYTmhDhJKUbZQf/kBEiQgZgHEGJ3nxknWeX5irCEzukZZXGQLdsywcK0ct\nOjs/m3piwxNepLhu1MaOZpFMLPyiFa39zOBf1oY+EhSXQY3Gzp9idEbDQyY1\nf1IbGYm9/DiwyHLixY+ga0dlfq9o3y9gnle/0yU9EmBHqdytdE/hNT0YslqI\njlLdCzmrY9hHKS4z1ftrODcU32iQ/W0N6Tc0deB+hRYCSxIIQIK8opxqeIhE\n8t9KjhC7kxZGVFSnL5vf0ChGnRRbB1yXntX8cbtEpI12sJodXLcxShfwCsMS\nT3Dx9W1lL7v4beXlzVyFVKtJyJ90p1MVAziQE8O6uanfdTGS4zHvm1wU/srJ\nn3gOlV4AlPUCyEsfsu39baxH7NGFKl2zOSV6jucJOErIYD4Bzp4fCPZHY4vd\nlo0KgZBSjQ5TEWA/FhkT5lMLc9K0jIF2xeYKiqTeGpusN6O17FEvqJZ0htPi\nGgxh7ANc4lsoZZh8JxhyO7bSkVyxm5u+Ja45MbXnck4l4gIa2iPQHwv6Rz2e\nAR/s\r\n=ZrIU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/tokens":"12.0.0-canary.3f691eccf.0","@material/density":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.3f691eccf.0_1626797403302_0.13096728091750887","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/switch","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f69bb98c03d4e610e60278240da6e76b17f58fb0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":59,"integrity":"sha512-8xSqhuU6N51xkUAoA8Ccs2VoJ39bBe+p8LnQ+qeAW6R7X7MJjbUu0RzvnsTHDRyTCpuyT8V+QZhcUNWIqtAMfg==","signatures":[{"sig":"MEYCIQDrALIvQeAbR1L2n9qLdy4rV4Tb828Htia3YHiAC5yd9AIhANqgreZSUNojA5RdkAAg5HlkmMZ9/Bi1t7skoiHHHWZA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wCPCRA9TVsSAnZWagAAl+oQAI+bbauUx2dy+Atqm0ee\nfZAYv3e6u1vwKYGqYcPbC3Y50JnJQJUcGdnWgpksEkhirnfW+w721Z74w9Vt\nKL2ZpfwEduEQXCR+tGBqG9fmu7XaTm+dsOScHdAV5CaBb7ZK0xUtQZgYzG0T\np71DFM+pOP6k2fNXfXNsXzgOi5SggqzCpodRXKlqHgnNY+xfZI1+7am0LV2u\nNHXdSOPCBMPADOBqvsMy7ApC1B7vcJq8Wju6fU/w65AjFdkvEMJYTSyd0XAT\nUfwLVja6jlVVU67ngpdzg2n4vnzLmY9SuRYP2vGTudTB8Dlvrjb5A9z4tJDy\nA61Q8dCKhoSst8z9A0xDddJ27MvD07L4DMUj5wCkfXbrnqdFMV4Y7NWfaXMN\nxwmjwhC2jgxUGTASo9d7nLwiaVJerazfwIPgykisymCPyF6dxR+fozkpFuDr\nF/vTkG5RWb7rv4b02NegHxy45O9Wfpy5fr23wSbVqGM03gFWaf/BpjPfLesq\nMqnocSM2M9wN+/ChHgpqE1Id5ALarrZ3qhlbWMkbFnLOsXmVcQtOVbDKqmaM\nJ6WdAkf4ZvnlONgKY+Is4CNf5RyCt6oloNys/RxX5F2+tcXkeywKpnYJm8it\nBivJYw9QmkOPCeqWpEgIlDeQ3DDEERvUz9kHM4mBYy8vK7kRe16OWIUhyR3A\nxQOX\r\n=Foum\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/tokens":"12.0.0-canary.ebb5c73bb.0","@material/density":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.ebb5c73bb.0_1626800271081_0.7367238355223595","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/switch","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d62a29b56ad35b3abeeb458baacc8413bc3ee86","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-nightly.778a0e8a.0.tgz","fileCount":59,"integrity":"sha512-JT74rqN1veExEAj30hLLfmcT5wkasP5SC3TClPAJiZjlh4cTh4vKTnhDpA3jCLszj1gN8T/dl3WvV5RBUPdfsQ==","signatures":[{"sig":"MEUCIQCil1CbR1QGxT3nQRluO7Zq1WIkg4wI3q/QFl5UoCyI6QIgJBu6fkK9CUtf2Pwkx3i6SCppjskrAFu+t91AP4QnAIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":674202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zrWCRA9TVsSAnZWagAAGgMP/jKVXI6b6GVCnpfLxYfw\nGuN7hJKqpOMj+bXbrkQojUD6frRxnmiFcuevY465JNlSXR0I/VohWRGJMqaj\n4LcPB044Mxhlo2yM3fTLQDoJ8y7Cn9LP9jUQu1NBSRtsVlIeEGc+XsaM+JAg\n5PrbDULsxKcvJzX/MgCCkskmwJZzIculDzIFbIVl/eJOuBjDlzmR5c04/Nsn\nYcQqjbW67BWSPvtnLrip/rUe6zirfCiwqwkzIshKKL/euWXiU9XHRZ/KFklv\nFrvIla4A0aGBbeXMxc7Wo140d+Zj9kzzXZM7dzzEKGPC27ZVdou6+skEDXI9\ndw2bg72XeBlsEPRF4Ye3vq0IOhmfy+PonwystsaMpayZ6EXGYn04f6PvqjY0\nwsSnvrYKXvaWKeUDXrYrZGkanvmllxR5VCy67d1OA57pjxQ+6meO56zHQBlN\nlHLkLgLuU4vpHy0pNnmDbf0npcZ1XErEinUreTbS2HzoYHXSt/W2AnMNyvcE\n/d82Aey1S/R9A8CqdCvK9vm2gxUokXA/Trj2Gng8muqgPg1VNu5t3EW/Yh3N\ng5N3x9WoGqzLmmSel4Kj48yqXk2KvT0BTSqAuz7WFqn+5ueYpByGVrf19Lng\no3ecwjXocvJW8y1YzrzEL8OTuVC2CGyftNyhcmpTIzoyXLrmUJku/Wt+KR2D\nNo5q\r\n=LgDh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/tokens":"12.0.0-nightly.778a0e8a.0","@material/density":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-nightly.778a0e8a.0_1626815189895_0.7286652162088263","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/switch","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.791311bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c0eb597324cfc2d21bb4c89b7ff907a4927582d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.791311bba.0.tgz","fileCount":59,"integrity":"sha512-tCuQRn2YSUCrIyLvCh0hgTmuGhkN6WbpSuQ+zVmQhJyuxginfm89OR5tdgoKaH2eXev0CwxiK2YXq1vXqKtuWw==","signatures":[{"sig":"MEUCIQC8X8MIHplzyQnbkPyNHe7Z8bGj98Cl+Br/Xn2yJSbj/AIgQH2aJLpLbq492EtImFcTMCnbZznBXO4uqUTA1MkUBEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lgCRA9TVsSAnZWagAAl1oP/0q0GeJvgDPip1ekNgsz\nQy3BCZ30NI6eMKlrOQL+l0vppe1m88OtkZ7d1Trr323zYbIlcYS31iCEYZY2\nmZMZ2OPoyRgkpJEPNYiBPfEajwG/gTs8JocNBquqOpsSNNZgdAVfbJO2JnId\noS3TSXq3GFkzcfs/ik2l1dK61nAxsKwvKybXgCAoulrCudxybbCIM8umBkLD\ni7hni+gu7Wp74shkztxpi9faPoiPknMQVWM9dyQ3wdsjwH4TUlFlQjcbQxro\nSyaGtAzmCsa6aGn0bAs3pky6TQlhM4hZE2BoVR2m+Ij2iS6S7KM/d/9CmUjq\n19dV2v/6TBExWC1YrCt7/E7JrazQh4C09C1GFOVOmcwzuF+kqwjFV3hnIwkm\nYNGJ22wOaTSWZCSXUz7uwWbQ7lDsLwm7lrMicBSbAEHkDXPfCmQEpbXJtfnZ\nG1v/olrlNX3LprWBnorbVk5747zhXzBml53eBYH8TTtM2KAvnvpZIgeaMLgK\nwO0fH8QGASPXlw9iy7+nFoowN2BIBxayAKFXH7sBkUA4zBds1tg2qPo8l1mc\ne/4ILXIy3c4MEthPcYQOBG/rXgHqm1BBgdoYFn4U7feibWot8jUsPLva0aA9\n9flIid8xNz1SXNIrx84jpW1QKMPBKaQgSCTovYmd4Ezjqyd7jEzs50Mth9Mk\nYxWS\r\n=ppOU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/tokens":"12.0.0-canary.791311bba.0","@material/density":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.791311bba.0_1626818912741_0.8741052842474104","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/switch","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd498701894ca237d0534f7e56f636027b437e8c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":59,"integrity":"sha512-Uf/lueyV/EpEonHtlpnNifykKWRxiEPBUO7qKW42z4Na5qLPQE4HuYLVATE5pyfbChoG62qKd675buL0mgumpQ==","signatures":[{"sig":"MEUCIE3pQohafPGmz0ZqiZ141LgMVD2R4cSAcpRrfYk5LdYUAiEAnbm2qfhmjIfSP8hTQkljxD/NylLNiJeM+pbv7Q3yhc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D8cCRA9TVsSAnZWagAA5+4P/2DvQEthDltc6nozlEt1\ncVcv9bMDKkrxthYDaDJjst0a7nNy8JaMo7eND6hsOLXdka8IYr4BCBGE2eD7\nDzHf+EuURP60SLNk4z7s9mN+Md7GkrXtndPfX+2ST0xFRsjAmuIITf5OXaGl\nW0FleZHp/AHXoxj+DRoWEDKOUYBUp+Iqj2+KOUHMVwAVm34iXAg4h317sMya\naDgvDfkEbpSMshQeiwiF0bVx+V34dMjxtzTVay7N7E/O96rVO5S18OURW/La\nTC5etofv6mC8MA+G8OS3vZQ4zco2w8mGHAs2poOnu0vb2KezDeM9C2chWYNA\nyk8HFlscTjXTrxczholN+7Sj2R+OBD2NHavL29OncVfadYbL/dFODQZbOWWs\nZana8sDE6xxm01+08wvKiGDJZjcklVlIm9zxGpAJ+KEsADQnAD9eK3K9yLR9\nNImHOw2ofmg+j+/XLraNRR8tDoc0AfT5Y8jDLMimP6jqQBAUDoz57OsggxN9\nQv2D7HgmVsF7bar7tOLvBR1/HKNKMqQak+QpXrua+ZuXEzJsnGeTElzW8c/4\n/9CqHxT+oKB7sI5Vz4GBfFJbpotXmllePi+q8YIOO39WPfkRKYe7Yis/Sb3x\nXI2VX0FJnXko/qJKKAab6keiEyfVluJSgAa/Jfs9Q2HhTMPTs8ZT7JeJdEDi\n4w7L\r\n=UM4k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/tokens":"12.0.0-canary.85e9a6ac3.0","@material/density":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.85e9a6ac3.0_1626881820537_0.09466517531682794","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/switch","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.6b0442278.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e3ae6ad91427e1e41fcf8e9331bb2c9677b0a6a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.6b0442278.0.tgz","fileCount":59,"integrity":"sha512-1vrCGLsAyA5KB5p5cz4SEzbaFFC64yQt6get0kETVmGa6VhDWmSu3LQVhI5DiaazeVE511h9doAKNvbQB6szDA==","signatures":[{"sig":"MEUCIASbLXLV7LUjI+uAj/Ng9EdJJ5kIK6Ir73A4wxg5d5hnAiEA/6N/NeubQywSWKANFPwVPBGvQAoYhnRelGm21mnDR90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GyNCRA9TVsSAnZWagAActYP/RT2ptUC2+mV+N9oC1Lb\naBiqmlrKv8RE39gRYynK6ead+0x3FNu3ady9YS8AtKKOsWFJyyDwZfbjSzS+\nwoKzuy/hpjb1LRKwirkcVvdzAY2KwkQrJZh0JDiEw/BBwPzxcAFjLlmfakQF\n1HEd1VTeApY/rHXAMeadkEKpMbS1An/+xkqsh98//bws1PAB6vlWuq9Ku0xR\n+xCH3U1OXGqnVHgsZCGNDjYK5grhtt/VXuG4EqtYyxdZmurUtjVhEbkAFZea\nOJVGx32QqdPYSi5YfdednA0OBHVqP6Zf+BE/HTDS4tVJvou1v7nY8G3OCvB1\nF2wP7kz8pyREda99wi8zhcGvGYkth5EToSpbAj/biq8gpnnfJ+IxyRRe7Z7Z\ndXBI5TILTTRYRidMKJE1KkfjLUEgrfNnsBEC2PQrPWdLByE/wTrH3nwgJf+P\nobzqMCTtZv6vxDVh+fG2Fg1x8uYBVS2afc9XpRWVACb/L+lgJ9TZZXTEGA9e\nlqIy6isqPIQiXRcR9WlmJu+WDJu5Bv4d34YymsDrYZXh7PrQX6ZmOQdhEt9g\nGtUv4mJkI5yMFXd+kPwG8ke4kEX3+wHwo+Ged5xPFpRr+6ccOmOTvTqoHx1e\nJYwvyvYxRNePur+mvyw3RMaJ67rBG4CfwCMZIYmIQ9/ec+NEpc89bVBH5+Ix\ngJ4t\r\n=lqZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/shape":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/tokens":"12.0.0-canary.6b0442278.0","@material/density":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.6b0442278.0_1626893453366_0.3555078822512032","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/switch","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"501b0f5e1c2c12b006ce3e32d8fbdb1db16e55bd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.5f00e454a.0.tgz","fileCount":59,"integrity":"sha512-oWkoFjP6ZBEoe3HzJiEjJoyTQ1h9Kp+J+dqY8XedZAx4EGaKaY+Px1czyijWMuL96fES/5FJDShURaw271hzZg==","signatures":[{"sig":"MEQCIAuW74RJjN6A15Qwp2cLsC2IEttxxK9MYN1YGoQC3tYWAiAwAp+seZ8glYDRpO1FjGy5nB2WDweMl0CSzMH7K3CGyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aXLCRA9TVsSAnZWagAA/CQP/0YbQ6C4RwkcR0+lCvmR\nKqDh2gGodAKM4L4cbe8YHaS2EnrujxiGSryzljmR36hDIJLZMkjAqbqKqEPq\nbnY3KYl8UJe87N5o/KtIP97dr3CJslm67g1Uy0YCEpVa1+wfKHvaQIuI/3Cg\nsO2FSfzSd3gp55nxnJs4xwJ4rAQDL5M1bXmWNF4J4eUe9QAeEFq/ZvuHZJFu\nJpXt4UmRVC6hFbfpf9CQSv1Dv9IqR/B2tKxoVTZ6bwdvr59/dWE7/hbhuLV4\njhSItviQb4RzcErXx0hxGA3Rzz7MGvAZyWWjmKmJD0UYp6oq/0HYYqHTgkZa\nwXa4FNmDJIo2E0iq3bIGe6abLjSbh5HbBC+9tMjctP/VgBLDi8NI20FtMlJM\nZdkGZLxx+JNyUOTOFq0GHAVirFqd+fXBVgoWAlQ9nryqUx3nP5XOZ5q+MAdS\n0iIRrX6YACrpqqEezxDITRvPBUCV/527geUPy/NhRnjkT0cXsE/GB6/1B16V\nnqltm06lsrRPajJ9fKuZIignLIkcP+KM2XL7mZrttQ1reSoVbGqNwXH3sDYe\nc/mJn+Z9lcrzCOCQ8VqEVGVV9LM4ifW7ryYNTe0NwSugkSxswICK9o46ysW7\n+2RQVo+8lxEDnlLkYQeuE/NevH+FW7oMDqaMhrdye1QeUicUdJ5YeSu8wBjt\ncRaB\r\n=RZ/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/shape":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/tokens":"12.0.0-canary.5f00e454a.0","@material/density":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.5f00e454a.0_1626973642749_0.923730677469661","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/switch","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a1640889ef9bc08e18752669481827e826937a4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.90e08fc6b.0.tgz","fileCount":59,"integrity":"sha512-F/HUKiI1tzLKtXhKiGg4xeycPUrHsS0WP9KBlem8RKifWtYdGWHNX1X2feeK5g9xdpGpc3kKz8iX+pR/nIIWaQ==","signatures":[{"sig":"MEUCIQDth9LVGZUpRbqzjVNMJiLMjeWJQ2/4SOljTMTcSItTIgIgYhduGOXOFnz28onrvKnruScsTpAmPsuYfgemIqUO2dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gGgCRA9TVsSAnZWagAAl58QAJjD1fMoZt6TSWgWbvAr\nfU80bsVyqiw5espJGEal9sbdL1pfmle7QO5aZ0JhrUCOKoKHBeR7wRVxrZ+D\n5UxIgCQsPFpWa2mmC/MkyWbPhbT0GJes2J0SYmgbgmbOu2JhuEoFOmXdpok4\n4+ePaQkKmMDTDHlJAgWqeBpEqif9hycQDYeTxFRP9ovUilYaZEXOP3NWoEcX\nDSCRRTWnUZ8p6qQ4MAZezfwI2Jl5w/a/bdCmME9hTn0zgrcFsR+HxcOBsTYb\nf7souEwk24kSRmyb/WNVgut8zkWRqylO9bJN2nN3Nt4de3kvHkiUpXQpaH6J\nquKyUJTpuoWaNk9gXrDK570ooadz1eeJozJkE1L+GXPbJTJu0qFWJwYrMA7A\noj++yRbkN8zM+drGXUPy9htF/UHTQAGrpVRz92XT+Zj9HNR0ByfUQX6GXBes\nQX9ClGFveCouRwwJyvP2R+ex+IG5ZA+kivyUpHzRQaUswCZaGzQhMCZjKhxX\nMoowES/+eYbtAsWBfvDsbzpQNQ4KGn84uNrYsx/XTEgZjJuEchVyJXVyZBM8\nglKFDYsaaxJyRZ0K1v7puxtr8pw8pSaa5JiSvtCk6LmFk9PDp7zU2E7aZ0q9\nTVSc6rY1+/msaJrfp9oCo39AeahGqHqBDc639nrG8egXViEGw/6Wcfn38zyU\nmrM1\r\n=iNQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/shape":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/tokens":"12.0.0-canary.90e08fc6b.0","@material/density":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.90e08fc6b.0_1626997152800_0.9726833287950327","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/switch","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ce90ecd98d924e3e4eea0dd5bde3bea5a907c9c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":59,"integrity":"sha512-K2F0SJdubJkpTeFl9wdqFiOwzad2ibtQFkKDI7y6d2uKE4USewIkWFlbnWkkcPS1cFffy9ue7tzfM4lxt642lw==","signatures":[{"sig":"MEUCIA2hUBPYjACuuk8suBx1xBc71nCA4mzXL9jhY5OEe9EEAiEA1DNZSB78EMbAnIi2kD/IdU9urEtFJYLDkpPgUjPN98g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wa1CRA9TVsSAnZWagAAU/YQAJTQt7ypg2W/P/rBHm5e\nDmK0CDX5y+2HZBypcxaxXHMtRMi/JVOhlEDcwWFCZsUP0PStRtKILMfw4nal\n/SuBGgLYhygUfHmYSDcbHCkohEHfqdXELMrL3Tr5PVN89o4Is9HKycEIcgXd\nB7kvfuEekCsW4Bmzc3XH3Vt2g5hPqpZ5y22rKdxNbpFTXZE9xxSZGvU45C2h\noe0ciEEIUGN7OXdG10KAEgWXI9+tG6iTGdu8f1tFcCEH68MWChl+YQFGDw/J\nXPiJjKgDEyKLAJ0mqMso5VLOz0cyQMM5e47RB+lx2TQOXS/Qae8h2Z7/XCAM\nmEg4vtpgv8qKK30TKN40cTjwITavWEWIpn3GDEf65o4ySHdqwTpp7kqidyxg\nH+QnOk9UUaTtts6cuJ5J9H8U9woCvH3Iyb/pNPPN6K8lxnWBWfSgPwXdhYTW\nv1Iys3jg33mCaqqJk027JBsrdnVN59HBS8qJTm98JMU5kiT48gEf73tl957o\nPdHN1t3B0rVX3U5V3mX0f8tS/yMTrgAnODeVY9XsHMq2wLInllkUWkZ7Cw7N\nyz11mKrzkKdKqwjQ//F/20R9ioHjQSoGpfbs5pl/HANVHKfFg/S2JxXcbWxk\n0W4c0Pd/yuf2VHzTjCvbsgvNn/WYo64rUFKQxA2WrunqwmbrKTgZUbd95pLj\nv1/c\r\n=sQJN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/tokens":"12.0.0-canary.cf5b9eb86.0","@material/density":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.cf5b9eb86.0_1627063989210_0.3633075182403882","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/switch","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54255e214e0cf8ba41986f8eb34f408f5d1a6c82","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.3f36ac75c.0.tgz","fileCount":59,"integrity":"sha512-hwEOU7/lKz6VSU1u1fQSXPSyW0id7BEDP1XuK3WYlLT3IOYUgLwlKnVAQzrcfOkj9WPyOxkwk/pLdri3dPtpAg==","signatures":[{"sig":"MEYCIQDLSaFlPzleo3BLfKH7+NkRPowN/+0L3wjBO1BGbjbcuQIhANIwC8iEg3/g+Wf7HgxCawDxBU/d+CGosOc49TjB3IP/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wtmCRA9TVsSAnZWagAAtDcP/35YCT5iHYLKsF/o7xGw\nHAxIef9oTt89i21291L96q1/ZqShRiLKvtcfHOMPgrsxakdnybtAAgMqT9jj\nGCuJ94F/zM353KfgmpeG6sMKsmU/kPjPdvfbTsBv48I4SQjrBSXuKM1+AD3p\nI/5dwi8Eja62MEloKIFJRazBmibou85eSRxsofSwBTVlD1Of0GlpVWWKsgEM\n0RFiM+AcoSkNYZ24RmcEk23Cfa1CuC8fkBPQASfAIItK2VOfDr/tmmXanqRD\n66CgIOAgs3kEuEWc/71vWVvcfhyCbC85Oqqyamp3Mk2ojnwsirOLDnlizQl7\nEw/33eu0RBgkQTITTyYbMAd/W1xqdQ2o/aycgq+6jiR+ZvqGV8X6oh+NHLnQ\njUBv2AWsrJWsiXygK+7qZxKVKdT9Q/NDOwx1iQT23+t/foKBlwGs1tMAY2Tx\n4CpTIe67wE+Ie86NWL6jSwADtUhDMNfMw6gXAsTtdFhwnhXziPW5cHY+uagD\ndBlfO81oe72cJ1zayMd/PA4KkzeN8T9dd/iax2iDk0cLQ4jwkrb0g7o7IQ95\n6RmolnIl552fIdJmgWOtkKK7tGPw2xOned6wwVYnWcZ4bxQcRfMGll8e8CC8\nJ4100q2Nj7lNAz2DG+zl4LNN6Cou4eIWc5y211xQRfSlTA8Q/XHmLj4CAAUf\nIs8I\r\n=zkkm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/shape":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/tokens":"12.0.0-canary.3f36ac75c.0","@material/density":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.3f36ac75c.0_1627065190577_0.17047648376125157","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/switch","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2616e5fd0a6eab6eaf3f5c2a2301a77373cc7ae6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.ea1e1b850.0.tgz","fileCount":59,"integrity":"sha512-6oZ0yftONYHU47xptXQTb6lvnXqCzZ4d0LseZBCnmIwdr9CO8b6neqE1d7FAT+wTj7GdFl7gDqrYBeBClEvgcg==","signatures":[{"sig":"MEUCIQCJ8hMRKxmt8R6awOWsI3/yKz3MI0fljH4xkXLmPwrUwwIgP5hiUlq7L2WDdtbaJ1K7z2qI3uQ3vMv9YUmXrKza2m8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H6OCRA9TVsSAnZWagAANeEP/iQyhGGbqE3zPAqSZiEf\nwGZ9BhBsamqV742FD2n6SD4weMfBnvrqeSoSIXmb8dAP09b28cbjMBxBttLg\ngBI/BqnfSIosk9y98sndy2j7+HVEo+StBG0EJAGYDpqlQmLPPXYKMlV4x6Dm\nqkYI/HKeWk8hM0urLMcMBqDj9XmUZY/e8Mp54CHvt4VZkmBECUvoo+zRGXJB\nToOhvZVIKIO9qzzQYixtj2O7clAc7xwGmOWALDJ7nJ3ukz5QsINPtqusuBkV\n90mUadNLtp7dw2WwBzw1SzkXr4fW2b8H8tCfS7F9DOEn+vGb6WRtWf1pVwET\nW76suvjOSCGONlmMaAqgZ6Ha0Ija1QEVdyzimNPIJh29BO03za8xa1HNOX2u\njXpbzYvv/I1GT8nCzrYLNybJpgci8qcQ7e0U+QOAkJuza477Z9O9bJKtmzvQ\nFG2Qyuzba6YnQdDC88u0S80iSQzwRXtkxr+WoE7lowQcyAvWdH56Gvur9oUt\ngndoP8SQsAIv4HmzIYx2CGzMJQKEYqK12mkc3FTI5x+TXctUED5Uukm4E3p0\n+R57LQ6lgrdb5R4kWTUj3/8W+fF/++cWz/SA0MFZn58tOCJtMT0fIUzCd1bC\nlRM/gPK3ngMyhhraOK4BxtOQkqPT/RR0FXdt0SGI1tu3MgQMugMDAtoE5Vev\nW7Ui\r\n=QgCP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/tokens":"12.0.0-canary.ea1e1b850.0","@material/density":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.ea1e1b850.0_1627160206004_0.7508787627083529","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/switch","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0-canary.22f390c43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dc759f521a41120d5d574fe541cb4802e6900ba","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.22f390c43.0.tgz","fileCount":59,"integrity":"sha512-FjRQBpB+anF3WTAT37u6eMv4NND1HFRL6BuTbYBmGgRyLyxpolR5rAONa47E05nZnXtx/DQ++l4oaUCm0NJ1gA==","signatures":[{"sig":"MEQCIB874p10yJ2SsxtnoJw4DMkCIYnpH/QbaAVHu6vrFJ1mAiAN7p35UOmyIB/4jqXQ81uiiPPMnaEkgUy0wTTOBKZuUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFflCRA9TVsSAnZWagAA4T0P/1qC9HCton5S9mGMpDU5\nZX00OvLWvH/PE5zz5Z2fsc2efLwng0wX/sFV3GQKeb2hmNP6z7/HzdH5Blvl\nFi2/1Lb/4XOFAJkuofDj9FN5z9HreAnlCsOz34sCbvZEQhORwc+PyX7EWBnA\nBrdtyWvMQtrsozQNBGkLsToEOVRMMgKjt6UaeXlMQDxBSLqRmBuOF9IUATWO\n8Zs2ipDMOQ4QdbCNkYidhLou2RkJRbSktjX8UroQdF1RFChnpXBTFcBoxZCR\nu/OcZvbuoQg6IkjXZiQYVzlIeDIGZmmqNoC1FCs9R+eALwNj946GwZiYsEyt\nxGFgdaUwxgSLyHszbbl9SfODAxEYQsHjsjeILEkcQgrolBhs0UTkVT5iz3D5\n3nU7iP2FzJi39hIjTISCTn4giq+OLz6dSPVvwFzrPvqj/6rU9jx7w5/kBd5j\n5j1MhdLoy8Dmu3th5yih6ffMsDn96nV4ej5gmfeOre5XuTIckOF1zbCS1bkn\nOzRSaAGy6ThmrF4hVqYLM1249iQ6eIje7CWd2x3/eveNIfbix8L5/KsLCDPj\nBlv7mPnNAb9Dbd5WVSXKKcHc0vsLLGEBFERXuK2/Cq2x7IksrZcmERm1asDk\n4MyrVF+ibw9LfAhBnmBJ91b1oCeEY7YdiTvFVEUin2bNih3ie86Y6GEUWFJ1\n485i\r\n=HQ0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/tokens":"12.0.0-canary.22f390c43.0","@material/density":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0-canary.22f390c43.0_1627412453052_0.58975790263908","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/switch","version":"12.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@12.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6911b9c500b56f9689e598471e0912329af31014","tarball":"https://registry.npmjs.org/@material/switch/-/switch-12.0.0.tgz","fileCount":58,"integrity":"sha512-8h3UICmTVTObLfvUsbfyKRSj88pIXv2EzbB8MQO7rKDEUZtP/Nws/t/+HG2zm2UeXqxBOn96qS4ucKzgxlzPtA==","signatures":[{"sig":"MEUCIQCoA9JMWbrqFvCOVOvzk/fvkTYQUvbpQJ0PgCm1LZhmoQIgAOvaY8ixTr9eDK8RZAgmlPl0e9xM+LsvQ/06mOcNMKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":674085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOkCRA9TVsSAnZWagAAigsP/217PG2WTq4boEGuQkd4\nCBLFVuIpaK9O1CTKPA+nqEpYTOUAFFEOgMVX4Hhc6+gUuCosYjbGaqAm338a\nMDGE38/jc7Y+A+IeKUjOrTMACH/GFuxH2LRPtyuP5GRrib4l7jD3FNk8tYBk\nuoPZ/EpZz1O8qYt9OaIG4tHrc7QBzVJBtvxS+d1+02SI7ZuTTYEB1N5xCMs+\nGVGSTOk0Zk1dOLWQ70i+L7+EPyKxRa/+QbbWq8Z9+kzjRugaJ4O11p5zfQ0I\nC+u/QIJb41nhF7Dq4NXpj5PWnw0VGyZGQVURAQjJERqWOtW4/Ep/3MWE4PSD\n/822NEc37c10jvZw9uBa7ORRLwVrsm8kFXHIi8TnWOB0WL5vYuFTiXvBPoyN\nXOIF/FG8IwzaOQ6B4+CuNy9FN4/DawmlYD60cF5u8pmnhg3ucXtTWb+DqYwt\nspb2iIHPfyUjrlse7tY+A/Vzdn/O59gUtCj07lW2xESkimmlF9pTtAN2p7E8\ndWTFr4lzCBfQhkCKz2m3oA6W71s65HrCcGe5Ec9cSijTvfC7AJWYW2hOQaw8\nmc2WV16RyBu8zQhZE5POnx/O0EXk5DaldPp0MRm8oSJHp66lOj3+kO+Og10u\nHeg8yLBLeAM/jdOaund9jfgJi96KvbpaOIKvNe7cP+jMaYkiT80xjG4hsbP6\nwkdg\r\n=nfuh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/tokens":"^12.0.0","@material/density":"^12.0.0","@material/animation":"^12.0.0","@material/elevation":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_12.0.0_1627415460403_0.08073732393813038","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/switch","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b19046597b154900912fac266f318eaa60c46e32","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.ae85f7eba.0.tgz","fileCount":59,"integrity":"sha512-/WWfsy+YMtaEuWHzfTBEDDd+NhoGV0tWKBFZUMxp9Eln7tvChczxE64jjmEe7bOSSEV6Ew/tpy/wFvcsrWMF/A==","signatures":[{"sig":"MEUCIDZPh/hjYGs2Kk3SVGhsAARJciSIAbcC8Gvug/wAFqFdAiEAzEJmkgN/CpDJFQC5nELQgFYvFCu9F43XPDCXOfAJI8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":677592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGQCCRA9TVsSAnZWagAAOmYP/j55oC9y1abCFzBrhov4\nk4U4HegSZP1xCvWfeQS3UBl9+36lmMEgwGNPmqHZIulzvNGxoUuTeE1lSgB5\nzM2t2uffK4KedXeJp3xKoZNJyfiPMHUW/0i5ZhskozYoiAvlLNT8WTzXVieY\ngmDKgfylJzKBSCUWACPIeRDx6j2bpNCYzWeDAv3csHnMAN4rxTTpmpar/jND\npheVE1qg4IIgkJk7tXJKIC+ssdaSMBZq9wCaujo0yAEDbfLESjPrD5fpxyIx\nA71IPv25jvgy7zK0Xajev472TGYrulWBoxGuYYlrWbnoLnexbGMgWYR4nKnf\niPeNuU8Lq7YzhbWMq+gMy5u8aKhBdWKZ+Ed45vrWnfuxptDTWD1kFDEsYs+T\nRX0MsyeWRhl8wJTg/YMQnjUfWybhYwKlYmOf1cE93TmalSeoKwcGjE73PRa0\ngiV022L/nUUqcYI4dDmIFwiQM1v886cftqPEndnebtshuKok3v4SymNLf4ID\nWtFut5YZNVwRdP/lmt3YCVlCQcl8VbGLL9CC06e1FGwZahYYKYXnZ+UmAKr4\nxZ1aSCwbRf8bILgqLY3ulM0Y0Wo8AQnif/WGPeF/2xpaRn3Ap6lCbUV1r7Pb\nzndqyFdeCtY062O6k4r5EMmg+VNntw1CxQtXV/VImbYesIXbRSjVk8SMHNAw\n1PGQ\r\n=2HO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/shape":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/tokens":"13.0.0-canary.ae85f7eba.0","@material/density":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.ae85f7eba.0_1627415553881_0.5114218664474566","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/switch","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.5981207f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55cd126d7ffeb77c852ca3599c84c8d2eb1ee620","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.5981207f7.0.tgz","fileCount":59,"integrity":"sha512-j9xCiIU8P72K7QOYfYF6du+VNR9OyNb5SUxji1PjC//j9pkcqXgK0lldrj1bKrVy2KTOXquf84zT4g28B0Lk8A==","signatures":[{"sig":"MEUCIF91E1a6oCJq5MDNAGK7W9/kuivLj4EZN/2Hv6nfF7OvAiEAzz0WHzKcfqy0kKrmNqKfmqZU8c32TAfRFjBhLULhatc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":674679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJRxCRA9TVsSAnZWagAASkEP/A0EztT24K5R3swuNHi1\nhVsZh0aOSm/9ptqwHVPBhITb0a4PHRdotmYe7k45XLzQOLkrtiKv9RH8lPK+\ngfTDYDqloCeORon5wLfUMwiv3y10V5fHGrvSn6lVbygLbNlHg6Q4M/NyKl89\nG2Be8De1sIuyZ8H338wgFu7CQXFGlyEnxzrlF9DJ+cjhE2aI0m6E34Tibp96\nna/1wJp6SDPIv6TQAmyfMD5mF1sDAW3J9jsSYvWuxtiq1GE5QwrQl44y7El3\nSOixxBgXwTvnav/w8Mkqv8S0lybVN+0Tq7u4hFzg6FpP52658CCGukJfnaha\nR7S5oLXMag+/U3qA4R+QLrQTZT7IpZXkT4hys3ZlzijjLGm6Zbc6wE8G0Yzb\nrGwYCuxZzFZOW2BqXxwrYsgCbG5cx2mZI/rJj0CA5xfoPbxksIhi/5C2n+T/\nvvqDGmj1nRxeY7V8Ew0BPgFgtNlKr1JXZLnC33jiQo8ISnamdb4/L9k3K2WW\nn/a+iR+maS/XFwqTcHvcXhnXhNTbyCpUbeYIcKqqtE4WrRfPAbjtJ8L/YFr+\nkib7lEDCGe+JULOc2cNgbaYwTCMkVQbXWLrVFvm8zRoTPhMW2MHnrDdUmA9e\nddyL6ZZZS71zJ4JHtIq/3Sy3s73EsUHjMO+FOPMAPFiJZl+FQfVgZK8C/UoR\nnnoQ\r\n=7xoe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/tokens":"13.0.0-canary.5981207f7.0","@material/density":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.5981207f7.0_1627427953187_0.8573273669590382","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/switch","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da198ccf0b32d11db14b074b20943b44b3d84f38","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.83bdd0222.0.tgz","fileCount":59,"integrity":"sha512-J8LPIFeQKw1AkalKCuFDDDxC4ecvfSggKwx7nMbN6TD7YYVPiWajSN9j0F1z7/FL4oUJImGHYgJEgv/DVpljEQ==","signatures":[{"sig":"MEYCIQDA8Z+6xoK+JpDma+bsmT5GmJOsHOi67zM37mAFLTqIQgIhAOypamPNW6+YLhKRuglAji4ED5hwWLtP7Xur/FVvWlVA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":674679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZNfCRA9TVsSAnZWagAAFp0P/imu2Up02d+imHRnzyVy\n1P9pazTuoGbgNA0KFjaG10D8OBFfcgB4DHPORnSk5F1uH6nm5BQhTZn4cTT2\nQjS9yfE6E/iSq3KYw1eMIcjIjDdfYqTLu/bQ+bFBXwP0e8Meq7/kkCHVd9Z3\nphYwXuAdr+RoBUnay9RIBYcFjnKmQu8UoOplLQmcRqOJXMHQiRBrqrB0995t\n8mX9SOiKQdIzTwqmTKJrNSza8QCB3ZlXlhseX1ujV5hrEhKWMGg9fYFIzf1i\nHPoswtjrS7D4x2sekPdbPlVjj4zwLUBYujBsVPJEz/NGMTgzUr2GcyV2Pw53\nizsYuyNMDiBVqUFQno0QDsfLbv4jIyDQkrrj3CARRg+yAHpg2p83IZ8rAvr3\nyTFSu5ei1Sa/jg03lbb37Cbn6D6wqAiAPGnuwAtsjt0z9pedFbx0EzbiuD7W\nm2dXK8V3Hb0BCjrOOrXg7O+VvfEgcc+9kDdBIuQs7t5dks0cAUY857YMPvJI\njflARaHah10i+msIgBgsDXQKcANr6Z/Cn54HtfVlO6/FjtDxD/O1abncQiN8\nsVX1h1r+3hy/g/5SpEafJ+2Jdaz52j2PxNrpDo0o9Lgr1ow7bhP9TZVZuIWr\n8NYVXCnvpn8vglGSoAqYdQwC26HfZ47csHp+Fa5AqoN0e+wxz2cbK1zFEVn6\nckRu\r\n=yiow\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/tokens":"13.0.0-canary.83bdd0222.0","@material/density":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.83bdd0222.0_1627493215730_0.3669508893321429","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/switch","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.28656298a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01846795a94a1df324a21b5a51ccbafebb8e5304","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.28656298a.0.tgz","fileCount":59,"integrity":"sha512-b1FUXNzacDNf4Gd58HQJMqfPGTf9myu4VOAHVsA3XLsR7ZHuNGF4GP7ljx+64GiWbrvzCQgEPLtntoYEy0zQag==","signatures":[{"sig":"MEYCIQDdjFqKOsW9t+kyZcKrp8mCprIcA+3cVFUzjqFos8GqmAIhAJUis6hL8iBIDPyo+7Kq7s14glmw5mzkhQExOZvl4qkG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/mCRA9TVsSAnZWagAA8o4P/iobSI1O6AhM5rjY5jZa\nJKuuSJpFnpPnG6Ijoil3zaWXL9YcK7rrR46r9dqA9HGtgf3+nEByAN6mcCFs\n1K6H3DJH2DBTzSml80gGbW0Catu49pizInjNeK570H2of5fUg1c/JC6RJ3R3\nWoRWrM01w3tzen6M/Ju0nnsy7BwTKfjfOT07/TU1aBakrvUbsbSPR8/Thf0q\nunQg8vanVQeiiQLgttkmQ2h3rdJXisajnOEHLX7ZV/+Dl9p1JoybUS8UWFdA\ncgYPgfJ+PQPhQbljiT0TdfTVPDRx4WXCvt1qBGQ/CnKltuE1FQPPVrq6rzOJ\nNCMJW8KFtF7tJaoLR/KpQyJTdoHo4Jk89IxEqXWeDOqzHAq/SPqFfgoJulAE\nGz3kDeG59ilkBvmbqooaHe5oTrrwanKn+AK4+JCq/dWB6iDk+eGw1MlHSD+e\nY2T7OdTidLyX+TKxQj8iS8hNxEZXm9FESLPzRDxuEfEFO/y6QgG2Ki7Al17a\nbNOZcQDO5A+tEZf+YS6G6a+oaI4Rn+McUl+wJSn7kQK0mn2OGJKeV5f0azGk\nedQ2v2rdmoTMvHfY73Nxgyh4bxN/murdVQ6wAT5l4djuwPMM43hw7FB64HR9\n5TtNxoQtHaxTao9tQAp5GqbxevLmX1PuZjt64DOgg3xgjxJR6yK4IdSvM4nj\nXYBe\r\n=vCwC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/tokens":"13.0.0-canary.28656298a.0","@material/density":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.28656298a.0_1627582438665_0.5571100858645441","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/switch","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79df1a2325b9b31fc6e050847b49097b38548907","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.9e797daaf.0.tgz","fileCount":59,"integrity":"sha512-ABs1JVnjdfpcd+VjI83h0oOp10wjgjbFhiAp7LEHJpSulDr4cC2yeFDT9EUKC33OmwJkk8BDE7Jw0Dh5xhJRMw==","signatures":[{"sig":"MEUCIQD2YxiGS2TVARDxjbvm9oJxT/xaqwezSnxBWNa68may5QIgdgZwCD+/tDjEZjT4w2Ikrps/42mytXh2DIIxDd3OzO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":675615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvUgCRA9TVsSAnZWagAAHRMP+wfvxX8Ai/niuG/wHAgT\n54INdJzkyivIOwUX4CT/ZvtQUUcZiPh3oA/1efk9jrrKsrj/fhQE9Rbw3+sE\nc9NZXGd9cyzrzZp3P3wUSzHjKQ/4fMyMyW0tOo56vHSRSjfRb6p1xBYHar33\npJOEEGfPkt/1X81kBouuUNG6nB+/pi7K8XeQV2UdKut3N41+tV4DnQlYvOT7\n+Q+vALb3qYVu4bxAZtEAVCr1Ue9+537tK5qLybJLpKr2ywtqSFl4oFw03E0m\n8fB+Jg1D6kWy3Nfp9AStkNmTzQuGBLRbNIBsCvoa2glYoS97Rm8uEaUyIgp5\n+BIkuvh/JSkw7rOo9hXWlrziF0Uw9vXM7PqLGgYqn4ybu794CWItqa4qZsQp\npPa0ulTwfxiIg9gtTq0atcZ98elDW40t+515e0CfERms3AOhPHC3r2qH+P72\nkAcUnQm0k0a6OvVxKd20B/xOzgFS5oF27pA3ZoMEbffBVvRMtcx0rMRIaPH/\nFtHb+ZiH1piJM2xlFKFiorMhl9XUQ/1Tj3TplBpx6NV7X04jYWIMn8jrWakK\n3bwqEm98edRiK32yvaG2Aj+cM7JKXmOqVrO7PNISRIl1YBjj4Gdt9jKXUnql\nOwnP/Se3W25uv2AJtq34cNYYiYrqo0ep0Wzan2qCol700BMjahZH+H2g90Y1\nZ3dS\r\n=GYhO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/tokens":"13.0.0-canary.9e797daaf.0","@material/density":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.9e797daaf.0_1627583776782_0.10322529893339949","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/switch","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08ac6e880e2e62d07b87278bb925a214392368b6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":59,"integrity":"sha512-eUDSHLV+J+Qdi6LN18qBANIklzXs/PycDMZsCty0NYqVUyEbN97sbjoXSGM4asoGphTMFCQJazF08QI3OPxgpA==","signatures":[{"sig":"MEUCIQDLlXxW+XMgojvSTYRToUq0OJtdfri6tMcZJIbNcI86GQIgJLx2I4jl7P6Dz21ENwr/zkX3cI09dpyB6LgSZJ/g6lI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE2ZCRA9TVsSAnZWagAAQ7sP/0R7M+6wqY/PMBjh3hsz\n59iRlVGwG5YvltvykZTQ3ymiRHnTGrZ05tAAxiFBMWbnZPj3Auux5lk/e9PW\nH4gO7mTzfo3c6BjjDsr5Qd9UgyYlk5JvXxq70Y36RF0gPyKTt+A3/30ntuLN\nhV6la3SPuayVMpTft0NSiiOV8oET7I+sRVAZwuUGK/83w3oJGVTrrmDneW6x\nB/XupHFYvXRjf2x5Sc1eVEOLSis9tG7r6y02IUEZR3oknKgY77CKPX36krMK\nPd10uCUsx3hYwVy46evXkt8TMmHPqzV/zuH7g//lBk8Wnff/n5YytZYFTUTD\nr89rJtcrIl2IH8yKEz5DlxTWT1GS+NPRHBDAs99pyuzapfl8EomLKtZ4/CCl\nYjqN8woOHES2gBlmX8bRVbrNcQhFQSZ6o5b9KSJYfyygA1DNMGK1XT9Fs9vI\n3YSC6h4zYriA2tuP48p06uYVb0vcqDSHxS0beWzjD9ahqSbWNcRPNFJTn6r1\nw15XB+o+0v9NvLOKjYXzokHTcq++GHyS1sf4TwAzHrnrC7wQT8uGKIHO9GHW\nH5z73dueGDUCpcnwoQ+CBzZZpeCeqxflC89p/gSoQHHg9chrKFsHCeYwW7Dx\n2Hm2axdbYR2fWzzWRcY503zpd4OaTmFiWbMQ/qHZhHn+yWuy0l+RrTuzgmA+\nKCra\r\n=cZyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/tokens":"13.0.0-canary.adb9f1ad8.0","@material/density":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.adb9f1ad8.0_1627671960801_0.26367706554798964","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/switch","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.cc5377458.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"973de2b47f1c00a85f577ade9953620f1eb78a6a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.cc5377458.0.tgz","fileCount":59,"integrity":"sha512-0z15/s7ZYBENrS3Z0MTMOkbdzR3msOtwpbqmnTtRrYW584ic26txcaiZjTbPyJGuf4mQHaZFboRNokgDcdSBFg==","signatures":[{"sig":"MEYCIQD41u8YG4HJsaItx6uUvGXXW6Yrkcjci2oCbryKSpl7igIhAK8CMWx48Rz1+eJj5w7ZUDLuSQl5bqy0DB+booXUj1Jl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHBdCRA9TVsSAnZWagAAu9AP/1Z1iMoSIMOvUZ6Of/4E\n696HGDSJuK7EyW/6JbpbWSomT8Jg8MycAsAjw+cAFh21YFwPpdJfBFUP9qL5\nevDaL5mDNNGNsDWdyL3JtDXHzV+gi+hUXwaBlXYaMwqEa2PRqodB7L513RF6\nuPbqAgJCsf15E+b9no6MCxrbHyN49Q2Xb5duzD/szbGQanxbNDaAbz33ZB/G\nQvZlDmsmFg3KL2WlYpn49WDoW7QV4imk+BQLKcx/u7AniDm88W87QnUw4tQy\n08bGXXPCx92Q9BL6h8x/q/IppgKZz72WZGDDgGOVE1u4pj7OrqeAmhNAiLhy\n4n+cxtH2uhL40XUU8tkOm268nL6+du8uEauXJpB0lnKei1yeUmbkQnwQ9Lhr\nylGWiBz61j2N3yMaDt6I/jc7ht1648RltYYF9IPw0oTDpUO8YbiOMJqdSVL5\nYemhmnBlbtMmqGOhEpciXKXeMspA6FUn8IHyySom/X6HnW0JQqYff47ApO68\n8186rgEb8BB1VZGHGkKkTbmjDVJTtXOFzK5+FdKu7W0nfBgAAEjBRjRqjO0d\ncq1o3GNXtY07uID2Mw3HBaZH9UzDH+zkJkg7G1R19yX62GUXLBVTdJOGDLfK\nR0FhaKjUSCyNoRcrf44tLwW3RyqtNOZEIWUexEGiZB4+fG/whlKwMNjOAJrJ\nwyOh\r\n=ThF1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/shape":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/tokens":"13.0.0-canary.cc5377458.0","@material/density":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.cc5377458.0_1627680861815_0.6812238648968492","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/switch","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.a395972cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78e344676a23c5e76b8c3e747b54aa676662a001","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.a395972cf.0.tgz","fileCount":59,"integrity":"sha512-swILETsD/sJAIO07T74JuZcxaLsfjq5rSXoJBm3S4kRoRg7wckx/QyIyjODrx6bpPn/uX9d2MZPa+qnpG4HR6A==","signatures":[{"sig":"MEQCICq8Zlh6wovH40h0vj4S1NSc6NQxGSXDxsBtVqi4IdrJAiAUciWqYA1/elC+VVjx6etLpL2/kfDPaCZwkMXiZSxJzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQGCRA9TVsSAnZWagAA32EQAIL2mJczH964zZjvJ1tE\nBe8qgMZYFijFNZs5MGPcfYoPjEF6u/RJwUULnCGqeiiiYcTgv8y7NTaXoc07\nkM7mNKHWKvpWoUY2UfYROEJ8v3SK9d2erKyRiEcxWycbl5oKuFlNX2HG+rSk\noHCQL3KUqe43TZ1kNWIzf9t0pIIDrMmCCkvG7cz6S/PXjYrQyOQMAhS5VMDs\nLZo2ZVflLOg5vNJCLUOYYjgflsH/wwUU3PgpGcgLelYEcdaWgW8gy4ZCcz16\nnN0qfBcfB1hC0KREwpflXYBdUKDyEKzlVg3isKiZLmY2cPcD4d2Vy6/0Pp5K\nmeEd9Gsc7MBsZl5s44xYxmZ3U/Y8K+fckCitj/eB/2wBROLu8vBiZ2zhoOqX\nnIKFNw+B6MXQu+ohxbLXG+YBan6anzpM/5r2uzLSktPQm3AfiV08R4/5kT/o\nA73azokHNJZuJUSHaB0OirjDw6Z598QFE8Wu4fxlfaiUFTrI4KC4+p0xBsKT\nJzOJxQdga3iIkbYbS10IGYKoozp5LK9SBhW5vPTn9y1xmVOrEWwEHRpYLTT5\ngr87+U0jODBiPUyNFrRr5Xe9YMnhVe8ybNjZvPLNpRFRuW73+bwwSy7NxIEm\nDtax57Gf7yKOIz37zTqjWyfp/ulHdszQ7XeZWmENtKbtKQcCCJR+FNEQGD8a\nU1pO\r\n=NMcc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/tokens":"13.0.0-canary.a395972cf.0","@material/density":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.a395972cf.0_1628025862324_0.7801824025815789","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/switch","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2746a491c1a4e867d8330ab43d7a54c914e40cfe","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.7c96e6b98.0.tgz","fileCount":59,"integrity":"sha512-E9hRfLvogqXPZvHrXD+uTrOlJ1gP8kyVB3Fv7ECbv9/H4KDkGKBJFeUJxzlbzqTtw484JwjDZWsNjh6rgBnJOA==","signatures":[{"sig":"MEUCIB9yBj/XiK+pH6zWp3nfKD6JW4kUTc/mbbtIyR5eUwY/AiEA9JASacDI7Z/vtYOCO82j9z+Td1YNrzYRDfXHV9r0AUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb/bCRA9TVsSAnZWagAA7VgP/icXf2hIipvbSwH4ekMi\n7OtUJLWlyRkGY3cIQg1EdMCER8+clPtSqKW7MJKIGvFQQgNf8GnqLfUfQrCD\niyFWaTRkkvyNbLE4KU+VhkjLo7lfoPfpBRhb2SI8Hh4d8lrgjdOLH3y2MFgR\niFMLLRgwYtZWd2n70TJEumztWZPaObfi4r1AWMzXKup/tIZGDExSjosTEZuK\nCqN3tpEtQs2TqH3tGsooajoiP8jt/qoIBXa3sGgECr3Gp+nIR097xH9zBsmD\nRrj3a4sfC3Uzws21Qq4bLS6cQRL7YGZnELbWLFwhi4IUiA+9xrjMC19X4qjt\n9El0nzZb0MF0J1KQzVugaq1oVpZXZPVuYEAicJv1QMXAG36Em65XzbsbKZvf\nUmhpp+AUW1HmbiCoHyRZ4oZ4ETHRh59BppuWqzgtjVJuoYg8lI1djLpXMPd1\nuI6ZdtRzK20SQZEakEXpqYyWUFC8LTweUef+4rS6P/OrP4bZcfT3TDcQph+I\nDOsWBXlySXaI/uDka4BG2o9eB11yzLQocRBfcWGJ+zy5UcBUhq34RSxJGEW9\n2fmh2CX07CulmYVeODFEHDm+MCp80vBCIAXGuvg+6tGUp30Go/7wQpyIPlpG\nciXnxmBfhOt749aLgUuWBJVFQAVAt+VUSHDRzCcF4FaeSAcv/IKTP6VxIJuQ\n0hVS\r\n=Rlt5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/shape":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/tokens":"13.0.0-canary.7c96e6b98.0","@material/density":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.7c96e6b98.0_1628028891174_0.5316310157636657","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/switch","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e53f574b031253fa678d84521e293bed15f05aa","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":59,"integrity":"sha512-z8orkgt5Nc6FoQJPebY8GqjZM5Uit11xde5QCeMJh92H8QpDvbse9qLi0RHSYi0NALH1aMUb2h0gGQqIoDHy8w==","signatures":[{"sig":"MEUCIBzHMFZu0pdaz/B0bqzbqbA2VQHpInNj6rI4tYtK6JO0AiEApvzihDQbE0Hil24V0FceruVY2UGF8GoyLEBATT9GaDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyovCRA9TVsSAnZWagAAMnoQAIy4NTkMtBe82Qj9B9Uo\n/FXUushaFG1zyhZwqCBBLCH+hwz6VwEBICxkDgKFNTXEzxaSiENP8N2Nv4Wv\nk2K9SUQ14gjB4A8Ez9tPjuaRe6IuxvNp4WDIps8S+ZP4VybGQyW1o0RncDfa\nD7Cqsc0eFSEATDG+gT7GwnKbYGXifn+8iIoTbC+roOTaIwy1GTlveY9whd2+\n0ggGSOf9vDMomf37V2uVHlzz7vgMNKvi92vuzYWwGzcDssSbN08EK622KpQc\nAHxx3jj9/iQl+lT0Egz8HN6iqeuKda/CXeGwqQzpEaUkCgSB1xUiyaQqOHDu\nu7jql40LmIx2eV5bOWOSrBnB1liuSa1PNqScrn9bGfX2DjFk/ozdTeGn6kuD\nrRC2m0Ua+Ua8K/GDr1agU2ygolAz6zhwy+FJShnf+ekFnimVLTOJoF8gGYrW\nQhiBDL2YYusc5EnTqfWPaUI+jduesuJGbHcgosAA+e3aHZluu7TH8+eLZlu6\n/eNFtZVfCvIAnYz7J12wxS8LgbAk01GkZR/YZ3OI7xePMN9qfyU9Yt3/a3eC\nwgw91x+q6YyOevnAoxw+Gb+Y/x0bvfZqzkbpK/28lvJRY6fgQhtQINFRzTaj\nnUubyJRejUEjoX90aqtWtI4skk/KoZkmw8s8VLrYQBisMWWF3ngrwSja2t+q\nya4S\r\n=zxkr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/tokens":"13.0.0-canary.a80c8b2c2.0","@material/density":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.a80c8b2c2.0_1628121647366_0.41495921478112474","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/switch","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.3dd611091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c6dd8e4f33fdf5247209c5b8d3ba69fb94c9ecb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.3dd611091.0.tgz","fileCount":59,"integrity":"sha512-tvCdLuyrFwaUUMG+XDyVMq+CKki9VYbWuUMMGvBbnX8FxdHlrdePRZqwjt66GwAy0CSZv+8e1kZA+wR01Ovd7Q==","signatures":[{"sig":"MEUCIHeloTCxMt7mE36R5uQVev3FsFjuM9ACf9VYth0jY83iAiEAv/7sAa2pXuVNYr9SMkocr5tvk59rjRPztK80S4+otlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2GsCRA9TVsSAnZWagAAAL0P/1y/gftTqVlK5fEVZnKT\nWPcLRBzUbaJOvte/CkJvS30mJXDMOaMcKTeXy32edwkXghTjhHYkt/YIxDPE\n+fYo9jjByIBnysWx0gPfGXI1N7oGuRexo808B71LT1cBkdRZTf6wyjUXU89x\nNM9YQeWqpvhxaRpYSQuJwf35U6IhOExjrywV83O3YS3U8HeGfW8lTGQhuu5T\nE3cB0kd6SNlQfDLxn3uqLeWzFgvyEVt/HKZJ3D939sTHTIEebH5C10/qXHRM\n3Pe0Uc114IXpfjbm/njZ7Vj7FwM7THyIDFvw/BYIF6EcoYjm3rK7o56JWcQB\nszu1ENaoDqW/ML8pS9I7vuMacG9co2HzpI/P0XXrcldeSpED8hhnanxXl8Da\nFnUxR/bx5SNleBFZ9C2bbV1qJzyINTk/4y0bVXXMtxKh4unwuSifYeOcZqzO\nTc2+cRQbTLimepFQE2AH/0xG6yJx9elWS2MXxWr4jMMQBDujPY+/vathk9Bk\nj1tbmDYOU33fiVIRtBRsTlAvoj/ioJ2jCf/x7zFWhFRsjgm9lhAgvyJOqnuk\nf8ykRi8TLXmWY/fyb28YscXC++P+ppnAc3diFjvMV3edY/wuEOfAxsCMtG1P\nhimsL/BvqZIB1Oq/ipw38n7mKifHM23zY38EtJfTW1jU//yCJMTMNQS6wc1f\n/of1\r\n=tAQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/shape":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/tokens":"13.0.0-canary.3dd611091.0","@material/density":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.3dd611091.0_1628135852394_0.9893709175184269","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/switch","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87da5fb9b2d6574ce414531516769d6ec4fb7e7d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.5dee37ff6.0.tgz","fileCount":59,"integrity":"sha512-wFSvPwBA0SsJ4DCz3v7Mf4QkLriA033laAkmuTDkj+Jks8xTTMylzP4DzfrI6i4PXzpmw8+zVKllfZ0xBkU6cQ==","signatures":[{"sig":"MEUCIQCjAXWJAJ86BvlloWB/fKxKylKYjX5rnXuStOdB5CWCLQIgehc5fG1FE+wSxkAYqR/RfHqZxBOkmqg5iRanpynrlxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCM4CRA9TVsSAnZWagAAJZAQAJr1VSGEQ4niu4Uiw6vO\ndVEpCbqIEIBPS1dYG+NCOn3VSZStwrvLvPaCNzx410eY0uCy3nUc81FI6s4Z\nWHHI0hvsu7pT3aJj+Zy6e7opCDiVRZxGDPmJ/MhGkK7bsgmZQApAWl/IMfg0\n84wahjk92TerF3oIBPe0t+B1WgTDuKgRC7mgaZ3Mc+eVysQh8vLyAE4y5sal\n8Hz00+d0zbP9ohHLkb5PoAPuY6UwLcsISPFMJMRirRlYVRUlvH5AQ16C6pkF\nbUV/nH+3WuNscCtTTAoztMkH2lwJAneNV4zUOYuOljGl5jsR7CL7FEMGfiwM\neJJsEZLCFYDCi+M9nlb+3m62f7Qo4Z3nT1ICFzMneWzn4OUH1KYev9vloPE0\n49D7DPrqbc7e6uG4D2U8VAehsCpOUW/Ri4CjlRfiPEHRnxfWjzj09r+bTyPl\nFcBPYc+IfSolx8wE7TNnzeavYLMelr7gULLRy154bNsdWOQVcq85P9lB9lat\n2MPte0fGc5olhfKT5Z3Om9UgRPrNMwDi2n1gdRejbQR36cFcxgNNLfF3BAiC\nYyae3b/jKpniaARKL0z3RT7txRkACEA1wvg2CmZ0hMjS+7gI0PObWRgLRwL2\nwnWK9LctJkk/b3GIhggvx6lQVGLDIsFTlsOFs+C21keCvPDovYjf+SQQ9hMc\n0THI\r\n=P31X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/tokens":"13.0.0-canary.5dee37ff6.0","@material/density":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.5dee37ff6.0_1628185400325_0.9625186223129549","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/switch","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b23010084076b31356d53196177660bf51f01417","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.bf405d22a.0.tgz","fileCount":59,"integrity":"sha512-NPZEWZOHY6GEp48e2ZWTmvlWV07EjZste8p/aX1QrmYXVaJnDh8tHtUGBChFxMjwu2zJnwKwNNkXigsMcQFJFQ==","signatures":[{"sig":"MEUCIQDn03w7tm9aTnTPz8zF7E97UHc6mahjwLNfd6HCNbsKPwIgGxmtMPG6IAFceheaT1doBnpT90L5sX1r7kchvdJ0m8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":676277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEe8CRA9TVsSAnZWagAA2ZIP/3GN9j1lSq/EHvh6Plqj\ndyXtbpf6NYvUL2a8w27B93JWSrvex6c7phd9Kj7TeqmWv81EI8Snc/33qXBn\nEOPzrJ4+q7Gp9TXnBGCr1RjeP6Yu6xMAClPlmbhYLtEDinBeP3P1/FbKNa+/\nh8BSvqQLXL/Z3xUzCpABh3Ha8uxfQZbILGXDSUNgdON5AjL0wwhQnFSiIqZK\nwYbIh/kdjOvxqQkgqX0RSCXrAuJ8yprfoHrX3hhJu/23tRDJpeaUihJ8+jMM\nmf2Aq3UZ2AdHkCClS/ZYk3s2tPERdoauDCzvsjUdyysu9HjLUXSTH6jsL72i\nmG1zZnE9qYxJ8AChSRkjFmdAtSO2wODIVbYOeQhDX3Uhi+HcpoRf53xJdzie\nKY3tEMoqcO79CI5CQU3fjafvNqf597Gu4mmS3aasO3c5gqdtM//HB2KG5NwG\nxMiGMO21ZbRhFrtUZ9i6iNZJYQT30stR2A0k6eIAVVeAY7fhbNJSMCDNvVvB\n66rRSLqTj8EX5xrV6cV89/QSJHMBahGt/0Rx08CoEu3GlmXtcm7sDOgr4vw+\nLbPgica0jAGMC8S/Ovsw0zsPavxP8j/Iozl7Fj6S8AtxiqKKIgMRLUuivuI8\nohSNnZ6AfZmLEkkWe/d7Mfkd3m+ySfgFceAlGX3ZWUlDtP49cFHuNYyG6VHg\n3HoR\r\n=3Xd1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","types":"dist/mdc.switch.d.ts","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/tokens":"13.0.0-canary.bf405d22a.0","@material/density":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.bf405d22a.0_1628194748579_0.07972018349549947","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/switch","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6abcde46119a89f7ca0de3aed2a80e0efe687e06","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.b47dd37a6.0.tgz","fileCount":58,"integrity":"sha512-9vH1ICPrcXJzL6zZDeUZ1JQGDtVKRQDFiBOD4PM8Y+cyp2pGjOhQCgzYTuvZxpjInzP8N1XPAHrX3lYGteK89Q==","signatures":[{"sig":"MEQCIEJc3FPr8lp6CtCal95HalG7RTiYXHpInuh2wOqd9Is9AiBaf/+mi7q+HZoq1zvEkHOseneDYwILak5bems8GhpIKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE8wCRA9TVsSAnZWagAAKxIP/2HIaxRA2ZE31ilXZeDd\nym5KUpeoknz0hi5eR8uTvXx0AV20sjpRKFDdtQFHCJSdabzVU/p6PWT9vEMX\n6exqIjSb5G83X8UPPDw3e9oCtjf1YSJEmiwgcvSsBor6jIxzOPR2zB1iOAPc\nHttVtR1MsVzitM/JG/9TUC8QcTCNR0G86V97fn8xK0GN5X5bCnZcE7x9qLOR\n+qQ68oVYBibXC8l9Y92iAm7I3INS71FJoNrBIVy+ZuE9S1mpIt8evgBeIZ5X\nTHZc3GNudP05ZHP/4O58xnkvQ6KnjOT0H+M00zHYqSinmlpAr31v/KZqZx94\nok3wD6fvIbNOwHCROmScD+RQvpkTe5zJAxevW9TArvNgJ1V/vOScbnCsnzEu\n9/r5d2kMqiHsvJR/hSKppj8RQDzLj5Ijw4Ljl1KeepxBSXRrwjgx4Wyi7E0L\nx6b4BMj073ZJ09dRhinM+tyu5soBAWYICqf+Gx5tEs7aCbe08ZcZWBvMVmts\n6iM5gFIyOV9+/4EQ9Jc5Tj+kUQeCe889Qa9y+gC4Ot1m9SoxI7WsKS5nHB35\nWhdWcm2dxnPxVcSBW7XY/X4KiMbz6Sv4osCNN7lW0wMPYffzI1NHiRFuKf7O\nJhQlb/VMn0h4ohMZLD2c2SFkVdR1mI3+z8oTwpR24suQSoRh1oWS1IKZwU06\nrgF+\r\n=Xbwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/shape":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/tokens":"13.0.0-canary.b47dd37a6.0","@material/density":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.b47dd37a6.0_1628196656316_0.06950220928000861","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/switch","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6492d41ea34193a25b01d5a9d946ada87634ec26","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.6c82b965b.0.tgz","fileCount":58,"integrity":"sha512-0wentg2LwKchbdmvJPULIDBKnUjToQTrJ9vAO40tyH+0bdRsdesJMAh+vYelrE41TTPNOxT0pbMgzlWYM4lVxA==","signatures":[{"sig":"MEUCIQCl3t/I7YoiMNMOxDfXP1n2VvBbwAwYkHfG4VE4RL4KPAIgdyJGQwgRTtx9C0/xlZQ0i3ed2d7sqX+QyPrv4rqcWjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWA5CRA9TVsSAnZWagAA3VEP+QEEgpYV751diCItNI9w\npcztDh0U+jHoBYViF5+WsBVZLkgCHXyg/3F4XoiI8+bN/ApWEO31dSdYxCQA\nL/zN954S4fMhFzRHiREzF6nrsnPOyOFJ0JiQTPulXstJhJnQ9lbcTTu/9cqD\niJYFH/aWbIb60OBLJUOARmWeyFuPD9HqldsrU/30kn+mR1gL6ANEOLbCppy7\n3UiZkAf0SnTuA8CRRxNtLvXyuvbidC6CDKBGhVurLv+pSjnlIEhJsGw2UPld\nadsJkgJQZlpkIC5L8TStMCKMNxoIuymkdmqAHFKt9SvpW6/tgJhHjceQkuVA\ng4pGCEBeALoEAvC1Ba4INQDMrbFGps8szwjNv6QbCnehFgLsxw9K7mOshfTP\nnrNP+OyGx8VNFZ/Z68i0iHUDe0WLiRWiCM3/+qt9R9KXDOJgRe/m5GTQcxfn\nTXzn1vOTyU5FdtLxZZ7kN9CgHaLK/xWKkYBaZk39fJ2MaupgaYJh2hUMyzcV\n5rGUprtB2JBmkg2QcHz1Obtfme7y7z1CD/iERTYy7pA3fnnI4Ub/WoGiFzNc\nbYeaB7MAitfNKwh4p++0UJLP5AYjsuGYCrfSUmLRUTH7s3+6EbH6q3T5WXXc\nbywN8dmRr68GV2oYgdALF2qRyE+3tTfijilFMp5HCoSQyg2UyE+T6AJB++UA\nKMC0\r\n=Hejl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/tokens":"13.0.0-canary.6c82b965b.0","@material/density":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.6c82b965b.0_1628266553382_0.3968379898842962","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/switch","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfd95c88c69821c8b9b83ee93e41dee1fe7e7249","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.4ca11fe76.0.tgz","fileCount":58,"integrity":"sha512-5UoXQPGbBSDt1FNFm7AngVSp2rvCSkCgR49Tv/fDy6bXE+SgkTAgrk3ZtE1mMa+6qXtbl7aCX8BEjR8zBgoN6g==","signatures":[{"sig":"MEQCIGG2j4XkTp4EPY9BBnXW3q+03YDjS4L5+9gKk5gitB4aAiArKMQLBJ8MZ0kXqmJ3e+NmIsKOr6I9bEbjU8q1v4xcfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWyFCRA9TVsSAnZWagAAgVwP/3wn8vdwMrciNMkIgGaW\ndC70DryAd7emq0NlAinbuS1q5qfvgKxq0lV7dzlmgxsQ1ZdaNYE9W1IKwMMV\nsVW4k8Q2m6zZ5DBNAm++R+I3qMq+xGZLk36wP9lQkb89Ig4lHF5gTg0XoHpH\nUEjZsM/qBRt+cZnrLgQh6PPyq/sUeFQn2tVCeeLFBs0YD2vJjo2yzW/IGOLt\nrDpL5WOA2FlJqmvy61W3MK2NsJXsbS3D9X88Qby1Ck9DrbZoVDvYND1Y9GfE\n41CKuT7SdLatQTbesshoM4BieAbzwldymZCAV707VYfUfoipPMSnUFv4P6IW\nOeNNkS50AUv4hWjoWVRZ8JenoKClcjsl8G1NAfnVp4qHuH7rbmqv4FGMixg3\nOHopLgcEw6u2N7G2tEmBOiwZLibyyJC59dpYdmURzKyOKQ+A8EG4LR+eHB3R\nF4+bO4eOdApbzC0EiSy5zLCLZG6H+Jc7MyuShkViu4CMwm8e/iGLrhrcOKS/\nNegnvVJhCG21UeRfTZXEUPeIy7dRikjGqmDHO90EaI6+/JjgIkYJt/fw0xCC\nnYIxbemPZHHP+bVQ6RhqjQnZ5AXKNi9qtZmeBCxkuEVdjqYEu5In/shdi4dN\nzjv+OWMhUCiWAOpqZaN498UDUE13bAHnmNeE9R3iIu295zqwo3DkrwA/oqkZ\nfYBi\r\n=wig6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/tokens":"13.0.0-canary.4ca11fe76.0","@material/density":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.4ca11fe76.0_1628269701567_0.01632953403180104","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/switch","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4deba4ea928559855f1433c15a87cee2c504ac9b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.510cf90f2.0.tgz","fileCount":58,"integrity":"sha512-fE6FOj6zHd6saG/FYLBMdYojjLXQoj+moKq/6pU7l+5noJ9cKvpHLmxfHKTyvPgagIHJSmlLVsmUu7dEdCJ7WA==","signatures":[{"sig":"MEUCIQCvZxxdtCioWFu7ZPBx1bAEeZR0bsArry+9d1EhQNih8QIgdTGQzbCiP3f2vj7h0yJ4BHEW5NuPfKSAubqpBQCz3BI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWNfCRA9TVsSAnZWagAA01MP/1TamI8aeHobj6QV1pGG\nUSLIjp7NFuaVlHdmR9pJ+wEVG4/z3X0VmvgnHWTVqJv2Zf96ZKy8CcElwCJi\nQVwcOzhJ5X/+jK7i5LXN+qSVDVBtl/nuZ9t86cAGk5mP3JtR/86cfh0Pj/R6\nSiDsaH+hJMDap7dz7VcmCgJg+BER9qGYYTVZoCC74QhY21jJoQG64PtyGWZX\nZ6iqKA87Ie8JSrXyQWvCLFauvIJ5i+a/t/vDkwhyY8ildzwCjudeU3WeS2qG\nBukNhEIh+1ZbpTmn0dP/TTTvuP5ejmoU+Rm9IVmrGfCV81a9T/FSuSFLwXfv\ncq/D6+bDn5MpEc4u0kIzaA+8z7W7qoacMxDk1xp+YofSn4TBWZazhQJJhThW\nfr7KdTyydzhYoX2E2BXETzjWMSwQXV4x+N2Jubn3LNkXXS3ZB7v4z5c3KmRz\nhwg9KKOeH5qRyRLj3ujpIcS6F69n/WiVm3W5uo+Gwmo8uOiUOmnFV4oIbmVs\n+WJEEFS4v5LHkNuG8BXZahWb2TbNX7HGg/dxEOm3k649RYuLRoqPs9PKQeuu\nZiXuvwhhenbVwkyPLM+S0VPDCTKHPMUiQUuXXzfEBvl1HkKPtQj5bPIotU0h\ng60MoCjMoONTJB9xD/4/RiDJIZlBeX7h0HUYY81ByjBzRis+Kk1MkS4X7CHk\n0el+\r\n=n6+L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/tokens":"13.0.0-canary.510cf90f2.0","@material/density":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.510cf90f2.0_1628529502919_0.9957809971153262","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/switch","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84fc7d47e942353f386b5fb0c1c9bb02832b0607","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.17580ebf7.0.tgz","fileCount":58,"integrity":"sha512-CAIASpOzJVFFBmwl5LNFylIEX6TuKPk2d3C35NUVlSRm8w7BCol92wNZ8eTYigLdOPgK8FoczZRSnCxw/7ymoA==","signatures":[{"sig":"MEUCIQCdXCMYN/mQKkMPu6XxeSaZtq2T1LqQaksuuDrfaL8XNgIgXUL/hXgAtXYtqMYDwNDQVxWkI7asOzXPCN+o9WxS6gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXF/CRA9TVsSAnZWagAA2fUQAIsM6JBwrRzu2QXlPPqy\nxYqEv5lX/V76ff3/nEQjmhOVPTBXDFGJ4vgbD7dkH+ttnZMxziwUafzKntDu\nb13gGLFUELhmuKmIZdJlYGd9YK3n3WWLHu3Jkh6KLgvx1X9M3x7+MpvAHCo1\nZvsDGBZd51mAfqdzbEbGsTJS1Hpvpj74xWn7Y99++F/BBcWebgatOz/A9cIg\nZnJuH3lnzXWmghIg7PdB19lF9CNwFsptw6mi6SNzoakbcWHvjTYsEEpgzCED\n1DD6sKDEp1Ws3z8i7tHWiPIKvGZ81pMSloBCT9o6lx+WAOgsWCThZ4ArDEM+\n3E2ZfZWgV67MABvfDZavKZataNGtUxFX57+wY+iFI/wRIy7e3HJErD3cI40/\nILdNl/md81c/IymddfxRooaMANmW5ZUAH1sBOwbSzAzu9obPwkYdwAZRx3m8\nsoJ0hBkUhzKyzyzSwB0PzMMKvoA8XSt7Lu4COAv505ttGo54YuxosXjb1p0k\no6EgRCT37fvhgBQstOEt6vOcFZr1wHFusmtYaq4qpO6ttzFvXWsC72IRdw/x\nf7G9RXyB5AN/OmRVwEmjoznJniMCOFT8Sz39xSGqrz6T9BVEjjqQ4q5hqcN4\nV+18i0at905B66mvji9f0rpPcTej5GzxkJjCagxSlPLJ+gTwlv6AVp7Wsmpe\nvZZd\r\n=h/q+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/tokens":"13.0.0-canary.17580ebf7.0","@material/density":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.17580ebf7.0_1628533119524_0.5514504642030429","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/switch","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.7249a3060.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a341b4da62dfcd6fbfcc75b6908fea98c4032906","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.7249a3060.0.tgz","fileCount":58,"integrity":"sha512-CciktvdXVdPDDht72FVx0rPpdDbvut+6p31EVqfrtSLGMv68iJqoRiKpVlWQ798ofvKYMMaPb+isVwf0CZhjHw==","signatures":[{"sig":"MEQCIAdDQuONAbbnsDQ8P4+pEobY4QqFXAp1A1cwV7hu3k/oAiBOQtr/dP6I9khDG8QDU2n2IHkqNC7nW6BmWb19HnhDYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJnCRA9TVsSAnZWagAANPQP/jMwPVf0L5ROyxCfFDTW\nZzvF7llx89ldJro9arBVsFQD5rPY9pNBsu/seqXh42zegt8CJ2eOH+JDC8Dv\n4IckVL7tdc9l44kuRpVZKnQ12olTE0OD8RE55pJI5h/J3qGd95w8qwO7L6jJ\nL8uWVVpRrdc05evI03btA7VReJCKG6g+ZN9DfEd93kRQfr7w4h/7tw+Mps2V\n4wLaW9ejGam5lS3NWFJkTPp9wbYRQiEFA2xMJgE/ANq08rDCN0etpd/+RkL/\njdb/RqZKEuq/iQHR++TCwDsMHSxt8ePhz1rl0XYIFOpW/oWt6LfdUzDlbpxf\n8/1BudrHGtPfYFcfIoHiEviXerl2lSKk97KN7keX3ARloZNtQzxZxvGWzwie\nNXDVAjjQQqprcP0n1VWL281455uQHX7XVta73Tj8Rf6m6iaauVFzdMxKt/DO\n33pFCQaUCXuP9dqzfB/LXaoinrsbQOPf2jwN33a12UEaQ8Ig2Phu/IoILT5z\nJIBO9KT63mJRgvin7Hyjs68xiJOqeWcH3+yOrbJpQYILf75B7I/OONcpm4gP\nzPliZlgihGgt8FWLZasZAs/20kux4nbSYUmlg9URWRipHRCFBYQn/GuEiken\ntkO2lrTXXZdi34ZZCtQGIqBguGK6AUYXdsJ+UQ/4rf7QN4xA7T/Vc5cpul7R\nOp6H\r\n=UC8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/shape":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/tokens":"13.0.0-canary.7249a3060.0","@material/density":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.7249a3060.0_1628533351212_0.2636109834764935","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/switch","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.4c405863b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e92a69e5cfad6540e2395f45a807eac4566c93d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.4c405863b.0.tgz","fileCount":58,"integrity":"sha512-/VdEN97oYllPG4LbQ3ZA8u12sLNwRpRcoProEAkVSMP8Uv3y/XEieoOL8Q4ZorOykMlqP/oSCh6/zX8p4ezZ5g==","signatures":[{"sig":"MEYCIQDN/qgRUIXRKou0MxQMAFuW0uXWaNLTdBKcpJ/wmYVtxwIhALIdahvpnhX+RU4oOvIe8/5FMM/LdBzNX/MkDvuCQgP2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpiCRA9TVsSAnZWagAA2L0QAJN+7TC+xsCddc1doVIc\nqT12wbAs5mEGiawB/pgDusXO+ZRn9SugskOQNwDFBdHetl5cSY7KP761a0lp\n22Z1MHopLDO60njoxVmDcx3q+2v3U5MuCpOnZyvNqmqhJ7t8LOBr0N6OZoFe\n65NHNFHg6Iw3UfzkYVEdZseh1hza8epi/tK025R2m1OyeoZgkjOGTzArIoU5\nhJOgYgWwiZnX88vYD0AOhb7OVJpF2GFaawE5048Y7sHG+z0r86Q4fG/Acyua\nyMhxdE4RvLNYTaP4foI4UaBtk3KTLOMfzafyFF3lih5cefvZWMaQDKEhxi55\nORAesBY5Q4KSLDNgNVtSxnZq+NQElWS0UtdSkmB7efUKvcdfTVTFe5hiYjvs\n4OckR0gAiS7YiJnEt6+WlFQg0hWAm23HaZMoKAy3C/xfQJEqqWVHVFh/UhD8\nK1QKqtgmVKR+ErHmd5h0q0sBZbNrgPrMmDxyUdGJHbwK8oTO0vBhLwQ6ZPXd\nlz7lTqa78y5j5Cop7rs1p+vgAxoE3vvZFRYZLM7JAaNXN37f0HawKSLQ1NSa\nrxD7TN48HphOQbIgbjaqH6d9qSscqL3y9gbqlktCgfMRJq+w0bdbkiZsxg2w\nvlDzD5Bujdz21kttiMJUdAqM0lrs8YbzKHdU7rCh+B5PtQWvAep5xJSBoPZb\nKtL4\r\n=WAAN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/tokens":"13.0.0-canary.4c405863b.0","@material/density":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.4c405863b.0_1628617314228_0.45577337184825484","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/switch","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a95807ac0b9eac72b55f94ad27e1b44398bebdac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.f4241a42a.0.tgz","fileCount":58,"integrity":"sha512-siKBp/ZB2u16ujvjIuewOjCK7MtOSWnlTUp0SQ0IYvu3OPdOYQmKBjA23ed7EdyrIrQ2czR+maygwtHSYgr7fg==","signatures":[{"sig":"MEUCIQCpI0tjNzFh5TiWBbwToB4nbafhTTBLmUDOk+alKIUiMQIgKLiaxMXYQvk2ncbVE2mAn+TnL/FtRgoKjU1NiD8YQkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAIwCRA9TVsSAnZWagAA43QP/0qp92biXJu7nrXafSDV\nxambcWMCReyK1o4IPXRxJAVDYpJaSkVgprcYGuL+Wg/rJcN17XZwHeukMob+\n9KjdKO7cIiJp2DxKgig+nqp9+HBDCWJLS3aF77Y/P7ouR65uYmIIP48JoPgR\nNL7tZ5e0GwxOarXwUZeV28+yi6PXXZyLf04Sinldtum6HHAbOyEhmCJRjWQo\n+4aaScDCigFowvy9rKU4MRMDSp0Ci5kWmsoLp44/aIzLo+PWhmpRmnQlW9+g\ne1n/98dQFEgnOeRVmARsFjixH7RD51GFfaqs2RG09JNSAj2P2tuRlg66tTqc\nBd5JqoCsEWEVUOdFdeebvn4QWbqJd/NFtXT2bcFhBGcAHFzQNN9Q5dydS2rG\nEOl2slLdlr71uxfUS4CJBoF3lYZPCGKcOKkbBAMUDwLObtalbzNIBG9C0sxn\ngj7lEJ049fiU4FkffH7lL9ZQqwdSCf8MsMOEiZqPk3Mrv7FvTcC9Jji5zjLS\nrBe3AsJGOg8N2Vy1dSB2C7q+q3GQTkoWMXMv8kO6MEPaKfR+8NlHvHidvidY\nMt5C+gCShXpD5BXHn0NIyeD88pEVV4NSk7xZv4PfVpICm3BcJ5kB4kCA/+Ng\nSFRuDaLyc78QL/kpKZ6ni8MR1qqq5dv+Pe7/cinMZ6iocFeeBu3lVr+dne9e\nNxLn\r\n=R/9X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/shape":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/tokens":"13.0.0-canary.f4241a42a.0","@material/density":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.f4241a42a.0_1628701232461_0.6248347573752644","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/switch","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15c1a160451e6fd38d7d0038f5eafdccbbed5f19","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":58,"integrity":"sha512-XlbpY3E6ryGfOgRKXi1RRABM9fHnoPVztR9gi1Yhw229rFVoGT3jTslq3tidsbOuYd1h93NNznFsDxiXYwZoxA==","signatures":[{"sig":"MEYCIQDwC3MACH9ZcegS5UwFC8zMXgyCBQpSYcV+GREPgGDPowIhAMNPJnUVzrsxZilS8cI1KhY8E5u9L22jyT8JMobs9V0H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEFNCRA9TVsSAnZWagAAiTYP/2URxAJMpHrTwLY1wn4I\njpwbp45iiBD6biJOeVIZTpi/+mTuaBDyDAAMTR93/PxnXmRR2rcdc9csi0a5\nAn9+l/P2gEDq6GgHdvF8wyreRjWhOCV3CVwgxJsCf25Gn4eBu5ehr0wIlstf\nJ8dp5T4CS59237MMm7jFWlhnhmG0kMtQI37+q7k3c1CXIeyS/rJu/jnp/lN0\nz0vTrY5uA/o5In0GIKmncySHfvmlwt3sOOkkoqDt9YXeFLWVAlcp83rCACLh\nhDd38Ad0wlwsstafE8IiaOF63E4OWUJem2jITJxCSaMCjf5Evhp6Up3KtmZ3\nGQhTkFmagQ/W0Sv0rVs8ClvjtXNpk4hUyEcGb+G4WIIKpJpctGDWb8joiM8v\npEr34C5V/louk4saoTtoIPXH2qDXWxld/1a45aAEfFQ1Zh6AEnZGB1z3LA20\nTzoKuu3dMHot0f4ATc5gQYJIwH7CtfyY454dA1y82Oahek8IsXLFLbcA83zn\nC9CQlQuqhtEM6+RLMUV92sT0zPdUnJfdeHLJ55o250algrx4bEecNxoFCD2L\nvfxAdaUniEFoGkY2XDC4VrCVP6g/UV4McPY+afh9rHczTsiPkCCIxke79j2h\nlHn5Vg4qbfWEyrP7bmhiSVC5+bae+uUK3Zba8ZZ6HeXnVY7YK9fX7JwW1TzW\nB2Vi\r\n=w/Gr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/shape":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/tokens":"13.0.0-canary.0ad12ed3c.0","@material/density":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.0ad12ed3c.0_1628717388822_0.14660347696843523","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/switch","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34403f435ebd0bdcd882592e6c1949bf6465546d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.077dcfcfe.0.tgz","fileCount":58,"integrity":"sha512-+010IvnPZoKywRehaCokJ834sa1OfE+aB6lNJRaRAdMTre25+eReZwzttr+oCW7bPvy/4aKv8/E1KioVe+r/sQ==","signatures":[{"sig":"MEUCIQCujy/kRLc2hAfuAn9v8XLcwCIhdTcCwHWQLCFTY4fBAAIgVCtWZ1ezcu2n8fGZXvjEZlBGIJ1X8sgryucH3J9f80w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWDACRA9TVsSAnZWagAAnRMP+wcWyZ3RhprbSADHm4ug\nMk0KRZRJ6ABKhzKziengk4CQF8sFQnEPa84MTfpzngwVsBVFF9laORdS1lPc\n7MtpS7/uIRzPmwMrPVn7GnHGvqGn4xZ522p9O0LHQRyJFwJSWM0rjmbdosm9\nwFzJqcrjNwgelsenHNvY6WAxJSfvigATfXYcxbnqa23cjOzcRrero+ztQ5dq\n8mmfqilPLF7lwJiXjhsllnDvWS4sdDABdrXtuCpSrHVX4fMIitwTsEinivAe\n2IicDCjziTJA1W1Zg+2NuuO1zVNp34+ocOZrMuV703pr1kawFdOECN7C2h+U\n/qcMfZpOx3kzNIiYTKEmTwz6uUfoQHDcjFOcs4VGiRg9Wq1/F3otthMDCeJg\nZLxn6iNUmLMEEsdKH+mjT7w0wpP8LWIqGP12wv4rGOx6E/bJLacfH+LCSfMP\n+WpIR2WRAeo8DniMQVAPkmjerhfgPA1OLVSPnKsT4ZzeNLaNjeGKYhHMsKoA\nxYmJxMbdG/CzteUybLBprJccY2oa9TTnwfAw+5ygZjPX5X2tsreWr/so9BOT\nfUdlEu2/SwKHACU51qtT862hEfIhllbA17BUVHFL2JFFlDIYtXgcTUN5QFsc\n/VNLRrtq2cL0uus6YFrorYYPGz+OhLtyAcTuwXXPYoxC1TfQG2BwRtKWM6UD\n2SIQ\r\n=W3Ht\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/shape":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/tokens":"13.0.0-canary.077dcfcfe.0","@material/density":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.077dcfcfe.0_1628790976337_0.5952919607605685","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/switch","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.e3346766f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a84e198a0a0905177ea095d4b5e5dfa5bef4a1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.e3346766f.0.tgz","fileCount":58,"integrity":"sha512-FWCjBIa1oPTTuB2FwwcA/CEt+8VcPopKDTRRB4srchMTx08zwv3wIfYqUsObvJXzzpLPuywEDrJVGDHdHy6tdQ==","signatures":[{"sig":"MEQCIHD1IphKFY74RaGTx1ffqET8YPsXebrPKYJzqyrEz5vhAiAK/CrPMTWwdd9DDOn/kRHSowZYjYFxHwNPm1+coA0Vaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFswJCRA9TVsSAnZWagAAQekP/A0S7ShJY/T4xrmS4uZj\nU/1EjJ2ehAeZ+JvkEbem1l2PNIZRF8XRvXJdp/q6Ul7wFqn/N9NL8aY+r49G\nz9JpGzByp1dyKcikqsgj50puCmvjD2O+w73x1wVYVCFcfS9orvEUsqOhphAv\nZ70YdmMW190bU7ZSYbvj/5dU3HDTwttKMw+mfu48q77WwXQL/t6dG+28JRNU\n+suKwZVhHpLz1R5zO/hjVgMIjgV/2/c9s/6kNPS8UeyXq2o1CF53PgSOQyJ4\nt5wVeCzX+Dy4nn9qvBwsiPau1J41kQZvrVFDrZcZm+f//AOqQLWZY97ZfOTz\n0T3z2UEESc7ER6/290iIQwFjrMhOWiX1J5c6AAJBYaOLiFk9mwAQd1zd0Ihv\nqQuT/2SdZJ2QXRt8AsBnA/MV28/MhA53WSVZl9aUiBWQbjzEYqqCaEw5dbc+\n6em4h+23Vr7FX/RHuBAgcmjZ+RwPRiCnuFl/zBUvnfDAIbfwSxtobh1CMQh1\n9371HyVEQqyYf21qSkoNsHSgFQy7s5zKkQd25lH3bxwb4rUZLU9L66IPpa1H\n47ffHq8OK2vlXh8NDwoVlRA+R+fKpFNNx75VGdMl32hFuXZx9sQ88VxO2L4e\nJ2ewEdTbLFRIcQWjUTVQPbcLmRK+qdGU+Ti+KYcfw/BX/RZQE6VEICDlWiMY\n9rgA\r\n=ix01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/tokens":"13.0.0-canary.e3346766f.0","@material/density":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.e3346766f.0_1628883977632_0.24525069277985234","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/switch","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c4429bc1af1cd80de80f99eb2b624343641ed45","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.2fb068fb0.0.tgz","fileCount":58,"integrity":"sha512-D2Jo+xlJH9L8OQ42kIb1HHG/s5sxyxE4+2KCcQuQu8TIWGmyN5r/Xax5PRPYXV3RtNSaYBGF1XzQFKetvVWALg==","signatures":[{"sig":"MEQCIEaZjaw1iv4IuBvQn97VC/WAjwSeUeD/8+Rmgo9koqtNAiBDyql7OKLiFbODfTBR9z6OM3JVsQ5ggyZD2HAxwq2l2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFszNCRA9TVsSAnZWagAAMQ4P/1siNAk/C1niQbtNsQWc\njH9E7lpd4s+xyFx6+hLqE5SzaQoUjFstIk7qMqGcm3edsy3t3YIvdxyP9/Bx\nlkclKOO1puFotFcCZ4ZJOQHoppnih4oehF2HXUjKST65E1k6OExInLAxI7hv\nLX8KdTcf7Kdvmob9nSnK5xPfoTSR9moKu0AyTLRewBb5noceHA8IBhpYUqWI\nZ7AgQVh7ONnYXAb9pOAIheUVB7Qfqqmezmj/r3Pus46MP4tszByz4l9ZIEW8\neUhzIzBkCLTNSftdl6J+CgGJsl0vKF/j3fN2sp38Kr85oFIa6YptWA6UxyFt\nE/GxJxuDajcREFOk74dwLiAaAgH5N1Iun6xfyC0wNwg/i+2Hsis8f1LE3aNg\ncsXnfUvj/KeC+GHFQsXOqhQISJN804Elef5nWl9KN6lGEWsxxEYgkiEMMP6M\npXTvJp2NwqLM5ZOGOvhtPoCRNzdrthI4YTZ/rbqm9Yb5o7X7x8sbYlqXcXbM\ndbs7EwTok9kh9IFMKwNVkNFCgxnkk+5X5ojE4SsENcpDyLy2FjgopYOkLj5t\n0NGPVdI6uKiwTLLguAwJvXROArKJO6k9Yv5VrsLvBm+OK6E6XTuYyJftaQvd\nEVVhr9RP5Qrs9ZcVWj7lJkpBborbDteyeuF+OuloJnUpVtFtXwXy2HAEUt62\nWRwe\r\n=bQjC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/shape":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/tokens":"13.0.0-canary.2fb068fb0.0","@material/density":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.2fb068fb0.0_1628884172895_0.9879543616319602","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/switch","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08d57414d2b23e9ec006c4b083c8727639a625c0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.fb76c5069.0.tgz","fileCount":58,"integrity":"sha512-VTVRKFTBxp7eC0V3Dn7m0UfRzo4VtCVeCJK1KQbB62XFAGLxDSXd4/JTLYPSzbFtfXlu7PtNjmYJXBFI2BET9g==","signatures":[{"sig":"MEQCIEpTXuqS4OFFk7fPkwe5lzjPLF3dRg1H8iVYeOnScXntAiAW8/lAxl1pDdjOMDzG5VBP8fRkUuuN1Ry2/WRKQ3onvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsXlCRA9TVsSAnZWagAAAWgQAKMNi41ZUKYOZ9yJDtf8\nSGOxt1DU2D+vKutfFStIuiRybKYg7LSeb1yOKbF7RwrbB6tTF8njmVWOGNLA\n7qBotIw4Fv4jKUvwphqz9JBG4qjUqdM8miNuMbHgVBhvwe7Xiwnql3f5RatI\nRvZWBdeFOA0sufW/ruUxz1/kkWRqBH5V6JCfIkhFabTLl4PB0yktjB3n7lk0\nbNibw5T7SPxRF5/en6PWTly/2cv7vhn/GxgGWXN4SUrf3uAOrzSCOTQ01OQA\nQslhnHSZ7KeCXnQ5HimSl8HRyEOqMbdtCRbVC4kgODyxs2y59b4AqQrGp9wx\nGoqUXOC85wwHrzXuItBWSJtfdOD0UuriFiwE+FzG7rWG8PoXv4D3Mj8GvCb5\nK9OPkcb44PVZJVxq4wY2nvGUqb+bbN4VtmM8IyfXF7HweYTXnsMsMRnvxAEC\naQNk38sVg1Or84E1r/cmInViCmIV5bUtNXmvrBYdx2du/La0a76mKLaJTQT1\nu8zIFKM+ybwc5/Uoj/A9Ie6Pb0HbIOgB6myPHR+tw8UwsRVnkFFQ59aVRbdC\n+8LXeQYjQ9Nhb2JlnKXqQSb/joUo02C2qOz/wATtaQ6g6VJhO65B2Z+97i4x\nhiopjCJ9WnFkQPodinY4agb9J3kY7hV2R6MQ+qX/H9mgtY1BfV5KrXd6j7Sr\nyfIZ\r\n=hBEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/tokens":"13.0.0-canary.fb76c5069.0","@material/density":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.fb76c5069.0_1629144549511_0.6385340766084486","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/switch","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.457d89aad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790bf0f9cfecb2a469d696c87353ff0cc585aee1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.457d89aad.0.tgz","fileCount":58,"integrity":"sha512-LdZR3zWFBkpHGvlo67emLZ2y6MWXfsvwYlEhqVPsQYPPloJP9b1ypUE8QK3gsqCMLUnVIcZT8d7iWezc6Bjc3A==","signatures":[{"sig":"MEQCIBvmfJOXHPlBG/4H4WB1uUkBJfzqAeOlHszl2y2axFyeAiAcvAh/8jJuhgmPcp/UGq5ScvUaJckkk7T9e21TMtQvog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9ROCRA9TVsSAnZWagAAGmEP/1g/T5d8BQ+ALRTSIaf8\nzRGJEkufH5v96sPElQij8k+0AIkU0jwEJeBWMb56fgJBMAsaR3DSr3vnKOvq\n8Z/gHRfxCjFMX1rwXAzapAkI6uWFpMSsJSYsal6+GAh2BjPcaVPms2lsV2cK\nZ6ObsFiVKHLYQhFkK8TTt9BlIQbU3vIDvn8jhZ5FPQ241iCK/bWj9zbLmRin\nupZrZNruKJDhMXhQGLqP0DsCVGcdTt+FlO5ELTb0tSxwZDKeieueJNDIaDE0\nicIx7dcVlBKsvuEipIsDcwLmVerNIIIhUP6/nM4ScMy938TaRfahGdP0U3Qw\nEWRZPeey7YMt6POjIutN0fbMJTbt5KJT+FiC2cNAJoKk8iisUPEE2lZu60Ue\n1cH+yZVnj06K83iWB/3LClXssiWiRer3Ch5Vfa71sUbc/XXGGUe5g0z5E/Xj\nizJTJFXL2+BctG+zc6ZuTXSFL48Y2MgrdnBxitLiKcKs68Kqn9HQUCXAz5yr\ns7FMig1eY39aA+CG7QyUurQx25XccCiViT/1OnP6a5w8kWIYE7jlfxgK4vNW\nLmTlxYcw95wzc4U3MEp+3ndeR41oFC5w0eAKXVwfUog7OYAAwMpwCiReywAD\nOXemXfjZm09kmMlwrwjoDLvwTGs2XAFnSFQPAHfvtjYHhuyLHZZk1UUV87Ar\nBjsX\r\n=XMfe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/shape":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/tokens":"13.0.0-canary.457d89aad.0","@material/density":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.457d89aad.0_1629213774322_0.6538665816725955","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/switch","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"899c33df8a7dd7c527736e8a71d7198e2c8bfd51","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.0de2f2edc.0.tgz","fileCount":58,"integrity":"sha512-n2ZTQVxNHm1ZtlUVPPHhGunqbjbuRMBEd63YFsTrfrE1I/FGVUnrscWGUUBZFZP6Q6UsUjRtmbKwpzcCV1GmeA==","signatures":[{"sig":"MEUCIENPk9cVgnmNkNRZnQRTWImBGv6uLg2m2btBaYcpJt7/AiEAv8RuSXo+F1odvk7SHE17YOTI5wMyDLsbzbssRCW/838=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCItCRA9TVsSAnZWagAA0FQP/1ERfQMg6ztxTvVFrvIn\nSs3kvhaIG/DZMEHx9Q8PA+BcDjrhH+TFhc9n8n19OHcNPgl/vgCNGSjzWY2Y\nWj5Jc0HRWrSm2qU9a2BPyoqrYraH/KJHumNHBpUfj9GwCFmo1rnWhvwTP2SQ\nZy7uNGoJBBHSZ0pkaoIe010WT/NNnywF3xW/5H/tqTPbMEVzj4qWF6Au4+up\nf8HqryjGu5T7PCtWnFMbrTstrRmap7U0U8ag8p/CnhyRnh3ZknQgLqTEg4Wu\ndNkM1SuhCuiGiHYYwX9ncWFkTPDe/sDyYxkmfro0n4vbTUMFqIgl8HRlRfv4\nK9FiEX+ZGvDLKQpqmrQS9Pjccvz7qbPS9dMcsOiw6jlR8kEC0DaXxUSbzi/T\neQzMVy6weGP4zFV6qnNe0oAlhTH7ZC3Yu34bIpHRdwmJup8qSNR9euHkjw9i\n4YvgilejocAw8vyVL7eUmfO5rqmPUrr97mFyYidtMvNIbnbq2UYv5C7JXkeT\nLeeYCekvk9gNsLVJ6eziaAWkNOqsZoHvcxF0hVbd24UldxcfqUTs+22WQzdf\neJ7Af2jIKOBS6p9RyPZrthZlcXk4qTmogc9ZbmDKLanNT/qfnkLaSmGF3XKo\nx7XrWQDn1IZE8P3tcR6Mc60hObu4nPnW33y6fQUf4hidjmWxBfkQNiclfxW5\nPino\r\n=wrTd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/tokens":"13.0.0-canary.0de2f2edc.0","@material/density":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.0de2f2edc.0_1629233709386_0.9542347119124932","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/switch","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3c54792c92575eea1d85e7a06af57298d962349","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.1f9259b9d.0.tgz","fileCount":58,"integrity":"sha512-hjI42+YLGPxR2YdkJmQTpyMJlRWRqWCOBjpNmfxTlwGiuqnLYzpRXY1zvhJO2xgtKwqSTNQecyg5QVckkypqWQ==","signatures":[{"sig":"MEUCIAn7wB3XqY18MXQx7PIXklA26zYw3ydTo7rVmB8S1tlWAiEA559YG9R1feKkeafTnll/NfJub9XrRAyv3tHQkK+N8YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDTwCRA9TVsSAnZWagAAqb4P/1UGQKDIiwcva1L7vTMy\nEZ9lJKWpjx/slNC6KvRvVWH0tJT8aUgBAoGvq9vsXC/7NmopXr1nw6eNnYHe\nwMZkC5yPJ0BIisJM8nyPVBuRi7XbTnrYkKHJHRV0NHqmQr/tm6zU+oLR2+bJ\nPWPp4E1TecQ0G2BevxM99ZfrOYHPxe5t9Yx/Wc1M3d6mVGViEV2UpcJUH6NF\n3r5KXDpbe8tkN6iN0S8KeUPVPRsgykh7FTZBAWnIvJk+36CGl5FETyr6/AF0\nXoYUhcM/Q3gxMN9trqJtS4eGYJXD1u1Hmx6onIQ2WevyA0uXNbzKGvQGsBCm\nu+1q4ZTZxnWAVz3aU1RdQdkyJtyWK4lSl2hbtIcClFxhI+M5hEFJVxSbqH32\n1PSmtTYx01yrWY/sw7fZn5uuEl7tjd5gl4KG83Lfe2Iqvu19ay3m9Q7ux4Gy\npu1rpfiptzdgXwRoU+2t5ftUuWNdbtBFbvms0KTZihdYYmpZIx1H0SxB9Zmm\nfrg96WsDQ28QcOZXkjW5EX2q1vhKHy1YjFB0ypvKLtKUTyNqKw+t2eQMRgVm\nc7A5JtUq0Chz50DtXYYLp5MGAgeqSmWh+6BAE8Sy8hi7E1pdXBRu2OEfU9BN\nnYoLuMhnMU7peJRTHX0Ap3gFYK+uBPDiz5A+eDOApPGgG9tRhQNigljuVNwx\n/6bN\r\n=fpWT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/tokens":"13.0.0-canary.1f9259b9d.0","@material/density":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.1f9259b9d.0_1629238511831_0.07052312641908243","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/switch","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.3b9290351.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c593afe4f045a5c0ea2466756505a9a59f1867","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.3b9290351.0.tgz","fileCount":58,"integrity":"sha512-ftBOnQTkZ+kWkoaiK2vDK93BbjfmOKPsoYvNEHo9noMm7Gi+RMWK+irotcLriaIOXDMlxVvB48LT7ni6p6+rvQ==","signatures":[{"sig":"MEUCIQCavGpUKOIqe7g3ahnzuzBYznoYu/ECtBl0vjEmkLyrVwIgUh2ceeDlD2797UUP5zmh/zG1eJhbuHJL8roFZR2UZ6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJmuCRA9TVsSAnZWagAAwx4QAI4pb+CiMMMaaA1ijiuK\nueALZBS1CZjNz6x8OUsMbdxWEeb6bD2QRcFMF0fQlE9iEBP3YQdwG42rnUBu\n0PdohjoG8Zvp9FWiwdWB15rDJKi/oxyYpGBb6zsWBj6I+GbU7SNaElqbCVvP\ny0z/hRvvXfJ1ZqWTHadsgIXyR7yO57i2jvdbmeTrP66T/u5y2Rvhc6tfp7Zy\nmKV0IwObB3U+9HvtAWPAWNLl7iyqtVEg32G+h8+fNUv7/B/S31Wx/dPvvO4i\nTewLnHDV4B5Gd5kECFLKFifQHRTIrFDDLgTWEn1mZ1IN9hAUMc7myJPw8dgb\nuY6SH6XsQwVj2F8A5okd/Yvs14TB32QT9al7CaxSAAuCHjOzZ7pMN73ffZv0\nbt/uLdni8dLg+jSJdsFzQpVV4Frcu64I3mdZqnBILwh9pomLArGu4+YMHacu\nB2CfRrhdVEXJTO7dXZLIIUb+GPVujyWBKmyehLCZA9DDoKRBOBHLhYj2jNku\nvBJ93A6w3CkcG4hhQdTxtp6pC2SERbbMhYCLQ8tvF2tVvHWFTDTyYNj4EOzB\nna80eppCaArDU0NYMInyclgL+PmIOqrQGXr5EVTAqOu8zrv+JZI2ceXhP9bE\nqllRqwZ8VSfDKvZHX8/qR0nlSLD5zDKoaLHukiBy5+9YdaMRd1nLgB4ZpAD5\n5AHC\r\n=6DMs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/tokens":"13.0.0-canary.3b9290351.0","@material/density":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.3b9290351.0_1629264302401_0.25824121629255004","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/switch","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31262cfcdcbaf346232677cdcfbcab9d1a9ba39b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.43d2eed2a.0.tgz","fileCount":58,"integrity":"sha512-5rI9tMXcYG3/E5GA+WwruoTps+YUmC4IV1gqhMOxdIZJQ6P9jvX8W52bAOqHOb6NSm+Y8zmD1k38Drz3PQMXtA==","signatures":[{"sig":"MEUCICZUSS0KWN3eTb5Dgeo7IeWWGfcsMhxfZ/rpppwspScyAiEAjSjFVc6Xw8tnGdLjJUnysobFDozPQbCLyRCHTgLtvRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS9FCRA9TVsSAnZWagAAgr4P/3AsJIcw7PqiQuPpPA5L\nyxoDN7xp9slXV6JGKaAoIn3SSiI+j1RHkIiP9WQ+0N2+RsZLCMW7cXjEGog0\nGwZmj2kkNCQdustUmYVd3PMHct5N+8hg7WvahOGNMcq48c2Uxeb0hvBDL6Wp\neepL1xqaa/KAYekBKzyBjLSEWGyh63iTQwRzXVi6ZcAuMNOjgXfVvxLp2wrq\nMJUFo0Aca1Skp6keRysCFxdPTPeP6SsrzJoxDXWDjiez25Fsl4ozgFhrZ0GW\nwwutBTIDHXa37OP280R2jI2dniNAUaGQgOXjZeFhYTDilBWjsZ/8QT/fU8ol\nfR8b/zONVy68lkvGVtuNyu1Qs5oqXuqPn9ho33JZgFYwunUpCYdrSKCieb5v\nkG/enDDuPPBWD7Nj3mIqa2InBDT92wh1e+NXLpdNw5QFjtI0Oves1qf9VNYV\nOQOMpAh93ylEC9DhZhMeY2OwauS9uMg0EQdRdMyoSMfXWmLbYrOclp4zppbo\ngr6H5u3maZEv6DEzs5HGG9az0c+AJ/oed70/BTRXuBRKcFtr9qepvXjHPQMt\nBx52vLLB7fEEqjhwFf3iXjiCaYUOzkscpH6DjX5BvwNx9f5S+F5GsNtBeu9M\nC9iBhMj9BpMa2Q5tWwaWgrj8W/CdaZsHYhpUFxEwjYwfEDvZGgEsoCHF9WK/\nVRJk\r\n=zwAt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/shape":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/tokens":"13.0.0-canary.43d2eed2a.0","@material/density":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.43d2eed2a.0_1629302597022_0.861251437225665","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/switch","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.0a9069300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20814dd6847b9b3c200adfe7d4f9ce174ae98d4c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.0a9069300.0.tgz","fileCount":58,"integrity":"sha512-KoxAb3afwKUKScYLPy1g9Gc+oN3EhJQbJMCDn21e8hd5xl3O8ULiwoW8g5YlBDARRWH67dQPfocb3a5ff+L3HA==","signatures":[{"sig":"MEUCIGE3U90WpE7oMXvWz6ESMtRjAeLlr0Q/QvGp3SWyaJJ3AiEA2efKvoPUQPGOKRgrnOUwI4scmbavdQCJv/ipe2S6tvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRjCRA9TVsSAnZWagAAXrwP/3PlnyI1yArM6U6m0YmT\nbGwgdvGrt2zYCFP5T748kEfra/VS6oqHM7OLr1n2uqtGSmjM6aaVu3ZuhCjD\nz4hIcRhEWEb4iaqR/x7jqa1IV6lDWvythNmRS1Pd8zvhLhF/Ac/l07yO9jny\nT/x0Axb/sfavOcoJ0i9ilfb9fjHpqLR2MEsZ2kinolEK/1smMkDeeT2A3PjB\nyXHcYNejdm2/jTSz4UIuRdd6DpAPJyCuKJE0TbaJtnH2FI81BxQEEjfQnkI6\nMK8UuKQ6qQzLJ19eyzyYjy2cIQ4ZNhM0Va+odp6ahC43lRKbm6GKGpuQRuNV\nZIXgkwCb7prG+UYeZD3k1dVqZHtl3/PQCphJzv34N1JVnLSzkP/CkWATDDiQ\n0xaO18Y9cPWatA5RdXNap0fuB2qye69u4EWKz+YNS4LKzOyEmqmqunkN5clj\ntSNiN60KxuZ/k7vFqo2/EQl3WnwndlGp7hFIMREHz2e5ZNqwHVsV1YUvofcW\nRzydK9ee+CmA0GbOBcUG9w2sVLKlWZWDUq9UQr+3bCcuL6wuEotzsvzWlmJZ\nDGn2cvO5CF8int0wH3dIv3dvU8gBAgbuD7os9lL/fwW4KZqbQeFsSvLfoWFY\nYCIEjcG/NpDeI1yQVguj8NGi3324wudDvlbMZCoULqMq6dakvEZoemxX3913\nzKRr\r\n=hUPx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/shape":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/tokens":"13.0.0-canary.0a9069300.0","@material/density":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.0a9069300.0_1629389923116_0.7096999191490505","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/switch","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf0a14e4461a4aa6e738d5885e0bba69a6cf916e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.7da413ed8.0.tgz","fileCount":58,"integrity":"sha512-gDZBbj+VxvCFItGum+B7Y1UvhF9mg+VQWHaboZQFGfGi2Vqulkjub/mcGyLGCFgNK0ljX+/uUJYlrTC/BB06Mw==","signatures":[{"sig":"MEUCIQCA5YaY11HYxkgaaIzbM6UxEaS6l3rLYBt0W36sz0zCnQIgcwS96r8xMjscjQr3fgJjk/m1o4X3s+S6cat7Tr6OWBc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH88hCRA9TVsSAnZWagAAjg4P/Ajiqs9f+cHoZLaWR9Dp\nqL45hwNS6GR7mL5pkLZnE+4Zp7ddGSe3KfAeajsr/NrI9LrzRlGq3vXP8K85\nVXCjZQOF8//SZLXoN3P3TgjKF5YleM9psnqUjtQ+umP0NJnG1IvWO0kMd7v6\nkjmLCJd+9WTtUSAJrimWoE4vdinl9kBQwo82fHg5vJurkjDAfl926sfU58eP\nxnJcpSZsJuz71EdbwQdeUcYP5e7ZDU2nyD6cqRCtf0OSwKfjMcZdDjftpryH\noDuZ1MNwtkNuvQljjQ5mCHdwCD+nK54XeOdU5wtv49Y9a4I+oVgEUo8CgAdj\nMkVvNtKwwEJKMPGbpwfEVnbQsGI5zzUKE44Q1w5XPGLKJfZQ+cAziwhnNLTj\nXQFmmr4G/xhsAIC743JLz808LQVUrPnTFl4MumVwiyyIrP+L9oYycjaSOitw\ntQ8QCL3FB6E9x10urJ7QE/tc4kHUhg2dUcI7fg56N0fEL4ELkUd02mIddciT\nc77Ml81Il1rMuAH5iPGL3/73rzVP0Omwcdiw5vaFnbbfjiCiUkSLjcvgCdvJ\nfCFSOhBdGukgHj6Ajfo4LE5EfSgzDoC707PlrM1cZgvXSqRGQqb9eaE1AU0m\n8g3pCOsI2q/pCoZfFOPAccQpPwxs9BhP+VA9pPv6uCwpnqIZDiVAnSaEFjeO\nmdR8\r\n=6vVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/shape":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/tokens":"13.0.0-canary.7da413ed8.0","@material/density":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.7da413ed8.0_1629474593576_0.5191602316861463","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/switch","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea6a4e8174fb8c6a9f5cfe7235264d7a140e4569","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":58,"integrity":"sha512-7HEvwuGndedW8FcyVZtieOpG2FPyJwXyZ2JKg2fj1x88C/KcbsjZ2UgPdn6LhzTW5vpy8FgVQe9vgegyp8ksEg==","signatures":[{"sig":"MEYCIQCOqqaqmU/aU5lPHnh4dV/D6hjB+n3714+kuwFgfmUFBAIhAOqn3LRK8XS+bOzBNoFC2jHOw1PQblL5FqjY0Ei0RcR3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAN9CRA9TVsSAnZWagAAKd8P/jHh35ai0MvQQ2ZTqaVK\nIjmKX9lkvMS/8xQ29L3Im+LqTo3LTBzFm0QbQz39iswxVrDKwitd6BL4o+of\nsxynd6RGGzgdR7fx4lyd6l8V9P73F0MUhLoYQdqH/llXa5/f2/J1B38Nqmlh\ngMbYWg0xdU1hXYBCrHOq5l33MDX9ledLA0YBu2GlaEDJ2Zp3hOqnIobEBLJ2\ngBNTwGLKrEmEXNL6ssIZjOn6d6XkY81mNJqMT6n4qK7E3fT+4A40q+wHeEwv\nUwPbo5Fs8kmJ+HEiDu6/WCFFBRtke5clK2GFQEKGSFRjr5brDyGOJiqyFEwV\nNkqdQ5b71snPqGDxGTs/UhuPfCBfWa33mCq2QdZA9e/jmfdhW+VhfrKMs6q5\nJZrZk/qjXKaq176tfIdL34znXwoyEG6qeL3vm5tWBj9RBn3X9wZ08+wwIf0e\nJG39ccavoLJA8A72XQmJZ2cup7YYEIaw1X7MlX56SWZBOT3O+lpxGVA8KCtn\nTtr3y1BVfw1HcRa2iKpPGKBBs/aMEoRCiarI073Sw/wT/j4l4o6IjARuagaH\n+tiw2FUdZBdpJnrRWHqBs2UfLgzZySkOADx92e6l49IKRRKhsPnUh+pXGuhH\nduIRN6h3VnjHocMfJeJnG1a/oXjU3Tu+YXfSDZpQ8ag9PzoqWTk72b8qsXGe\nNIzz\r\n=TmQA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/tokens":"13.0.0-canary.e1e69fd8e.0","@material/density":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.e1e69fd8e.0_1629487997731_0.9329364388502026","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/switch","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08a6e68ae2666188495101a47a69f47d5dd2d0c1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.f5afc16df.0.tgz","fileCount":58,"integrity":"sha512-1zOVBrWy18bvnan+xU+Lg9FnA8JjNzntQQVjPaw4CNL38aHTiwPvaJb8CN4CVfjbsXixH0o2u/9g7J/3xESyfw==","signatures":[{"sig":"MEUCIE/g0rvV+Duuln46zHM0MBPa0m7S1wvYKNPQM3HmxkexAiEApbvSmLtxwxlNdxSdH8eFwWMCiN4CTNKQ1PBMf0u3R0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBA4CRA9TVsSAnZWagAArbwP/ja+PmPUncxt0IyHHWSt\ns9XjjhgW9qHwn0Wji7MDk4dokFowVRqwisCwh/VmvzyEO7apHev/7i8ZOuRt\nd+QG+564JY8uOgwrLGc0zra9Bso2qeZDf3ir2wuQ92koz7z/QXcDqzrF9NSU\nI4i1ZzEPg2ocAnaPSPaFGOY61rJCOyR5+zzstjy4WD3Ej3F1zNKtvmfpgPs+\nqCR6Mu5h5LXlVnCBjKwH2xtTEl3oBhZEOun6ffHP1yuBEL7ycNT7okzri5ve\nrfHuDerSxlMZIxYeYxBWVP2HnrwnaBFkup2zueTA+tSITGAKS9hMfMdiz4l6\ncClMsvLhGZLfvgzl5qQBpPj/fpzzy7AqfDvZwhHpWXqf9b+E3HxjppOAF1tG\n/vFM7YmA0OxcSvZAZMw32x2LukIT1dPrkRXZUJjhoM87ybPF39wDXRTCF5bm\nPS781rHy6Af2ORoAdlVMK1GKqnxwikiDwTDxn/kBJV0RaCLzQwnBjACpyXe6\nzO98a1Zun3nSR+50NJxFBPGtprHCpcxznzJSVrb1C26iYhV/x1IBL7nmiWGj\n6FfVzLkIkGS2vk3jfivNbdYW3utNgWxA1B7qD+4vWZSyxcZi/NH7LCtKVGuq\nRkvgEa4fFz1fGPnGvFoyOram2fC5eoy6geiJstcNmNw5uFmzCSPl8Z6UfxUG\nUCBa\r\n=lTIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/tokens":"13.0.0-canary.f5afc16df.0","@material/density":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.f5afc16df.0_1629491256508_0.23522523775531323","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/switch","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9a8d0f0b30849ab9fea20d30ccde0ff8382cb6e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.28d0d75bb.0.tgz","fileCount":58,"integrity":"sha512-C/10XA0El5XeHbz9aUMruNZ1MAb+B7epwVxc+pcSws8J0tg2DVJ+jcvJfDg+EUoj3PEKdYe2RIZDVMbOVQs/TQ==","signatures":[{"sig":"MEUCICfwI5wtojuFZX2C90AShSzDZe2gPaTAoak+a8cwJbJ7AiEAxKnxTOyZopOHavI2XwXyalNcVdQjnW3IRTf+gKOW9fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICrcCRA9TVsSAnZWagAAhqYP/jNFe99oiusivulq6Z7V\nAqg1gFiFETxqZmRrbhigOYEFd9sX+JhwF+thGBuZYSYVihgRhUYWphghYOTu\nG0gJ2DHsZjccxtp6kxVtDNkiBhonC2brhzXlmNC482PRhpS80bDwk0Ss1wfh\ns1r+eX4LorYSnEFOLCEPlv9iII6Zf/DB1yVcVDjbdXb2OdnjhehvrJ8Pbi1j\nDayJSK6acEAi9B4Xj5KML+7o+/Ypz9/vztkSpCwaqin2Q4NLGJd7QAqr4rq2\n3U5ceBGmtmqlWb8cjjMKEWPXPCU/PAsZn4SQhQPJ6jyeRhIGyI4oaQIgm3se\nyg/+qKC7ROiny0kCZstAuNBL6DifGLkwU6empQcBcNiMsCv4zOVNBY6IH6f9\njKJN8OQyLLjkRcV0Xk5fPElrUO0l0pK2gW/Tmiv5cW8oxHSzTXZdcWmLJmqu\nikaqiuyF7zchCSHcuhAiKY/VG18PICcpK9RMsocEOARtSmWTmMKYP8lzmGD+\narN6uaAoNuEGi3+yWz9QDg28KTnKWB0NKvsozihQA4FzDqP5JNq//4EEqt+B\nfnn/D1/LM4RIvcyHTF6dWpXyhLPpkaHhqT7sMAE7IT6cdnMD1gF5lboa+Pen\n0ock0pSqkbPL11itty80QCKCZJk80QYnRFhopP4/ZEfR1SQGFueRNkmBe3TG\nygHO\r\n=nkKl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/tokens":"13.0.0-canary.28d0d75bb.0","@material/density":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.28d0d75bb.0_1629498075821_0.670057865087458","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/switch","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.21ece5360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c987c3494524ac0c94767833664ae60639881cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.21ece5360.0.tgz","fileCount":58,"integrity":"sha512-aoGzfR/8pwIK/9A5GGY2/o1MeGMeFgABhyFsRk+bzFBtR7v5bzPzajAWGGrk1H0L1ADtyEI5CSXVv2obeNHfTA==","signatures":[{"sig":"MEUCIQCTGAZr3kG3FXbDqd0rPVzPmTydNlWnr4sccqtlfNLMjwIgIZAJgaTYw9puAkibTpiLU9X24J1jeDvT2H6MBmDG+0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID6OCRA9TVsSAnZWagAAANoP/ilLaVw9h84OWGfdnoPg\nwCqExAN57iAJNTP1e8FQMyEW+C9bbZrNZg518a/dP5ZIPnqQK7lD4v4c+4uS\nIhFSp7dmPEIdQT5mdbH/Y67r/1KmUmtwrSmg26gUP0mYMpxLgTZHT6+PWnTW\niLMViqjsB812uyouuS++0fEPUXV7R3l8CTl2larA9svuFYMHxuWm4i6AfD43\nuf1B4SAL5ki6b7QUQsHKB3/rkM6zoxH7wIAzKnve+0gBEifPna+gtDUmHlq/\nYfTnHHfUSzhai2Wc6Axmge0uWf6wFc3vgJYUJv+7dyzhNwzlx704B621EcOB\njTcJLbYIRrR1RRwfe7ckOWfMCNc0j22u7rFCRa40GY2jBkgXlk0ihJB2m0EW\nPz0QtmZw5u+kh8yp6tiR/Smqd5Wn0qkmNy24rIMoGKVchpyAIXUEHrGcfBnE\nbq02+u4XAAkvGWWSumg9Db6omO32EEtwViFsXIKlWrWvgN6CwcmFS/Dxh2sw\nKduydHpyNDe7vBh30f+r1YIfkauF9c+sgKZD5t1QA30mOJ//hlZLCjznbleN\ndAJPNQeEvI0/uFvYnhZ6OnBks6Z+AONSn16xWt0G85PMu2JYQuEsi4fqB0p2\nRzAUktII3pc/aBWoixkA5U4dk1iCkZaRc7Zh8mgDWxzkwKeiwi1m1LQ/dlx7\n2Neu\r\n=GeGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/tokens":"13.0.0-canary.21ece5360.0","@material/density":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.21ece5360.0_1629503118262_0.0894270557052792","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/switch","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"463eef1b873214e9f7e55e149a20aecee4ba8da3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.8de07c02a.0.tgz","fileCount":58,"integrity":"sha512-v/sPk5R5aRjm8oYDimDOb+/WjMQTylDOjSg1jtB+Ul7JEU0RMIm7TSAsZirR5ZZc6tvnxcDhrIYZoyjjPNJnaA==","signatures":[{"sig":"MEUCIGW+PeC/ZLRyDdoikga3uGo67zdzuwESbyz6tuhUfahOAiEAvFCXms8tZdXg2ZR72Fj0uZQFxiswJ/+HntLBG6LDZ2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":718639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI75qCRA9TVsSAnZWagAAAmEP/iucQ1hvjhbnBNg2RZVe\nx1l5uecAYiDob0OZs/Ln90N0hxrLq3pTuan7RdhWBcvHnDv1xVx6hB2OBqsx\nEmJDEpLT2wK+R9heScelF4I4ltk9wzf0bGEQj4X9a0rPo3t4RD+WESW7C6Pp\nKDTHTk8ANHT8ljp58aahLZMzexI+ah5PZqP0K4pOvJ6z1dhpdD3xt9S2Vdcn\n3nJ1F0RCGfKb59dLFv694BmXaJnU+z9gRGquk3DyOSIicLdTRyt9tvWAleoM\nKn6DdHiyK9SU7zoOc8KmC7C663Mcac29US3d8/5qGuYSCDnpvbpcnGv7xzMS\n0/Hk0KwqOOe3oL3H3bt3U/C7z9yS1ye5Wycjo1KRizLbozwf72k0YUZU8dex\nhuCWQdm9829XtaOBqbHwXForLBPlryVBwFn+LSIJHoAwTjcJ1MYmbMWQZsjl\nA5q9HfraexL5Ta6N8N848UE7A8MGFwiFC3IOh9oQF11z6fvoBYZzh2OSdTbe\nMddxFlfMPqcI1yjTmMYhLlnZT8FkrikaaOcE4kjwBm44PJLhZcfvniZo0kvi\npvayur0mp3QaAwhQrsh6hzoinqqg9wz0ouyxQOcpTr5AX8cbPz2F8JgeT1h8\nJ7kY0wNiNTUAMsjnn1cgx6a18PcIL9hphTjGgSxRY6hDCQz6XYPOic58Iqxs\nJKd4\r\n=2jL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/tokens":"13.0.0-canary.8de07c02a.0","@material/density":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.8de07c02a.0_1629732458212_0.607027979026882","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/switch","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc364f7d5e5898c08a3ba2eda798db067802c61c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.65aa63b0c.0.tgz","fileCount":58,"integrity":"sha512-iA4RJyq0R2pIzCK/VwsZhtwkoAdvO6lavB6EDWb3z4VPQj5N4OyPbcuBcShg9MCBeZEPVOFEQ9GpUeXazppuBg==","signatures":[{"sig":"MEUCIA4vOHKfwPi/4q/AuC728SbsicuQVo8lPrl2B0a2tz26AiEAsoMttbMjr1BoLQAUnMOTwRQJIIWiFb1x0BhcjUQz+dQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRBqCRA9TVsSAnZWagAAc4YP/3hLROY7n1sLgFfFgZl3\np12rJs0DotWVQYKrK+3moPi2NeJQkv6W6xtqVRHvkt0mfI0t1QZjdzIPKpTj\nalZNCEeGsbiH4k8IVj2Iw2Ml0t0AG8UjCqEa2JFfmSnaCqRZ6LZ12bArYuO/\nxfkZejz5f12e/F1af/vv97RCbEB7QIAh58ML8iM0F8HOqmtc99riuv/N4UFa\nwozNNW4eroSKpHCd4EZCGlaHkRks3iFI+aGEsgcXROLVFhPW+RzrKrZfqpIC\nyoHBgUGCnVe27RbCpJg3soJ/OSUZomtMfHT32UjoNYGDsAdZM9dZFKs2rr9n\nm2lls/qBYvgTQP0SajK1OWxFz8XxwfXXEuXvWVc9inqhk80EsUyWw1qVzajZ\nS/0CDFo8kVJD1uiDFKQgWU/JeoG99UMc1xL3Mm0HMnDF2XiAOARUXG9tj3k7\nUTjK2FVT7r/v6ujCFrG8mWaYgxwQe7lBgK4rZNxm2oNT06f6Cy+b27uR1x4S\ncGHKhtjvwLD0RM5z+N15c4xBE3f/t5Sw5H1sE4/652i3BAWjGLD5EQcpgxxf\n6v6jqgLpqIojiVILnGp/zT5/zPFz2gRkn7qp7G4vAuvcevYc2G1ZFqNZJDZd\nlciXRYuhpSg2oGO2BI0pNMKJv95NnzaH4SLWzxY7Y/U7t4HnnP3RGUjZPaZx\nUKzD\r\n=bpkq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/tokens":"13.0.0-canary.65aa63b0c.0","@material/density":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.65aa63b0c.0_1629818986760_0.3839954076031711","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/switch","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5295d6c5c7a9e4c94f9b10f67a93e6869c63f547","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.15981e9d9.0.tgz","fileCount":58,"integrity":"sha512-WJBRrZiBociO2+s+aytkAHjZd2V8J71XVtswyVPoV1PuLWf+w3x3T0FKrqOftGX6ieiup3H1wN2K3dQaml7lww==","signatures":[{"sig":"MEUCIQDYo69VnqHqcO7sr3xHxR08lDpNIf6d7UspheMNiqoaewIgcqmNwuERz0+WnXNCUeZVtZbG1MhcbB3KFfQcFC2ryh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRu/CRA9TVsSAnZWagAAHlsQAJqxVGktsntVt8rlGaoZ\nlwZ4z77emtBzN4+dfnhcmNlmQC0WglFFeAtfbQJ2CGqIax1UPLA+QWO3qdl/\niEyBvRulUYpLCc/QIfLMQPoVc8jkoQuc56k8zDCrSPilntT+0qytsyTCiIhq\nN63m/KQ282gnHx4aM4uRXvVu5EVN5h+Oi78t2lSibAvKjknn+5+5HcpP6QDo\na7EKzytymVKJS47voT5+/JuAqxYMQqMot7C5Q67yV42Q//iTY4WfMvH9t9Mp\nSPFv1nSHs+/rxBMDWjyl/pGLPhoXO4NjBtVdQAzlMF48I72PPNNUU9wOOGoS\n7d/jlzWiWwboQfiOlp9kS6QuKIYeyCFe7PO51YL5JaTiq6dlDWFqq8jD5D1x\nrGfaejxv4EOzYB2iBtCdvVvdGxBLCW/pTL+U5Zcucm/Il3yKIxUpfYagRU4p\nUeKnlw41ORPRat7gXvZGxnehPrHUc4EyvV+ZEic7gWAGcWcjbUNnh6A/xLeK\neYaTZ5JlpWyEypm5EIzR5lZLLwLMgWgpz3n4F8oyqR71o+bv/9dJIcRSpHBw\nlfoiZIWKe60JbnsOvolfGCG76be1sQa5/Yufc33ZSa96q/Y08Vwg+Jf3hfON\niI9nv/zzWZSaAU7ww/4n+UX4FkRQAzSwuH9TVcChLHc3lK0W1GRHpFkTx6e1\niRkS\r\n=+o1P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/shape":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/tokens":"13.0.0-canary.15981e9d9.0","@material/density":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.15981e9d9.0_1629821886908_0.9761881041677265","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/switch","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd64f90fc8655e7e2f9e8d4d06956eef81d4de24","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.fa7520f62.0.tgz","fileCount":58,"integrity":"sha512-7FuG02P6/OA3sa0XXioAsCvZxAzt4mHy2tt/wHjfnxKcP+JBFRbymH+Armn6Nom2UqpK3L37wpcJiAUzJKRFBw==","signatures":[{"sig":"MEYCIQCHJ/3S4x07Syb+JPdzeWXMhG6dnJq+rsPezRGhlit6XQIhAMDZQNcenRmK9d32nDV1vYl1IBGQ+lbXSbO1hdusHRrw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXKmCRA9TVsSAnZWagAASWsP/3jlTWrKXPlUThVQeo6f\nEObcCkkphDobMdOz00Q8D96gXZWAwGaHebSowL45yuv04y5tG3M4/CwMxOSs\nA32yLKF169OJGDY/wms5NBRCY2C41fDDxM0baxpYGT3z2hG27GRPwUKCnHmu\nwLVlLQOWj1SNU3ka8R1gbGXwwAtzFTCCiSAKy55pneeqxk5RZYE6UYv/nUBn\nAthIJ/2qpNiRfuADZ+2vue3V56DoYeMnQak4Esa8TYCLv5F56awp985Zt3oB\nwCfKoBeQVower1HMsB2qgH309Z+V7ZVggUzmPeSGc+cvpxMxKrWt/JG6TDpY\nSPsTo0CaU2FWb6GaScDTGZ5zY8CCGqOYo7Cs6eDODfpqunrcvOuhCBFPJ5WR\nFXvwPU1/IKORii6PQL6AR1GBQkByGAMpxp8CGezJ8DD6X5D0jl0/OTpRru+b\nc4WiRfRPEj9fibKM7DypdSVKpOlK0utNOFW7gkhwH2JXpNO+wWozKQq46luo\nYm8CgI84KpNzwBNu4C8qxp3uf46HCjkz2/Jx2kJ8bfz9fsa4Gh4s88tXfzIr\n72sD1OlnLEER72WVRXRbXXgcdFbkJw3ux/YcBkEqIdb/P8w6BRJg7UcZskLM\n7D1qArw5trl/SjpGh1v4yhWdbCscwdR1jssXJxNhxgHz3uVerbWZbmf2STqo\nfbZH\r\n=+NAJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/tokens":"13.0.0-canary.fa7520f62.0","@material/density":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.fa7520f62.0_1629844134569_0.8359447447155193","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/switch","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea04187e3e75454dd497b79de140e402aa4079c6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":58,"integrity":"sha512-NiqBZ6njvebiIeifpdsAcImEmd1iZfWP5U4ByzI2hSDIXYPUJjaCFWx6BArdFTyoIeO4woDAQ5lPXfwEo/jiLg==","signatures":[{"sig":"MEQCIGXeFTFY2E0akddjd8i7AAkFxDUVeAqmzXIReiZPEsDlAiBpchboGIoTxmT8t1ooGdPyppyjX6L7ZzV+jfeqNVeRvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXd5CRA9TVsSAnZWagAArJgP/ArJz5rh10S2wH7sexIn\nATJcE9j5I2tprt/f6KKuo/QZfFW1i4MxfmgieCAwzkHAsp8nG9NfozbpXguJ\nEEarBIyKPaWaQBYKq7d9bdb9eEoNmb0XcHqUqNhnMUf0c45cbN8S7ZCXr6g2\nBiZThEFHU0cC6v/sFscGs97JokvzHsWs2ISsJuOvfyY3Ym0Y7wbKEbyU2dnt\n5UiN+5PgYcy0OubYFga6fd9F8HmPSv5nF19vh9IZnGI6cMYVc+9RHbTtlsQD\nRRfhtzP8/mdCIHlzmtsIPhAfRrRN+ie9PhzR3Pprnh8EV5Y23qN3uDSiyv/W\nDa86FicNB9EMXsjgpSc2yyLfwJTZU750RRr3D9bT6IVufu0RYcZ+vxpLxUY3\nkFOiD9RSquQXGLYZkLxQrkWInSz4F+NFb/EQ9B7CCm30L9WO+HvYQV6bYhK4\nTIS0MdRZK6iW29wyVMG2PoWJA1aav5rifDKDlgzrTsLzzVDLOx+7+JQCgv4p\nZ9zOsDxscmUi6JlEn3/7CJMiL2FnwkKzOaJCAtz/V5+x57x+1G5+KCwjQx+D\nUQkzR4ISEnF+4XRPn9/0+uZK3lTAAIxdTN7RmqI5fftpjCT4BX+3Y9cfJW0O\n82wjKEVuZtLxSoDELDMEuEfnNPCwV010xgqdDzPC7qwVPn+Jo8zSmsgywWqU\nf3Jw\r\n=pdh/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/tokens":"13.0.0-canary.ce25bc3ec.0","@material/density":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.ce25bc3ec.0_1629845369032_0.005369812699011156","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/switch","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d0320736351f6016a70b4500463114af0588256","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.12f5622e1.0.tgz","fileCount":58,"integrity":"sha512-Foe84Mfa1BZ3VnHeQTkZ0UilAvmw0V6e3Wp1sZoFJ9SU7IxPK44cZ2qSFpn31ef5MzIKhU+D0ugvHYNI8tklvg==","signatures":[{"sig":"MEYCIQDKGjZCmhK+OILOccQLvRdsqpvwI16UuFMaUJAifzaQPgIhALgH5Gmmy9NTJR7KLWvyPY4/Xusqsy4vhuw0YxfWiD2T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX5xCRA9TVsSAnZWagAA2qYP/3Hm6VQT4ETjjRsxcJQz\n3OCOLIJJfnVjILgLA4rRLLrZrsOq2g4uPUtTERyJnoRC6nWebUwEY1uTYwLI\nuEEertsyPAueoM5Xn4pwEwneok0z5t+dHaUWgtVan1nPNqsLtYVPu/nXrBJj\nMaSB6pVd6hdVaK5GixJIXQA1ig4dA8f+eJgity/4HEvA5hAASnr4IgKpqTMV\nbIRTHXclxLqCu0k1aoWjoKMIuOnYlpsfwKJ+wT+eVjkFgS7wtNmmc/GEMGbi\nPvMNtG8bk3vpaSW/F2vOVTuSiV9EQht4LJiQCUEfrx/DQMzQptU8+JrQ/bQ3\nMGnTbdXwgwXZd3DhhqHVKPtI3sTo9GgjoG48Dq8gHaMmvHL2YStcf93bqLQ5\nVqYCcNbD7EU43QHCmbZnc7KSP6zfhlnpFnozeVgdBYwgrxkPNE/1lG2cKJcQ\n81u2s3vVcq3mqpXFRiRnokrt81rmWlRa+SrVowVVMRoCKfgOWX3Iu9AFd0GJ\nxWT+mmUmel2yyCGkCP5l+OwVdvp8d1xBiAAllKUUsUiF5buCSXfXCllvZDgz\nrqzQXALEJIo/eSNBFIXHfogHf8bujYxmcgxaphkfODZEzsAjJ7zRKfZ7Xj5q\nWcgUE6UQjEd+45rmPexj0ikUkEGvJU8YwKKL3fgykTfFNnnbD7yKflDTr7dl\nYSCr\r\n=NXXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/tokens":"13.0.0-canary.12f5622e1.0","@material/density":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.12f5622e1.0_1629847152843_0.6673090431209132","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/switch","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56a73523e66d869f21a1d89dcbb9588c3698a95d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.d97f8f133.0.tgz","fileCount":58,"integrity":"sha512-btGuUNhmJWDKD5sf/d+2VzAsRU5StHuaZey1tnDedDOk1GpA+/KoCophITUoJNzB+VV5FoYyQQYGqhBijfcoWQ==","signatures":[{"sig":"MEYCIQDZK9pAU0LL7VUvBVBkpag/6DXjJLGiKQYe5qKl9HilQgIhAPbE8ORhjVeDy40jYWXuX7XakuiS4PwrWbdHO32T6Nbo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":719790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo0lCRA9TVsSAnZWagAAv4EP/RcaBm44GjC9ixWsTrPF\ndJitH/ptLCkn0Ertk1fDWGMyVvQMrJjmcUCd4k2SJFPxfR4AYEjw9rgHzuYG\nho+JOO6NGq7TBJPZyyHNp7LjW6pzzi6G0WmbuqBN8jfKSNqqmgSyBpsaeuVw\nqb/ftK3K3vKzYRIhgJNBaVbhSXfbSk1kLuG/46l61MU1cqepR/a7Aj1CHZ91\nUPZkaMgtiCP+8aqno3wHUajHpTqVrgJI1+wujfU0gCzObmBY4moSfukyISi+\n7QVawgm+LGeCQHyvJa5PRtAGhnKZb7ybaU564AaeQeCygFtXYgthw66YYXcx\nGD8CwtQgxV5mp7qbleoRXxO70EzRKzLG5TATNk/VXCBwpv68C92/iw6sNFfK\nNEhzmVXoHEct5lK34KtRihAqqdj0f7b62GP475J0ypv7p2SsmsiOAGfkgBOG\nSqVdOT5PnyTQeY2FZqeIhQ19EQEpc1Q15D3Z0rNw96F1bZ/OF4hoS4PWSQc2\nBRlhXxURfedUbhmR51b/N+c5HN3aVp4lyWNRVaTYBkZuuKa1qZvAHHP0RJ35\nQz7rZcA3wMkErpiwOnexs8jua2S1g0lwPBBwo4yXo3llfJNv6cxVR8RlZSjM\nOq/6ym5g02vgIahWMNKi7iO/3rb3uy8xsYa+clhCuVVJisZPW6N7x5Yc2HQk\nLZaQ\r\n=zn1q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/tokens":"13.0.0-canary.d97f8f133.0","@material/density":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.d97f8f133.0_1629916453511_0.7158016431768244","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/switch","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2df33e0ced7eabc6525975f56f9dd2eb34c8dd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.d86fb6fac.0.tgz","fileCount":58,"integrity":"sha512-I+n+v6Co/0zgs8k4P4pQ/WIHJwvJ1uKhYBfU9GSG/Z7kHuyHIp0rOJ4g8AeUlikNg8xM0bLf4kQznuicZ/Rppg==","signatures":[{"sig":"MEUCIF7RushdrgczB7bxMf1E5FkST6vJ4S2N7a7AHpneV88YAiEAywnqmh4SZfwUF/fnurC+ipdZr2KOl0w8o12zouDC5CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpH6CRA9TVsSAnZWagAAe14QAJRseCLhBerpWl49vaLi\ngQh9VUeaKgmHiXGzWLBgIIk2iVJVLhnIBjW6PPLrPM+uIGIZZtB+wy9oO+D7\nUmtJW7CQvUphkKnX5gTein5lkTv6XxGiq493pMbLGBgXOvFL9wVx75FnZQlB\nG5gsHZCQzonb06ERECRk33eAAxQiEybh3TS1xkbsxR+tmnzPEUhRd0Vfb0L9\nhwlQx9TPgQA9hIgW+xPwzsUJOVD3PkGM+VkSR3cWGwJfs2hYipREmZiLJflg\nGqpByj/BqBbRRxr8fwElvnfHIb45r9Mhjl5yi9ZxMDeGRQth1vJzoqMJ3Izy\nMR6ekf9VXadlEswWpPtyw+ebYkIx/wm8eoAMbZEJeNlbcrEWb5MncY06P8Kl\niQyNLrQekFvOxyT1MF4c0QJpspVdvQejwEcglUClX/jA72WNKOrZF1T/1biA\ngWVgyNRPjD9pSae21Fyn/h7/TqB8QkqP151ZCAEL5i0txsaTpRK2+NpS0gLd\nPEuSncYWKShatgAPd53QM2QNdEAtrK90M1Vl/4hy99mQcV8F7E3ttqGlEMXq\nlfD9MyV36QjhhCdVi/S/Vl/Oh9JeKQ7MTERjpz7H98BiSB01BfmpjHA1Sm6n\nawqhzo0v/xlhFefYYSIcXurgeqK5dg9wYzgEBRT7Qd8Lzrns83Tp6CEQ+Rw0\n9qIR\r\n=E6b6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/tokens":"13.0.0-canary.d86fb6fac.0","@material/density":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.d86fb6fac.0_1629917690105_0.6324820805610256","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/switch","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebb3e24d3ff9bf9f3759c70c1230871a7da4f9e2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.e8554dbbf.0.tgz","fileCount":58,"integrity":"sha512-bMTmlpdFVycZynB/OgUlPdu46/DOnVdCswQG7kmICsenIJDJ1WfKzXINaLKUAdMSxLreEui1XH/E6nNiQZxc6g==","signatures":[{"sig":"MEQCIGX8kOmmu/mifC00Cq567X1FsUj/QAoEdnu4Pms58R5SAiBjSbqbUGxbmd78QwK7Xpkb/lmZzn/UH+EoSSTMzPihgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr13CRA9TVsSAnZWagAAtU4P/0sjJPFRTE4b/pviag6u\ngk/0IKqd6TALBkx2fyQ3jSCkj1HqahkeiCccFGXONLCeqRqiD+ITSuqjs5E1\n8DBcSp76VcHpH7Di9gEyuO+7/tYVeBZQp+olY1SawP5NYM7zikHbrtFmt0e9\nvxGohmdeeJMRRaSmEbZ4/xjcYCLUyx/qoSQDKIChn+HaRokYMHf/6x2ykVgU\n3MhbCAOjrpkaj2J5//0qdSPCmcp7QgzKsSIIa/OZ6hXEV0wKKp7atS3kk+ao\nmvQXHcAZd9QCsudqyNLY3WfTHWmZi1o3MxMuolkwFlAG/jE0zfUrzjFib6uu\n9RsAmreHmtuyUAaLs/V+DPwotqLvJHm8jYwjhAecOym6aoXRSGR13mmgH88R\nJ0VT653/QCFVXSsdZCdkjiKOVPNWLK+AE81nfANWBDmxVr4CljaBshyYQmeV\nArVW6QdBP+lO7KHJ0J8GuzZDNBeU45Ys6THT8XqDIvXqjm8qdKBm91UIcL5V\n0wwawTAm8VTQ8wwpVYF3v/Nakv7hxnZTKDfogNxynFnWcct2oBy2YhrjHOCP\nwxU2hBkwI1YxYf7qL+zG4iui1/eqCjjwv59XtM/QEalTzvEC2fQQ3jHLOm+Q\nsz0FP09URq4Gr5jwNak1/LNTas0R9DAgdvq3vbcdoU6uIMdke34ggYxiNvJu\nkqoQ\r\n=1y50\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/tokens":"13.0.0-canary.e8554dbbf.0","@material/density":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.e8554dbbf.0_1629928823369_0.13006113541567088","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/switch","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1881993e7f5f1805a8d5f266221efbaacc6a3ae2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.877e3fb0d.0.tgz","fileCount":58,"integrity":"sha512-o8Vvy3hr+mtvYyUDqlEAeLO+9sJI5l3lmOQqVPyK4kGVu68CRM4YHPkDOTMUVDn2Lfj/6A5ZpFY6froWW7LxPg==","signatures":[{"sig":"MEQCICMwfZ44BwnqX4lHtQgiDXn+wRXNWQ0C3oyA0m7V09ROAiAxz4HQes7Jb2b7p7ZC82HXNpbDLJeW9+GIfEH9oMdT9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7WnCRA9TVsSAnZWagAAwBYP/15SLuQoiF97+8bpKX0X\ntsfy5tS7fVmFjLlXpqP30GKHRuEtrwUL4jO5tlKZ34f+7kdXOZif9TuqaXhz\n12m7GkDTAW7eq+ZqLrtdqyUXOjOJfFHjyYprbaQSs0GCiwAU7rZS9XiblQBD\nfp+/4kljO5NqGxkTzMJfuw5Jq17qJUb689KgO6gQj+SbffQ+BfQWeQoQ7DiA\nXKPxKKuMZnwhj0Z3tenDlXmIQpSaZatbPVMCU8udxv8nRPzPF9ZeBH1afIdq\nQNclM8xr/EoXCRX/5CSEPx6T9m7q9dTNzjrzdIoSBIoeH+pARDjMd+DorkY8\n3gOMlavTdH0zqK9O7XHMEBrSdqginQR3oJ2WlQ4RLql7H+8wkHz96u/LZ7BR\nH8qK/DyCDZ0kiOBtA1Nfboqw0qlQHu+fLuppsd85Ud4ycHAbpPOer4Ba7dx0\nISr+jDDLzwKfeaPxG/K1rFdEnZ8NL0kTgU562PiC2xW3xsj9ST/OTRS7KdcF\n03BwmOICYz/zQrJP9f+CMgEK9p3v6P7q84MHe8sFIbUMID0ndAmbbB3afW0V\nt/z7D55BGKYv1xig97yPOalfZ+apS1Fua8/N0+ypBExPYxPnlYKJOsMxR8L1\ntiY6wVgUrfPaR114a50oewH8R1/GRb58oYZPdUau2Z8pLNz363NM0ydBg8xB\nU9zd\r\n=4KUD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/tokens":"13.0.0-canary.877e3fb0d.0","@material/density":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.877e3fb0d.0_1629992359017_0.3312057257745906","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/switch","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.6236f3576.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5227b4c7679961574cc8c72161ef7edf1d5a6236","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.6236f3576.0.tgz","fileCount":58,"integrity":"sha512-uTFpEEAEjjiyvWqm5GFS45G4SOLMr6rT5dJi8W06dpEnME2mqL1GsLN/o99kq1wwuGlQGV2ex48Vuz8h8NRqlA==","signatures":[{"sig":"MEUCIHhCPM6r936+up+bYt5TMvXl5eCY71Rus62f5cKv3kWyAiEAkhUZQU93BLd8chyFk/m/5Iq8XYkLhF/aNZgqe9fYZZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7wfCRA9TVsSAnZWagAABTMP/0FSM2Mw/kP4R/P+fNA8\nc9gpQ2/Xa6AGX2XKlxQ4BNjYibFpy0R6CN147PqyxaiN7+g631cQFracUVnq\nURAN+LMIzQu1c8Dpinl8ykkv+p/z1wrsq/t5xHj4fvUEcrRZNbZXmTnU2CK/\nEdzj4PWfRph5FoCOILM1qJOdyr8Uoxw5rnM0300+OC7LomV6IAqoGrCLdCJ/\nZ/cVrUCo5rpFaHxOXgvlb2CdkTe71awu7YBi4V5z1zJlcWQF3xDWQ4FZ6tOD\n4hJZ4OtbdlOMN6B8kQZkphGnEIz8v3wRo5Wt1o6jIM5lin4uNCtMKdL4tHwi\n6u1mXMHjrc70WPHTh90KZiHxFiNiTZ3oSPhQKqPDeyccqkcIRvooBKKzGmB7\nLyc4Or5QBmix0uW0ujYPDhjiSmiYwyzqhbL0YVmorgK4un1bw3evYuDj2noN\nLUNooVnZMweUnQa4WWG3R2grwH87XIOuxKD+TeM/bivi43UgPU7JX0EDJweI\n8rIi7sYlwzlvCeMcRZUubPtHmurR9gGDpR1eB14bq31NAIzBjq34VJwxXEz8\nOgZRH9nmSxBEuCGs3LQU7nqgZ/XrEseuHaSpYhfomeMQgNxX4spen6J80UvJ\nN57Ic46E1VXLqT/RGvdM/4MZIpT1xYY2FsHfNE30Q+Q48yYh5k4u+m8Ao14p\nw8oc\r\n=BuF/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/tokens":"13.0.0-canary.6236f3576.0","@material/density":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.6236f3576.0_1629994015265_0.1444128062685559","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/switch","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3423163a869189c0e63726baa7982ba4c3f26f5e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.1d19158a1.0.tgz","fileCount":58,"integrity":"sha512-S0ssC22sBYBEmjQdgkey17kRCLWOOt8uYrR6q4moM01SArLynrcWtQ7q6Bh7MPw5Goluvu8lkrAbT+Tkl2wMiQ==","signatures":[{"sig":"MEYCIQCJyZ9PWe/LxXsgBYcqaenKuBqzaaecVb8pxE1Os00AigIhAOm16Bmbm+CwugcChvWZLBZQLb8NRb2uJosJYi9RapAS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8r6CRA9TVsSAnZWagAA+ZQP/3T2AnXyjn5kzc2c7RQK\ngZZDEuBH+pkDQ7BLCSw852H/Zk7OEhp5scuG6jcCAZu9SmTi1agQNO8nULc0\nIZJsdN2XoNep1gXrS5W+s2j109q1BXOXU1B2bB2l84GMECHgdXKi/93UsafR\nGbEy1RdcoqiuH6DewS3T2CXexiSUmdQk3xpU47R42ay4SFxkonYH+Rs0rBA2\niFlC/tWAV6T0oD/TbhH4asuLGafzmxUAj9tOknh4sIzsmB9I100tM92IwcqM\nS/uhxP5Uf07dO4GEOSzIc66iqvI2QkDta6+s2NyZK5s2maxiYIU4EuWu2N+g\n9XQY28Bs6fyYnM2giZXH/KaSVz/EKHqGYAaEm+r6MzYJsOu83gib8ubqGYa9\n2iIQVPzSjt2EjQ8YVGpMQ44NcwGElEy8Y49XM36vSWulbK+EGBGp7YTP+Q5z\nKkqxJRbhGIdxH0Iw7ec2K2UCifA9nzNjOIj8P9eX8WBhlOkjPbZEDvL4UJCu\nQE1mRVcxyj47N546sexPjRVqYMBvRS1TgMC7N/aIOJrF8jE37TmA1iboxX+4\naXvUP+gLTztvnvkTWu++dYltKrXBlUh+ne0z7c0X2wGRN9XqKctHgjGZutBQ\nAEhymJEUuUt6PecrKeXnxhxpx0gzvET7L03d8sM3VLlckDzZo7FZeCmhOZXQ\nEh11\r\n=L6Gd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/tokens":"13.0.0-canary.1d19158a1.0","@material/density":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.1d19158a1.0_1629997818678_0.29204459565909424","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/switch","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"980764cf7077dde0751d759b90aaf8fc9080e9f5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.6adc9e83f.0.tgz","fileCount":58,"integrity":"sha512-/4CcQnkKBOFumbWcsLbxlztu+54UebK/9AwCWF+N0gt7HZNqXN4xej2BSc/umBSXORStpKfMtEe2z4zCojOUmg==","signatures":[{"sig":"MEUCIQDUIPV1RCSU3YSM7+IXzbxWKtmdvc65rfncSU2XjoqaIAIgfmQaMlUaiorGowMZEi9jkmyn38FKoYqtmzOgQ6VqDU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV+CCRA9TVsSAnZWagAACGMQAIqV3+F4J5RLT7tanAsM\nQGcVSTPSsExbFxTCMeHwIIu4nR5NKGXF14O78J2BKqaX7Ip0l7WgJCShmaLS\nbTPpzK76pId9JcZ30IHv4OADDCJblpktL7yF0P0T2AuZvGgz1yTk4IduTKpr\n+Xy1vgyZQfiWclCHEygQz+b6dT+eEk9fLTZ7NYNbEnDDTXsjh/h8YPz1C6+x\n9lPFaUU4jdfoOsSa6/tPVqrQoQT9qYBVC/uxies2tdqTL4KzfylduQx2a4Er\n3H1osFSya1zbrcQNxjDAEHqlPoOvBOS5xSI3Mbs4N+DPNvMh31gCFpqrCjvd\nDFirPqHGWvYfBBexaKA4tFVRgEv9Cr5giTIeQQa9Pi1xa5gQZabVxCifRPV4\nwSocKqACOdpHX/zzkHbiZGye0ryr94Uj0IrAqXJ6TlHUYDAJo03sbimc9GUW\nXSnCbGBOQg+ggs83vEWg33bVnmGf7vykLRrJMC47W3N1LZf7nbZgHd4LOuCZ\nnE5k2NOhgWGm0h1l+yRnA6UGOI7EdxAwbo+ycmdSMRDRdOHb9oj0pxSEzo/Q\nk/6yAt7bSHoCKGWPhseVMk7tRX7bILSK4WR5cSqSibQvnerfZnXnNCTkYdme\nlSuixcX0ekpGfa/XdF9u6K3FmYa5CR2bSSuRkInXsXF+FVP4qrxrdYSDpo0D\n/6xU\r\n=NlGm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/tokens":"13.0.0-canary.6adc9e83f.0","@material/density":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.6adc9e83f.0_1630363522791_0.8324990567232939","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/switch","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.d082790f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb30067799adb8ee55ef45e5d85e42e52e2a8871","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.d082790f0.0.tgz","fileCount":58,"integrity":"sha512-uq8Y9p4xXXAA5nzk/rJ2a4rmYYIloD8cCcLrvSW5prCi3CTv7CLwFQEsI1xJpsq6pO5wSfJiYt5ZFKHdbBZlqg==","signatures":[{"sig":"MEYCIQDl2pZCCHilQCwZjxbcgGsbBJtHwSm0+ZNn7kJunoIxxwIhAOwAE/vvBRL0Jlc512w1rDzXNelQNV5nwTg5v3DSbmet","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/bHCRA9TVsSAnZWagAAHWYP/RR7MW8+VimnEeqZz1Vj\nfB/RL8im++boTmPP+baj69shdPA+tFRcGPQy6zCNUFTfhDZ8X8+Gkc+DvRMi\nr3rfTxz6sahp7EeRSvyyfyjrsWHBIrAno07uFU0Z+zOVteB9PB/tgUR1YNQo\nUJhh8k3HcgHZVV3iLZhH9Cg3j4QAL1cP8FxOzDOvjcZvAQOPoNny4rChFyAm\nMC3aexqAgOn8kftAWHzJPpE/ZBdaMKi6VTWvqSqmfrH2yMeCf4vYTIm+GnZm\nwo21IS0Mu/028Q4lam8zS3xaOXYJ4taSeUdEV6rsPwCGxqhelUVqBG0FtsmT\nQhoPilw0WEjr7oJ1epz7W2NU+mVCQsBMTMBtXye9MW6pcQzjqlhA+VHvKvbo\nnrAhNOzGsI5wYdrClGuMncGs5TZTZK3u7g62W/l6aywRimJW8EyQHFVfpO7i\n0obxCeiTtn43NQm9hzT1L/6QV9PWDN0dsvcpvatBCAJNfNLl8UVjUKJpvwA9\nJQYPxwEMP4M8HVcf2T3faQ/Ob1CrdEe3T/ZNs6vWb0TaKLLskuKvg74Ws0G4\nxZc461lJnNBzMGrQA8lZ3IVszmuAHdkVhZaLj5iM1wGgaRC20fAzUYMCt9e2\nurEFXIL/PTXdvyun2CWOeSl+lZ+QsNrvPBGD3f3Uy3Bjzp8OQesu32uPzp8n\nqC3x\r\n=MEFj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/tokens":"13.0.0-canary.d082790f0.0","@material/density":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.d082790f0.0_1630533318783_0.22325058980129642","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/switch","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58e6dfa5d40137edd9a00b971725a0f7b527a0f5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.e2c4f0196.0.tgz","fileCount":58,"integrity":"sha512-p0+qIo+3VsPJceGMDGmRFXagsx81BpX4iFD4SRqc6vKfKlFVI5XDTOmlkLJL6VKeMgnAaqzq2fW+rU+NvBBOIg==","signatures":[{"sig":"MEUCIQCnfcmNnwdZXTOEOrAeSSnDSMYY9xMAcJc0DpozEuszOgIgEqx+t7unI/FhShCW2hiW95vDcl49B5JxpL6MCGng0J4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDMICRA9TVsSAnZWagAAeY8QAIXv8kLN1if8PN1cP+1n\nncSz5b72yEq/CU0jNxZ575XfQD0ZNZ9rgs2/sMlFW7J3G/8oT+o1CBQVUvly\ncwd8fVP+V/ZlqB4DG+c83e5ZYeWUWZqWrMw0+5wFVL9MOy+QmOyxeFS52EMM\nh1Qstbfc5OSBQfJGR6rf0eAE1Iw0C7C4mEH0UH/76x0MU08d2EoFLh1XVHYg\nqkcdPSIZygX0a+lN88Wp7Ct6UMFh7eNDzmbT6hWxV3xSEk8Wti9yksv0fpOR\nIrWnw8l1CVorCmcYhRNsscbk0mCGILefXbtY7p7xnhmMoRqBtsqSb8toB2E1\nnScbj85QWWITr/K1ZxPuUV+TjtjlIC7+SfaojqMnEV9qKw4Kz+nJhCCdpx8c\nMVJieoFkbABlHOwPcNPfHSrb2TSkft1GIyZicPZuhn4ONYgBxzM8O9+gbIf4\nO9ka6KZ3FSjjOxTQc2uYBFUsEkTz7i+8fs85rIJUTbs84XgPkKWxEb2FQb+z\nM0jPJzGpUw5BbfC+mZqecdNlZHFE1G6C9j3YhQLUZeooeN3zZpPoe2OHk86D\nxiPuKYaWsZ/ufK/Oop3VD3L2McJlt724tMtX98UkyKQldtHeptAZ2ezWmlTz\ntrQQ6O4XaejbpCnn+IigOOd+EIp4jr8/QcMAwIdhY0DeDdhIKELYn2hcSG+f\nRI+0\r\n=8OdP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/tokens":"13.0.0-canary.e2c4f0196.0","@material/density":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.e2c4f0196.0_1630548744268_0.24373053523559274","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/switch","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.611db508e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2ef7bc15ad9d8d2b2d14ef0453cbeb714641c56","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.611db508e.0.tgz","fileCount":58,"integrity":"sha512-f0su/gd7PhwkvRBhpL1H4fwlMKDRdS0beICsN5T13ppxznJPxzBCaQlWTHypYorm/kYV/MQ5axMS7ZVmqGTQfA==","signatures":[{"sig":"MEYCIQDQGdwqwyT34+AAIT4mr/s0QUVslqD+Zx8BHLy1Tpbg7QIhAKnMlQGdW09giq/6u2iEbEpMnpgeceC1dFF0osn5/P1g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEICCRA9TVsSAnZWagAAGdMP/3/gq5IyXdS3K2xcZFXG\nebI8xZhak/VIP7BE0nKsx1LqE0H8xcZwvoMUMLL92u+idFKbqL7gywQJ0IW6\nAaox9NDaopafAZVY9MxbtGKkNBoMx++VMGqUy1kw1Hh7hsTtuwvyEZNcnnHE\nGMuZDeKoO5cgimU2R6KRrIxoVd7XdFpD6nY9cVJi/VXeADPI1WnCnrOB2m5N\nFPotELKPEnF1uAPWZGnIK9VroTB3GYq7AZ2aF7C0H7HYR/PYYuz8NIn8NN2B\n5mEDK3qnmy846xc5FCaKgRWOokZ+W8RUaPd5i06Oha0MDaZH69DhGEm3flkH\nGoISH+UuCTvnz/diTIGg0BW+RHaKoKpfXZLfMp4Hkl3OFHectaC2w1jp5bdk\nLqjsBPdaJIq+U8bOHIsWloJi38Bdr5gGbrZi5K1z50G/CSXtF6UjU+QlvDWX\nMhq2A3h/I0PhlJdiW5fLqKkb4lYJlt/K3apveksRPFcX6MZvu7ePP4I4WuYI\nl8b5w4r0M5oLFXFBqzLgBR67rZnG2lLGOX5ZKoWdvlx3VtDsSESjg33QdySd\nx5HDWaoOR0GPXECivhRhdVMcIwcq+xSE4zKgfymFmR+mjSXXHrAqvM2OAye+\nkWLHINxETbDEuvFCK9wf68lsAX/OKFND8ItMMQKcA4XFiQsESM6C4a2sELNI\njUJX\r\n=thlv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/tokens":"13.0.0-canary.611db508e.0","@material/density":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.611db508e.0_1630552578196_0.5477643708107229","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/switch","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.d4706933f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cace0b3acf0e1ec48ec7c1d376a936c3605c9e9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.d4706933f.0.tgz","fileCount":58,"integrity":"sha512-k6tvKb83IWH8i20A8quZW0xZ/JC27j4kB0QSsWeaMdmKdRcDciDziEgfF7oEe5KrJqK39lVnyVuNFWloL0sbHw==","signatures":[{"sig":"MEYCIQDNHVU4dM+MHdHyb2F8Vnd4+r94ogpByzahS9j0PY4cVgIhAIMOcQchizUB3zHcdelY0C7GajRjqeq8MhFIGRFX1IW0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPAICRA9TVsSAnZWagAA8UsQAJSPdcUR5qeEIpa96avj\nzzl5jFTpxPAU6cxy55kUAiLAw8JvcQJeKbM55ZO7+kXVksugWdarLvrCcnu7\nuro4x7QgSjBfOewRiQE64YiDWO+maelEyCV8Bwt4289R/cyg2KgTxARU5a9O\npXgyO1ywfmH7AjrkxH5Zj+PcUDE7s5Zr7owwkqXwGi21pbXmRzG6JFzVLeNs\nP1Mex4LZkffOL1N2GadUvY1yr7363IbT9cE5AhzlUvuGquc+3oIt+vyLb0ao\nrdGzpgOdbxhTUH4QJ9QLxHkWWAAA9o4JfGoF+hZY6tCaOCXnUdrVEF7zG3ZS\nq552iGzrCmaHnyY5WBAYpaRMKpPQI9twzlXWastDkE3CvBEghOgxiXj3vYiz\nS3cBW/5bkcwd7xB44PIEgIy3+lRkbWTTL5s1/lodDdXUBqVox196XVedxc/A\nLEctCoyHdqrNsqfEEvXkk9uoXONqkCGwXfWme1Jtd4T28nplq4zsRE23Ic/D\nWOvc0azxN2XoO7PQevszPXFgk1ACbhv3qUrI80g74i5p6UnFM/B6bCAJSUzo\nYELDCVH9izbTpI5Lc7clWxh1xPzXik+r3AulqCHQes0XHnPE/vq5tiqN+bhL\n8hk7+sOSsx8FAyWnBqAqCLVvJSGYYZcQCbD2SRt8PE91ZfJyZhZCJUnTk6B1\n3WpA\r\n=dQRG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/tokens":"13.0.0-canary.d4706933f.0","@material/density":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.d4706933f.0_1630597127857_0.15517693440886404","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/switch","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f64bacdf39879e6daf9b0b2a98984f4c71c01b2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.c16fe03ce.0.tgz","fileCount":58,"integrity":"sha512-IL7dRx+c9XLg+xT+Hn9PcIn0rNglbzeB6piHGSNePrH58QtqBi+1afUepv53YYR6tpiuD7jQLzDQzL3NLajb3g==","signatures":[{"sig":"MEQCIB0BHjlj/527PW+ZPdcZAPPHw2yL8tI86dKkKWBCxA+MAiBgafee+b2rJ9oR230gQ7OYdH7TibwScy2sD0I5mAK6Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ3JCRA9TVsSAnZWagAAXQkP/1cDqkAPHuhdV4ycCaRt\nPAYhg6K0TR7yAkOX6sUImylFJ66sQae6X+AcuhfzNu/vhxi6QBJnBrcBmOF3\npoqD1QESHW5zNQflfux0zgf8PhJerjqnTQn8ThtJ8AoeXtbu13/7TABANnew\neKr+JAMzMwTFDnnpdvlFK2LRnbiDoiYytJX/kr49RrKoe3sxxPL8cT5t+DIE\n6/URgh88aK1j6KrseZDCGW7BzxDMHJNcqnUinHDg1oxLTgWJ0mOSSv8bDo7P\nKanUoHaD27VL7A851FbO58d9oc/hVRl3JPFaDLvZzEe/IVfZ2Kyyhn+j/FJ2\n+N/jjcFQZ4tvJfgTorKG4Ecddxo2Mo3+9Y9YTit7pwiaARwDY4pmkMqDIRK5\njlzlqOwpuTCdI+zzlJKw+hJb4de1+gTL/I2iEmvJqoZohZQYryYw1AiFXijT\nq44UB4bN5XccxIKpBmmdXo75XH3mIm0hJ9qoyrvWjNGFbZMAwMKaT558w5Jz\nW/LKYrOkcgl3yOM7Kb6Iogc3N9ar89M2Mbr9rhvNi3jtCFKPYkJ1mW31K96H\ncu6ADCcPdH6P6KUXNjCJmkxcmtl9Tt2UPgwKZXJP/Xm1q3vCGxx1mV0+RSyQ\nUuNanhKVPU90tCRVyS/ChpeW1Jsx4LIqAGeGiJnnJxVItWeN952sABpmDjTg\nF7F+\r\n=7DZu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/tokens":"13.0.0-canary.c16fe03ce.0","@material/density":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.c16fe03ce.0_1630604745179_0.08634941762809545","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/switch","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.9203a958a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61abb517fe208b65e88f41ca2d48308ae8c52326","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.9203a958a.0.tgz","fileCount":58,"integrity":"sha512-XsjodOLxnFyOJJkDL1wLEccoyFHXeVItHVUy/alQ9yqPuic0o4zfWwKc6DTqALgbE/jqyZXzNXLkVuW/q815+w==","signatures":[{"sig":"MEUCIQD99UIBaSvdYJbEB19ICyaCSepPaPLO4IL0K38gAAY3RQIgD0kRKHnX/+ZXb6SK1bLVXxK7ls5JPHadp9xRU+kQY5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKXCRA9TVsSAnZWagAAXR4P/3I9VB50tFhAY1Bm3x7p\naFVs1jYIv7kLliF9x/GZ+mIddZ3fYPHKZc+8FkdxIQj2PsbAFpraxP+M8T3m\n7nM9lPRvFpyP7uM5/kWl8mU5qxHC8qLmdqQEZZFz2wZ+/PY8+460MPrtDrn2\nKEMEiMcz7d3pPIDU4EynGACP9RbLD5lY5wnwVsimR9A5YOk0kj6VlwebeXNt\nUKTUx90bbMESF71bhnl6av8CPAkF763jG6JC3VWUk1HfzFab+Kx2uHKRyQ3h\nGLVerFntU00Y+lkNgDkpnibDWhXDdssWytyoKchOHHxmiO3fo5l2bOFCrYHr\nT0FGNMjxeUapzdXXIsx8U+m8ccTjJFRh6sUGpOGCOcBLTHh859+QiFOEFzQT\nvOVlPqupD/yiPG99qPrh5j98CDbrT288waAidGnesQKl2oBh6esHeHmqvoCY\nGrK8l/m9lQF+CEhnyIbwlnVu9LhAhI5CBP7XNx4abjGdH0fYvY5YjcbISyFv\n82JE4+G2unF+fN6FQhDh4oLnvWw/JRYU6gnkAz1r3zVBG844m79zsBdIKbOy\nqDqLKFY9gT0pFCWEkQ0qVjcmSyeT6PQjoDykeOe7a2o3MTyU9eMWBSSLNKuH\nUO9mPJ7z2Dce4bMRL8q6N9sR5Zu1QEUYqBIyW20amH+RBVy0ZYriYjHuRfWH\nfk7c\r\n=ZiON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/tokens":"13.0.0-canary.9203a958a.0","@material/density":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.9203a958a.0_1630626455340_0.43053761667831725","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/switch","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd93891cb9098ae1045627263d2dcc97b87c0e6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.fddd5ae93.0.tgz","fileCount":58,"integrity":"sha512-AQspPvHoIODoYNN0uEH2kmSE233qX0BoMH3zt4IjJGo4Hk4wnQ5MpT56wg/3fPYrWPau0f9arnOdDyuYRlp5zw==","signatures":[{"sig":"MEYCIQDICRcee5ThlS/Z8R+2ie5b20v/on9mEYXbg5V1lbBlJwIhAISzrr5aOe6FSkvKKnaHck0+Y9MIV+nIeUKhSLLIi9p1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":721935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9FCRA9TVsSAnZWagAAcx4P/RYKl6ttOJhmkzDv1i9X\nWZBbM5TEjJg3hWIKnnsLeC0xrotDJb4m4gj2rSu5nO7nMxs8Y3g6f4WXB11a\nzsEjF5QKOHSMiOcGIxhYqtDeGfvpmOd1B96c+KQERliZO8MgwrV+o4SCqy+d\ndZ2wR0cKLVmPIJWzdIQbke3Rkia/RGFya6nNtYZDdAngiCzUIo59LwPxxCif\n92o9gX+bfsK6lgRTdepxInbvLBQy2tD7G/eD7VbE172JplV6CsSBbRX2gzP6\n0DNeres0E3xK1nTkeQyXFFrXG6BPNKRKFW93v2z4GRyzyWYzSa7KVwNqTbkB\nq1ocB7q6jbVoig5/zobZlvqETYGtoWS93UIpuYmvXwb6ahbrkRSJiuRFwCn3\n5unckDOq2Fth/hO1oFsSCk/DEPq9P4C9RRTNxyJodJ9KfkhZwvnbpV6S0uP+\nAOWVyYNJdKAVodBVApI7P1MCuQfCKgdrqu2oaKFq1VP7cxTgLGP9RaTDbU/w\nFV00N5dtimHYWbUo7/+Z996F0Y3kOX60oVEynDJtJhivFBksyWpVO4zElagR\nmvO4Lx29343q1mhMY8aKpgaOMoERGjeM6WtBFYwboudDVdgCmZYMyCodoN+F\n3p5goJB7A6KNcSrnT0ZJN4zEPnd3vPb5c5QdquUoI22wNTnjCRX04yQTKgky\nsZso\r\n=K1Bk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/tokens":"13.0.0-canary.fddd5ae93.0","@material/density":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.fddd5ae93.0_1630654277651_0.2647433284952463","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/switch","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.117599a8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e0b51e8e0f25fc711329a66b3a2b4001ed9ba5e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.117599a8b.0.tgz","fileCount":58,"integrity":"sha512-WU44Fqnx0q5/5SYDIJGD0WQrAPF3vesb4Q6ixZFe2owpmEED2OMRaeL9Ya6S5290NZfOWBcYLTIGrAlRGTJ2Jw==","signatures":[{"sig":"MEYCIQCL8yHsbcjm5y0STWqgy50/Rri2/p+7RiubiKhNFd2R1QIhAJId/rfv1LxFrv2SJeVT56SosjgLq90Abmu82rhNlvL4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+lCRA9TVsSAnZWagAAYnAP/iIBvoZc/w/wJVdWe+R3\n8idEdlgnjsMsG7Pro5SCdBJBAKRkGfVYcaNWZYPRgxZ7RylRD9jwj+pFQvIr\nAKFRGa/rqnwgPAtxq73mtdhc7s1kPxlWbk56vTZvIUqZsE6lNKt0Pk/Vb7BD\nkKyz8+veMGxHgqm9Tb8LhJOybTe23FfCAJClfull7nP4bnjXZnZEWLJAIjf+\ndmWfdBMO0LbM1RfSLrwN2V16GX0TydtmQusTUtk/quQvRQEQ21wUWfzuoTIc\n9tNfUHIO0g7EAm4PjuRiROl6dgwh348MqHkLCoNF9K/SWpIyvETKHCTPdnUU\nOWRu8/ee84nx63WiGNiqUQV3rrYHRYjxSyxKeTn/CtTBINsNN9kxWdbT6cBd\n6th2c1GtzYsaz3SJgg5fnnuxlc3/84hx/5uMfeGA7GDnDjooTJ4S4U35nprd\nRZ7+eICBxstnnsbJRVPWm2fm2TnqbtkCLuIP29476cIowraoDQ+sL9V54Qtx\ntFRqTaavpFiIjcH8hA07QkYtyJXkiIc+BW7bChOup2ttj/Fgt+UzQ5ti3f2J\nJwwvos5ZI8ILLHHcL+umt7Jpl2YdN5+9Dnl9E5h1PVvMNhDw1jY0/mldrseT\nlMik5nDY0fN3NWdknFHrmUp2LWMdXIugLeAZYVGSGaFuDcw3UkB0Fipz5YrI\nOPAk\r\n=lQzS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/tokens":"13.0.0-canary.117599a8b.0","@material/density":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.117599a8b.0_1630654372996_0.3957292308679885","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/switch","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd5e6b45158fcbcb50e6208313206398ecc17e8d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.e4180d07b.0.tgz","fileCount":58,"integrity":"sha512-9106nY52tENNn1LKEwiUItGPA8zEy58P+e8wltgLe+s6BFSCgb+EjMWFepnSy687jpsYuNX2MlCuur7k0iFemA==","signatures":[{"sig":"MEUCIGj38DhOKTiYj/IUwKEdBOnZiZyZFqz+zpqsfu5wvZWcAiEAxxilFV9aSm0Wdj6J2jukBZAbm+9PGZZYuiuooCKR2h4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+6CRA9TVsSAnZWagAAzq4P/A8VZ3i2UWKduYFgSk0N\np0rD+neOZwKEAywNV15Yrz9wjZIKrExkQC8fV5l9JoUKDfiWMjEjOkLCcPk8\nkgSX1iNlNAdjxLSsQ0+KAXsvC9yXIUJvln16S5sTxRjWtMbEtTBwGP96uJWM\n/e/IqGSXfb0/vRVNw+FyoEQP+KI/mrBBBs+c+uL+q7ae1gk+IWWpl2SXkPeT\nPRNkGVGnaDF0LrBboxZpO7tQsiz+r9hO2MuqfoBMv5UA2g/Z/NGq6ijmlGzU\nDQ/AgPbj810mIrF//IrXOvVWMnJh7plPZLFbI11m2N6RxZ/WxPGGVALcIr+z\npZ3Y2+tt1PmD16GE5/jC1by+hWSIitkmdreOBJfoMYXc0pG/ikio8zE17fQQ\n0wE32CCO/LgBQU6o9FVVS/SDTYNMG92+i5WbNtTnqPJR16two5HSSFpkwXYa\nZLV2F4DQ27N8SgMFlhvhnttrn5d9mt3PN+DH6qQx0BBYzD53jpe0nGOgrcLB\ndt7tdIbRe4JNjqv5c9N4qpMqcbTyq+M2MnNTYta6BmpofWhBnfOIp/JjhodL\nPYJGTMPSWGHUMYmTWs5IgOBVrgF+luxoSL0nlhBEQYgCBlaE37wvVi7zqdh6\nEHslNoS5pGV1sAVsNx5QFPghl2XF+AXB6LWC1XUPtOQZoiIqiZIDB6neThOe\nO4Xp\r\n=yXIW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/tokens":"13.0.0-canary.e4180d07b.0","@material/density":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.e4180d07b.0_1630654394640_0.5244819758529191","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/switch","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.42d175efc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"741cad1d0b8ee1b9024edda8bd6b84230e2ced02","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.42d175efc.0.tgz","fileCount":58,"integrity":"sha512-tPytDPuUWwiZECsXCCagESXUq1qpP91Gl2+blC72Lb6O+wdkjStrO9WqqBX8k64RLV1nlL3OgMrNcV4H/OSKCw==","signatures":[{"sig":"MEUCIA4/jxgeqDqc4LEUJIPqlkD/2edt17CWeWnGLg1AjiXoAiEA2I01QwKGh9HLIjfAw2AQD/MunHIxFzmHq4R1wMnMhMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLDCRA9TVsSAnZWagAAoXAQAJJrQXp9LY7EliBDsznE\nA6N2HsoM7o2WM6jOKaVgugkWWZpxtnUFRsPoYNrHf0lVfIeytU4FPmeGSysy\naPka1UwfqRWKJiwYOOKD03TOuQ6Gcat7mRi+JNTw2jsI8XPl6sUphM93Pqf2\npJX8XsROYHHO/YuEo++qtqeMVEgoEa+DZkUNJXULJKAc1xRRyGt2903B1eLq\nqfMfuOJ8NnqrgwCemTRO5deTTYz5TdhNzcNeaizFPOJY10YpYNJjdcKGdS3x\nLtdI9/A1ZbFKo0mPew4d+A2Iq2LVc02xMtt6eD55hT4ueILiposkHg4RFX//\n8MZVAhuOMmCYbjwv2gmAXI1n5zWzcqgQAZnepTtEQ1J3YbcTnq3gYDRmYmvA\newUmTTBIBGNv2/NoBozACx2V7amxYrekxrCUs05cKq7KmYYXtMW+HeMIYWxj\n7F+QfXFnKxwzwtHPGiTPNeg9oMFKWIgjkz4pzO8pn4N328lB3CV/ypsu4b81\nbu15sGD02UdM8INmbCOiT4lRpnKiWK/ZWq+fAW26mFOTp3qnKtmpanCnsdDl\n9a1xLdu6BvcwLpLRT5aezwFDfCAgyHlFpAFV9S16GrxJQawvFwjqorw5kD/F\nvO60TPHxAp7iV0qjLzUXZHVdwk4uMMtt9fLr7pF8j4cH3sl7JDLZK0dqFtNN\nh6AL\r\n=2SNT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/tokens":"13.0.0-canary.42d175efc.0","@material/density":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.42d175efc.0_1630683843484_0.298138132488341","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/switch","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.72464476c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"661a08fd4d2246fa4fec32e1a33cb7e66bdac67d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.72464476c.0.tgz","fileCount":58,"integrity":"sha512-znUY7NsNMXS0KYNhQFPI8h7BtokZLp+kgmNeXK7D8EK74HyP8qe3APRK82eN53nQ2SS4358aFvMRKlY3jkJiYA==","signatures":[{"sig":"MEQCIDRIy490pGxA3GHGieATezRSccKHsBKOTswyMwILY5pEAiBj4ju4382P1PhT94YT8rzORi/pw3BIvNd1hrwcKEZxNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4a5CRA9TVsSAnZWagAAJ4UQAI7Yihe0XX9B/fTaajx8\nz3lezDiFwbbB2SPQhsZruBTU+U9hv0D4T8+a3AGhHRMJhLEILzD3jRX0qVA2\numPaYZWEyrHd2uzpOHBCadB8alzEdn++BtkekNaaKTMIZRm6zX3UF9+bSfsS\nkNeVAxY8kCl3nsmrMvQAmtn0dqbQ+lIMVp7GF3qNFkH8x8GWPDrNLluV4o63\nCx+dYJa4W0Q0eCyL3LOFvre4xOfG9SECUhuP25c+Oc0Od+pxGgYZ+g9MJ77H\nYiEJSdroyT/Baemfv/8ai4W/0BQuC6JArZyiqleokNnm7RetfC3DsTd4ftQk\ntK2Ub6cLydg9zbu2MTvKdknq34Wnq5pOf4pcGoxdTwlFyMcNRSJZD5lCpD2Y\nWAaqgEQEEQ/p4yHZABxzb+UUgiM3rKwgOJ7C6HzOLzkhkJdckTTym/LqDzCu\nlSkrgE0Fqxc+oG1T3gHMIB4RdWzCgH5pHhd0wmV1DIfEEsDLQy0FxSqP7R28\nsNrwoLfs+tpsLQbjDf5q6OE1Ep86Z6cxBTaCPoQoS29jh6d/HzJA1y/XNC8l\nN9VXhcSv4C8U1ysPDle7W0duoZsvTsShOmheQdu71Z1W6+V5MfpZTfCiaNGC\nojSEfF93+L3aTRwC5G0u9ANeTSs6xY2dMv6bUKH8eoHf+c6l78gfG28E1rpv\nDvYW\r\n=B5yi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/shape":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/tokens":"13.0.0-canary.72464476c.0","@material/density":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.72464476c.0_1631028921092_0.15327790882305914","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/switch","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.37d4db866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ecadb8857dadaeadf69f8127b6f3b1e341b7878","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.37d4db866.0.tgz","fileCount":58,"integrity":"sha512-IEuABK+sh8dxwbedyQng1wZi+Rf5wuP9+0gvM0IdqB2Hc2LcS547SRtChHWyYQT0E2a28MF3xp6QnlLH+jYDIg==","signatures":[{"sig":"MEQCIHlgkMMMZWMp8pbkbyv7CTKKgXUe3PJgyafqJndIJgJnAiAff3krGkt1ZXw2g9pzBTB5mAjc6wgB+4i8JdIRNZ5g3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOht/CRA9TVsSAnZWagAAv9cP/RSi9Rc8jmRsw72Z6lcJ\nCaFdbYAEG3aA0uD3Uzfn0oCm/8h2D99lmeZZqJ6DGYpnv0tM8W0MxEK6BJa2\nueBiYh46IfCok9nX87ncGfrjLS+cH89QHCcE1gh9AtxqmxGU4IJV6/gmHMZB\nDYM+lb7tYjaPPJmzgWjDRX1TQQoWo6zjpFQnt1BT/tDyo4GNELBiQ5q4Uues\nysq7u8DgTkl5Cd1QLh1emy3a+ZMEu5AWHV7DdSltYUgZENJljDkNKaIcFu68\nnk2j4ozCKcmviLsTwRAfLbYL3Ys+vBjz5lLefVQg6HOBd2zBkd3q2H12IlhK\nWyTs+GxhiZ8RCPG2rLqrt9tBKeOKGT5SFeF1qlyZIcgFgwivfu3dPkQCfre4\nD9iyDvUczJWPy3rQ+8ydun547LymAMIC3tJI0ixYFNW6CKXJ0TYXLQ9xHijr\nIRT0wwd4eUhSru/rkiAJcUo59mnbABzXxavpVTZnRyt2Xx9CmXDfekGU5qTt\nH2+SwYXrE0VKNBKnm7zFDOLU3WxVsn7rVpFKriippldhkPsCB7tnUb0mk3W3\niN0HYRSS9+/woAE3B7SzRtbkpK5Qm5UCGCRnqwsLQUI6p8kbf7znT78F4TwY\nGEYxDSuyCEk4+OSXsflSwGRBqmeSTAYuJKWmqRLErduZjHZp4GlU4+VJgI4v\n7iSl\r\n=pob0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/tokens":"13.0.0-canary.37d4db866.0","@material/density":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.37d4db866.0_1631198078916_0.48992768064097825","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/switch","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.6df682e74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8519af1c4d527a84931f927fc2eb8ff345ccd116","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.6df682e74.0.tgz","fileCount":58,"integrity":"sha512-vVHHBzs0iReeSnIOGj+dYxwroXwOX3PMdQCdDN8SzEDVYGrSgWesoDX4uiQBsRPHgifQgLQZrBOgqO/ee4X1qw==","signatures":[{"sig":"MEQCIGGWnDegIaWx/xOjHkvpSgvTbKDmUW7w3370Iz6Ypl2EAiAZaTWDpM+6i5OE9ZLUG/ZASRvulJmBYaAzPGXYoWR8Kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivWCRA9TVsSAnZWagAA5rIQAIwJSsilXTrqZiCKSFci\nUTKxk4WqFgLFLncOv551THNJCo/+Fvi3Lkv2Mj3IT74PTLR+GmN4wZIiLWCQ\nrTaEcgIKqn6FB4PN4lAFtu1WtVbyhdhddXY7xGvoqi4+217/yYdThiSTejG6\nbOG2mDYWI4haAcnwk4AWahoNlko3xpoxYbymP1xvjmKVU3F8rWOdgTBhdt64\ng1DN6qYfgyIXTXKrMpv1CJq/dtWHkvHFCM5+XGrqFAHQhPiULdnN14bw+3/g\nLCvJkPtXxZ4U1Bz58YlIsn3Po+uG8xmvG2NpOh8Afj5KdudM+ZgKKMOcB4Ka\niNWtyQW/bwx+3QwuK1MPS3pfiU4fSI6oCXLlwtDBuTL3/tDJ7z9TAph2C8Dg\na6U/+d7jTaETsg7A/W8jEqFBqYTEMW0QMgHdJL20Xm9tG0RwnUXhPE1noH7e\nh/aESld7KhsQ77xSnxFIHSEl3jacC/p5T7DuJ9P2hfl86UEa7DfE0W/oNQwG\njBLIQFU1LWwroRd0m8yO3heJtDGnUzmDUBN4KIDkouvh0ewFQO2MMG+mayOS\nYNrSBNGEBw5cPfre3VeDLWw0KGEMau1WF+o6VzDVtdfoVQbK5s6rJVkf5DB+\nJfsMjH/I2H9Pvzv/T6mEliej3mIub5nvc7wCbifY7ey1ZSExor6tzTgcTgAX\n7rbQ\r\n=lu53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/tokens":"13.0.0-canary.6df682e74.0","@material/density":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.6df682e74.0_1631202262199_0.47126670189946007","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/switch","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.b49359c35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9711d5d51c62599838232c61e867e6e0116abead","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.b49359c35.0.tgz","fileCount":58,"integrity":"sha512-A3dlxmeoElHa2XiE2Yeg3a3vz9QgmhFvEpyM1veWaK638+IuFR0eL+Y6wtiFYSVzqHWiJb5lpc4+glVM8a2eMA==","signatures":[{"sig":"MEYCIQDCpJqwci3jNrHm0mbPtj+9kGhv7mrHKVyw/nHp35eAKgIhAMZVG5U0SymjNKyN1e3XIHKjBg17XDZREDgx6kZWNw5V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYqCRA9TVsSAnZWagAAnzQP/iQ705XIvlkGHGJvFcIL\nvbQLXl9vovFATN276Ax0rXunI/xQ0jMBY+6ZtGHkPsxA0V6uz0v8tBaSn/+E\nrpW9gilPQZKI8dzHK3FlN0B3iuMYWp8WXV6+G6dljAumZ98OdfnxorPyvy6d\n2mXOZMelEbNR1OqW6J1WiPlntbnUz6DFylj79/Tg2bZoTgbMkJifQ0m9SXYi\nFv9fVD0ag5dPIzsjflUPwd6hzpJFIQvMQcbhYAe6D9zghlsfGxT5s2jJauBw\nIvoWH4rk4mAJkRHY9u5fVcLidRC7reLS4Ccp17BFSWhPXco5vNRMZ92Plv3i\nuxg2ueO+l/96fMvOhHfM5p40BeAPSv5bmvtpnTxKXGoDw90/TwKiHj9Ku5QG\nSuwNPs20/R7nYB2NNBIg+A9QeyGl9Os7sUn1pzw15iYQo+VQS845LBKroI5n\nVIjB4MBcXvRb19jGmX7A4+a+jgWUwQJs7L7eLavSyixOiRQITdw7D7bTH26V\nTBfvT6SduF4a0C88iJNBc21E9/t/EtSboX02xKXU2dcHYq24VCntpTxRjkha\nXATz9IlSFMrnIwNz7A8fusVVsKZ1P5+SZTuJSAHONhXYP5NZflQnmemjriVy\nUreNte3YGQd4M9N9TNWk25YMMr5zh2tDx6MGGbpb5LK4R1Ix9Eeaz5x2RwAk\ngjlt\r\n=uxym\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/tokens":"13.0.0-canary.b49359c35.0","@material/density":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.b49359c35.0_1631209002142_0.926972506162747","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/switch","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abf1c56e152d657b638c6bf2aa27fb40a240a20d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.470bd34e8.0.tgz","fileCount":58,"integrity":"sha512-mkHgup/lhnU7FuCqVmORmPe0dRf6dGVUkOo6QjE8NZTYi/uKdx4N0YjKSsjGlqFIhB/rLV7VHOm0KbvTdTnpoQ==","signatures":[{"sig":"MEQCIGavXzGvoTV+8ovcjH4MYU9WSkqjzLkU0AkRF3yCnwkNAiAKBKx4QZsr0jfntZjWzucPjiF/+h8fUpawLgylkaSeMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkwzCRA9TVsSAnZWagAAofkP/i/6DexEfkK9kqUwczmE\nX/tYGPycPaS9kUuTH4rdF33HVj5ygsj2OD8PThIQRwGr3HTKbtDtBUY5Vs0/\nZDpDeVLMFMiKEQLx8M8X/PrJvulMhSygTRCwea5BzfMiRrQET3nNEhcBf7IH\nnmUybSsLuEZ1meJiFi22cZt4TvMBlSHb3+uI1Kd8UqI4T3/obE7MSrz2/wI+\nLB/f319VpwR9GCn9kwJcMs2PSJqR1/9lXAJsHr/yus24JX4q+PZJbozVv+K3\nddvjinFmrg/xI2/kds6Zw2r0NXo1SO7JaE1dWXBT9q0bDSwTtRlNb8WLTICK\n/8L2aicQw9mWsDhBhg7QCHpgwEf8YNd0U/ym4lFazH+Jvr032hdvRQM3PaNN\n0EZCo5acWXLSeigUicuIliFBoUPX65mqDGZxPFNbGH4r1P9D1xTA8lilZ6GO\nDvCsiLUcgsYEEB4bt7BQWAbvXptvixJpkJO1Ep4rZyn5UomIMqKQE9XSfSEF\n/jL7gG+4v74fqN/LCfz6uKEnScAave/LnjAk/VEvdB2scJfiBpi7GL7ulEHD\n6lQtGp8MA1DFmfm9Xo+IPHZynyNJwEX/CsDXdrJ6DFFg1/IkyZk5Jladc2E3\ntwcFe1DqHxxYztcsxCcBi0TAFKnCvzI7BXmcbMgAc6STGfBSKoOfUlaoYnqo\nb6H3\r\n=Euux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/tokens":"13.0.0-canary.470bd34e8.0","@material/density":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.470bd34e8.0_1631210547549_0.5541904198276282","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/switch","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.d48a01771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1667c8b554d3225d8dd050e37fa14bb58bec7652","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.d48a01771.0.tgz","fileCount":58,"integrity":"sha512-lVYoI+9S94Z5254F/yUkovLdtdhh3AbV5qIOsgciLEUT/b83U/u/soPFmNUoFFyGuRH3U35yiiq0DrKABzQCrQ==","signatures":[{"sig":"MEQCIFZ+YHI7Kc+TYF4um6II/e9ujTKZiGLKKX47ORCDv8yHAiAQLQ4m8I8z4UOrj5M4dsBaQOHToiYLjTqJche2eNvg+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5TCRA9TVsSAnZWagAARtEQAKHw3xw/AU7NIL8+ZhKX\nIGJmnVMAOxPe6xKHXZQEnKumFSNAOLVd1xylXPmJrrX3CwkWNJ9gnQ+MOMNu\n//rdsoCbYqthw8m6LKYZZqjx2YdStClO7uC3MM5yQAAa87QXNuKNqr48ZCjt\n1vw5EQnAdVPs1yrhAgj9Hgraws6E8snfUYkgK2e9+FU8kvp2dlYG21ktzidf\npLJRFcFEKHNo8eM61QvGdwSP+/BBXGnm+R03+m4nbcTNWlBj/lojEB349tPa\ny2ge2DAbZjCA0YnI6JHZ4qGeOD066/95qVMnkdpgCpbppFZ8pVcVizcLv2Fs\n8IY4ImsBosWOhme1yyUE0TRKGgGdHmkKUSmbREXLUCZNJpcYTkjna78DJ42W\nXIysaFvH6R53QqbiZ++yOSsRBWoSnjPXSEhjrX38Uwe5Ajh7Mkg7BgdcNVO1\n5sBRBbFNgg3xWMSAr2GpsMWzpEiCNToL73my00BqLUfQpnThbRAvknFJ0mb5\nMWcYkqy9qkFq5tGF2BID19r5sy7NnHndFEZQiocdDj+a1xLyO3kp2i1LoaoU\nrB1ajI4dZjZ/ZmSPxAhjQ9+WaQHv0wj+khzh0mcJMEdPexfW5FNNIwpiUOXd\nQTH26s0jQKz+9gU4fIvJWOUR9uo9p8V8PuXo3pzt3uas/pyBvEzQymecCbDj\nM/0L\r\n=Ts4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/tokens":"13.0.0-canary.d48a01771.0","@material/density":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.d48a01771.0_1631211090938_0.9196738523242911","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/switch","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.13db34b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"594b9307b3a38c0f0b4d3062f73523f6dd2c5fbd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.13db34b34.0.tgz","fileCount":58,"integrity":"sha512-F3+8IFEurAZrqTTLsXvrrkvQlm890wT5aAgBbL9Nv5b1w38p1/rEuw4T2Un/ngPxqEQeONslmGhACcErgOB05g==","signatures":[{"sig":"MEYCIQDtDkdZHGvPC6Uvbx0xgG4alGvWdDjm/MtGxcDvCM91PgIhANWgR88ORO5qmEkHotF+GmdbTY8wjGokVEH6TVXdlgYh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHZCRA9TVsSAnZWagAAz2oP/iEh07ppWtHGbIaZJsuV\n7iCql7BFdMZm4O5+f8OAmpHCtO2nSXs6bamDLJtVq/JR8QWca9osnv6pEl0W\nsQVfXBiWOTPWA+g7Wupn1MKOE5WV1PQkoSK7UPG2yLhXw06O7t1Hz2ZnnuxH\npxxUS2pWEMoa9ymnLYsT8zmtiDqZA0jCQW0Rq/LaP33nkEsNnC2nKPIm5K05\ntuKhIOfOWYFeRNc79i1SLV1imAFxZ/MfNhXZuDCGfoO60/fSBVfgZBQO4Ijs\nosEtoz4dZ90aDpBNRS7C+4eyR3Ro+mkPBzdGQRxEWBYoCOTIZgkYdSeCGTH8\ncF5J1Nuwdlb+4VQz7W9otDYVR1d9F2DkZN+Jj9JZBU3ci/0gi9E/JigYjqNv\nInA/Yn2Td53S7G4c7maxp/a+RFBd9iPpBMQAWdme9HWBbi95ba4q228hZljj\nur8X3CDECp5KXOu3JWZTzdSQI88iQ393w38EwBLguplkddifQ2OejTHvAi1y\ns5qUrpSF7sfEWbH7H7HocKV4OjCH6kvkkl1TxaZ18T4/Z1+7I3lZeF5/69+L\nzON2TCAl1IFQSC/e9YZos4pI6PQha2Lza/AqSDzsr7efBpuuNWCOa1+W+dtn\nFeE/zmwzgMRKOSb96P/lkJJOMeP2VQBKCwA2CO7Q5lCVzE0cDbTT0i2l+uv5\nTuMF\r\n=u4x3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/tokens":"13.0.0-canary.13db34b34.0","@material/density":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.13db34b34.0_1631211993024_0.19973973995017635","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/switch","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.864798678.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41be347f022c1f91c048d36b9ddfe17242e812de","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.864798678.0.tgz","fileCount":58,"integrity":"sha512-xBWahoZoXk5C8vcpYOK2b1i8n14U7zSXTG/g1olcsq0y5TDDxgNKE2h3zxYPPqOgVuW865YICYEaZrU32QwZwg==","signatures":[{"sig":"MEQCIBp2qztyTAVzxH6w/Q+Ssdhl4JR3ZLPN+f+bJ68DWEwoAiAqJ4Q+ly9E4b7aGLOUqXIaIoY0oL9yVvu1tcQSQkQfIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSLCRA9TVsSAnZWagAA1VoQAJh3zjR3Kc12tVrF4fK5\nS8VHdropdJNlbNnKBl1i44uUhIdAcb260UanEyKremmClNhPyaa0R78VcDc1\nJtuFQZFZiaEgKFf7dGAo/Uluf2xzIxgV0wCWjwclVqB6ZeQS2M8yDMeVDsQ3\ndnKXLgr2m+ZAYXH6nYmEI/+v7rBsTEiXdGDAXSC4Yl2idIQHTGLAlMKnhNVv\nWFDlIzjZX+Wnd2z2J5zvPuCgy/OfinBZ5qyE3bei188kKbnJ9clfwImQktBq\n9iBJlgJndqAdxSstS9u9R/+icvN6OYqeRoAl07pBtwtiii36CGSJFCL0BPn7\ns7KiQ97H2HBou5LHVtieM4sWZtDnzmiM+mrBL4kgVFFOHvS1gVZyWdVyTx4P\nVdUZzsPOk65l9Pod+2gsABUtiaW3to1oj9/4Zdn3Ecbn5m5FqB3W6ExP1Qwb\nw61/vdYy5JH14/4YEwwLJRouoVB6bpeaIMc1s2d9TK3SWvNaJ46T3iUrPxsc\nevV8KFYEf9sE1uIMQgRBeNHQuSxDartN3xU/1d1rokeqx9xCnkVk7g//ldrY\nwEGy2FqurwkoMgtLLfeup9RyK4Ipb7HiN3PXvtaSidWF+Fgoj5kDslk+xyX/\n2IWr/JhYEPy9thBjobfQCzK2htmRGsKrIEaPAe61811Rd23TEE1UcMaXihdI\nyhP1\r\n=RTlQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/shape":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/tokens":"13.0.0-canary.864798678.0","@material/density":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.864798678.0_1631212683108_0.11395688179336294","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/switch","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"092d9b01e22eaeb96c4958666c6d0dcbaeb590e6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.d04bda3fb.0.tgz","fileCount":58,"integrity":"sha512-dGo7iL3B/MUZs6Z7BKsad6V4umuZz1q9VPypEYCdB1sf3MSzHhdkQQ/LPITq5BzXtpPWe4odvjb7UluG5d9CQw==","signatures":[{"sig":"MEQCIGfyVp1mnPOw/+N44d7f3zQji7cYSKEmZvsxP77a28bQAiBO3/cQSW6iAsVOeFR+dG8T0vWEqW/IZLOqbL1OvUIPiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":722262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hQCRA9TVsSAnZWagAAQHgP/A1YGyqLcCEVoE1+1C37\nuomKi+dY1jfzLPZWlWsFl/XsRW/0Gp8kBpg2I906QLpG7trX6tdPoQFsD9nb\n6n8sXBh6zMwxodp18ZvwKWG46oJSRE3uYG5ZQFSPQDSy8rvrvFdZMUHNd0gJ\noi4K2kiXZ1LdS9Bf0boxeTsiLzoA1OYlau4J2J9QbP0MXaSLCZZCXglTvTlF\nsQufollvb/8R8fVPE3z2NOGpFPq4ZhUBNVO07/1Z3Ner8PW0O9ycycIeBRrK\ngPwmcuUKAw2hyczisfag4HUOoxWMTS+80NZj5KwKq4UJNGy7ir06r09EqFeH\nTg5t1sc0FYYNW/1n8PemkGLrpjNFG41jGoL+UauQQ2BRrqBLcvgkcLaivXmX\ngbIm1gGKh+WazPk7apzKTnbwf3sMykmjA+JBeIJzW0KU4Iy7jnzvgBG6LVo4\nNpWzGwuebzdMDAZ8sSMP7WRUU9qScQJRNDvztP/U8IHbpnvNYpg6OA3kvCEy\nI2TEGLr81ZFdca4NKtVEfU3qjFMpdiNZlLidUvIdfR2410H7UwOo89Fw1Ica\nFto6ZOPCdkHy9TN2kZLRJ/78HeARuhLW8l40piTeWExkUn9kxIBNUxRB3Oo7\n6XSfNr2I6ZDJJHPPh6YZwL3c/RI/2sIW/BbSXpnHrkDHby8r4y7j4mE48FJJ\nKqSz\r\n=Ecvq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/tokens":"13.0.0-canary.d04bda3fb.0","@material/density":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.d04bda3fb.0_1631287375779_0.9244513422171137","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/switch","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4009c6347c2a1caed56fb9d8808b539562c6273","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.5533f73d3.0.tgz","fileCount":58,"integrity":"sha512-RfUtodv9w64VSFla7ZfLvld14PTja7TELSJwT2EAaoR/d0GyiUx7qoRYRG+n8PAZjNz382kFFgDKxFcUcdESaQ==","signatures":[{"sig":"MEYCIQD2jc0smejPTk7NONgXjBllc6SPKVZBbvO9qJfXXSLarQIhAIc4ntFsW25EqoPoqd4OgzstM7sR9EJUb57EuAHtPgqZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kTCRA9TVsSAnZWagAA5KgP/19AV6iOOlJ7uOaOrlH9\nnfHPLeCbRvGsi8+K1R4DIp5dvqxbFQhaBbeLQTfnFKc4JSEfqTOGE9KYJyko\ni64DglGCY+MvPruxRd/mFCFMT58jxtYPvgt04MXxvnRpwZBb0RVr6C9mLPNO\ncZCfEQEqn46w4DxIbDVIM0xfnXRQFZkmJWNYpaIMURHQMJRPL0o+F0TE5Wdj\nXbr9ULXrM6yPgoVtSCGuvkU7Bt9rgL74910UwsLD8T2ilIP63pMWXhwmQHHd\n3uW3fH0uCxtU4Od9l2g4Fddubt2kucdaj35AuwQM59kKCOLwhlYEoJkEBKEI\n0Y8AJR0Zo+jRGNtCGkWUhxmRojm3O1nt5m6P+fbxNFQDe+aQD64FL1QH+VDw\nWCn4djw46vcRhI4HaLhWk1GciolVHz7UAQV5PmUQG29/g3iaTUS5WmWeFZNZ\nGswIBLgl5PEM8PDa8jEl5bXathGDoH+4GP96IKQYFGDlkz9lzYtPYDg/vpNC\nJ+wk6Pmx7zGRxlMcDCeIfuu6Z5s5HDTeL6Cw7PczMKNV1ux7jwL/eclBNtB9\n5tkjPApf3GzWx57HhIP0+mrQ9vs037dfRTCOJPOeq42Rnvy2ozvZFwnM+YD/\nEGIZqaNrBUcRVTMuXvoQd21gspYsDYFpzVeLCd8SL98gGcaS7ewHdmKxZ9bg\nyXO3\r\n=2U2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/tokens":"13.0.0-canary.5533f73d3.0","@material/density":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.5533f73d3.0_1631574291497_0.5985905989000415","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/switch","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.08398f880.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d7177cf49375c7db3864588702b90cd9e668f95","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.08398f880.0.tgz","fileCount":58,"integrity":"sha512-yIQ/M2IqZpCMzytvMbJAZgNlGKIZnTvekdse5LeFcZB8kKPIfQLOSujKTBK3ap7ge8BiTahPv7DPifiByCPrSg==","signatures":[{"sig":"MEUCIQC1lZfi/aGSIHXq80ptiA1Q3nvT0o+vIoD9UR7SWrIhqAIgXPW3jEYDXOkhZ8e+Y54gBPjWfCZ4+R2Hn4CHFki3gYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+A+CRA9TVsSAnZWagAALrYP/iB8cfPCxhFe5faLjpzD\nokUf7vqy/0hwT+22sKs2AhhULpweLMv6mQ/dkI26VdN61Vm/lzh4vOxzr/IL\n/Afr5vVq7aRDtd0NcT4I85JiouIGDKgTGkesXP7iPk8eBIxmsh83I/4gUFJc\njwNfG6sK1ts/5cGx9sURS+IwHhdLuXMnaFIOtwsVVGHVIyyPZZvdkw52w/41\n/JlzyJPTKBpPk+GoWWwEybR0LWfvmMZ+HkCGW1JpwR5y6A/yEXH8DlqA8N4c\neho0XcOGO3eT1zdT5jMnbSLUrX7q/Bx+yVroACF1b41bskoiILICsEDzYlZa\nJaXSnNbfJks9ip9z2PHSrQrWPENjVBwnQrzUObaVVdMMIE9Xk+WLd32WQpu8\nVEQc467iuKXiNQznI0VQ3JTMtSYQW2U1T1FEpSRZ9MbPSCJqeqGw6V+4MY69\nGLCcVHdN1BPVY+jFuzlRdb36v++ST+FC92xVPq9q6zL/apdhL2b8s5Dxfc2l\nxymO3ne/g96VjgB/hyC7oBK92WmV1XQBJfow3sJHvDgyJPA9yONvJwCTrtds\nqu0W4tBWhd7ezNC5+N+ec2BvCbSvNww5Ql7zuVr7/sD0YBym1YLvbQIdSi3b\nrU6nmtJFZYK6N8VlfSUd8m0/KwleUjiv2DmWLxTvN5BIiuPOWzz/ikXSAcP3\n1r5t\r\n=pfXV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/shape":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/tokens":"13.0.0-canary.08398f880.0","@material/density":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.08398f880.0_1631576126099_0.7841200728992814","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/switch","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59de4d6e60b6871ba7c90f5a4e60cbc04b0f708a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.818f4ee93.0.tgz","fileCount":58,"integrity":"sha512-/q5/E5zY52pHk1bMwBj8qmEZG8tKqP/4lssyoYgNh9DUv0OqxrKLzyoS4qQT4kScWxaSqmkZen/FWaExgYBeSw==","signatures":[{"sig":"MEUCIAPeZJMFBz2K0hbHAnfvCh9ap9RL7LH+VOwenilmvJu/AiEAmV+ID8ag8+qjvLJwwHDyATL3phBhiakH+ysUjvSDsLs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKfCRA9TVsSAnZWagAApZsP/jdv6NQn1zEPS5ATlTtF\noJdTti7TzLlIknVK0xKfmpP3qMHD20eleOSqVIoT1hwLiASwM+9TCc5zHowt\np/iQH3uUh6q9tRlzrAh05CjQn2l+/VIuXKCyxCpuvTV6Nld60AelXK8EUPqo\n4guoHGKBl3ctLmrxHvtpdRgZcT3PK6JMQwoCtzR3uhEs6LXwXM10Ha5Kgk2S\ntKYtrPHkjOkXkPYWkjbGALmtm+8yYLGJONEWPm7JeHbwgyYpEFuHWNgOUPjj\nHmu8Hpv3OxLPR2mvz5tC0dN+W9I+5yqTy4B2WHYZ6DICOc+XGxLpSIcSTmuo\nE5MWIdWQDYqd5kzx8lAzVlRToZ30yS6S23ZWTdfRY1YalmW2Y0mC3LG4OnqW\nktkAR/KLPxHF8xptI+ItW5poZu9NCXnQ57uMsLg1FaHwSgPqwbdR2Kf6aa36\n3eUprT/AUq381VvaOBlD5Ie6APtnpkCTbfqYMDnkXQScJe3O4PV3hmjuwnYD\nu4oUwLGuuT5jNb48Vs/aZyIGJSMZzQRz7xhiijwE8fwMgM9VesJpL1jC6MIA\n5ztxgmgiqYg0yXoA7DiXHsZukMkeqleRLVwgj01ELjf690Xv6OQ4OnE79QVR\nMrzUiaj/iHY6PnRDxDTi5bZl+dZmzUp0nNV1F7s8Gjih+0bm/RlJNSR4KmEr\n+PX4\r\n=mjJ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/shape":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/tokens":"13.0.0-canary.818f4ee93.0","@material/density":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.818f4ee93.0_1631728287745_0.8057027264678334","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/switch","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d185230d426cb5dd979931959622b73bb4b56e6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.8355e14dc.0.tgz","fileCount":58,"integrity":"sha512-v2wufLKeng/qU23z02niVdv6JqDsPgZzjj5jTzoYVILuix95C9WQ2rsRR2xE7o2zFLFGNWhRLmBQEjyjwo79ag==","signatures":[{"sig":"MEYCIQDHiBjaAv9D3x0CgSzDe7gyAEIw+SDisYduzCOcyt4TaQIhAPIpbRo201Wb5JU66g+JLnPgWWJX+oJbcEkYg2ggm8wZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXWCRA9TVsSAnZWagAAoLcP/06LKao/hamt1fkLPsio\nfoR++Uw4uSElbftxchQAAguQhKMj721NsC9x4gVBHP73qfyuUe9AWp0eBVJR\nQUztRhITTGdREcBJtWolV/qI1AuYgtdwUP37xtBIkej6FpYucEVs+E74fX6r\nr9hkvG9eoiDDIAmA9PmVcC2Y1Ld4BUQvDuA7RFS6+SB4YMrOyvDXpfChjjpt\nzonGVRazcmCpHZFWiJRh3Df/Am15/vYHVKgueCoxduOSsxEnjFkmEe182MQ1\n4Ib1JE5cwn0qnfVxuIn9/WWPJOM4jP5h5zBgdaVgmzr/jUjMS4TB0/tZ2ETt\nkuGkQL3o7w0LepgQPqYzfmTpabx6d7eksoh6IViWMx2hEybsBxDyXM/vwjA5\n1l5aEhk4BM2xM04Y1QGYD3vDP7bBNXKyTSo9K154aTEGMQYI84sU0y+kNAXj\n4bYv1fEeOKIUBeAwz9pEBk2o48uvpg7ANfwqASRM3B27tj4QPKIzvor8/cIP\nhx03mARIxGVWU5wnOA9TWhyf40Rw0R5xWAtzVyGj6Fxq3rDHFlyljEPfO3HE\nFYzIvg+Kx8lEnKDFgIZqolxMOQfPs544+CzmZMMAPeGB7zZz2ARTPwr1lAek\nSqZzWy7qsQMnk9r553OpfPtjqhPPU9LHhi1yM6TtEK2UN6BA27Ft+LeXd84l\nLgRz\r\n=n19Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/tokens":"13.0.0-canary.8355e14dc.0","@material/density":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.8355e14dc.0_1631733206250_0.16812657118430385","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/switch","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e9b296175d168d2db534ee6b6ba037495987b95","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":58,"integrity":"sha512-stOMeH/8gzly+fvPygh7C5RdzOQzExP2MIrJoG7aYsehlvq/nqisddVWznmkiby64pEQmuWr7LHkDB4nVH8T9w==","signatures":[{"sig":"MEUCIF6glz7NWhOdCh2hJljFJBP9EM7baau4yGWvIoQlYG7rAiEA2NbjSEA/f6xXxJOLmkahNwyzK7ePzibvxwxxlw111cg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmzsCRA9TVsSAnZWagAAF3UP/2CFD7Do583P+KmTllRN\nvgDIa4YX5withlYMvu1xvbWCGYYIwLkWPXLCw1sUxuXiapfWpPc0Ml9J415U\ns+sHLB9W80dTcOun7Nshn6Op6gjXKGZxcPwGKgoqpbfoD4RRCk5JqyKo+G3z\nzOVfMYskdJQzOJrb8btvRF47elx14jFS/tit1MXDk/oM+R+fEB8/SSZWZ3Yt\n0tYNSCZG6Y5HtTlnQATkugvc8KXmcRfv94Kjpn1vSzENAUnVrvOuS9LBjcyv\n2Uj8977vY0hthgjp0lTPboie1dwbxz8QZkmVyo/9MpiNePALojREAmTIcXh6\nKG36rZ050CK29wmPPi5E/BpRE4fH51+DzZ3YOIFhSjdu7bDQYBvEsrLESbRI\nJbylV7GqhRMmhg+uk1zc3uu1Vy7AaEUU0+CyErnuSIg7E0PKPg/tHw/xtWZI\nDpMQsODqWvWve6lM8QlRPTtA+O4vvEI0U8sPByBzEur3VsRU0h+Qsnf1qRbD\n47FQzj59ldPgIVMr3shq+VmzybkzfZHoTf8Hvg6zjU1/CFR/6fy6hlh3AQJh\nq+Eq+vAi7C0GecNChzy1TD9CSmPqtBotDPEur5OzPydh7Dhc8YuG4vC43Gwv\nveUqKuZX0/FV8tK6It2gtc0KssGLCA5x6hYaoT5Bj33ayjbPerDhAhOmNqOO\nXKJF\r\n=xnVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/shape":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/tokens":"13.0.0-canary.d4e16a6c4.0","@material/density":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.d4e16a6c4.0_1631743212582_0.08541199178626169","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/switch","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c647219879d04032f8e2e60cbc77c31b25218acb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.65125b3a6.0.tgz","fileCount":58,"integrity":"sha512-/I0WKCGEt8+9/h85OAHNImDzznSjvt62LmrmwbKq4J9AuKHQTx8FQvfJCTfHG6pG2LaMjVWHT17z0a9aYZ/cWQ==","signatures":[{"sig":"MEUCIQCYbuKh8/y4PP9usFWLch7ZgUBAYOlzzOxgQR/4sUQWgQIgX5fBdnzTgTwpIGpQo/wvjeq/e2yQPgRXLGWZBf9YvF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7SoCRA9TVsSAnZWagAAw7IP/0uXtEpCIkrO4H4UGEKj\nboWaqry161ewRytrBGOzrlzG7ckkLimq5pxlSOc/jASScrl/gOa4kKckeBzO\n+r2YGvQlCTCI2JZaFioE5PHo7vn1JgJGhWELZRbQx5e7QCdUQ4fz4mmCiR7j\nE2Y3uCpht710WsAJBbjUwbnLYsdMuYtg0T1lPVhQ4LmhtFJBwzW+NqgvfUCM\nDOLMW7j1ZtBUWjCeiFqvEaNvBAUcsvK1QrGpCZm/uKwJwL273ygMMlhWlcm/\nFqiXqbWSjqHCNKzECgumdmussX+LXNsd1CSQPcp2x39XXXBqJtvLIDnphHNq\nAPVV5oFqdIicNdSsZ9bKJdthBiJmAHquCxSgabSurstCkjjDDUCtQYyocov8\nwwUjEcW/cDQjh7S7fzPmDbKxj1exQpxFgK9NbMC2LOCL4ExWxsmQ9V94kEo5\nlVVlHEZapow1b4tclxxUAkUuF0V7Om28p/xlSgW4b4tfJ3v+YnO3lqKafPda\nWwI2pdJZtB30hopadYEsD4nD0QN1i3O5p2Dm543nyCdn8LOQt0bzAdtEpaH5\ngHMIgUUe3OC6wr3zIQlSBR64lV0/f+c+GVaHmhudphqK3wT4FW3l6ZH3UbJy\nzhHZ9286PYrbeXaQRhiqePqJbr4EHdqoHS/JSCllQpw8MLbkDYtHT7fINvKD\nHqhF\r\n=uQH4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/shape":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/tokens":"13.0.0-canary.65125b3a6.0","@material/density":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.65125b3a6.0_1631827111965_0.08771637311662239","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/switch","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.80a583365.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cae15ad958f3d0fabaa3a5913f757194326afb3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.80a583365.0.tgz","fileCount":58,"integrity":"sha512-SWmHioYz/ajP/bkW4kVN8AKdHLtqfN1FwwLEB8d51DzfKY939obr+0R+5SfoPACsnh5xF40WNO7kjycSYLTivQ==","signatures":[{"sig":"MEYCIQDcyRq20hapUXbi0/MHK3DNAad7fThXMHT4L7PZBilV8AIhAK33qkE4j6k2BjGf1Rvht4egkgXM9UyRyAnCKkXVjdxa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725134},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/tokens":"13.0.0-canary.80a583365.0","@material/density":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.80a583365.0_1631910994917_0.9504108251134347","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/switch","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.83900936a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a277942e7ad5db9eb1ccf5ea1b8c51952c763042","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.83900936a.0.tgz","fileCount":58,"integrity":"sha512-YCfFIVblniIk5EeogSxEyPWGis0j3xiECFDE2N+oBkkBEl/JHNeI5cZMBwr1tcE61Tmdb47VZXkSsk1n6+k+7w==","signatures":[{"sig":"MEUCIQCiD6gmawk5iiGdm5g+1EKp6zKztsqYdIeat3DAXkV11gIgXM5JRrTDYXFShaGdg+InL3CjMT0Mrp2UmZOaV+z8mqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725134},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/tokens":"13.0.0-canary.83900936a.0","@material/density":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.83900936a.0_1631921103771_0.7117901511097837","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/switch","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9143069d3e12cfba2d97ff6edc0bd43008f3456b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.860ad06a1.0.tgz","fileCount":58,"integrity":"sha512-3URTopRe3671F0BvKa9T0/qIP7vrM6n8usdrJX7/ljNKNxBxkM6eVzb4brXkDbsjRmQAh3aJpgf4SBLdZ0vPaQ==","signatures":[{"sig":"MEUCIQCDmD/dAQdu5Pn/h8+oQGHJoVxwRz6Q3FABOeyZFWX+OAIgHUA3qxL4RXKDMqLXN9tNZaa16EV+m+4qdIJaawGV+0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725134},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/tokens":"13.0.0-canary.860ad06a1.0","@material/density":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.860ad06a1.0_1631921801740_0.34338184182095266","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/switch","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c769f183782a07e4183529f91d6c77b26a5b65ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.3b8d4429e.0.tgz","fileCount":58,"integrity":"sha512-CGm2XIer/1PsPJ6bUEJTi++DifWRS5GifPMIQZ274LPPixQE7qZPXpxaRXtfqcN5lLSC8Vp8QzBTf8oyErkjiQ==","signatures":[{"sig":"MEYCIQDXmOepltPFnZ8eAz/DAFhBUnJtrXVNt9m5qMG+7XlKcQIhAL8UQTtwrbFje5gBu2/mdHTVnMNGxdG57YE5R3Bouy6v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725134},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/tokens":"13.0.0-canary.3b8d4429e.0","@material/density":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.3b8d4429e.0_1632160097223_0.6039903323146436","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/switch","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"584c644a63321db83be25d90ba6b440034281e91","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.2da3606b9.0.tgz","fileCount":58,"integrity":"sha512-5ey9pX0HG8NZ2mjCimznIZOLdgK0VQ9Ydb7FGZSLt+dgDE5MofZv2hg6nAxo55xudOtYuCSLbcwzvxzLPyqGaQ==","signatures":[{"sig":"MEUCIQDhQCK1aFX8UoT94Te1GBODGZ/W6BURxG78T1dPUZa/qwIgVY0gPWqwWWEFTFfEDNWcwo0NHKnCW1N44cLvG+TQvUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725134},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/tokens":"13.0.0-canary.2da3606b9.0","@material/density":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.2da3606b9.0_1632166703394_0.12774710163520253","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/switch","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ca964ba7a6c80cfb3e8dbdbd53036c2a95b997a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.e8c598d1e.0.tgz","fileCount":58,"integrity":"sha512-wbPLhsM5eIFX3GsfLMzoiaqQNE2sBi7yqqumPtWFJeRkiG0dhKLKfcIi+26ietYR5fZF+iTXUjR0ZM87mkNr7w==","signatures":[{"sig":"MEQCID6qjtp5OTDQTKje595K+n69D1b56JJQbECD6CauvEn5AiARhIaa/eVXriXDihOdQjAqt+xCWK+oFcqhIdymB6dy3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725134},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/tokens":"13.0.0-canary.e8c598d1e.0","@material/density":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.e8c598d1e.0_1632172364768_0.22293839262411264","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/switch","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a2dfefe57b7114d25cc0ffd336ddae620dd5255","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.1340ee9f7.0.tgz","fileCount":58,"integrity":"sha512-gG9CfP0CrHsoTLQQl8dil7YNXKcPyTra2Bob4dxVkztz0bf45R16eztze4Spc/6NhrRZlyTZcB06BtFOF/QI1w==","signatures":[{"sig":"MEQCIB587TsV1CSqDkk7UuiuUEuOADn4BkujcCTeKRkxih9PAiAQ7P8EcKUBY93I3Yv3mesafRl/WMjwOdycHtw7YvHU0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725166},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/tokens":"13.0.0-canary.1340ee9f7.0","@material/density":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.1340ee9f7.0_1632333519011_0.27459946579082084","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/switch","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.65084baff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fcb78667faa863d3654decf16396ee127259fd2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.65084baff.0.tgz","fileCount":58,"integrity":"sha512-qozEb6Zss/U24/TyqHKaXPHwetpw99qO03gkVI/9cPviFREATnoHFbp9Q3c2RSP2+erbifbxSfEz+vLnLp/LTw==","signatures":[{"sig":"MEUCIAT8NYZgB6nDW+RAnTAwXPhFBV7XkAql54VArNYnoK7wAiEA3ACEsG5gQcTcNImDGtawco/iOB5Ge65kwdrTbP6aNPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725166},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/tokens":"13.0.0-canary.65084baff.0","@material/density":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.65084baff.0_1632432371540_0.26469594695951826","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/switch","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeab9582ef03931d6a4045f46d157e408f9310b0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":58,"integrity":"sha512-/tc7x5/mDKlW13PaROM1aP2Q2mj5TiJvHqRtm7UpFtU31R+4ekYXa+ujcE1PW28CD+THeSXh7NUdp+5jMUFrjg==","signatures":[{"sig":"MEUCIQDWkItRaw4mgkqbMf7uz+AVzUMGh8MlDEN5kgaYet6I4gIgOFj5SOnl/KCZhf0MPv3w+8t/ZdHcS+rvj1xIOWwFc7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725166},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/shape":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/tokens":"13.0.0-canary.c79aa0cdd.0","@material/density":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0-canary.c79aa0cdd.0_1632490962234_0.865110675259871","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/switch","version":"13.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@13.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f25a6fc2a45344ecdc86f6545e95359f5f0c770","tarball":"https://registry.npmjs.org/@material/switch/-/switch-13.0.0.tgz","fileCount":57,"integrity":"sha512-zbdo6nKEOAx24ILCBobZlQqU2WZ+KuPgdAc1VTI1q1BCKN3rDIfm9RnsCuYiZa9iaq4UUgdYuhH8KVEYGP7Lrw==","signatures":[{"sig":"MEYCIQD8pZkUCncYY9j56pHstngdeKh9OEAfeGEvyGls9EefugIhAPftNgb4aCJKKY/QDWlDv6KqQyG2H0vTrY7sIks6Z92g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":723464},"main":"dist/mdc.switch.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/tokens":"^13.0.0","@material/density":"^13.0.0","@material/animation":"^13.0.0","@material/elevation":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_13.0.0_1632512796421_0.2686690586394529","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/switch","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.198431fcd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9ca8e863ff8868d9e434d491ca71e3ebaa269da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.198431fcd.0.tgz","fileCount":58,"integrity":"sha512-JeMNt8TyBHkk01gLu43jU3iA6ZenpuGzfTsTtLrcaNoSMaW/1CTzC/t62pDuajZy80IPaLTBYWULjuHZnVdiEQ==","signatures":[{"sig":"MEYCIQD56R6DhfOh1iiXqDmEXsQK/UMuRdPFTSqLkoJdBUpvNgIhAMsegLOd6g79pfho9PhQBQiKJFfX+L8dlwugjzz9+KPo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725166},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/tokens":"14.0.0-canary.198431fcd.0","@material/density":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.198431fcd.0_1632512839801_0.48765859810033607","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/switch","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d1f956f60119dcb32090918d18dd61a252233ba","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":58,"integrity":"sha512-hObdo5kPizceSBjnois5G2BhPqNC2wUieMi2uHxJ36xWsFocKvz4BbnJhku7svk1kMGbkVXztJ8kFp8/mmJvVg==","signatures":[{"sig":"MEUCIQDsk0J73bIM7yxS9Frftw4NWzJSJstRH1iTZJtxj0jPuwIgQu9+gw9qhij0gca7EDXkdUWE3kRcyomNk4SjI0pPtMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724534},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/tokens":"14.0.0-canary.9a02b6ef8.0","@material/density":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.9a02b6ef8.0_1632575505207_0.5106630210809804","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/switch","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aad4df51cb084d7cac6dab1f2f91df52acf25736","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.758ce31d9.0.tgz","fileCount":58,"integrity":"sha512-CR1LnrxQ8KSqhl9R167qKclhCmmQv7CzEYqDdPXUxxMNMB3z5YUD3yYJxZLUNqohbp0vWYmodAOM2Jxvl8GUuQ==","signatures":[{"sig":"MEUCICOcREhBsEZy7/IOjItoZcp+16u0/MHb5LEvfDLb3AjMAiEA27S/DrfXEp0uPN4kCJb3VACPMKvNWPH0G4EaTIDDCgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724534},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/tokens":"14.0.0-canary.758ce31d9.0","@material/density":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.758ce31d9.0_1632763800613_0.39303239197889694","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/switch","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"963202f4a5fbe06aa02f87b1b50908ca1c8e442b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.86b50ef74.0.tgz","fileCount":58,"integrity":"sha512-sAMVS0ootHykvNI1WHulFF5ITznFQ9pP4t7hfmN0Hot2USo9z6q2OXZ2rnU2B4HqHUbCyg13noQ+4mz47PQzZA==","signatures":[{"sig":"MEYCIQCT5Co0u0uE2zc6hDXEe+nauZ33F37Fp3A8G40Drg9IxQIhAI1o1uHxCkkCYlBg6HSBHDBQqu3wvGlO8qhVMZJFaWLS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724534},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/shape":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/tokens":"14.0.0-canary.86b50ef74.0","@material/density":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.86b50ef74.0_1632851029006_0.009917154017531793","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/switch","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1b6b3612fcbff582fcc45c8a240f1e3bfe8ba86","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.b2fe3528b.0.tgz","fileCount":58,"integrity":"sha512-QSmGsIXS9gEguYHcgNoTQNO9+dvfkx5lNwenxguHPattPH8hCDaw67pB+BWiIv7F52QREuncQMD3Dxg2R2qQBQ==","signatures":[{"sig":"MEUCIQDykPLkVYzlG7iKO5cLyOsHCA+FoG/Nq1fvzuG2lDDC6QIgDE8mvTYn9pqk7pdyFS7VFv9qg7lI98ikgtxAM28ZMYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724534},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/tokens":"14.0.0-canary.b2fe3528b.0","@material/density":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.b2fe3528b.0_1632956257425_0.4118707149957417","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/switch","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.586e740dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afc211c167d47d701774bc48772e1ae0e333011a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.586e740dd.0.tgz","fileCount":58,"integrity":"sha512-L9Q9GLjLAK3xdCBq9DdIUVKneKxbJYKSNdLSK8k1ZyL3VHyRmubP0JlRWTNyw+mG7ZThcGv37yVLVBXmevL/1g==","signatures":[{"sig":"MEYCIQDrv4y6f2yBfvEny0fq33rcg5OzHffDZAT3wMmheIz2IQIhAKqcXvpRXRTfN7QC2S+FhpBCL5Vi0TFIka+Pcy+JpzYa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724534},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/shape":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/tokens":"14.0.0-canary.586e740dd.0","@material/density":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.586e740dd.0_1633019521578_0.4632289079765466","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/switch","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"707d2b5ebca79e28ae5e595dea1167f9a88d92e2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.2ac92d766.0.tgz","fileCount":58,"integrity":"sha512-VN1Zp7Y4Wr8z3lcwwGOaJX4y9RfI7TaeXq7ao3v3Wm4SRnQAZS5ALDYA05bDYco8V2Q8erI8dALyx//6gmIEig==","signatures":[{"sig":"MEQCIDOMj8LzqW/S9flNdyomKsdP7SoE5N/4hwXfFCVyFBykAiAsuf1vMik5OqQZRT1Xc6Sp2RmFYEh7yFQF3VjT0V/gzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724534},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/tokens":"14.0.0-canary.2ac92d766.0","@material/density":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.2ac92d766.0_1633462155464_0.5983660464112728","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/switch","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"463459a85d777b6c8163d0c95900ab2386afe1cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.353ca7e9f.0.tgz","fileCount":58,"integrity":"sha512-boezPFifuIGmvJjRaljK54gad5gZ9XFoYbe3kkZJfWTXvPjqwsT33ldb9GFDMobrNMMQstMl4wxL2O4foREeUg==","signatures":[{"sig":"MEUCIB8wvxzxW/JoFLsJQMvSxeryDNMsJodqoy7T0vV6T5eMAiEA7+MPfhUDNTuYy4lgJQBwwgWfRv9zKn7d9mQuW31kvYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724534},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/shape":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/tokens":"14.0.0-canary.353ca7e9f.0","@material/density":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.353ca7e9f.0_1633718859184_0.5484547587800468","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/switch","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"839b54ca48bbf95ab4fadc7fb3d2e8c0942f256d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.c78ff0429.0.tgz","fileCount":58,"integrity":"sha512-IoN9BxXHsMtRmFK6GOGiku9/vbxGTAZ/KEgWVCndR5C6/5P82TRQBtjFJqCPWjCpM86Hex/xjeg4t5tBxqHYqg==","signatures":[{"sig":"MEQCIDnikwp8wZrQgLaN4guTE58ShWz8YZ6tFZQQVhojIafuAiAj7T7lNbb4PLUeJ67sVtFYr5Vm0Wux4GRlhwTStP0tLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724532},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/tokens":"14.0.0-canary.c78ff0429.0","@material/density":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.c78ff0429.0_1633972973779_0.3246941227188236","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/switch","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.261f2db59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e89b7dde62b8e9181ff203312bba973c4a8480e2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.261f2db59.0.tgz","fileCount":58,"integrity":"sha512-WoHxAeTVh43OAwkdC9uWI5caVwCCn0JrxMbPYAonbuoGAn/blXECuDtSpXD3m+05RwSgUHlX9n14nb3SGQMOYw==","signatures":[{"sig":"MEYCIQC7Hhn23s6tvb/WvmtO2+TM3NsS4xcm2v7jC5lHOCa4NAIhAIfU93ARFovb0W0Cidd9yyFnxm6IN4khljjT8EFLN567","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724532},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/shape":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/tokens":"14.0.0-canary.261f2db59.0","@material/density":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.261f2db59.0_1634749223292_0.7060897927534355","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/switch","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a39fc875151e901db9c2fb0dd5bc2bfce54dd004","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.9803d2dc1.0.tgz","fileCount":58,"integrity":"sha512-LeCyxqm8p8vDdeFz4FmY3kqJl76Iblg/PXRVruExPuftQIydhEIEbmggT37hxNodDbIOaQbbf/48xLGy872u2Q==","signatures":[{"sig":"MEQCIG7MRDNTD1GoCxpBeNprwhG0rzqcBYwAgNfv3HUa1FdYAiBHpzttC1PbVla2K1+SaI/47EIz430yWBotJ17Jr4S/fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724532},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/shape":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/tokens":"14.0.0-canary.9803d2dc1.0","@material/density":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.9803d2dc1.0_1634757756189_0.7114508787354423","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/switch","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.348665978.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5e414695a4556df23d0a404411609c5e7eef092","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.348665978.0.tgz","fileCount":58,"integrity":"sha512-6vMsBy9U6L1NwWAC38YNEc8pbgqxbMYXcCT6lb8F10Bi6k/8zhJTYt9e4kBo7s4DO9Eq6j64eAXaA1h1rh242g==","signatures":[{"sig":"MEUCIQCg91IR4465CzMVp/4fd6ZhV3S75xxdKWGi5f9tTCrvsgIgcUcmfqMGNDeUdJ/orcDrnpgKTFedqml7xqbOAPblPoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724532},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/tokens":"14.0.0-canary.348665978.0","@material/density":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.348665978.0_1634827891442_0.6844153806135771","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/switch","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab4081810a8b9454a44ae12b53f033bcaa0c10c2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.b2b979a8a.0.tgz","fileCount":58,"integrity":"sha512-QdeDYVRqpgoKha/6T0s2IQYlKZlUXTPnyhfmCXBDbyOd1CYpCFVdWkOaBETrQSgk2pJ0HWUCxLvNXYjocQQXoQ==","signatures":[{"sig":"MEYCIQC7pM5UcEKptpO3cO/c+ps3lU4BG4aoEbJwQfi/OXG0IAIhAO9YwvYT7luYlq0Ht7OuV6a4id3/qC82BV2DoCnaSqfY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724532},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/tokens":"14.0.0-canary.b2b979a8a.0","@material/density":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.b2b979a8a.0_1635433985050_0.5714407217247257","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/switch","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adccd76b2958237c0c778c7ff8cd263be0c3bab6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":58,"integrity":"sha512-ckHnt9zBSIy0E1XTligNmZRvtSV+v5Hvl5Kd8UCbEpMa2zEY7KXa6koLZVNcE8+oyR9x23dCVEBoVz9S1cwF8Q==","signatures":[{"sig":"MEQCIA+kI0PJEKzA8BFQLUu2H00lWEpjv5tSRTYlBLAJ95OMAiAIxEogkcosb56OAV41/GfuYi/g38RNgASPVDiJ65guiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724532},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/tokens":"14.0.0-canary.1af7c1c4a.0","@material/density":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.1af7c1c4a.0_1635443614618_0.35656576482973845","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/switch","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a232dc705f36d6ca687ae7a2489df84cce97144","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.4afd353cd.0.tgz","fileCount":58,"integrity":"sha512-U4pqfIwh4IyWl6M7/8hxtgDrsgJcJZx9Rk7aA/uc7Bq5p5G9idZrbvY/CqD2Zd5GTCWFviQq8eVyPM8pR4K0TA==","signatures":[{"sig":"MEQCIAncay+S/smNkYiUfpnNXe4dBeuIvQN2XCg4S3rOY5ZMAiBb7c3VN2nQRKavnVXrQHTxLq0o7qZ8dxWKfp+Jx+q2gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/tokens":"14.0.0-canary.4afd353cd.0","@material/density":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.4afd353cd.0_1635519739154_0.2620377181624709","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/switch","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.a986df922.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa00d1703eae18450749a3b127aaf153f5525cea","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.a986df922.0.tgz","fileCount":58,"integrity":"sha512-fdrnHoVauuf0P/rPO0Uf4TXSK0WtwIn40ClowQUt3avbfnTem4KceUdV7F5w7Hc9WX6RlaBJ3tDoJGug/fYFkA==","signatures":[{"sig":"MEUCICdpdBdJTWcPrsxIupeZK3QfpgU2ijXMwxtCIAFNqWpVAiEAsdcWZfnxzxNmhCf804XddglqMM/65/zksaJw3RmdUDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/shape":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/tokens":"14.0.0-canary.a986df922.0","@material/density":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.a986df922.0_1635543344807_0.47703482421094967","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/switch","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"992a2479ef65a9b4869bde6730f21cfcc5306a5d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.c3cdff07b.0.tgz","fileCount":58,"integrity":"sha512-a9U1ZJCpTxDt0cJvzzPnHGFmlDPViJN/DvpzXh1Sqj5JJGHZMBsELvqWkH4Jq7sCsywcdet+fuh4EqM82SgAEQ==","signatures":[{"sig":"MEUCIQD2CweQ9eNCR2G9vcT08GWYzxWKEQf+ELqvrqRFILsAZAIgMjfY9HoXqJYsWsNztK/sjzl3E9GjzRpG0RPDOTwJkNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/tokens":"14.0.0-canary.c3cdff07b.0","@material/density":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.c3cdff07b.0_1636484801051_0.1483623740201927","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/switch","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.468392606.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a60d5bc4367dde74f8ab500f8c28b3c2bf696aa","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.468392606.0.tgz","fileCount":58,"integrity":"sha512-zTAqxXS6CHzT9z0Eed42Z8PEGx/mB233KhpbR/bTM+hnAoeSep8mu3/HqeA/kTsRgusDuNFoPg/lyHV7m1UF6w==","signatures":[{"sig":"MEQCIAgXfotKB7d0EwNGHc04astJMWdQMQkhf6Kfeh7cX9CbAiBHvbhtlbD26QXYVTSB34Llp1Ib48EDFV/PXCZcj/LrTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/tokens":"14.0.0-canary.468392606.0","@material/density":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.468392606.0_1636659653898_0.5107892754776728","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/switch","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.828f9803b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15e8d7efaf8f825de3b37a9c0b625f33377508bb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.828f9803b.0.tgz","fileCount":58,"integrity":"sha512-nsnJ/7P2uehTCGFpwwn6U0RkoLAHfosPwEfJ/FxxxRbeS1StrMiZR2m2K7cKUv/OTBcrypzQY4If3/Pn43kVRA==","signatures":[{"sig":"MEUCIAlCQMkfl8y8kILys4q9DFtcQ82qByb8h00aMFYqf6ckAiEAv6Z4ZMkOmWKMtremALgE935iAfiBJG87998QmDpmHqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/tokens":"14.0.0-canary.828f9803b.0","@material/density":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.828f9803b.0_1636660292013_0.18114696731426894","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/switch","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.8795cba87.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa3e276ae759362ae3b9138bb2143268a0a1c126","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.8795cba87.0.tgz","fileCount":58,"integrity":"sha512-seVX76/va/cpwr/uPNM4Xnw5YoBYbfsxxQ/WyMhb161RHUyT1rW0AWQw0+M4ROWNmR+AkSWZq5EpnjubuyM+ZA==","signatures":[{"sig":"MEYCIQDjRKHpX3LQNDj/bw/x4QYamnlurrt4FUmCOpAkA2hWPwIhAPqxSO3PCgiRnfgkAadT8NWIrA2zYno+sa8nSD/Q6Ac0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/tokens":"14.0.0-canary.8795cba87.0","@material/density":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.8795cba87.0_1636660650157_0.8605690220883497","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/switch","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51f55b1a825e802399547d1f22a14d09d6c76199","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.cd7f8cace.0.tgz","fileCount":58,"integrity":"sha512-e6Tx0Lig6aNIS6AZWpOEpLsgOBsMSFihg+Fn0n/fDCAfAaHg/3QGo0v8jrPiyYoG/nOMEjJObauvX+k5I7rP+g==","signatures":[{"sig":"MEYCIQC/hDtrkBQEX+OnITK2FBSorvnWROdLgbiw2u56k4sdEAIhAOptIZ/mCMUEjmXRmCV2CwijgusLnDIZi77AddjQq2lm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/tokens":"14.0.0-canary.cd7f8cace.0","@material/density":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.cd7f8cace.0_1636660754116_0.9664402216633132","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/switch","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.207230eb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4092400092a5014adafec88eaa6d6613e27fd0e1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.207230eb8.0.tgz","fileCount":58,"integrity":"sha512-zL7XDYLimfiNSzrUECjUqgGIzwD205mW4jCsH9hEyIqG2FdGbMA7KrCVE81iS+HqtW3rTWJxqEZDwCcWXkCm6w==","signatures":[{"sig":"MEUCIAalG9q6J/kuAvRPVyx81CNXRl1wb2A+XvjSbh56AQTNAiEAmHowQuS5Y6Z4EYQamw3fARjlhx+hay77KUUFbp/7qmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/tokens":"14.0.0-canary.207230eb8.0","@material/density":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.207230eb8.0_1636669517114_0.44015698080911236","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/switch","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8c9c2846711f9289f9f96c2153c1164c2a38ae3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.991fb99f7.0.tgz","fileCount":58,"integrity":"sha512-5GmNAFq+yT3PsBChyXBYagGzBK3YYgoh+LFqB7aLLd8brpZCq5r6bHga466P44dBFakmEHPFzajfoxbyr/sI/Q==","signatures":[{"sig":"MEUCIQDDWSOow3YWlMvwu+4+zcXs2sguJoD4G55IkX0U0dh/VAIga72HrdWeisRlWxPoQu9mg27KEGIToO4NzJGHxoXhOco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/tokens":"14.0.0-canary.991fb99f7.0","@material/density":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.991fb99f7.0_1636670230988_0.7965446668908014","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/switch","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.15db4f164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c255b18b1c2e6f474bd71cd1ddac85284eb26d67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.15db4f164.0.tgz","fileCount":58,"integrity":"sha512-/DkR5GRBemKcnrbXvl3Z6pRAVwaciWJ4PHmkzZe48YCX0sygr/DKRMoquMFrPCRt0m3cajctYGSqwZitD0g6yA==","signatures":[{"sig":"MEUCIQDP+UR86Fsy8ZQtltsWlBydQh5M6wJShiSleuec9DYUQgIgYS7wpc0PRTgq9REoHTm7l6XuX9cWDfCd5o+PWHki4K4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/tokens":"14.0.0-canary.15db4f164.0","@material/density":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.15db4f164.0_1636738233201_0.059984580600800363","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/switch","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"403186119c703ad4512f63c9c74d1a006c7da3eb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":58,"integrity":"sha512-H8izAj6niANBLGRITEWlr4TaitbrQ8pnMSIezLKERQf5rk4wWPDsHCAmxusvXeivIO88AUnG/KVV6zhxKP5NNg==","signatures":[{"sig":"MEQCIBmuq3Ce4F05getOnUbEXqIXPUyPhkOqfQJS4W1r4I9eAiA0I+1AlKxTS8Dd7DV8GzjR4E0z3JhBQ1aV2BNluuvfVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/tokens":"14.0.0-canary.8fcad5a3c.0","@material/density":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.8fcad5a3c.0_1636744474229_0.4042155135332739","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/switch","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7406e69430aceb255d761b793f48564a654f499","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.f81fb1d23.0.tgz","fileCount":58,"integrity":"sha512-/N+LKvHmXRTU8z3LOXneYtB/ZlxUitpgJS4we6rDStxfNQe9gwHgkWkL3lwQ1akUUbqiGeQPW8nz+uwtdbYMdA==","signatures":[{"sig":"MEQCIHDIjCEN0lYp7gRVU/7huBdcui3w3yiaC3SkPIT53YC/AiAJThrptZfrXyr/4xJUosFKzLpv9oDJHodFDjQ0c6pOpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/tokens":"14.0.0-canary.f81fb1d23.0","@material/density":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.f81fb1d23.0_1636756863028_0.3399909704753643","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/switch","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57c61a23e890b7f0a02006a8b98a9f8236823fc0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.783f6fd5a.0.tgz","fileCount":58,"integrity":"sha512-4CoqL/qjNR+cAfBm1LmElZv5z4tzug6MUlB0sknr/YI5Yt19+KN9Q12+rddgBwcmppjFJ8A5qRzyxXI9IwBUtw==","signatures":[{"sig":"MEQCIAjq0LJLdC/N3qqwBJGk9uLZWRqMJJbb5YjI/VmFQ7uaAiBmoZ0SjR5BerLv9bADgsV8TEnSqUW+KVxpF/aZ3UxUhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0bDCRA9TVsSAnZWagAAhIIP/3f+YSGXiNuzt7QWS0cR\nF753gw/uxTTmAAJW6UK+zvJwWScNMrqn2OGVac0j2J3iuFL1uH7wCoprOTvb\naATYeRdwKrNww5eQji2kWc1yL83e2FWrxw3uxoJNd9jFXFjbL1J2xuXmPA5B\nVm1KhhG8xETO6irJoHWbSZIO6O77kMkj65MoFpBfEae1J0KwKaiJpaCFUwVk\nUSalWlwYv36/oGdTEl4eEKb+35zKLHnZ7EhHjzoDkXuh4j5rJ3rkbe60IFla\n7UF9uXxm86dmDUZ1E+/R+0igTzs8GpSebcxB7379kU9n9bAy9m2/N/eQji9a\nvgRoma/kxkCU4Tspsn6wCulo/qD7W2AbgINFWYlFbKZ32Jp/I1zQqo0GyPNU\nOBNiJYc3nuKe496+DnBWuJHgPijGsCvHIYt10LBEDBocxFUZpTxY/dKl4Wc2\nmgRPWr3tO7OXsolH1InLLCOQ/YeJ2TjlHee4QXMJd0nh332m1QVanHN/6Lry\n9rQhoWDSFyTf1VNlZatGTIwS4pOP7ux+ceYtn0zO04MhzcZiL+Syy4yXpk1K\n/RfrZJyi5tkHyA/lA73Ygyv2KDZq97kXH9zho5QpeBAFP9cvEJZayeZhchBp\nRPb1D+nPWch6TQrl7gyECVxWMyD2vm8IECBiQ0AoAlPFCXDB0X/ip4M/kV5n\n3dFd\r\n=TjaH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/tokens":"14.0.0-canary.783f6fd5a.0","@material/density":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.783f6fd5a.0_1637041859348_0.7258284871736991","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/switch","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"574eeb22eb3ab95faa9c9563fcd2e380b6b5524d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.d57ec74c7.0.tgz","fileCount":58,"integrity":"sha512-1buwTirYNdGLT+wv43vIGOt1S9qeqrUxPb7+QZSB7d4DBcFHVx659vzHnHzVJrKo3qhhs2ObzUdH8yHuWYzmyw==","signatures":[{"sig":"MEYCIQCjyPARdu6Ph3x2XqnOXIxHpvgMec69dvKFhEXIFHNGKwIhAJoACmbWIdAWOnZCB/8NzH0BkbLcpBXs8QkPRcB9UK78","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9moCRA9TVsSAnZWagAAjfMP+wTGLuuwC2ZPwBlPWXKZ\nBwBPuMS4yomzmRcKHUzkUFrFI6lc34/ILWAaD1Z6piZMh7KwBFBoml1YmcX5\n42iZDIBr7x1GYde3N4FFDLyt9cwJRSZDCLWL5kNVGPmokUnQeA6CuQ9g8v2D\nyoXRE8djbGtcQjON40YECyF1HoOe8wUaxSBpCvrjsEBlNf4JRsFPnycvvp5s\nGPuW17WRET3TanbbxP57VMndv0piwbvzIgia4EdPe2O2zoSspiib9Lm1YGAS\n+OVLs/XqQWrTw375fnT6yydsM15aTezUf38NaFsC/TiIPmg55ZhSZwa3crXW\nFtOSAZT33fZmfSeB+RTVu17azd0AM2aCaAINoM0TU1Qsv6MP40N9cVZsHm6p\nuAHzkD8gvkDLmTqZWNuv8FLrqxjDFF9LVZKlR8X2Rx2YWHiscb3tScbKEfZp\ntGgPZSR8dSu7Q154RkoBEQIS3f5J+pplRNnaglxUjoguF2uK+zABq4P5N/nf\n/g8xHBxx6B1OMLQWZfjMCNpvyq5U1vvUX1vi6akB23TqdKI7Rfla/iIsx0q+\nqQXSJxzSfzZ784LFL9qITK14kLD2dBXKSs6Q/FP0Dfq4IjI9isvQKQylaULQ\n3fEB+N8FMxT51wFiloyWn93ZGabsYMqTOjxCjwSUBvi5+N5Weeg1WQRzMnQO\n1vkJ\r\n=PjlT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/tokens":"14.0.0-canary.d57ec74c7.0","@material/density":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.d57ec74c7.0_1637079463981_0.18748617021548153","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/switch","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.554c71829.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa0f548de50c76eb611c912a05efc0cfb49ff27e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.554c71829.0.tgz","fileCount":58,"integrity":"sha512-jE/Qjld3Z0+0xy3mAOKkA5Er3uY6PZmpdKPNgr1LdR4lokNE3ntXUB+cUdJpdw/pd2VnOAacQzC9UgACUakUUw==","signatures":[{"sig":"MEQCIFjqPy2jIygZ/3YMWWYoTLS2PtfOif2aEiZFzxwk9+3OAiAYE/EO8gAmFL2Ceem+/Ur53yvy9O1igb9o+ayRpKjp/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9pOCRA9TVsSAnZWagAAULsQAIaBwHHC493JkfgJTNsS\nPPQqP/eKL1Yz+ClYI8SObjIeuvRb5kLmQ/uNvfyiYz9hX9oTWbekIDgP8tin\nytrs0xU3+m7Uu8L1RdsDghTkWVej/VSBqYFSk9z+tDkkRAEW5/XjjpCl6MMF\nrmgOQ4nDVDkc9Hs8uZYccUbBtccU7Jq+wo2i4pxrRSzdLVjGIJUcG2pZ3sBQ\nxDFnutJoBnMGrZX/ecPrRFBSv09quN835SZmu4vhiUWYcI1ZdJAVz+jtTk+T\npLGl+Mah2dWMVs+d96Uxi89z8Y2tSHofdwN9PZIXBLvSvbOCfsBtWd2+b1LQ\ndAORvklWQtkN/LUBJ1qFmEwwPmfrrTsnvGNkwffvet2Llv3kUC0DstGm3lml\nSDXfAzgKfeP4AwooCFQ7df27jLNtBGtXmxTmwjrr8W91tXu9cRAE5zzQi5Jl\nqvem6FMwq3NiJFg44czK5My0hkQJihyfNxv+875b6rESItU+iV2+d8+tJQ5a\nmo/cuztbofFfkzyfE3jgpslkJKY5dhKHPB5sK5BPqXCvZhlRzwKe2vCNl1I/\nyhfP0sV9PF+yK4cyhyqm7eVFG5HPohCMCzJqxcNPZPJ3d856rL08Q56MiLjS\nn6L6Ht39AuBE0rylcEjP6PaVuWJ9SRf45drX2FEdv7qPPvaTeApYAmDeRT6j\nSSi2\r\n=h0JU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/tokens":"14.0.0-canary.554c71829.0","@material/density":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.554c71829.0_1637079630053_0.8057862546948604","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/switch","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d51d0694751362d9b8dc87b1711f64adf6162173","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.3ef470efe.0.tgz","fileCount":58,"integrity":"sha512-N7xcAZVtXirjJqHYsSZ4MhAqYXjQJSz6OniLsjGQ59D7cYE7XSYKnm5hsDI6i2O6MQMJkZmFlHT9cSFftdp8UQ==","signatures":[{"sig":"MEUCIHl6Pc0ExiAsZBc06oVcEUakvANb/YejXd3XECnuWJy2AiEAutFEZggQJvPeYJy0eEtniv8/qB/tT7lEWbJXeyCuCJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":724544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9twCRA9TVsSAnZWagAA1rkP/3kMjas4MR7hCkdbN4Wk\nNphd0haPa4XU2jbBfCfKKqVMo/HuO95vcivt29RACuT9NzVROmBrfw6OUgxw\n70LRWkVQ56VFJzCLVU4bTVFwAQLU3pdWWSeZLhrJzO3mfW8m13R2c+yvccoP\n87nHmcpYohWV7lnlFOYZXlfk6XhuGqnj1+eaL5rh/44mA8D8p8xmZdTYi4Yl\nQm5ElKZMfc1l/WauEpyTPyOJgkvbh3vA/oioB3taSPLseCFB4mCNKI2JBxBC\nuw/D3kbMws1cuJ1S9DtMqqnJEN5WxyJJ3oZUYFGd9i89PwHv+MW8R3h0GAwr\nYj104JDANHUq/9mTZQvtYYrjtziJrfr4R2Fc4AAHkvV+y1A3ZzIR+74KfCh+\nEIvIhhN5dcMqNv03kK5Z+FqwX6lgolLd985uFLoDv4Dtz2cZeTVDxe2y3xJE\nU3lAObX1bV+WxjbxnSaWYNG2pG99QuIJzStzamhOtqDp3YXkLGvxnFlq1E0z\n4thKWnDc6GWJpYy8CSHSOZiLi5+27VO/PsJyppIBZ/UCjbIB1Vl3bq/H1UNT\nqYhfmZeMBhwSj6p4lxNLIPgNVyc6Jc0MSryTLblGI+nrgOpxjJT1fwUJrlGs\ntePR+lW/dAoeXjYswNnsk2//+TN/nZSeXbzGb+Rt99C0Xujy4pVSxSAt1DNx\n2YvL\r\n=zjnu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/tokens":"14.0.0-canary.3ef470efe.0","@material/density":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.3ef470efe.0_1637079919867_0.5526086600244038","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/switch","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8754f3b8ead3d141950591cb1126d1725672c3f6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.61a28b2b5.0.tgz","fileCount":58,"integrity":"sha512-rDQaeYpQ50ZBDQFpFN0e/mLEjKvAVcWQuXlU8ttOW0pMxLbqJnuY5fiqUCGuo6pEujOwIljK2yhuchTWIQlamg==","signatures":[{"sig":"MEYCIQCAZy3HhXLw7PfP92koW+c7YKI4N+RrEXNae0pIjxFfUAIhAJnweYN3TictYRU5tNqlaqqlyGH1B/UWX87/D2riMKe3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFMCRA9TVsSAnZWagAA/kwP/AmqzpXNFJFzOPJxW4rS\naKoUxzaCaRJxZiAozdYSyE268cXI4lMJjxB+FiJZcfTjhBkismqRjTgXxU1o\nfZkmev7tUjBFeWz2UVJYxLfS4OBgT8ZPcOHoxGC2uRH92N6eAg1DMsqA230N\neRN3Latc5ETtNdUUwy1K7KCvUWwMIR0cQ5/Bd1n9hUsWq3MTLcn9X4Y8kPlL\n4xFSaB/bz1X4PocvVOzhpPjNwHUFCfLUswpWKVmju53C7sWZVxm5IAVJGLqp\n9oE3BVX/g4CTd7ksySml9Atpefsib5ny9vWfNNUz+CHPr1GhNHPsVrGZlZGz\nUL+UlZ860R87XyqLC+bhPvQJKIsFMoYl7lBUFi9Lb3NSyFNTIncBhg2Xc37A\ndFTg3APsRb0/SYHo32+RXYO2ZzTW7gDraXEvlHZc8/yU5Jd154y1REzFZrYX\numQnJAj5dm7bAedsPjvnOxhBjh3vbZUPUVDOEcd/KBdUSeuPHtqtuHKCeX3G\nlwdvatkygxHR5m7ynZwpx4ZObfMR4kTHy1FeIVaGyH4Dv9yDR91BPPIEgIuM\n8LNnle8BP1JOXN2NefwdYpp0U5HUOoTC9nO1cytdfcLrytLTXksyqg+CL1As\nZZX7vxB3TdiLD6FvZm2i/enXbPRrFrXBDeaGi2qJ3XcQSQ/6sbTgWEsGKl4z\nersP\r\n=qSkZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/tokens":"14.0.0-canary.61a28b2b5.0","@material/density":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.61a28b2b5.0_1637175628541_0.901641341274193","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/switch","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"913f5e630275ebde71c534e8b1515299de7ae529","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.fae6c652d.0.tgz","fileCount":58,"integrity":"sha512-aoolJOLnnfNhoyGbZWGc1j+PVDfgHHL5Va/PkxJ+H6IcPcnqyhg/2LEPkjwgGjF6QJwUQXe7++kQQof4I3jovA==","signatures":[{"sig":"MEQCIFOIreQ3j4JUyOkaCR3tWBnbfzJW1UMGagoyGgsTl9SOAiBAI4u8ClfXj6eDoHvjZRk9X3VpC3XPopwi25ixNAfgbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6XCRA9TVsSAnZWagAAECIP/RgZZ9mZSPOVqEORgWXa\nnxw9jVPjZdDz8TuFUYrvlS5HuKrv4vykuUF9EfFhfFO0HzrE9wWaijv5UMD7\n96SVE7GlXUPW6jXy/4PnHgd9PdVA3kXt1sVbRzhRc/9r605bryw5GkVr3lhj\n7wezQJ5RqthydYWX/CkMXzf57NCnEBLz8Kc8G9sQ+vVqEZgkaN1BLMtGvThy\n9GGIefwbauqyO3t1D5YO93rNU3nLTMIeqrmN4jKF0EpTo08ghjhSHm0KIRp/\ng3Mx6vJ5z+gXW+Ql+CYhdusvMeAL8ODb56p4OQAuk0g4fxt/g+MMqvlD6M7F\nmbbug+QYobufmniwTaYyvoPlmVXyAF2LjXKceLrBTzj2yuiyzXHC65qnC5D0\ngx5n+bJzxwErvyGCtx5fgHbcZs8VUvU9cffJbjH1rN/3NiKq0XHrkbkelTGW\nkaxUaveA7Ja3Ks0XSEvNj8bGXapzP7pzCqflfGR3HYC78g9ZhVxL2lxuRLK/\nMLH1YEUDDILuNX3nBpJ80S1iqM9mxurJqv0SkGxLLeFujc2R28LM/i6u7D7z\nXLsNOcQ2XSgSsoP8AvvOZlFioZY4zhCSYaGJr7NPWCW5CUUlymxC4mzfOybg\nT3Q4h/wZAwK4t9xqnvjO44RMIeNjtNOvXX+OFOepYmunId0ZaeYCnH73udqw\noS5R\r\n=VgWF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/tokens":"14.0.0-canary.fae6c652d.0","@material/density":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.fae6c652d.0_1637252759453_0.017628655800364212","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/switch","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9131af00b313a53f1990e158a99246510f0cf647","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.978a3b5bb.0.tgz","fileCount":58,"integrity":"sha512-B16q3H6EU1xOo3CsDlH8uvpyjmSJjl1N2xaoy6UHZQ3Omi+xrWqPDclNhkMzQuwP4qWF8UXO6ly/ssqT1H4G/Q==","signatures":[{"sig":"MEUCIF1Hqwv/GIhhtIqGeYEbwG7/zpjZ0RPimwuiSTUyDizyAiEAn4FvbyGIsj9R4UNtKGJt1CdVutTLVAiKFvbN+eJIHVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2sCRA9TVsSAnZWagAACT4P/jjp6sQ9sSSGSEjVhIIF\nAS0Bc9kfhj7R9wGkPDMi0YlnVp0Ls53Z3VV3CbS1lf5UpR9pToNPku5qYC7s\nqoSn2mSWE0o6CW8ImuF4vSaifJyl2ohvlpXajeS0GRWx3hRvbmO0V/NcuxwQ\nt6gcHh8XfIj29VlFcvommo2BVj0bPjsB5eiqNe7yxSqrs7E8HY1AOxymtG/p\nrEyBuDC0SOoy53qU1rZeWM2hvbhItl2yzLGvDdjoG682ODyJWCSw3O4AE9oG\nsGyY8HarwTdB5Lo+mltUGi0sUA0qZ5yRmBuiC36wQWsY9JxWsnxvNrLhgchJ\nYdSaeJRs5LX0coaUB1fvMc1mRrgXO17fEUDGIg313kBsdMNrJlkvrA4zEHFk\nwhzGgN+caXx5J8mMfs7U3K54q5405XIm0IqQNhLer3thVOY8mCkfHGBnmECl\nvZvbmv/NzK2hVbvCOoQCIi4VJBQvc+itnd7AJVQkT0XSleZpMNpkoiTl6/Ye\njaVRfL13grxfJ27ToUAtm+8M2M32JjKQfve4MFr9lF7t99j5V21Rete/+097\nMjRi5XVnQFPXX3A7klWdBp/tD4/UwUQgQFxRC+mASfKYt2fVlEZZF9eJKIQT\nb7DLrCMwHAl0IZKJUKikhfDLmgofUFecUEisdPiJ/D0qf7QgYolZ8R6bqqHD\nvv92\r\n=AbTt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/tokens":"14.0.0-canary.978a3b5bb.0","@material/density":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.978a3b5bb.0_1637350828343_0.37650935137218","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/switch","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"330958c84a0a4aca1fba5d0a21f05e125a8a7508","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.e6f43cf44.0.tgz","fileCount":58,"integrity":"sha512-C9Oe3CBfjgvfWz97EfjfJ7M1MgFF2+ktRvJbhgkQA1B4pCUFAIzNNrzSuKD2v5MDvxA2DTf4k3cNN8R9B7OXwQ==","signatures":[{"sig":"MEUCIBK1b+Xv28VOVPugHAaJgQvj0xoA0EVOEKUxXqxgA8F1AiEA0m67GaTm/PBADaGHt8LiNhga1onoeqhDYZtsyDIOOWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":725061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9UOCRA9TVsSAnZWagAA5K0P/2s79e8W0TN7EodzHm65\nJjnMd8M6En5duQ88Dwq+bLTEm5tAQAcRDTuwmtrad8N6y5o5+AuV3x2kwGeg\nyhZO96jO+GXcsNIPwrA9l2LZK4xZPnlztciT8VpI/9scJEZvOl6uMN9f+wnm\n9sXIC6qr0D6hLcQNghWxKgZnNqkjJ5HAoWSTMsn5mY6POFcm1Hnhe0tsZvDj\nAJGfHM+P11CZ9FJzXSPlbqr7wmHiMQoNqQc627fEegaCZph/aQWZBZ47f4RA\nZ2rRXWLNzb5enYizqmTWN79suzFgfr2OVAun/NPfMTLNCuIFHayP4aTrRS6l\nxEbvEX7QXjdiBrb+ADnX6MAy/XOYsoi0c9RsnwygmaLnU5PdEelob+7opXRv\nc37eQCp5PamEzn2VrXmQ+Cn230JNj9FXd5VwVCeB9FiUB4K8Wj1IFnjNhIN1\n/pSd6Mq7esWoh5/2AfEn6MJESZP4RZ6FjlF3WJIWSoBGrD9+hqjRI5lK4c0/\nJ3I8l6hnY2rYQNhSq86/ao/zdCyizhuSY6yEmFO+7+K1BhWyoRLci7GqfM2z\niQPgU/jdixThWTYTXmUaCK9GaLPLJ6FZbU8kVmmw88YqgKaUGHb+93f8Pk6b\n/O048TKMzGLsHeHnSaehGcqZFtHMdpavH4Fh9XgeSKREN0h8BhIfxKJVHf5A\nO7vT\r\n=0hEH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/tokens":"14.0.0-canary.e6f43cf44.0","@material/density":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.e6f43cf44.0_1637602574354_0.47427509538007495","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/switch","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d06dda1d94b910cef9c53bb05677847e93aa5752","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.39cf14bc3.0.tgz","fileCount":58,"integrity":"sha512-a9oFnT/MFMuPMrKte+Fgr812lu48gk/G9gGg1lG2XubXs+8Xo9hwxu5EClFff6Hpimtxx/pB5hzepYONAtvT5g==","signatures":[{"sig":"MEQCIH4lrzKsobcE/YaX4zvEur2/wYU5M36UTS7rQDTHKAXnAiBCi1MeDOXQB7hdqd/JvDeq1pdxcu+VG+2Dqgc82QD2/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCJFCRA9TVsSAnZWagAAnRQP/AtV5XJQ8wfF5eh0pprL\nuJZX5HPU4ISI4bTo6oLoJNdLfvrP0g5XbXn7Fo1PiIhYk4PBO5BPQEhu+HCW\nGwPJHSqD6EGe3ixjkmlDkSeVU2WkuBDSAoLkgcKWK/gEYFuE70lZjh4bjmw0\nvT5emealHTUaq7FiQk7QmUDzs0jZn9EosPtjg7A2PWJhM3FfRRPTZA3hKA++\niIpyoXWI480F9eHruVY2OZLyA7Y6VUlmPMEQE0nvCV9kO/59XSRasfLguiRm\nsozt7LlGNA1GR8z2kKy0RZoxPgiNOXaCCfBR7Tn+kkwH1DkOfkvUVoJp8mei\nACQkazr+5Mw+iylg097oM/FiAQjHLOcQmMwbh9fvybh+B3a6aM+Mv5SLjuuN\nggm0YdoTbP8MyAqA6aHgwsk90LM26TnpMgSwrDuoP/N8LOZ6l2tgNTpntCUY\nu71O7yQzei1hmoS2kqLjfrpKed0Z0aWQVsogpSde3KKIT6EQRYgqFTBR128s\nW4YclIGNrcisBnzyFudefJ3r43DOU3nmUlFKmOZQONa35pSeZ2IN5Rwo451x\ngeGpRsB+FD73Ki8kVbl5waw2qCrZhQhosLQH8Ni0ptky1ZropiWhC6LTwuEA\n3nqrIJyVpOCQ2L0mJpuH3w+SZ+umzNkdOGZHnnZmlrlOVadzWSUL8lPduurk\nHyFf\r\n=vlEb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/tokens":"14.0.0-canary.39cf14bc3.0","@material/density":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.39cf14bc3.0_1637622341300_0.1749491476553653","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/switch","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.93134d453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5748f8bea4e91a322fe536b7412e420369ca6345","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.93134d453.0.tgz","fileCount":58,"integrity":"sha512-7rkLpYPDquROG7XTpCOZa8aK99UfiYE7K8OMyIszi0fiDwu3BdnniqorBLurIgyOMCtunycZ17ECZUjKlrksLA==","signatures":[{"sig":"MEUCIQDj8y3LiBNGKDVhFsGk13z8notDYNw/oasOt9xqR2lB0QIgC/TOQ8D8F3qp9W5oSFmXACQR4/g/6g9k1rqCB0fg0jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtoCRA9TVsSAnZWagAASR4QAJA6dMnGMugGHWu4D1Sh\nvEjh2VNRGRLZb4oECIc41Myps4YiI0yIxEVwHGNHUUiqyXoxa69Zp0GoIGHo\nAPmLfdftzj7ffRCJh11u8AS54im8GGod4HqGuEgce+VzDco88i6hdsoEgb0C\nqASxgyx4ojVyNnCU6L6yx1OcShU+GuR27ZJmUhRP5UrvDIeO8T1rA+Z1D3Ml\nIGBM2MA11kBa0c6czKQoyUMRUaoQcIDnWr6ZKvvDIoNQx1hsBxKhpLOihCbE\nEcKoGOG9gEhLYzjUmUqshHO4w+SDwMEYfZM4Z6gTwl6hQ1q6PrbC/50kJFzb\nzwYG1fPKqgdfnuh0DNBhA2QpwUwsQhKYYbcBov2QmdKDTHa8KDCPMqdEh1Zm\nyYKQ958/FCs4hYMsQeG4Wxrtl4ZwX7bi8vuYoWbcl6vA39u2PzEhOEwCJgll\n7NtrTolTZjVBbfIblm/AC70q7LPd9oU1C/4OcfC8j3S92JUQaWtEsDrLBnLi\n4arllyIYtduSMOsG5DSmUB+J0jBHS3j/jiXyZHlGOUGiDJxXHhQNY3kCTU3e\nHRS27uMkNquSXkCl8iselFAqI1H75NSueucQhRYwCuDwomzubt5/FKdIjFCq\nDHgVIRWTZspwCH++gctuSDC8HMctoO9s6XLUp1VcwiUBQiR0vlZcwvhdq9Zf\nUaFc\r\n=t7Hu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/tokens":"14.0.0-canary.93134d453.0","@material/density":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.93134d453.0_1637682024767_0.8407023832936618","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/switch","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12926c7d4dc9364f1e79fac1810119c9565de1a4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.bbd11268f.0.tgz","fileCount":58,"integrity":"sha512-Wi+5IhHIgx13TGzat3ITq113uA0UEemEftt//WwK3jbnTOXX2UxqhiFhjgzYdXN3cCpBt21ERmLd8jySrx5ylw==","signatures":[{"sig":"MEYCIQC7xa2sK/KP+ke1oJixrWI3ACsLhgeAvDfGZa5ND4qH1QIhAOvUECGahQvvf0veWKd9ZDETTBcG0GI8cUpBK+uDn9r+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWwxCRA9TVsSAnZWagAAdewP/jj3X9pxT783O5WM+iPr\nYt/aj1bJeyEmfYuSh/e8H+6taXS/cqZ1vBGvb1AlGEBM1hBqRCZvbFj2H8/7\n2NGYSa/12AEhsQ+aB4tqSSrl3NeLnIN19dzHR9a68v/IRbTJZz4cOGHqBbsY\n2d9BqlE9RrW31uxRzUhpxe37Ke7sg/xVRGYBIa+N/pwMiEzWCDLdZ756zGMy\nD3ZB0WemrDC6eEEKUQm4MjBUZZwCJrY9cK5vQyPmQPbJdApUxdV5D6+GJIWP\n/qNIiowHc0vUHu9SRy9MbVzfguNR2l3VnC7BQdeLigzWDOpEGZlWWDjY+qCX\nMVu6aZG3em4u1nsYZkYwgbEwmAJUYxZokf1IWwhHXlpvkLzzhJWWt/N9l5Wy\n6n3cKvRsjZV43n65ywZzWMi7kq1TQgXEeiZsY0+nnWOgAuUO1wlfl81L2vkd\nkGscG/sIEPOoOI5MXIgt/Y43ug5OIXeOr0sFE3pTf+ABOc4nWr9imoEInvfw\ncDv3UyU8LSIZREJmSQ8QIwok6hKLT64acE8nhFoT5styM3eiDu947nc+FNeT\nuBBVSqBliUa1omuWrVaJx0ePuG/h5iH1oei/c8vK3yyfdj0dY/ACpOznS/wD\nYmGDQAPIn8cU8FM9EpS7zDDa+92lYBpbv/1g6a8Bb2de8b0UygPz+KZ1kARh\nuJy9\r\n=Ba+2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/tokens":"14.0.0-canary.bbd11268f.0","@material/density":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.bbd11268f.0_1637706800883_0.8638251867523403","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/switch","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b15ea1898f2f8fe9d40f0f9409e1eef3f6827ac9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":58,"integrity":"sha512-lykFO3ehx5zmWSYCYIlmoAA1GAWeovMWz6c5/U9GZHTdTexRqkEOpHlFwHeX2fj2OgeXxXZIN6HWZX+N/O4Y6w==","signatures":[{"sig":"MEQCIH1c5EylB13ZT/mQksfNvTGGTBqvktZetiXXQT1c1x8BAiAa6XiVZgxG1wdyBfSkYYbszOSknFIbixuKZWWAXmIHgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlxyCRA9TVsSAnZWagAACfoP/RpxzWU+JvWoTbhd3sdN\noOWaJhzyhEk+ZUzluMAG04FBI/AHUZK29RLA1ws86KeNemwnwftr+57gbeOJ\niobv1dPhTyotI4i3bgO/IXrJCjGicyjiMY57kjISiO8u6AzV1XjOVGqCwJTI\n3M30+hLRYoqzIPlqIhxYeLgTZYjzNGWCyFNRj6VAIX4GYB7XVyqzmamPE0vc\nU00iTN6rzTSHGWYCAaR+HxZdEStQarn9OxfU2olIoA8pW10iU2/UbC2IDGz8\nZdwdlR2Bh78NmlMd/Kwlmpf99YhkuvfXE/pQuL+xBf4CePq5VlW5ybBVMEyH\nAnpzppOlZHKZ6jpeiEmQI63Fb6dWKk0xyYAXWnzreklXtP2UD2Nv8JMBPK3Q\nvJGvBWRwQO/UmGzNM0lCUlX3X1yxCdZwRg25VLnPxBbC0hoE+RJS+G//GRNG\nfVmWq1+WmXypi6Qe0Sjfq+I62BRebO2c3tHAtTsqCcrUvehoJNKduCXWfAkm\nezLfwRFkPyMXrAZ6g1JW/g5JO+k/9aOjdazr8ScC0iq8YOxciHpxxaGbmCU0\niw7wOt4Tov683baQ2rwnmC9CRGO74Cwj03kIKEx16be0/lfG3I5UcqZuDOAw\nuIfkiyHoQrGGfLcJyMR6QI1M9W2nWjaLUCZQ4IR2Fspu5CgRupS+LOwtNlrX\nN3R4\r\n=qZyN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/tokens":"14.0.0-canary.3db9c4d3d.0","@material/density":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.3db9c4d3d.0_1637768306177_0.99341849476917","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/switch","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25bf4bcb37a4fa43b8b6000df95ab8ee2f97eae1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.78305b6d5.0.tgz","fileCount":58,"integrity":"sha512-7ULkFVxLFv7wUEPl2SXNI/BUNRfSK1NVJXF/UCCfgxQ9tAoc5dpCaSpFIrgCgMaSXtfaEylGhCD4L9Q1ZC2vhg==","signatures":[{"sig":"MEUCIQDUnDGn/r1KJHGcT7FgE92k2zira2VEpD9iVjQlDcAM2wIgDN9ha21PTTYhaefshIiyCQ75yVj5YEoRDRa5xOovI6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfQCRA9TVsSAnZWagAActgP/RBVGb0ca2tJL1uyJxAN\n0BtrY7hyP7RyU3mFLqqOn7ck+fwRy2wj5EGUoL5ByfdaUVox+fMSN0HKImKk\nz86aLRIOym2ebh8inBHMVnYCF9LezEuHIJB0uiV7cm0KGxOFOz8bDz8IWfqT\nukcvvHxpAWX9QRyo2fnlm3Byn9ddIhwIzeuh4ugf0x5v8PislpgfHD0PUezM\nAiqBrryZ3ebJYNt3usaxrRy++qWXtdGVQmUb0Nwg0HDgif/VKReBlkMSCnCl\nek9r7u12xD5AqHu23lKLXrRnJhxuFyfpY0qC+FOIw//IwLvl5TZJEPzp0r0G\nNwD+ynGN1GmLKXZHhQpESZ3z2WvMxKok1PFz7+8nvBGFrcooKgpdLEw78/Pd\numF+uyMLDP8gJ3UVVW8Gz3bFh4cVp9e2yBdbWG9H5Q3s3eA7Kl4YT5LEPlJ8\n2da7Jo249XPzgiqIQOo7dA2de0KmVHhCkzsE78HPcg8yHuaa+BbfdyMhq1qn\nG11VMCJXfLrInYZwCL60Sk9Nnj6AhAkixrNJms8u/Ahb2U5vROKBdMWr/9Br\neHiBE6++TaUum+GK4UMav3QNDk7rloTZl1ULtH+EGxxAZupTXFic6bfOG3qp\n2xbg1jBr0WraUUyJGzSNq2CONvDgKe2f4fbtsA+TSU/Wb0tniauE8VVlvZZY\n+NJz\r\n=J0FN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/tokens":"14.0.0-canary.78305b6d5.0","@material/density":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.78305b6d5.0_1637783503993_0.7817019429663743","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/switch","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5bf2a7f195d8f25ed04d235f647bfc02563b46e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.43d08ba77.0.tgz","fileCount":58,"integrity":"sha512-Zd9VLjSxwjIbNjlGH6k7zBPv2/8/sT2mNS53SSBrXYDZXEKOnLE/Zgy9lbArqB+aPmTX/SXL4wycHgsDIdqp4g==","signatures":[{"sig":"MEYCIQDslICY07s3kvVToOfFFr372kcPUKQpqNXrsXvqfpoinAIhAIc0Taei4hWIKI7m5txjUQTolbjCdD69K/x42/1Z5HCN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxECRA9TVsSAnZWagAAuTgP/jp4R0CSpC3l7BqtNlFb\nYqHQwalo25joonhMUJyxEQXzxv/QqOxzdSxQY5/03pweWmdf147kiT8Y2eIt\nsH+I6VmX1jx8nnHyZfHo+vOKq7Mo9ilyfuWRjl+KOpS7M0b9draEs5bmeyL0\nboxYA/YWBMMDe4Fzy+iNwAafO8+Zta5WwSW/YzoDa0ZrEXaJogQe0b8lAg78\nc338gFEtjMukNKHFG3vJpqT7ia5yvbOAPMbf4q1DPHQ4OehEDXWxFMp1gDLb\nwZ5twHUoa50uwc6X64Ehoj9k9OQwi2fsaeT+vHkhAbCE9r1izoj0zk5K6rsr\n6odtlWgVtHJ+QXthWJ7/V7OiqJMLvxx7Ap+qFG/7VtytTk8Od7mZEa8KSniC\n4uavCvIFOOEeBJYch/FZJ7iWZAIYd4i+iOlPgUiwDEWtNmV67x4jeMUFaTRw\nG63Ij1S5XSuVRbtQoTZcIS3lPuYlr9ml9zb7wi9N1yI1Ple7x/go8Bi15SHY\n70dkV6PKSBGbPIem0dK3UQ0yseVbre2XjeX0ZfmebA5BsEaUQ3McZa0M/t2n\neWu3hEsEfwgZsTGe23dg+nmj9w0EzyD2y51X5NrYHLeIt0Rigjdk/4tkqJWC\nVUc+3dgmKL4zu8/u68hKuOPTYZmOqgOKw03+YCZIGgutVWswTphhmw+9tQlN\nnXUR\r\n=w5Q0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/shape":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/tokens":"14.0.0-canary.43d08ba77.0","@material/density":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.43d08ba77.0_1638313028651_0.6795828087039619","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/switch","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.17a072535.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2f39d7ad52e8056ea95f1406136b352734d6a33","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.17a072535.0.tgz","fileCount":58,"integrity":"sha512-5ZY7UuS16V7TN12ALa6KYytsE2OONmllT06o2gJC6NQNevT0sf0Dp4aBLMl03A7Hwq1xrCG1NX50ZFoGpazTXg==","signatures":[{"sig":"MEQCIB3omTrPUMOrQDtQ1jhEuZZm7Vp1+1avcq/lgH+rBWL4AiBcY/0hx0EQRoNaRl53IWwfDfLsvwSKiZ0F/gVtfQMoKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsiCRA9TVsSAnZWagAAFj0QAJZDZO1Sl7ul1YEA6aC5\n9igP0GEJ/yNc1Ad3GBRZ6NStQBTg9NnDptfkaWsIilq8vpbrgiF9Sd0GVnHs\njJ+M8/5SE75FkGmgI5HfFrrOc3kiZddAU8I9tROph1qpXdHiPmsqcdXFzT2F\ngoTOKWdjDRQmibsQ4U9EZJypVtf1MTFObdOJxCqhgv01oqq16PkhKR7q3Q1I\nby60YYsmFhXmpG6ZybheBhKIcROQUnYQk3MXzaqzK0UoZkxshGhL1EA+mRzu\nxrPZw9VBK6G/+WD6FthJRSyr+37PbEWwtf6FujWIcWLVnuc+UxN1swaE/hqU\n1KXfo6YkwFaV1jGi8i5UrMTzeRdRSZZ8tO2cNr1YVk+0jJ0jkCKpc1cH0Fqz\nt8QkTipt1vZzsY4Vt0LpC6N24ozmPn1s3OrGjHeZ2rIF4B16lUKIYP5qbVC7\n4DkOQ/nerMcH7wEVvckdk8lsOR8yCrXswMz/t3scn7pdPqzlw9ayvFmc9SVI\n7mL+gkgAuaji2cJioBVEd/BPZfyZne3tb7LeaEtEyfLvK86uaK+pxmPfBlF/\nkK0gSMgpwEji0ngnMh6KdHC7jjzOBsLAfQewS3ggZoYTy7ypBHQsT0YcE/oz\nJIS7KChIBffzoEbMfVBEAGgQjUXRLmWYKmE1KrbEVEGhyGn896yNpIEgO2bX\n0UKO\r\n=mvoX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/shape":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/tokens":"14.0.0-canary.17a072535.0","@material/density":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.17a072535.0_1638468386259_0.3302668053561091","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/switch","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.5d809696c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50f34b8212b439149efc81a10b76c3887f9473eb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.5d809696c.0.tgz","fileCount":58,"integrity":"sha512-GUwkkexFzBaZy0KF7HbCc4tn28wFCA73RTdc+7mEBu8Qcd9B0rPkIgnXYfgkzXT9VVL9P0I/Frzes5VB+aAM+w==","signatures":[{"sig":"MEYCIQCwn6vKhmEOb4RrA+3gkfj+S8sJIMWgbbhaA6eJQJlFmgIhAKO4oxDPdo2jG71OIxhlABX3aAIRH0HjeG4TRUjXeCC6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO8/CRA9TVsSAnZWagAA2CwP/A647I8OY7PYfuyilvGE\nXL+vi5CugVb5KpiunDHAqR4xzrMBWSCMnhiW3IrvPvIzASam4X41EKduoTie\nIQV6V0hAwMnZAGIBtAX3TLKYRsgmFdTGxB9Gts0ZAqKAuEFNE3EHNV574f/c\n5XAlM9EaQMHfxxXCaS3jCo+OqymkhYQgkB0CtY2svMtPe2yGklYpocjBs/XT\nC/KnpISV1chCtGDAexNwmZtMxJq51x2UyEQRpH4mOe5VMBrYii4hPpQlbSV5\neG8+wYyEnCGczQFXrSF/I1zVzckWc+ERtXezyvznG7n0CxjNuJ7fJVyFPojm\n4sjYgx3qXcBeIUtjghIrDoP75avU/IaE5AuHVW92E48/pTh4RUH9Uphgn1Kr\nuuLYWKZoxjZ81Hn0n4UrNQMI30XYuFnj88vn25roRjxJQdhL3OCRX+oel9/i\nCrJ5kxT2oZnnGX8J7oH99KvD/d1H3ABR6zBY3g7+HxdNr3Z7XqHMZST/BxWK\nuF66C5nWyK9kT7nO6N94zEvjLycjSOHBPAoa+8sj1gkP9PjWm7b1vT2vfqOY\nLba24317f1FSSyuk5L4GOYc45QdTmCYwy9cP1uCjyqZrt2+pPk4MQIY9rXyq\nWXgv7fxNl7EvW909/gzUL834emYo1E6Oa7rYvqTMq304Wf2zTA07y5UW7n3I\nPz+a\r\n=/Laq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/tokens":"14.0.0-canary.5d809696c.0","@material/density":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.5d809696c.0_1638985535583_0.327866234113231","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/switch","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e10b7d0110bbd5f793d3e5fe4ee8ec93ae226eea","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.b6510c8c1.0.tgz","fileCount":58,"integrity":"sha512-geYKfXNQK1XyFFEIOJTJWLepbf5IMwxtY/tDLjxtQV4QSg1AYTf1++LBP69Pe9OLRGjyjM3HP5eMHMic3spsIA==","signatures":[{"sig":"MEUCIBPN+LC+n5E5PFSKk0/hHyrugcHyui6IMm1ZSjwZKvt7AiEAz60T+NYbhOEZv0twjS2KqY3g3p8m/kQb2Uvs8wTDsdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRsCRA9TVsSAnZWagAA0D0QAJPP9LnB4TJWo0tZMsP0\n2ZMVMilJu41AOtpcLACZMSzNHzBv1i5KP0nBtUaPfQmKyhuAUQWReLSF6sU8\nqPsnBkYdUR5dJ+wBUNjR5PHmMkuM4nuBr0HEvJLC/klX+WS56FT1Hcvythgc\n4WhPgeo+1eF6TvnHljcM9J2ot2X+1HX64457JKRwCbRJ0qmPIyO5WDQD8tbl\nG6Kesp55oh2Ke/8mevAQluq1yxiOqn8Fme2k+2crmE0rHU22EOuDf5lYP36u\nMOO4u3aKG8ynQdyWALOoGNpTGVLX6Q0J9Rw8wHPht6sH6oNDSIxKp/StQfV5\nXPv13pcpc6RTicndnjAPj9wbXPtxxIHZaGHEavcO6njxxyi04vMp2/uI5Zvj\nrCwYB3esBpnJ8E7XrxPSXUTDf7iuXnTpV26u+/2KV4hlO9Bhwg4jQxCQF43h\nAa5KA1X43T/9ju60V5olBy1o9d9rM++FgmBOTnU6yjTZD6XbjzztJ5ZOnF54\n4XkSj8CCzeLUlTkDsbQ+KzPJDEum5eKXnHUmKoNTABT10A8vU+RPMFE1YYfl\nyCZR2iXOmfxiYbBBU7WG7cglOlzVQDi4uS2UpAiPS2IfeNEzUICI5yssiE27\nAEPzr/5wrfx2/c3DC+Ubjxt7mb9z3GrZIFecVM3feXaUmAdd1DYxAq/b2vM+\nV0Af\r\n=4Ctb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/shape":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/tokens":"14.0.0-canary.b6510c8c1.0","@material/density":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.b6510c8c1.0_1638986860604_0.17630959146015224","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/switch","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.f460e23da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7627806e20f66bceab087d063728115e133d850","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.f460e23da.0.tgz","fileCount":58,"integrity":"sha512-WeyunfstOq0MJ3ukcjlDCDQblWRp4OMBUni2x+OsGOSaL6IPPgyHgwxNJVWGuGHndNXpwxoOr8Y2MY18Nf0oAQ==","signatures":[{"sig":"MEUCIHf5i2/Rbm/uNwUbi4mhvntp0V0yNC9PY9or7Aj3eq4PAiEAgfoxYzUkda11+CTTQ+GW5KcOiavMAdcDc48Rp97na80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GoCRA9TVsSAnZWagAAeaoQAIiJgIazFNstFYPbP5ku\nJ1MzAlgMILB6wJqqhwFxE9TlrnYOBq3sQ0wWpGBPeARyjy4HSUOHfEOhBf2M\nfp8SO44U7apWq+W23a/KutswVs1dwGf8FHhqfQpjLtcln9x5n6Teqs3JvG9h\nv3A5PntTX3d7ybGN+bS+Q2X7UjcTE7a+yNqLrYVS3lU/tU7ES4fjNDB5lBhW\nc/Yru6sHLIrzlvsQGYjgodQTjuxzAUlFAYn/CfPqYsQuhcrO8yddwHMN6OTX\nIG0jQ3SMO8bCwagvUkEai7LDwJBlSyjxIpc/rsL7yQzBllHHBePLV7RgPal8\nu5NgPJe1XvjQiwnNPRLZx1h57yZ5fgWl/p/z24XnDZ03f9PMMQm1MvhfcpK+\nrT1Wdl8fQM1LY+/I81w6sFVSW721Z9Nour/cRxaMMRu9V16Czmh4r2qBYZjl\nDFxwOZBtt5lmLflOL83sCx9XHjP8QHUH2o7VhLnXdO1glHLxP8UxodolAGNL\ny8DbY3SfO4uhjXF2ZaePS1o5RKcTfwjMccChE8y615HboXMUYO7zR6WnlZ53\nupXStL1uC6diKmFaU0NupUzIX8OVc29GcVw1UmogZ6DiJdJHkxV0qVEVEyfN\nawCbpPYjbJ43kB5TwGGFcCMsdLD3+nxHvp2lc86ywEUzKVXZhLrZVJKm5BHY\nK602\r\n=TAgX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/shape":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/tokens":"14.0.0-canary.f460e23da.0","@material/density":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.f460e23da.0_1639149992353_0.23856199862147998","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/switch","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ce869aa6509fae4c0e8d9ad6738d902b1b52610","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.7d8ea4624.0.tgz","fileCount":58,"integrity":"sha512-oUL0sYEKrOHmskpsypMuGJhb94rg5PueH/i9RBsJKrQ/bWZV7H/4190+tJe33VojvaCEJZyjNfZgcdWf8tp8ww==","signatures":[{"sig":"MEUCIQDZuYer0Io0ZecGOpxwxF7SXMHhVwxDQKOclRfaJ7wiewIgUvJ3ctS5XCu7Crcuu6OvdH40oyKJee63ydTqCIktDkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6rNCRA9TVsSAnZWagAAtgQQAJHUYuC2ccBrErfNW+fh\nSTIVDetS2dF14f0w0q9dxsrjaNHoD4cLW+tQHQj2FxdWF6AlVwFFzK2FDsSz\nn5+zQGeQs+NFEYipMYUDuDtcxGLbrqs0b9WNFa/zzkjUFfkeWdzrFzVcoper\niVFs/A30R0Fduws6YTityQX7DEddr5F3G0Oqq4/yUB9lMYo/HjDnqNp6CjL5\n8r9VMKzjYbm8+Z3E8FrmkUBWlT5FyJFann1IFRyCoNxCTrgIeLdzPjloA1Qr\nb2O6aznVEe4HQKTgAD2J6mj4UPOqg8Hts+RiumQO4EVBS62NMuPCfzEW3PnP\nkmbzGp5OLBntyyTcxMcxMEbu0sjP670hY1AmreKTte9taDBtatiV+dWQBDtV\nqHzsQhFpVhY/NCyrOryLile0R9GQPtlOdy6WjYK1+TlIqLp+eIBPu1+Rx2bt\nBWs70yN42j8wFWGt0KxUKN309YZ6OQmtj9Wv/lqdK2P8CYoXAPBsxFD3fIyD\nuYaPZ6u9qkFE7XfkOq3WcNQd6TbNFBzXmF2J0svFYlgxDJ904pkyw/Yv5u2f\n0pqysYownbBM17+cZAxPeGnheVxsAawTQRtMdXaaO+Vk1MgDGmddKr76t088\nDd9TtX68hpyTQwZEQwjDMfam2P4hFJ5GyisLFoKxWUKT7v2BndAi9OO7ctTA\npuU8\r\n=mekr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/tokens":"14.0.0-canary.7d8ea4624.0","@material/density":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.7d8ea4624.0_1639164621318_0.31255264175420017","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/switch","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fc28ec62010f27d487ecdba70bba132c0a1c8b4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":58,"integrity":"sha512-2RnJu91oUAkZQ/S5B8z7dluCafQoHUJWnTFtB6zSGT2Tao8xAlNZFDiKsUoavf2zOa49489bML0ewxeF4cSiaQ==","signatures":[{"sig":"MEYCIQDN+cjyKgPehI4lwiXgq9+oktjWwR4kiSus66mrXNntqQIhAIiZUrdobvTm8oEOEs68CS4uPvLsJ00z0Z2V/Sne7dMy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFw0CRA9TVsSAnZWagAAuyYQAIo5LCjUPNKFez/74J05\n+9SeOCPCmyeRpGxQ9dc3clGfUjh7lDftWPBAbZsCQxx04w6pw/gQFOZSAQ0x\nX6/e4+krzCCbOWAG+hG2QDzR2I0jjIQrybpZmfvXmm8QF8dGZoVxd5qNyKld\n0jDPWV6nZj/GSMjVHlcWfnQP0jlXF+dCoOqpnAnSYjlHmbt35+8MZ5Qi5QnU\nQK3eqjIeqScJOba3OU5k6bTgcon2dz/5TWUZpiuAW6LUE3QEra2ZVFN0CTKC\nA8zTXzrG0k14Ba8/mSFNLJGIGFDq9LQr+EKg/AyOGJCec4/BDGEj+rE1umdV\niEmJAGZDm2y55RyomJF2H66kjG1ABgwwJvDkY5ZfsbRaMoBMmjn4bgBT03A4\nAe1JAh7kvY4EJJAFFCZwq1szeIAwJhPMhY0D6MRrQeZiPNPz+uR632lYF0MM\nDs8P/JDbq7jfdZvijGiNaquZIKHz4jEyjsQY20ixLXZ0++jtrmgWPDF5cM0n\n22t9Z6PZDApIUS3GFhuPZUkLb5UR62VhwSYM7jjmVA4Gcok67N9SibqKRkYQ\nBdpXxNAGM5sy5UiZd86Z4IESpamcGscbvOqLvoNfuuy3y5M2FbhpPy03eJX0\ng67CkHGVkzxmLX/X+8jbGTDXVyMd4DYSW4jZvQq2ccmRYUVcLQyVRajTvwEt\neTf8\r\n=cKrd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/tokens":"14.0.0-canary.8fffcb5dd.0","@material/density":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.8fffcb5dd.0_1639472180224_0.4681934792984135","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/switch","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e372d7039cadfc5da16bd291da3bad177fc6452","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.21e1cb9be.0.tgz","fileCount":58,"integrity":"sha512-p+OE5CwSY2mX6YrIezD+yTfe7XvGUeo704kP1QjGrlkfRWSYEIvvXZ4kNic+g2e+Z/l0hmc2M7samm/bWGCE+w==","signatures":[{"sig":"MEYCIQCKtfJbLVJxq3A3nYhxVsPlM+YDc73QRRfQ0kXZ68L3YgIhAIfXKs4/8Be1SqzmhOrR9fbT/QsGkU+YNu1HIPd1TYWR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPNPCRA9TVsSAnZWagAAvMgP/Ra1SrjZhxY7KWDFn5yc\nhodUGUSaFf6bJv61uc3R9EPwZ103O0MyO2f+bS9Sm50L6E8Y6tvmYsVX+xm9\nTxabl5+sRtycLoa3Oud//3A5+WDgiyaSRn2+UnD+a5yr4MTDfuPaF+hlSGjn\nQWvyxS+rP8p6XgSsrStq0Z55F9lXer8NGUAkxwQN9rHrCkRpxaItOKnIrnw1\noh3nNfAIGpemcZtP3+5TTO3OuUB7cmt5vx3FkmLt4PKq6gajtmZhfFFYEgix\nPe1cioKfmbfFWAIFqR3juGgIy1KAaZjt9xyYgd9iVo8Y47MXvUMlT/MrV6zg\n+FhsFMR/8uzSOMT72bPQqqWgWwz4mD8h70pL6CfshoLlVKMRMRbEphtDQNq/\nVaXGPN3AwQN/+8K1SpkXS6TbiKl5iYM5Qr0Zc2W+OoPyFxM/AhNro6vfRUZd\nj8orporcP7TvPzAo+GBIX/y0vkKUWWT9YXg3nVLeUozv6qiwTPLN/N1i/uh5\nemQOmeyqBftHCW68JJ2yWr4DZ1itcWz+mLEdF4P6dekDDY+KxJBUJ7PTD7Vm\ncaoKsIhN/rjNgw6KdL66o3zWi6DAVeOT/V/8Mxa7znJdH36JpxLHJN1zRPnM\nS4/WJ6O3HKR70y5GH//Ehi6vwOXYvyGSZT198qt8NsJoOl0EZsSo/Inh5KKX\n1iHu\r\n=mfAg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/tokens":"14.0.0-canary.21e1cb9be.0","@material/density":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.21e1cb9be.0_1639510863284_0.9815729841053156","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/switch","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"143cc29cba8acdefc13bb9394d5acaa737d35356","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.ba78e8724.0.tgz","fileCount":58,"integrity":"sha512-mgzDpdBYnUgQxI00aCtQcFgp7R/B47IzdCkLgo9OvBj8PwAMMhvN+GRWVJADN3nwZ2u1vo6efJ81zEVG3epZEw==","signatures":[{"sig":"MEUCIFHh0f8UTe91RLDQkO7ROfrir/NklJjOAKjkyrGhmR9iAiEAnNuemDQyMO0kV+TDu9X3xdspPlnLTo8Ho8bfWNDSGf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumisCRA9TVsSAnZWagAAdEcP/3HLmobfEkPDuLuJmh7e\nA0cOiPG6ZcDCpnNegrupJxVAKZDc4mPsIWnAVg+rajJmecFuSkOLNiOM0Fy7\nTfTBFor5OjTqMolXsh4bKH3x+ExTZdlTecNJhAbEH3TBSJqPQLtpgSWp4ioW\nEpTKExKNfzopz+4DualtgHvtnRrHtgEu921iqbd33q73+eMHfrAs35q2Jdy1\n81EFNUUtVTR93vLNBbxjVzdwIBFU25mBd6xpT/AuKaTqu9CqNOzeY9M+4lxZ\nwXMLlnAcs8gpZ9S2vu6WaPigAt2sL9+cZFzsbLaqJzUCgviB7Um/4CxrKn2o\nO2yB70sX1Zq12SWadnzPZeq2DsHPger8yINyjHesLV2DdK7GcawU6gReOj48\nR1LSLTFTyQQlfP9x38sG2EWqsNaXlPReS6SwXECvH5BEJzQ5Uw8MHXH9wNCR\np4EYCqi1UbpW+cFql9xfebUU6RVbrNlsXO4GJNcJE9FfLg4/dxkJrJKFFf+t\n3gZl45G3G/0iB25qJh/7qNQCK0m1TSzkUfapakqlvQnsu8E2GomWsZR4ytb0\nlYcHzI50nMeOVRQaCevAe1MIXepFGawxIsexB8Wp5o9R6k3s5e/YkJQLeg7C\nliQVpHhlPaBFvmGIqTIurP4PtGbyAJAC4f1sPArr7/MCMgJKxJds/H7LibfY\nK4BR\r\n=L5eZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/tokens":"14.0.0-canary.ba78e8724.0","@material/density":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.ba78e8724.0_1639606444180_0.9263357034537028","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/switch","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a4ad06ab2e2fccf150437a497d8b438c27ff077","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.e3e073c00.0.tgz","fileCount":58,"integrity":"sha512-bQgnxq0ZCLMQyiUjWrof3BIBdDPYyoJc4/CECDf+SS+ZRwWMgcq8cSWClftkz4THKNzzd7EzN4ko8rnOudZCHQ==","signatures":[{"sig":"MEUCIQCTvswWaRZvta3u1C3kSZLefArcteo3U9g66xvXTXGUygIgeIQ1V6Y5hRGGeoPxvTPiBzusPsuUQnpbS2C2KElbA3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFcCRA9TVsSAnZWagAAEqYP/iiXDqairfdvnpQPQReX\n4wIEAj94VSWKcVwkOTVZ4nsSULFR+MSOQe9B1l6Io0i/i7Ip61Ln+uKXweh0\n/ZWGOnRnpLSB8/i2g417GeqKrs2GeteQQYsmXgjD69osUYWowEWw+tsYXmnn\nP16GZm41b2YhSUbkRzee/0w0WIo6WSApAw9elmSJbT4xBrVYi33y+qYpEgpt\nnvMd3B5LCR0ULT0y4zi6hAjaUllL6LBBrk1MVa9fSmk/R8wgNlq6usXEQUn8\njHs2PiLS5t4Wh1Q+GO/NBWfER3VJ3fzA5dz2lPZzy//45S22LJ9FI0QyNzSK\nGZYvxtEpGv/vlRh7fbZYffAzdgQJ0rtuprd7Bz1yrnKZlzYSXx/aG/1/ctKm\n9oP32USCOieUfZTFFolpVBomlbo/p5EHcYeOcqugWKSsuFhR84PfmzGZPi3s\n0Fy0QbcnaON6dgjwxxNLUjGX29vGnidS9m79VAGFAMWafaHSNd4Ap9nmKqPQ\nUgob/y1sDQvab378YUnZPSX/2rcMGysWeXcEEHcms4EwsBd7OutMVDvMW0B9\nftBBfVVXZdt5k352ar6pvn8z40lW4WkHFW877i0lUBBq01MI6KdYLyPZ9Tao\nYaHiGeWW0iRPcRGVH6MZ+GWqpXifMGkq69vv6q64Nck93/pJw1zKthFhtOqn\n6CTy\r\n=Uzyb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/tokens":"14.0.0-canary.e3e073c00.0","@material/density":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.e3e073c00.0_1640034651920_0.7126144503589433","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/switch","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c8c644affa80da85a8373f26949f58c7d4d9ae0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.3366a71d7.0.tgz","fileCount":58,"integrity":"sha512-2AXXOO5/9g8r0chCg1+qUpI+RWlbyoBCvE6GCUak/UOnJOiFB7ie9f+9LTIjaL2ZNgmhCFGvNpxk1nROQVFkpg==","signatures":[{"sig":"MEQCICLBXp+wVpBRgTDJv/iRIpY3XT89aRtIYDjztVW0OmPVAiBvb3+1FO+kr19RTxNq/FfK5rzi0e9IkJUlpVftxd/F3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxscCRA9TVsSAnZWagAAgqoQAIyZJXMHlQHM10i2MWwf\nGButyEUZSvjHxUJaca89NgvsLCxl5aNmz2hXki3/X2Lhc4goqYSL5O5UZUj+\n5rHJ0S3GqsIf+zruYnNcySuc/5T6/tZWbiIXSDV+50yi3uN4SvFzxgNPkoWI\nIm2wugqzDi452lqce9AQXzrpGL4WtadQeOICHUBV6U4gXYxTrCESI7aykYsw\n/VXBseAj9wMslcD0Z2TdpHmX68VS3zGKkVh7RypAYMG2mhoh1mBp3/lUmS7c\nGknVZ0VzrfYhBwJLuo560zJ1qWAcED4MlyuYJyoL3VbuhyYb7O7OzsmKPpS8\nOjUWSu1D/3TjFSp7CJcnKq9cAl/YsNryGGEBWpT8YIYSTxw5nb3hWK0JgfSG\n7jy4bwCy/QQNq1MfrZRDG8s81VzkJ9Yl06TsA7Dd3m4M+QzlOTKQKFg3wymQ\n6hKF8uKzNWchmAf/Hc+gzLZwVq2u6DdWdJmQPSThHcNEGci5T+WWVPHYmWI4\n/eJluwoxtsaA80EEWU8bbtxIm8v8pScAebx4bCYJ0BuhPSzStb/bkDTMw9sz\ns5juN3fwg7b8u6gQqkbP1MHN3vjBif3Ng2IuS4W/83j9QNIz2Vu3hX+Hv5ff\n1xJYNAD0ISs7GQzKU0lDD8x0tvfS045Rsv/15fDFQkssCLZZsJp1ow7jPCad\nZ8x4\r\n=0N4I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/shape":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/tokens":"14.0.0-canary.3366a71d7.0","@material/density":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.3366a71d7.0_1640176412743_0.8517706604222552","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/switch","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e78298227382e444dd4979213c297f6939114f49","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.c047f7c19.0.tgz","fileCount":58,"integrity":"sha512-vQYTWVVbjCpDVHS6DCnTLp7VgayIkMbbwIVVeTBcqfxI4W0Q8UoUba7e5D6YBd9HDZLNmoBlc2qHHSUTzys8WQ==","signatures":[{"sig":"MEYCIQCYSAMxRka9BrWRV6NpqFgZJg/jRbNDWDSmT5LfVmDTUwIhAJ0QXRQ7Sv481G0cpaby3yaSx3BglrxmFne73Sp+faWU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cuFCRA9TVsSAnZWagAAH48P/1sfxnlbvxlOdCiMRD4z\noHO5aHtFyoZSQAEzfKNhCvqup8gPsgFP4NVSQJihvJf2/LG8m2IQApSYL7s9\nVOt23TY9PhMJilbACDwnDeJqIj72TYhJVzHJpzEubIfNc7wJJrvOlp/CzQ9W\nwm0BeBZ8AxEXXzTu1WBqe9UqBXUUywm8FuVx2CblKVg/bYLlBkkMEEJ77yBa\nG4Wkb+U/Wjz4tKQ1EP7TcOB299WGaSHJN3VcSCEatw9C6wouPCGir3x1NkxP\neI9Kgf0NtOeoieNEo2UQ7WJD/m9U/xb19CuMRxXiF+aJHCd+qBmuRA+oxdZ6\nHhhn2tzTYNYMzP/8qfd0SXL/Z6vQT9JBY3D8WC2tCKvDIE8Ra3Rl7oozjLO3\ntVRzOC15qnoXP+nrDCSqbo28YG7TMIV2IXmA77IA0R8E747wizZN2aaFEtIT\n8gSCvjG7ZCyDPhA5pVXWOiyJINEAyzBmdScCuurFS9hQoHlGN+o6d4bkJbMl\n3EAxs4HN6GduKcU0OCWMKaj/hjm5nxOCaHC1Y/c9TlEi6wVlKdGi5AQ3kb1v\ndprjKoJkntT4d8mFZYo3sQsMcEKLuJ22petgfBOwXAuOU4wFSeA01m3rvyNx\nNXPPe+fCr+vqNruRPC74X8D1WadGu5HMzxGsObJcVNH7dt54h0yFNDIQBn1Z\nDWr/\r\n=oG7a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/shape":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/tokens":"14.0.0-canary.c047f7c19.0","@material/density":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.c047f7c19.0_1641401220754_0.3196691692450435","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/switch","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44726bd856363b3369e17d31002b7f8267a2ab7f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.05db65ec0.0.tgz","fileCount":58,"integrity":"sha512-TT+PWVpmDwzUMg6vGpQtdKmGsYbAuFMbTp/UVGpr6V7xVybQUKAawIZKK0pWq4sR10UrES51YF6Ln/Bg50birg==","signatures":[{"sig":"MEYCIQDIqwTpSooVJbZp+Ot7x44q/TAHQPWnds/fa45k7ALm6wIhAMyIBFqGYsXORNYzOS2TqUJ4WeyS0Z6LIiw5hQaagiYc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOmCRA9TVsSAnZWagAA1YgP/3XF0BfwmAeeqinyUk59\nD09zuWpVgfh8hWH6YzfDMessHlfYwSDwO2yn2ZmZxfHvRzYPswR26JS7MkvC\ns/F4FdlR0cMaSxls2/dr1nR0jefF1t7f/7kFBXpHsadJuh6BI+E2ciuizsGp\n/gRBuKO/MVut41YGe287MRPxbwbRmGy+CtimRed4Ib93y/M0u5j8d0tMDU9f\nEHwXjAJpcL10konKlr099sxtoxao330KhUV7mvB+iIP5e/6ZRw5WtkDsne9y\nGAGZCmPnGVfE0/6eDGD4yTwl62VwMY949w1jRBHu7FZzWIBL2GLyhI1Ukp7m\nX52BmAg4AleGnNvu+VTYW7kPF038eaaxGwUAYK6Vx1JV0Wi8H5ORvKyuUOp6\nzHGx6FJSX2PrpzXTrRlLE3aeCFWTWmaVSL85BISBREJ29n9eSRxYh0gRVMKu\nkPeLa51q5uPG0BrYVc6vDgqzGotpZDlqUyD/KFqsJiWC+oI1gUdY+E2CmPxT\nfKuF9g+OkGoJ3bgJL2a8qg+kZflZKBw5xTMClpS+ucmbptelFw8N7n6t/Hvc\nKBEUV5k7co0I+kwRTzV9BK/KfC9ugzwb+Bm7ijWrLt/ksL9uY3qf7Tusfsb/\n29nG7ofl7p2hReOfuBFB33qd4Qhp8Pgojkx81bRrDkyIJP5rnfQNjgAW3ajA\nrxOZ\r\n=H5Ud\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/shape":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/tokens":"14.0.0-canary.05db65ec0.0","@material/density":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.05db65ec0.0_1641489317777_0.3689804739529239","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/switch","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6fa331e4da22b6216fea7e12b03ca08c70b9c0f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":58,"integrity":"sha512-DzmXypaAbNu+qzhML8m+3jaqqoiu0+ZZQCQizkoX8xqjl6e8SOenMKOHBW9pFuP2kWYN9Sp7ixtEOp/U74nIfg==","signatures":[{"sig":"MEYCIQCGES+iDYm5JQBeiOUv87ZwYFaGyqgN0E+6bgMXxEun7gIhAKbi8pXbMUyrpGTCzjZIwN1ohEoJZIVZw5J7tidVVgwM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQUCRA9TVsSAnZWagAAlEQP/0oSlsDXzomu4XOSjeTT\nY9asvcIzMmqzjOKurDaAgBBX7pRPf+oi0ce9htZVScpu8KYduCD13Xwbcdmb\nAVXjCoa2F8t/Pa7OrTyRcV/FHFUv7bx+ATk07vcwe5J/29nw2DdUWdFRYkJr\n0Ox9UZCZuAjTAR2otIURbWIBRARhYYu3Tl+BXLswswOecUlBLelPYoPrGlp1\np87w0lKIHXcmROFlyGT4xJGwJhbkpQYDbjqnpL8EtW9/cDumcEEw9z1T8VGC\nKsucyztOIRV1fWBNTqtDZGO1tVfQXKGub6H7Tx8ZcxR9N0jb+bxlvj0xjFOs\nX+cYwHviExY9cLbhuDjL57EcCMgc9lCizsWmgCFRiSlvAbkVMIFKKihdRBJA\nwERx42aCh0xjxM1X/mBvnIOmAo2qsCKPskhES7nOz7UyN/y5Z9TWEhZNxSzp\n8BMdyq+eeqxLLSQoPFXsKXDPIPosLI0qhXkLGbw7rnOO9ONeuylq2RGc4M4s\nqodFpRbdjayqsHW6s65t5zq438Nj55TezWEgfjIeeoYXfY+Hs+VO5ac/1Q0o\niiGjSVyuzhjJSs14plDt4UPhH6o7BeNwmtRmDtm9V+Ugocdx7MSwoP0zqEbi\npGI3DAu+tCVoJuRKQin0gIzCa0Cv3JBrBroMs6H4x7/yBgOQ/1TLWUsr0L41\n0zI/\r\n=Djqp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/shape":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/tokens":"14.0.0-canary.6ca8b8f85.0","@material/density":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.6ca8b8f85.0_1641571347830_0.07185441827823014","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/switch","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bf143360b123b0032441d8e74a30e674501aad7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.173ee7a7a.0.tgz","fileCount":58,"integrity":"sha512-YCNQxpUSfHOa5cJ49zBCmwrVK/1+IL2bwpD4lA05woKHZWMcVTaJBiREzqp7E3nTnAWUtzuy4ZDHs8tSeYYwVA==","signatures":[{"sig":"MEQCIEqxWX1bpSGpPQhfXDuo7IqakwcvZts+nxa7XbHA+cnuAiB0eSO8ka3BKK1dIqyUOrKUZHG7wLCx9Dsv28EKSIKPzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GUCCRA9TVsSAnZWagAAXpYQAI91CV0ie0Igr6RG6Q7R\nLRfrssGAHm341BLwWZVnJ0agbvc3/5GgD133kMpjNU0PAJVRFCxHxXYan0kT\nGKUmY4D+fEUVQhsLerwIKlNKrGehb2INa4odOJ6lk3hojdzXta8JPak9BYX+\n1z/G2aRSPJtM7C+ThnHMJVzEB5rrKSo9lA/23fF//9IsU8DMY3CcjprppaSk\nO6uFKK6piy/Hz0vb//NkcYwYrjVw8d+8cx1+++wzatgt2IsFKTzDyJ35hr9e\nJa9PuuOCjNOHrpkR5BgDuKLOLa3KaGgtK/yPOvE+BCUyfC0aYbbiFz3YnNst\nIE+3W+IQ4J0J8JpBo8eX8jndtVkbYMZV04pVDFOx3xzz/ScvarCHaljQvFTz\nNTtYEbfq3XcyUhZkaEjZJOGqQrLZCwjPT0JKxa1HwdFbJizTREtJZ0tlfFuw\n/ucWzlJd6b0I+zIYa9K+WyEc/UGsM891erYThZMJ4PTp6pdxSxKQwEnnEGta\nKP5lBhk2IXN0ZfsgFfVq1Lyxz0KmiB09a9EzoVV+paGBurD+WmPLSOieXo+h\na2byUtey1ZQPMF3KFKkBi51MFzfynPYp6/trasqrlFJisYAHir2r3Tp4kxEr\nKG86KG1dcOhO/b24BWB34Fc+c/VsBXdl437B6y8w7Fwgoa1vOzmeaWOsNEUH\nvBPY\r\n=FsQN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/tokens":"14.0.0-canary.173ee7a7a.0","@material/density":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.173ee7a7a.0_1641833730361_0.9821275114304449","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/switch","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7542be9ef9ad2e033904a835139731ea1eca3e8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.b704e4dfc.0.tgz","fileCount":58,"integrity":"sha512-6EKlSjMbkgL1u7wbzC/rHhupNH0Zj+MfXFwCpIT3928iWUltZBN1dezVSSRmTeI4Ri8hJG1NejWHR+Qh1fzPKA==","signatures":[{"sig":"MEUCIA//1je07h5K8vmJHKxgA9bZU6X2kgg5d13lyLQse5XXAiEAtIVepFriPsCGp5Fu613wYaii9U757nHaeQvt3QFDfOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwdCRA9TVsSAnZWagAAjusP/0vijK/37wWz/mcdiNIH\nDrE88nDUPYzchOEtKjAWfqTZDf0NctXZJ9rmp0lqUvsKZ9aSylVox/QcvSdl\n4N8OQzx2uQWh31N4a63umqa7eZp/Z9euCWP05NOFL9DNiKdXXM9G7Jz+Bg7t\nJJbGLnSgJNkF1sl8bdFU7lIkEZSGeLu0/gQtzXUW4Xiq28r5Q2U7g8n00elu\n5r/z+Gj+NL9ssQbGr+WWnxaI9d+AMPk9ER3gM8j+Ab1ThhpwQcRhZtOwN7nw\nDfo2dBgUncNJyBgvg/t8EhqPpi3pMdNnSL60gu6Fp2RN7mEVIGyeXaDagReu\nFMorEKjCS42cOevx3fo4g8iS80ZjdWdevGVyaLUSJA2mZxPVbKrbSqQTsOMG\nJbiI6CLKYa1fWT2nOCG6BJH9efP7pccCBcwiQCD7oXdaSg9lhAP7CROQh9ZP\ngObwzNK53AWn5RPGywQpFyRrzVz+OFsEi1IJQvwjRPcgt5RJ+lsZ9tEe5ius\nLsaYULJMs+z994KZChhqsk1ZmHBcNBUumrdnXGTZpkmZqVdELOZ48Aa9QhoS\nmHee68rpLbqiVQBqAoeNBU2SC5pE5KQGs00DWqR3RMONSbnlY5W9C2x1WkIs\nL+EnoYMePDM9ocdbDysWvcUnojaebi/yqJr1YkEpNZ68uopxPW9WErcg6eEN\nBeaU\r\n=xav7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/tokens":"14.0.0-canary.b704e4dfc.0","@material/density":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.b704e4dfc.0_1641839645768_0.31308703608949107","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/switch","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b468e73a55fdbc7b3f1df2a18630aea72aed0b67","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.c14e977ee.0.tgz","fileCount":58,"integrity":"sha512-nh6bOLp1dgJ3yEMfM9287pDy+7JVYm1nYe140f3aGa0yWBLne0W3L0M+wndG5Eoc3CFfbO2GD65yVO/D5WFuPQ==","signatures":[{"sig":"MEUCIBkSgAWE52dMy3dkzlHk6lBZvg9mx0tsI0arepveYVynAiEAic36HNKX6oeFr2fJgkyKN7Erbj/RblvFgsaPnY4mBpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adaCRA9TVsSAnZWagAA840P/AliU8jV7WXnbo4oAIDk\n5d9BkJc6I4VSju04a3tJY57kxaB7KU854TU1BZwk8vUo1D5p3OaJuHAlQvG3\nHYQid+cB6jlpjFhaN/EznpAQao2E18zwH8A5y/TqFEXyWGe/qLovEG7c3XMH\nFY/v1ECRGf5goR6ZB6F8/Z2AVbz3taIxqAIi6ufOiCTlSI+SPzAVAkJzJolO\nHmKh64aMlahCc46gpdBl9xE8rJH8/9mjNZqlYsaQfH1MhkKXEfmNjCHb9q8G\nImmjV7iiUWcR1wnwTsILR8OQJWZRtO4xUFM1vfkoEpKbsfBVgeUF/TiewdsL\nvjVWde/UMMNtbDyzAkqXGnfRr8EGuCL4RypyuwnPQ1Gs0WHHtRhHgottLnUu\nLg/J6PettzzwIsY9O2Ye3/nXeT+la1MkoBWTKH7iTdrr1Hi+byR2qbdPgJ3Q\nWtGGy0fuNun+9X3x2FSZJTnkYJvCPxyNJMetT9RbpAcGZ4/Cys9XwzbWWW8F\nop6hLmstmeTVU3/WabRMLpqRSzT3iApsaow+pBqG9dzMU8vrhCNsePDehp7t\nH82vS0Mu+M0KV9QWcQ/uHlj2Vy5ntdq3VcEbE23n/YzJMnlubC+YOlYZS+38\nJO1m6FplV5ydCWR+cPQT8JeBirdnPZXnD2kK2Mkv1SnSdGXarcqGJ9osGtCp\nP0Sd\r\n=W6xs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/shape":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/tokens":"14.0.0-canary.c14e977ee.0","@material/density":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.c14e977ee.0_1641916250439_0.5519342436239165","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/switch","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6897d5e8de5f55ff49828e5abddcd9192f072a43","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.b094eaa4e.0.tgz","fileCount":58,"integrity":"sha512-oDqieCTmTgfAVUZT2+2LdDRkXe8IT92AWbWiWW5KubFZxXPCh3TzeZkC1ujnygRZAlv4347DWqRiRHhJJx58zQ==","signatures":[{"sig":"MEUCIGJ6XLcU28rozoM/1Mcp/ZhVwA4NSgfv4hyIF7vesWskAiEAnlL9Prdtx7nsvGXByoujl8CsIa2uZQwfizsAIoDsjAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRXCRA9TVsSAnZWagAAUp4P/Rer2agJ09DAxardpdS3\nK5EfQ/B7KGNyGJ8uq3JmC96Lp1rZ4BzOqvg26XDXKeyNNXAuR0XXH+CLE8dO\nrdZ61m8EzoAu2T11WdzaiTq6ODNWqV2FF313NF3oEGWeyzpwtsMnoZGb8FyY\nBDuHE1qrOHYZ3BE71m1FdTzgPDD9o9e6LI1Yu1XqdQAWv2YftZz5uKmkSn+T\nwm91NeQnEyB9naT2WARoZ7Lh5fcLVHKPE/LXVbh4zhEuS4zY+wXi5VYclU9J\nV0HraagbJiFzr6r6nkvSQFj5rHP24lXml+5F0FflGTbhF5RsloR8pftqo1N3\nqEJNBGDrdNWEQLhvqXBhEfwuSEKkShOLCLDLkwfppz2C18PIGJ/aHrU4RFZm\nkcUjCGX0rc2QReogX3nY2UT31UIqcWRhZnDAku7BvnK1QK5XwOiIZl9y1ihA\nSYplk0femTHO7e19Z61GLAlvCaNmqUb+5NLtUisoLAFRNunG5Dc63sjAs2pF\nor1ADBVjFfFCYTqj1Qhd0xOKgfydHiO+fnuPys9w7EvstjD3mMg9gnOY/A4p\nyKYSrFh4zk37L1Y08JOLHWLWhvGF1XC26Ham42Gp0ie3LBXTUoVU8xh6RjS/\n7Li0UzdxXRrJ4Wyz5AyYB3AjByPEzU69NYpxH5IzQ/Qwo8sTP08HCNWeMr1k\nKMl7\r\n=J/vk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/tokens":"14.0.0-canary.b094eaa4e.0","@material/density":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.b094eaa4e.0_1642185815002_0.10848946046305241","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/switch","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.390220e42.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ac2a398077b4fcadeea602ad76f45056089ee13","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.390220e42.0.tgz","fileCount":58,"integrity":"sha512-GP89V/txefrqJbAD8bs75FUsx2ODOgjIP42JKh5RFzn7tSmMtRBZgEmqTDgvP4CG9mB2gsrz3+bhCBJ5Iz0EbQ==","signatures":[{"sig":"MEUCIQC/B+MkLBnOz9scsfXy+pYIrYhvA6n6DYXZpKWljzgwUAIgdLjP+oVLcImZgMD5JMi4QPnEVkc9AdKPd7SHllrY7do=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2ZCRA9TVsSAnZWagAA/ssP/1NX0nnPNiNcTsVyXCrJ\nrdhmePwEFQ/remdlOlAsi7KR8pzyFqrmy2wnfQDcGC8Jde5zMHNXdwdKlsd2\nXWJO/CIO2uTYoxpuAloWiVbR+en9AjFsVQ2G7Uwzt9nl2+NlS3X5rTcTeoo+\nqAOlsMbv+XHtdi4mX3Je0r+dum9j/x65/P6vl59VupjBh1dBluzIhcO9GO0k\n/Rp3h9P7E++bjlnUE1Cu/shZ76Ey0jDdfXaO/Yps2TpSZ9ZAui1PnrdQtT2Q\n7btYMy5Nc88y0Aj3rVpJyRocjotQgHEKVy2R1THWir3UZ3tNftgaMCpO6zNF\nclevWKzLuGvhuaajs8a9WbxhbcHi5rVF6h2CucLAbl3cV6cQI0Pba5R03apj\njKfmJoRJyH6B82zYcUVWfYolTVxpe5X99jxgk33Y9xVxsw9plK3zPwor4Khy\nKNubiPEypb1Qn01Gu6CHL8qGrDXQ+ZGU6xTsl3sCiikud80Vd1AhXn3fr1qH\nM9SVCOIXteepUdLfxU4Kp+2CAA17ORTT79tKcu0F8Ct3Q5LZknxmuAj5vYrq\nEf9qRhM9un2+xmWaK51dwrN20S1Bm57PHtXh1oWiZuCtur2X45RWRzDxf93Z\nTzXXdwCoEvQ2pR9xS1OrQdjPWy6x5eDojFO36qAnPzg3TdzZk1zRn/DaVsZT\nI/5e\r\n=sOA+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/tokens":"14.0.0-canary.390220e42.0","@material/density":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.390220e42.0_1642438041439_0.6276301140309426","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/switch","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e83b4ab9d2cf239dac34fa8f316b153f9d99c3a3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.4b5391f8b.0.tgz","fileCount":58,"integrity":"sha512-6eXllt+eECZ9hjPS7h02nb7XWSyfkOoUiy8359u2udCp+TnU24Nv0sJs7RFHY19m+Z1KvT75UHHJEdSabs45sQ==","signatures":[{"sig":"MEYCIQDxbDRtNQlw95R0x+FtNxCN17N/LS1NRGdOlTK4XQWkhgIhAJxahC3o67ok5+ZnFxBbAMSYw8+9/+AQGYVIsAhv8/Nb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSNCRA9TVsSAnZWagAAZUMP/1wuyuhiztF/SFsSvnFx\nCWai9WA9rvrbi4AP6a650T8q+TtdcqV9RNG5c8EDaDfVTlovXVDPODvjTtVt\nTmaStGY+/Rc8uK24UTR5jtHiAHn9J1HJwqRyb/TyAwNKSUhYE0n0JBnCSs2d\nc4M+tH49hE+Gi1kFtLWGIGqNQwXLR9J/lkT35fyu9+R9BF4mt2mPqwi9Dnr5\nJZ6+5kj2sTJUfOkmwnr6zmX/lRc9ey4HkD34Y/KfeH7tH5zZt0/m0QKxcqbl\nTdSirNVnwJbcgIETHaWjj15XIn6fMVUzJO6t339JaZiTlBrFXzGtE1zjYSxM\ntUYWI23fTAr9UqN0YeAYGYKdG3eEku++oLk0MT8HBn8gszUm6T34gNVR6hbc\ngr0cL8/YXJF1JGxom7CjeaV0ukh7QnZg22xuVxgkSVn2NWpU6Qto/MpD0wbw\ncVubYf6qKAHCpjMgjQJauFu++LSsON2b98bZ2JP4QNFjQ1Q5OSNh1rmi086N\n9aOly7pyugaNT/4bLxE8h8YmQjPmvWVqrAdIxg1YuW9jErnXWbOArrPfUHsA\nrjktB48LtrqLmzJyvbe6DET5UDy1iUvvUePhTehVTmjxck/M6narHovUOTLg\nHk6vgIg4b1WW/z7+FDXF3mYSxStxxA5NTdVWMKBvHgiBv7wNeM6Ai+s6z5dG\nFnfL\r\n=DvOW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/tokens":"14.0.0-canary.4b5391f8b.0","@material/density":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.4b5391f8b.0_1642636429647_0.0986936055413874","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/switch","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bc47bf96baffbc1ab033a3d47e02fc70b50dc19","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.cef6bc623.0.tgz","fileCount":58,"integrity":"sha512-I15aBOInYJ6fyD1+7yJ6XFpPuUT7pPA0QOvfVGgVJBYydxjLdKz2Pwa6OjaXQFGPHyxxKjugLowOFaNn8/skfw==","signatures":[{"sig":"MEYCIQCmzoURSTuVJ5TErkSlAxXbWkPuI87FJtnRLcm8S2+gZgIhAKyrRdEJQKNn94Wxgi0SbRcKDzav/bS2UT7hLObf+kik","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpgCRA9TVsSAnZWagAAXgsP/jFkHzih9IJLyVn79Jeq\n3xbTNbp1kKqFZcql7WgfJ9ZMVJlx2YlJQtmFmFzsy8uvmPHJbiCUdugA9YCz\nbVy76/LtJp1ulcuojNeP+O+CocWevBNA4vUQ9NNx32BE5hs6Ru5CkvxHwEyM\nAG9iYy+7YEEHvrXDSm4iaaBaD4ROBXi1qE07bIMjgas6bpJCWaZ8yEP2VhwF\nZo7EdDIbfCZa58JiQLWXdBHwSr/aXZ0ffzYID/Fq2KACPfYbhOry2kkE1YBf\nXnYe9Evx6FXhjps34OQcoy4VDMIPc4TKmAvxj7xIrJOEP9N3yu1t8e8G5P0X\nF3SPmj0GjZjQleyfbfSRgwByrI//cMezMlc4MQXj4FfiYQMaQBkf9W9nhcf0\nx9jeof9rczQ7i2tRMkdsot1Tv76613E50Q12JPJ7OGndXWnXazw2Xp3x1vpr\nqhRyKfywMZewRfZ4WB8KZql2/gaQrpau3z1kXurdgyMcKPtqdwuUWTrVa7+b\nGoPy1NBwQPT6RRp1XvTzU8i4gT71p3BEhqc7Qd9yajVNy0A1r71J31nn/wvf\no96nnRRCNXuvvtaWZoNH68DRZn2Kh+Ta6B4myXGfbBT6t71kpst0y9i4uZTM\ndf1cx0RWySXsSvcdYAPdtZiOIedcwNwilmLrr9LDr0DxfR+17Z9xkg6oOj1Z\nD/Pp\r\n=/rIZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/tokens":"14.0.0-canary.cef6bc623.0","@material/density":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.cef6bc623.0_1642637920223_0.0077901617918616495","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/switch","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.0379179c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1407029163fd7c1f628fb04e654e5b7eba7d36b5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.0379179c4.0.tgz","fileCount":58,"integrity":"sha512-RETDDFMd0TkHmKmcpRCqvz3qb0sNTKSO5J8qUZNboOlpaxqLZuZeFAsVDeKsJmtvneTjZso/JHhpIydPrbxnTQ==","signatures":[{"sig":"MEQCIBjq7pIokalvjYkXPQBi+H08TtOnlbIZrgI+g6nl0BaJAiBWVWS8LDHElvwDVSqqrhqVqyf8KCG2Z0lggzJYNhcXqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAlCRA9TVsSAnZWagAAFHAP+wU8gt3kh+Tu3RFuichg\nTelg9f6aC5He8tZVLb8Z6fjnGnufE+xvJRHYTA+hpWQ4AnmWcxXW7zUWH+Xi\nN1uxNP9/vaYsKtz7umBAk5mPuO98gSWTP8f5ZafKsdvI+m/jPsrPTzmiBLN6\n966k5bhOsQcEHxiTLuf5WFRogOrReMpCNpFdh9TsKpcW14l4Iw9KJnTlWV4g\nGC+iLYKGJAFrKKoUjq/DZ9Dzip1CW8RKx16GGNRK5rzlQ8crx/6AYqDiDsdu\nckC+j07BIIT4tLsuI3u7NKyMsANVdiB02HKcv1+JHilH2to8MvaQ/x7m7ATF\nHLqBvEOypjNIcmIChaLdxPlWnG/JZibzdQU/br9uPQCpI1r6F7xA/nRExiai\noY4eB63ol+MnjpJMbuFW+PRR/EeusvYzuVNPWzndJQyTkRHYt+pD5vQZoFer\ncJuRkbBBX1wbOrVqORyrEjTn43ShSucGAoQ6nW2Sf3AYleZEyUTYXbDMKt7k\nUQKy8+j6s5Kx9vJ0dz0x0sjd5FF5MWLrWpDKih9VcKLOzq8XJKePUxwTsG9K\neeG74SDrx4Dkz0agF1bDT8jAJBAIJf5h1wLTiqORWCkldaghGddrH95Tv0rz\nyMTcgjSkyXvmMNfTt1bhjU0HfEvadCsR704yNwmiuCiCdx1ETpx4DqjdrE8T\nwIJC\r\n=Oxna\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/tokens":"14.0.0-canary.0379179c4.0","@material/density":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.0379179c4.0_1642704933057_0.6092713075030893","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/switch","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"865b9ba198028473c4e641652dec20b870c2fce7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.e62f3dabf.0.tgz","fileCount":58,"integrity":"sha512-JDVVmEe71J7CR4HnQmhBdUMUugbZUwZLA89tFYPruCNr1w01AOElh3oXg7mqiPDsJBYH6FWt669R3Qz/5w6yKg==","signatures":[{"sig":"MEUCIQC4JkD2Ocp0caLbuVudGr85/Bc1vJsCwgeFXy7rZHa38QIgLJka9IV0UDOFAX8cUQpnlg+6hKdKpY17UE4qy0LE6uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zv+CRA9TVsSAnZWagAAkpUP/1qdJYvECgJT+4T4KYUW\n24DfDdJ0QDaq6/Iy6S3vFM28NhdVaoGXI+UxKGwv2qCrRJEaq6OhuUdoept/\nJJk9ZhwdX9QlhnKOX+KjWomlrGX6Zv4Nn3Z1Eqq/TZTtDKPLOSHlkhmvHytj\n/VStJ1bXnO2UOegv0N9RRqX/3FLrjjNOhXrEidFfN3tZM8HjVE2ymVFWQbyT\npzUDcZKFwSbtphc0E49qrm3v7Syb9q4zsdJqX7SXdITI1OGpOcI4K/C+jP6P\npbmfIOeX/HQBheRW/p6cg13F/s3yKSAMC+EQthuiSyj6A7hDpkMJT3g6QyEf\ntHj2Cm0o0YDn+yzzbvf+cDXUvE8fD17JDXwdOLQES/46w/oZ4btnv5PuBI05\nBwDs8lOvu8NEUni5w9/YltZcQUJF2yNIY5uQx7rOw2TlIhAOG0+TS5uTNh2p\nEA87UL2LPWOOKbk7KzCH8RF1AxYQCBrnwLdhNfCZdQhp/Gq9JS2s/Drwa3AD\n66ublhc16Q8Xp+jthfejwj0kpYJfiS09uxB3tPmx53Z2iRs5wIbyRfAFfLAy\nkKJejlPvqtIFXDAqCOUABLcnEcFemFYLIOeUE44jU1ULBp7UyQGTS+TXSH8w\n4gDFXY1veAgYZD6yeTGBJHQDuRN9tOwNcRa/1YSdmB6WvSsiK0Bu8JiAxapv\nUgdk\r\n=SIRC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/tokens":"14.0.0-canary.e62f3dabf.0","@material/density":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.e62f3dabf.0_1642806270104_0.03856762696967797","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/switch","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f51108c5d229877a37edb39074f453a7591b534","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.3e20c1de8.0.tgz","fileCount":58,"integrity":"sha512-US29brdoM34wzj4MC+sVTd/fil6lAcxKHqQQhDC4VVlaE1xOe/Ob2TuemTfqfb0unQeWu17waKYcsQCCSGfbUQ==","signatures":[{"sig":"MEUCIQDWXGA0lsO65rS7plRH56h9ALup9uHmZpipdxm7oydCLgIgEFlPWR2vBIZ3yRUhFi/d9w1DX6FKAHLG/s19Ez8GY3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Bg0CRA9TVsSAnZWagAA4lUQAJ3WuFzHGdfHsx6sQwrU\nk98qrhSM3jmcRJ8j/bu7/r55oM2rKI4oYL0n0jjldsPs74N749VObFgb8rKy\nzPWYQ/lMp/QMR5WdFYPCRD1QlnxT0oKDNuMXGPKrEnCBXXYK2AP8rr2lQjwl\nF+2mgtQZCdWHcPT7xAPk1P+0aZ8J6YMAYNQ/54Fp6LSGFSa1nf0tW/wOyzP2\nTKF6qm+j2bi6kWWslh2WR/4qXhNLMopxql9638/wHWL4/bHZJcZkpHDzQtqd\n4PlkT99vUn3EaylFZjTc/owcPMDjgf0ugeGwgNpF5shAriMoatkd8+oFvKfY\nVZt7l1AJe8FEKo9NrzpoTVBbEX5FPMCcoK70KCUXvoYUHefC+b+g+zurw6j5\nHlykxkX0QcJzz4IVNuOhJDKrhgSHWQvau2TZptEeuXBt81P9I8L+93Y22Qw0\nMwPr0mKNnlU4ehNG/2B0RHS7BRWZteD6it8Av+AacIdjyWFIGrtT5Kx8gDja\njBafgsTLT+mdIqfQE72qBdpZcJ451Xmz0xzYsvYXHCi2wP/T9nA9qQn3B3s6\npIF4nfTEcd3G1vSW/ghy12BNrsTMS7IJKCNUZKtk/uc6nszSu3vlxyuFwThz\nGcik9IcVWVobCVINRlmclOBqOghAUj05WJ5Nt9BTVpGlIbMMbCU3XN1kkW3n\nSR3K\r\n=U9RT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/tokens":"14.0.0-canary.3e20c1de8.0","@material/density":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.3e20c1de8.0_1643124788103_0.25641618189728743","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/switch","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80e82eee7b0685069d8c5628237bf26fb2a6d1ec","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.9f9d928b2.0.tgz","fileCount":58,"integrity":"sha512-+Lm818gKFDB+lHCFkiHW9UloqxEP5CLGosMyQJt9yDYdlSCNH32uc/EUTwkQR7Reb89AFdDc3knl2IoaGguFLQ==","signatures":[{"sig":"MEQCICVGfSq3SYerYcnJXNRcqp+dxJgXvJdzbOEzLUrOwU0CAiAQb3QXaAUtIE4lkqoStuP8u5F8Oyr1/0psF01Mx4gVLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uD3CRA9TVsSAnZWagAAwC8P+wZgbRMRg2J5tZlISghC\nSVlIzEZL2pSkFdLMLqaWkk7etz4oGmk5aF6ZUOZW1pT2JcjvedCN09h04DPy\nJwToIuOYIF8fPsNc4V0wajKajJ8qV/bZVqzT+dcxLPhvD9acUJ1RNDRqWgtc\nnPN0RqU9WP5BU8ADhfBHQNI3uoksc/h3I2AGBUour7c5pPVj9gsAMPLrG2zt\n3FLgk8SkOHL3bZ94o/ENtHB77H+jewYBCbn7U+ycK8FMgzxowZYiggTdn8Su\nZyv59W8laJIfjIC5QAte9KnWqKV+b32c5Ajk+3Pz534fiRNAZ2fZCdun2EMZ\nrVlAcEv6FfjtZPSVf2aZNHQ9OhjSG1+4lJq1k7SAGDhtQgx07K+m/VKyavex\nnUOU5OILSeqnjWNaxglnSuM+Yeif6DwyHEJggtbKZ95GryD/sSqzTo3viJ6u\n2uy9Ha0WFLOqrByibyOI78ODE8Q83WhqL8gNOD0s4vtsZcYJB2VO/GYqygIU\nfWjRgYzlNG6ulGVp575pxnIQ+8wqUjJmUxkWsiwZvsWN6d7x51cIdbDVe9FE\nwwzeUjtRJyR1eYjSjrwB4Ag6DbdoIyN9H9G4jArAx4O1FB1GXwannZ44JVSJ\nrx8c9hRc1LJqoUsSCWdhlN6nOZfhWJJugksOk6DGjjU0e+w3uv6qT+hGKhB+\n/8sC\r\n=2/Bw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/tokens":"14.0.0-canary.9f9d928b2.0","@material/density":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.9f9d928b2.0_1643307255710_0.3272858492645021","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/switch","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3bd47d4949548aedf163aedd78b737736d3384c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.a2bcb065c.0.tgz","fileCount":58,"integrity":"sha512-Rm9g41IbRhwJW3Wm/REClsTG7JhBYjCPTRCFQC0392PMAMBErU/x3lzkYKsGEudn+XrvVEfjY6Xb7mzhJMDMqA==","signatures":[{"sig":"MEUCIQC7zVvnPSGX/hF/vFI3lId/mvJxgWtKjT6AvEGAv8qqmgIgKdTd2QQ2c/2gJnnNOlSw6JvafV2DmnNFR0Erw8Wv3Ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYqCRA9TVsSAnZWagAA4ycQAKR8PB3ujNSegcI13fe5\nFPYIuqyfbfavpG/g/rsp3NXcrrEIGX1JsVq7dgI6PtUu0KWMtwUhGVFjCxoV\n0rDerrx+qeNQlT1WzFvhS3FW+RaienmXejavc269IhWU+bu6a7LwEFbIjiaz\nKs1AYT1roSpQTeZ4tLNU+pBC4Hwda0AJDQ01efHPM7jUlCMNk4By+zToSYwF\n6Ur7id3FW2ZXCRdpDK7LK5IVVN9C3S4FVKNuAUTD25cDTvldfAeDHLf7dF5E\nO1kOS4htCxo6/va7ylvROwmduS593Z4FHT343RnUgLlS+M4c8gzsMNEH1X4L\neFTVDV8nHy9neXlZqKhVE2ZGaxw2gw+qMuJZ6xQwzOJXXTgEL6ChSLZl/eS1\n2wJr96Vzt3NQG+W7KgGdsDC/XmozzFZ5h5vnlp0QRYksnPAaT0ztMG6iHBn0\nOuDm8ks46thHPCeKyaL6c6lXKR30zrqK1OV7o6IfbVFai6+sJPwUYrgv+cRv\nJoRQpYvJ5GL/CvshI22+/irNIYYCLkYrDsNtdCgOGhvlXhXmhbPH2Qm/m47M\nPvt+eNKhyObuDNjUwBA1dMM87aDT4F31NeFkC/+wP7kgRO4xFyjl7xN/KF73\nqZamISnRH7Jni3mI7gF3Eq4NkAFPRTrg4zALV++/x8HE4ms/ny+sl7xk69XE\nhgfj\r\n=biov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/tokens":"14.0.0-canary.a2bcb065c.0","@material/density":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.a2bcb065c.0_1643398698554_0.8820674715594918","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/switch","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"178fa3e786d547e0e98f59d451131b7d8414f703","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":58,"integrity":"sha512-XxPqTbnvrfbVIxsyGMJmeHf8q4bj0uGScdKRZMgNextw2Btcbf6yIpE2hNnlBYR2QNmcngt1HDqbcu/hq1afAA==","signatures":[{"sig":"MEUCIQDh2PQN58rNpuCYtYoFcwhuUzGcBHpUGe5JRti2hLkz6wIgLA5UQadHzn6fSXl1lQNxGkKKL9ONPOsk0JPLNJVqla0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EclCRA9TVsSAnZWagAAHmgP/09g85kgzFElFmCQsGIV\nPQpR/q14RJIs428sIPEIgQ9/7rd91EE0Tk0a/1NkHLXWkcc1VXMZFGL5+VX9\nPQrW2S1zEeKEPQZ2b6jDpZ+0B3F6Y3CiJrZKq6OE/FMljf+Qge3EWX82rPUK\n3YsD2VMB2+bbWWYrAhUSEDHb6VzkyRzXgrQzn7rzLqKzvwaNQAiXKyz047j6\nrsAD816LWloJP9w/ei2D/ANIylLa1A+9ts0qBn+HkoQwecJgP8iDj3Xevv2m\nW3c96W3bul2H9b4BXo0R6iYkBK0Hqo2Wc0rOEKkSn9DDHd7boQEj+OrRCGs6\nrFvpkuB5lxVIRiGzRRqs1AEPUZIOV8zgm/yA8aqAuqg5REpqvpe9TkGYA/BS\nENiZpT7nFOcoTuUN9NBAF0PSYVC4g30KgwUiLEjnQtZDZuBC/4rTcSSz0SKP\n+Uxz5GkYZ9sY/MNUWRa1sj6/7M6uzIceEHvuS6lF7GEY7aLDvcMbZkmeNtnu\nsfH0+exPbVPxmeEIPE78Us3br9cS/7qy31NIGklt3Vhf1DDlVxEnSZAgqrPq\nq8dDUFSnruGTdg1Fkstnbxaa+pmDQh+as4tZn7lox9AndBoo7gitc5bw/R2m\nBzIZxaRGsprqhthhabktD7SfFAnQmMcOOlYgmQ/rGnmYqCBTnYmVt/ecEKPG\ndl+/\r\n=VjTa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/tokens":"14.0.0-canary.4e66fb2e1.0","@material/density":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.4e66fb2e1.0_1643398949617_0.9630063276499066","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/switch","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d28a686c7eaf29ea92350be7f541dbc093e4c93","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.9736ddce9.0.tgz","fileCount":58,"integrity":"sha512-WCm/XAwkO7pX6EmjHaI8vJr0n6lYr/bYYMkKd7xqsFPtdyxPLfG5X/Rf1De0zDqxtZyNtgp3BIfZnDTI86SscQ==","signatures":[{"sig":"MEYCIQCmY1g8CY0K3aGTb3GfRV+/fsBmFTxa3sbC9tKme4TQxwIhANn+HK2WBTffV39loevFnac682foxt47gsAVknfB4Z21","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q4DCRA9TVsSAnZWagAA+38P/AhHfF2T9JFlCpy25a0c\n8RHhVKzIW0Z5j81xTGKtraOG3zRKDZtWwJ69xmKxJ3nQcwh1GfcgIBkHPVDx\nVesUVt8aBjMKRChmp1jatkwRIKq5SVAxOw1p6YOnhH+7pwnxjFuVRA0mbyDo\nBq+o4J7GtOIzfHfsPJAv0o5AFEzdfrvl3TdmRHtP8qiB6WxrnsrYhRcjn9mw\nMax/he7ZrYcQo2NIDOc3DkxPH4QVoxUL6yQqNQrh2V3qcsjRspFoHoirCflW\noCPAtdnLTqI1Hs41l8Lc8Ze/aoCo1ztoLbVVx6GTZQr4wQkqQsSR3J57KJhX\n2YuDOZS/RtdiWVQpuOyuIncUkYxnD0hgg9L6xTkbc/UsosrcqZZT/YPpSWKo\n4inJba8tjVTBAT/t3Y2hM4xzIc6qSqQWLTrmi2MQHRu21BHcSOP8azdhbZRO\nr6St40D3e5ioZOo2X7KtI8BQZqfRp/rKFasy9Vrr+ZcZLtGU51vlox/C3y3z\nVVZqRR7qp+1lvogF11IeG12er7eUKeYqHKp6Un/+6P64D7v/GN2CjpcyWMcP\njDadsXKFYP+NwZ1ee3nya4d3JJChdccyayAyBIdxzy9UxLbg37xwtCeN+Wdw\nVsHpAwttd2Zhef6xH4ChQuo4q+aXjw5+VWJtXzKqyHQkiPUwlAl9HkRb3X/w\nPLSu\r\n=MAi+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/tokens":"14.0.0-canary.9736ddce9.0","@material/density":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.9736ddce9.0_1643449858913_0.9930989989224368","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/switch","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56ea3cb57db16de5870877e7cbf8297591b98eb1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":58,"integrity":"sha512-ffyWAySYf88zfn+Na1m++H4JE30PLyHRIl1rpckT821EbXZJieiX6X1a8sFCOy31lsTRLQuP8IIL/u03vtVYvw==","signatures":[{"sig":"MEUCIQCfM5p4lwEpKukTjjp2kiHfqJmUj+ntXqikwGuVU5IqxwIgRuPaiFWKfGZrEVvGsPAykJcdgCplCxMFZqnCVjd4gT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W8+CRA9TVsSAnZWagAAeK8P/1EKElNPRVs9sbwSoRqU\ne4mJZBqzjYQoWsU37HMw6EVharpQ316VLHAJSH4bj3KFAyNVW5mZbhkUl1I2\nlu6+9dCLRZ9pw4lhysFA48eWAs8iV3NWYP8WcNUT6Pj9YxmYBuIbWfihEnNN\nSa5kz/6Q2bkduwxj/zL3BcA3FCr+JQzySZXz2pW9SO1XR7AbDfYpv5EYgAcl\nm2qrQwP/APA2INbbtxAFS9QxTk0SgnqH1b1znbPQ0yeS5h/m1cbi4J3ii9yu\nI06HuG2lCM8chMmP/371KLrnTkv3bhkHqIZs8+7zDvCEqHSmZmF7EH6yA4bK\nRmNf5AfrzQx2zT4dv6AZ9YVU+HA2WbSPk6m7RkR0waXUMftpVm9Bb6P/0WEE\nR7du02W8U13hCVwaqHqwzkz6L7UbTaa7nssDxlKrgCc73fEpuuOc482ZeTZP\nz6jQwPElYNcXyh7PVXaoBpZ1Xq3epD7w1sfalnN1dLi02p0b0JMEbhkk9pVx\ndmr/lbWjfuXKXcAvYDEPRqYZBJWv30RZoopVwS4wFLkWp4C0iUpFlACQSLmR\nhb/3x21JWIr3QFNfJbhecP7HsETHneRIaMYXUGbE/eIlFBOylmARKtckwYUN\n7N+THES1ixDc+GjC7ApmjaYLY12ikzNeFLMnGkL4OfMBQfZiDVxo00LsK1oA\nwmmZ\r\n=my8c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/tokens":"14.0.0-canary.cc4ed13cc.0","@material/density":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.cc4ed13cc.0_1643999038332_0.31314978554938944","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/switch","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fd734b43d05480bfb44cceaca3ed5b0e44167b7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.dcba26fe1.0.tgz","fileCount":58,"integrity":"sha512-LxoYhBafmTlPSBiG5vLdRbV4/EsNJRJIzjd8G7lAcHNsTJtvWhVNRSTqhLfUfNLMK54Q8WHE54ms7Gk7Cm0BgA==","signatures":[{"sig":"MEUCIQCZ/DJ8cD8gRPkWBDNByg2+30VrGvdjKuU1v/L5Sbr8mAIgSaC45pBhvDuJkBF8MSHLmlw7i2PRDvjV9n7s2sBefig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aF5CRA9TVsSAnZWagAAy0EQAILPmYvTIiB/oyp9yG7X\ntBIPf2ZMFDfqphV/QFPSF55MfzuSqRuS3EDfhYR4dC/zDh6QNfvh0uat1CgF\nhHL8+tjoCKPKL09eyRICQqpKDc8ci23MSB1X+idpdUfuRgx6+z3BKRgPNeXh\n68eddbYX0RDGQPmwtKiXdBAEnqd4Rg2fPw5VjZBQI9Gm3Dwt+EmmiR1IQjH1\nE409zFsjAIWVX33eh9O16uhkjK7+0+BsDe6GadSeBF5gJPSVidvKTNDtbik3\nM7hUd92xAKuTYY40M5hs18M2Fg82+E1UVwvPgCCflTNFZtjZEyv9DGaqrjO/\nQneKtTXV1q5mT9xob2qCj1AQOexIGT5p/9TiJzRa8ZkUVn3fCvMkZd5bdlrk\n5wbLYlmc57pi5SZsDBTXgF37s0mVmNNrh4DIpiLY0APOHhR2sxxJFFEzJOXG\n50wQnNUjUWQeh/jlsjWgazZOgld+LnPzMT/n9v4vQMP741kdGKDrPTGgHpAs\nDOp9Z8y2qnNHNnm/PI/xNS9IDqNm6gQA22VMV/3Jo2DVhVB5iUN7UmfRirMC\n/EcJxfHAvycUCuvJ0DZFUt9di68/IdjlaJAEkrD+wP9JQfqf7JFtHdS/yLDB\npNjQNIEIFgls7AOdLFpwjhRqKBmSnwyaKcfo3qGxDbYP/CgKWe7hJmvRspf+\nV+3D\r\n=y7uh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/tokens":"14.0.0-canary.dcba26fe1.0","@material/density":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.dcba26fe1.0_1644011897725_0.7117574982224133","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/switch","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1120c0bffb4f34bdcb45bafaa56ebf73afc8e81","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.ec54d9046.0.tgz","fileCount":58,"integrity":"sha512-w5HVI0LFQEd50NDMqb9CQPYLuF5K22NNzJKCROBE/ka4Bdy2gaXx2/VKSIe42xYWDUC25iV7cPtvWe2ZB+5zmQ==","signatures":[{"sig":"MEUCIETYoSaPy97c54cBX+tRtuzkW69DUtuTtFpvLP1/59Y8AiEA5kvdH5CEAlZvwMuNgajL5me9150wqnEGHrA3HdOPJl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8sCRA9TVsSAnZWagAAgBkP/0ZxsAPAO8lcPeBsSCAO\nsdYOgtTUBVjzI2JtUvXKBJN4shZIGEOfbHVOFe04td2elh+qQmV7XKfSa8ol\nuTcBF+ulDVzOD1Pe9UZqB4RGxkUhvcPnq3+6RhVt9kkEOaRbyUtPGOyhpAIS\nexCCAt8X3pzwGn2q1M1ilZNG3iNNXQTXly69NrH9aaFJ/ulCobKSkAVYOHyD\nLnmHj1T+H+Hn+Vvq81ej+K1eP/A/pPtQmcmOH6g8cMMGON93C81yvdby/u6L\nv7R/p+2nK1sp7RYOrQCYbG6lpUHWkAmCRjmjD+42IkwRYh2ieAtaZcANW8aR\ngnzxG1Iv7BPIQwPTTBF7VuuRsun/BdlgjXKgBinhCpaYXv+r/Q7BXjfn0bkZ\nVq78bg7sJiJ57XNFtaAWvlXz3i5FbRUfReuUnG/9XcouPiBfE0unQ2lmN20B\njm4NYir4vs/4WZi3zU2uI8XRxNIj/xdTm8bCebkN2qpfURPbBRDv1+Mi61Cp\no6eu4rl6M+g/o1N9hZ9jniW1+ssLn/J7fs2+vGqJ7Mvszc6a/H8qh+t2IeZJ\n7zjrTWl0cQou3qR9zdWtkKpX7z1npfJTUgIaAcM2unPsgzWu9m/sL8G5RH88\nV3uaGE/rZaZLWcgKUbQGPDKM2rSGECLOF5RnzdBAJkpSJ/G1G9WJweX/u1q5\noips\r\n=fjUG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/tokens":"14.0.0-canary.ec54d9046.0","@material/density":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.ec54d9046.0_1644248875916_0.8736349567211821","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/switch","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c00770b477c58ea4640d885ec5022ca5a6882ec","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.ea9b5b463.0.tgz","fileCount":58,"integrity":"sha512-X7FyTzK3D0m0zv1GDrybpzuISb3/aRcO/lLmYPSkT5rDrGHTEDcgBuqineSetRrUdu16s+ucj9YZVgw66mY3+w==","signatures":[{"sig":"MEUCIHIuFWU/cU/4lteTBvWYHxk0MSj4OCO44wP1WDgUVxVZAiEAmgAmXAqw+DdLdJSVo3Z96hy9R3D7u8ufOd9eEQzGznc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//sCRA9TVsSAnZWagAA5ksP/36rG8y11HGHpwo1NQ0f\nuoPeUpJd78fK2/g10NY4uqCk161yKjRjluXmu9Te1B2phNgYqMy1LN4zqvkZ\nyWzfOh/Vbc395vYRaF1nyGk5uKtu/jgO6/xszDZLiiFxXnEioK7TqcCEYXv/\nmPPF8eCtUHE6CvXjYXkytesqQd9RKLB5c/zco/mJa+m8uz1wTG54EmtnUZ/b\nbSKgiUbHnuJOR4n1FYcgqglSdd6APYqaViSWBzzLek6IVDvdD3nXMM3sbkWA\ndifS4dNjqR7RBEPJKbVfQnWYEwhJ6jbril482yrTGkPBEmSKrqQq4cfd2M1G\nk8tiyskeFmkU3+JQbprKdrR+274APyeCcA0s6Pmbh5UMJM5Rqsh2zNJweUWz\nz70hjyRI0C5kYUwi5/qHooVLNr2mu5ABJFyyx/P3+FwTBMwbo9f/Ck+kcyvW\ni9CN52C/5DGxPoMDKFQ0/+agtxlRByDBhFNQP8MnILKVrF4cADoxdt1D4N65\nmIyLAKix2DNvWQeD3a/GM/PgLtRelYUU4X5wmatLqc6qphrYlRPfvYgwh5sB\nCbCzV3FalX28EUGIuAvTOlu1052zLXgS2vjJ8iYwvVyp2KMIA6FPo16smreX\nNjcfLEJrYBVdxbA4qLbiCAyMGUiJSQnBEX/mI1+wopNgpI5bQL1Vq431CR3V\nJIUa\r\n=D3Ug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/tokens":"14.0.0-canary.ea9b5b463.0","@material/density":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.ea9b5b463.0_1644429292683_0.7739853826560792","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/switch","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0faa06cefe67088a0a2c7a8b57c94ee00f17453","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.96ea061c1.0.tgz","fileCount":58,"integrity":"sha512-3KYzgVnXPxnDWLODamlveFyzMaLZiEKsC/mFrh8nAV+/DXkuAZKYc0LMlRgjedjH62hVbXkOPWYzs+jCHMrb7w==","signatures":[{"sig":"MEQCIBz8Vz+RksZ1jfgmmhTFZuQEukBddHKjwW9D+C3IiC1DAiAOijJkw44FojKQoMw1dO/68HJV2H5PiuF7WxQ6Zfehig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9MCRA9TVsSAnZWagAAaLsP/RczzAvUfy48r9CIDUoW\nX8px654q8NZywu8vv2rvwBGztL2uA7qmytbacULkYxOr7Qi/nzTV7u5XUKrU\newx1FVWFtbg5yJGf3X5y0aqxX8KARfIcBlA8llDcmeiLhlv2ugLYGGgYLKlC\nAKN1fHcA2LHaS198d1uLlCk8oYbiEXvR8vtJWhKLSZQcXnB5XjDtTmKR/P1z\nB0GUPmZ9LBurOj0h1vlofr2tezNZvpJO/TkTZzbCA7tMUaHhbN053iczhU6J\n+DOAkyfQ3YnwfCLAl6v6idJIN99zyQx02Kr6XWaQhGCs5Ql1jH2UPdvMhRO1\nFaV7tVxmFfW7WrzfvNoZTmIIygiP7oNRsRhfySgn/4unHoizaj08FRZUTCyc\ng60mXsuVenAPcO1WfkdH3CQc3DYkjLHFpT76eZcJqzWjjdCGNYH+FKMdavAu\nttXSlV3yJIWg4tOAFTSfRkOknXhFRDXIndrLHHbRcLUyzs8aOAHNzLFyQSLv\na7QQ/98lULag808pwSTPXgxjLG8IMYBi/tHFffjpz9vW1b+ol+RBg94o8h/b\nBqUjUFKdnuYdsriHTMHZnGgZX8n0TQxbuTs9/8HVXsDZ7LeF/Awk3KoIqH1H\n2hJXLnETojbaEEmAQobd0dnSp+nVbMa/zyYWPK9v329+iCDRJmJxMT9yrwNn\nZzgq\r\n=9/83\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/tokens":"14.0.0-canary.96ea061c1.0","@material/density":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.96ea061c1.0_1644433228067_0.008138785731990783","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/switch","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.e00181e59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17d17d0d9af576b03f46ef6279ae085b18565091","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.e00181e59.0.tgz","fileCount":58,"integrity":"sha512-jTMtIqnM8SeIjo49oQKj0yC8ss6JHdYDMsu8qzUf0hZ5ohCDj6Z2KUboUkmGq3B/kfn9weIm1Cqz/QPHGfWoEA==","signatures":[{"sig":"MEQCIAqDKAHZSX6Q8GuR83KIYCpSktP/r1vd4eiPSUDut2VWAiAr6epnCv/FsoIw0Ogo7gN0QZEXTAz94Q1ndmpP3i4LVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXCRCRA9TVsSAnZWagAA52AP/0xv5/gqHi60yWIT0IyP\nZTapefWq2hmeiscujrxJ/60lewNm75Gim20CkVPLwpZtu0fmQY5BWms8Zif8\nSeMxXNQwmuP4QVuUP38tshORB7wrOshn1PQWlqG6JacuLzFLmKxs0vpBey+c\nhLt1AWfl12TdRb+Ahbm62bjviXJQ+4BSwURF0xxEBhy/z3tr1RachOXzwUc9\nTHXyla4noTaHSheSRQYm1MiBTIW25RY03haxY5xJBVJ1/UAiEuVwmHkH5BNo\nBni0d9jQuSb5cP+EpoiVtQwnwy5zktk4FSsvkusmKJR8TdiNGGhlOot52oQP\nW57aieVfR/hbVJfCG8/6ijmW1BbUgShg3eZvulZwJySDJLX0T2roSh3YgsXP\nxZhPW3qmNBz6nzcj65lAlKe29+8WL38pC2AfKM5g7Zr/Oj7cIL18KT1CMfCJ\nr1cGON0Bo3loEBsLE1U/es/C/nihjg+15DSpELeKxeQHyfwpDTmbD3u63hF1\ntVgstgyzIfrGQJolHvZKA+35WpgfgpdkeX1CYmoXn/wHFhZ8m08LWkBRQ4qa\nax6LLviNZjxZVWRrkCHsxyCoAetdpvQ6DZH05KTymQ+5EqAxDdaAdrFR3Ks+\n5Gh36xO8tnASODX9IgPdvKow4y6m8iv1cyHGq2gDrXNDSgZ3E6gYKfBjiBA6\nh7Ws\r\n=36iE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/tokens":"14.0.0-canary.e00181e59.0","@material/density":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.e00181e59.0_1644523664978_0.9225328910696786","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/switch","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.037285f9b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d92798345d91e59cbbdd204ed152a0fea5db39d6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.037285f9b.0.tgz","fileCount":58,"integrity":"sha512-oljh8DBoiFZrwiQCaCNwxY3rhWNYucImMZFRLeF6boc0LuIfUV7jhmw9yjmDgt+DlWYsb6QZqVvSveqC4Y9o1Q==","signatures":[{"sig":"MEUCIQCkO+pDZAM6eZ8rzQOR62VKEO7+MDA96rEw8j5ihKeG6AIgeu0e94wFvFn9BM1t6jffslMYXtztQ8qqpFdx+3FjdLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtMCRA9TVsSAnZWagAAex0P/0Jyvge3XzhIxHSlVAUt\nWFvybLscLDGw4g7Y+mXhi2q6anA0JhkTbEGPdjcgJwDrkRXm0r31QaGUTbhs\nZywKnDJ9cueYMYa6auUNe/WAzy10zkn5Heq4A90YgK4OiC3X6R+ISm4XfU6Z\n3XQYJ0Ocw4SZP3EREq1avvq/++8CqsFQnJ8y39RxcbXbSM311B84DlaEpT1N\nJFFCb9quUiFq+wGQWrovxsR9BYbm9MKUN7Gwo4G5zSVtYws+3qndL2rxsc7+\nyT4HrpT1U4uvXmMmo6EomuK06MRIbXVrVjUps7KnvMcb2s8d2xn8CNw7g3AV\nW/pTJ7BjEJlPGcUKZg4gEjgxK6IMmdQtH9cDOs1Tu9at0PFsIMI+Tzgrlxqn\nyiAsMftIXX6c3eUEo7aVPHn5PI/B3XnchyKgg0Xw7QnScd8u7Mq54TAtS8co\n4W5rEXMJjAzAF/m7CHV6z7VypEDqZLrUq+3V1ir5JUrVaewda3rAQoMtF2Is\nuaahy8FmBSFZ1G7e34VNwuFBKqAlVawbcz4+ETTK5z+A6dbjeoB+oBLkJC2a\nYuEE2Zlp699NAlvSW12mmFefveauWtRal9Wp+vwEpAGZCH5Jju7OquFpzxax\n9B2TPkkQdSCWUuzehipXsBWnWyXaLCnbXs0gWDHNjgVCEfkZ7OPuabQJFKNl\nVJNu\r\n=ShgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/tokens":"14.0.0-canary.037285f9b.0","@material/density":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.037285f9b.0_1644604235734_0.004373358321371867","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/switch","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a49cebe48757151dbd3691ab4cf361043f8f99e0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.1aaa68dda.0.tgz","fileCount":58,"integrity":"sha512-s8G3AdCzg43FHxGc8+XCmQ4Z2JNPJhCoPFdefdKZEEO5Y592dD5Hsyss2a3zrBtwJdIdand/X8jl86/TdyZypw==","signatures":[{"sig":"MEUCIQDzTSqZN/HJLpvp7tSn3Ems2MDSxRYro5p6HK+Kup9jPAIgDcGP1X4B5ym7NSbNswZpgN51GWA359zsrBxqYl5dZTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVVtCRA9TVsSAnZWagAA9TMP/iXtUTpOGqL1UcgILQvX\n6Ts75Mdt74hrwnp0DUgKUfPE75zJQTaicDvUZlR7GW3NxNzU58PrM9871dPr\nNlFnhlcPsQqe73X2KJlqev5k4y86Cwzdy9NrEk/shy6UmPZW1/YLYYTGGs5p\nU6+YrjC1Cy1LlHs2YzhEvqcjuwHEXEhX9N8Nmuv71h276Rkz985EPGMFZSnr\nT0gSLiGmst61KR3VjkKpOZC0BF1u6AdR2GlZdQ8w4drHbDreTqlATxwOEG5F\nb0CEiIcchuoKdhLKpjC+pFYeo+IbTiitlaIg6P9Y12XcnxB/yaroi3cHOENn\nFhUA5FriIcRGqMfKjjQdvfn1pAHKSMFkTqTiEueuQLWI37S8WgX7Fx4s6xy7\nG4sqKBbIAidPqLZ9hs0qhBUtWF9KjdY4yOBCs3+xvhmnooyvmZuNXrHpL1h4\ngLxHdlogDHJT8dLdEkJOk89tqliet31EBQZmgtWApNz8845uGoPGrOe7oXH6\ncRh2u0LCeMupBarRWt0JPU1f+Le9Nbev+dHHdcNBYI8Jbggn6H074w7Xd1hK\no45awIg5sZBCadezV3OKtncKR24EWByYkqTEK8TxFrvim0oRolReIuOW060/\nmt+Uly/j7fSBZBinTATUC+KHj86+NNuzdkl6nLimMjulY0LrdK0PGxHjSirI\nyXxu\r\n=paBp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/tokens":"14.0.0-canary.1aaa68dda.0","@material/density":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.1aaa68dda.0_1645041005651_0.439302598848639","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/switch","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63e9cf70fb583784aa7d4712ee853de542814cab","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.ab4aba1af.0.tgz","fileCount":58,"integrity":"sha512-7IeuZQUEc6NXPszoXQfrM2hL1npWOUB7CCSrjpqhIUrs6l7V+fQgnNf4p1ENSbKk8V63p11+wiCIdeuJrUD15A==","signatures":[{"sig":"MEUCIA6vmH6N/SCAS9S3cc5l9VBmYsinaVMfFDrj2HA/OPtqAiEAqvy0SIVRVvzOEb/T4n4mub6If8OhLNPRm5On2FkkZzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyUg//X2wtkxW83wQtcvk2J43H6BZTrbr9rPsx86BsFy971F53Kh99\r\n6VXcKXSTVfSi98ck2gu03gUa0DsGQmP4CiBEH/hFLmSZUCTS3E1TvvtrGCL3\r\nT7SDPSVJGkwrU0WnG+G1vA0tWlqWp+PVkiZoAQe+d6c+UJwv7Kn1jAyicptA\r\nDJmEI1/Ztz5ciV9RXZawwssgiLGGiJGKcK8fjBfO5hbTOzuNnL0cJ5bRtode\r\n7pVHAyUyJByIbdSQKvGYXQL/b29QKbliaOs4vQTeMrhm1EXBj1l7WIwgS7bi\r\nnydwMoJqUQBtErA58hG+X1+rFZZbp+QYfxCIj4XpnN30xI/gzKPPfR9jQcFR\r\n6npIUvg25i/+aMsonLtTjaUR3yaS6qyJz+IDykCuNOhMbVIoKwbeU2Mu9Q2v\r\ngSd6cbZ69yI9/rbfawWj8f5m+joBUQFlgBLxXUeiDdiTs2cZT9LuoL0cNra2\r\n/g1cfGEePZ+Yav3I1pLuw+xwtoE1ExDMvkq7UGy9NHvmpWcKh7XvvBfO9VTG\r\nnDlfj4V5fqspg3Fkw7FHHClMMB3Tic9roAsxOPf9r+eHqlcrtaFU7gPQ67FK\r\nQfHizH5A0zxm0PC35rE8fKoJSwZfX/3dk5s6cbeK/k1Fg93lBe6SeFL9tyrL\r\nzcS58UIY6meBl1RgPKCr1XHLANtoSe4Z4Xg=\r\n=h4hV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/tokens":"14.0.0-canary.ab4aba1af.0","@material/density":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.ab4aba1af.0_1645121833878_0.9069584983963586","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/switch","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5f16036146e58c00fa9670b8a80951476e4e76e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.e58552c6e.0.tgz","fileCount":58,"integrity":"sha512-qrNvIaPyJ6PP5BA03OLEFRmq49Fy3RyWm12R1qyga5ynmRteWcQ+XSSnf83vLiut09q/ANUofw86QFQZ0hXlSQ==","signatures":[{"sig":"MEUCIBs3ZXIPbUDbtGCtsVBBBdOqVD4gw+RA/flzha4xm3/vAiEAwwD1bf1tsOvLKVUzW68jCz4B4wMwocWkeC68EiETXb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaABAAjZNN46BrI1qehEa2gOcPFiOI8q4cEFEFEypaU9KPENCAlfRK\r\nEJ0cwH3xEzRIM5eLWT7FTZW99TkoipquJf+3NRP0KRE3BuVQbBair+1J74pl\r\nkA3BQMfCoQq18PmZAKc3Xwx5vzWJGYlVWXPW7vuxxrzjQJl7oubhgmvACWvP\r\nCDKGQ18PkSICbB55CWXTQJavpb+mLDGTCgB3CqHLqf3lKAP/8xBIDcaO9/7k\r\ncNLIBYToQ5a+FVcdSkuM8mpZn5Wr27T/+FdhElgGCmkyFT0FZw6LGJScVOA6\r\nj745z893jXE1MF38E1PtqWmgONxbqd/5PDk8Jb5ONr8rYEUvlG/KLJN0RLtq\r\nPsNmUl6ZQ3KzTkUx3e8ciyZPHA/RpingGj0/6eESRtHa167wrlq3GltKBDrU\r\nX8sk03cq9eUtV+b2TNyUnEXkDTFm68vhixLIa16HvcEG8T5juDvBjcDgVf2W\r\n8YcR668z3/Up4/ZZS+kiDVb4ov0YBx/H30N9CYbYKIRpNHDfwEcxEZ1UWd9i\r\nxE/ncDdM3rjr/kFMKg8kpq7YowPte99AD6PbzD4KFz2IA7lHYSWaBMsKT0iS\r\nyJ4VxgF+6eiQr/1JxnBA75yc1UvCuwfuWyirzbYBke4tUZZjsAIAf1iHiRHA\r\nfokniYUWyPfTK+sjSfFl/EpwDdZcQK2oMv0=\r\n=sbrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/tokens":"14.0.0-canary.e58552c6e.0","@material/density":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.e58552c6e.0_1645207499768_0.7137712696377949","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/switch","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.868793776.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77ef7583ca791d61f8613605472598a280596fba","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.868793776.0.tgz","fileCount":58,"integrity":"sha512-g6Na6D9IEd71VqxCixzlBM7w2EV/rRignfJYI5JplvZg0ok2sTOjJ4hCD72/8GOfGVDRJH57g2MAsnjcdVt1mA==","signatures":[{"sig":"MEUCIQCRuDiekFhJXGmGVaCxwG7TUx3hI4RJynNMzFc1O2+uegIgHQq4PdSCzVbAWHiEy7D5csvwHuJN2PF82p2lJjy3mtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTtTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdihAAiRLcwRnWt5WOqPTP3hyNI8ylE/o82XRaA7wpBf7DPQEajZn3\r\nZRF2zUz2rifF+Jg1ipvo5gGTZ2WfRH7GQ5Oou2RvJvV7aOk6Ur8MYKJbukjH\r\n/VDITkSfrRdSSGF4QbqMrm0fiyqo9src3JPhw/3z9AB0mWYPr6aoi7XJ8VX/\r\nVav7TO7v+/4xL3eWdM+N+3T9Bp42JDywaz17I7IOkAqFgtbKf0qrmHEAaCZO\r\nabB4etazauWMkp2oCT8VHPt/0jK8PdoTa6IyLf3Jll3Xuv903+nDHsrMSSMV\r\nirQTy2lLmGjKfHn9MLwENM+seaQv6mmK+WrS6f2lPJfLJALh1UDfOMAE7Wp+\r\n7hlaWSH+aO993sm5F0KAlBmnYl9n8Y8dlnpFCIRblbhl24pGb/5g9La2KWS8\r\nBJyCgBS8eIDwtIwryWjhZJzIKJIsUJreps4/5aWY4LV/j2Tp46raCVpkhkIB\r\nJHizAHaj7y/k3lOEug9vyZ1AY5FcRWt8GwLNwYfjlrr9YrdwjVin6jvKTD+I\r\nCZeOihiNb9x8xwCKUAGQMoJ+PxMZRaH46e0do99w8LdRdEp2wnicl9Z4UlJo\r\nWSf3+fcYf/vPUmhmUAY9yXaikcnIo0u4me4YFhJwQCCJpCEusPTP14yMheyx\r\n7/dUYmivREbh/TS/V88k0rOG4VCpI4OzZvw=\r\n=WMRj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/tokens":"14.0.0-canary.868793776.0","@material/density":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.868793776.0_1645558611304_0.6072426526678085","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/switch","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b07bdf0b37563ac0745e9ee0ccece86f6ea0c1ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.fdc37a445.0.tgz","fileCount":58,"integrity":"sha512-WuhV7F87R7arw09iOhwZOoTZ/YUxX1Yol7MIVj/4EF8by+ii3/EHNvFBYHVbZhx9IAVJPzb3tqXeKrFcavF73w==","signatures":[{"sig":"MEYCIQD2231Zm+CMi54TgJ1s3rKyXD/vh8cWyN4nJnuvc/UWHQIhAImhAuIOlcmBpfjslLtMzciYAen4TlIvHAM6eOHf7Ndd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRikACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQLQ//eMLwRkrYTWd8GFzleBbHHMrCpCsIJVbBgADHe1Dg5cZrRSdf\r\n4pJc7ekiWZ7/yu9+ArgJ12E4ZUiNsS3EzbdYlBbWLgOYKIhCjHGIarPf3EpT\r\ndCCG/iQr8Yji34jtoSoDFDhvISXKnyk3m0FU4kl5vL7IXFDx4yCCIBaylcU+\r\nQ7vrSady6+ezz1wJpKKfQVzAAYzcumcW1ekYhIKIHRCKJuEj1C2bQ2Z4HCZ+\r\nU8k4ZlVtxkSx5tFGulZXM6p4d8U7gRBtaToYGY01rEQwViZql4MSF+E9Ce2B\r\npEQkOOwQRpkcZCa/0zpYvlzWAyYVtUv6FWICSfMZ2QCG7RPKMsaLPYL3mwJf\r\ncvrCSiXz/yum+LWpEfg88bgli41cVi75kA5F1sXEIymaqp7ftsdfjlDaDzJ0\r\nUaZAClnqITh5T2zS33qOege6+EYXYzL0mrbJnU2NV4sCkXkx2KO8tTbU+Xk5\r\n1V7TXOpPMwHZ5ZRcIFGxNJ1QGlMsv3CkmZOFPJJyhPBWav80XmbgT+PfgHTj\r\nLrIBLz+chzMjjtJSpsRL15WSD0F2Jm2W44jVoRLWILewbjamYQiLOuE1beCg\r\nE2ox1+hw55J+qwOScEdUhsX96MfuOkCQHb7DTD0Yk2j76z2lfQ2yRtYr4aK0\r\njcTJoSddgpBnrntGGO1wHWqrmOeLOcdJujw=\r\n=2fEg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/tokens":"14.0.0-canary.fdc37a445.0","@material/density":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.fdc37a445.0_1646074020136_0.0415665257304354","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/switch","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3aeea733060b5b5ef8a891d2b2fb5f76a54788d2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.43c7d87dc.0.tgz","fileCount":58,"integrity":"sha512-H/WMJahHUJR0h1FPb+Dg5DZ2c/g9EEj1Jw55wYwcnq/vM1j0MUhsYhvw8ujHx7gPO/AE2uHWHFqVObY6CtrhmQ==","signatures":[{"sig":"MEUCIQCsm+2dudRGFgT9arjKndB1ZU93sxEyyyRL7cD5Aj1BmAIgUxXwsX9g2gSef8WWu/vXRBjWeeuv21y8PnKDrfPH/HE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptMA//Zo3RU2zELHwK1K7qrepRNtIm9TjvVEnagp79M38npjRf91vw\r\nDYL+XFKjZOlalbfxL7P3ERH4W2nM+66yH16Ehxq+5H3+j4OVH41Fg3+m9e1Q\r\nA3tq2P16oYJb/HYmp63QuMBPwjOL4YlKax+YmmJ8kQZm5cjTTpbkVcVHvRfR\r\nFUjn5DWw3xFY446XcuxS7u2EPimItnRiZxIeNNljw6Hi31eY9YBOFrHFYcNU\r\nXaCSgRwR+ByOqGnRTxin/gVQNRV8Om0XE2B2DnDxhwo4l5pgQsA/Eo8y3mAh\r\nJJXZo3Vp/GUBEu8y4QekGg/19x7RjdPYdn9s/PRpM32cwbYR2K1C4m8E/ndj\r\nbF9wHw6YHo9TVqEBk4uIIGtAqdoxUKx/PpRHgg2u75VUE+z9UvxGUHSkSHIy\r\nJ2nlqv4EuEDln0b3c0fNk2bPVQDqQxJRLAO20f6ydM5132/OjsBB7y9uJzrT\r\nOQTaAo61oY68HVV4M1fROVYdrcszxUgNLgUpTJqCDh1K+791NeKony32m8gS\r\n9vLypRvoPQ1uHiLJNs7j+UeMM0kI4RR10LXxihoxMLeLE86GdclW5bpPy2HH\r\nxIO+P+7yjnfjZND8nbHb8B5pcvHBcjfyTM9B8nyVJIEgVPSyNSajPT+lqris\r\npHH2sz5l54iDILbbJxNpRRp4HUXLGweSCJw=\r\n=5ugg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/tokens":"14.0.0-canary.43c7d87dc.0","@material/density":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.43c7d87dc.0_1646148841946_0.31404604903091693","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/switch","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.23043acd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ac419fc873f1d816b1d02ab93913445576f48c6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.23043acd0.0.tgz","fileCount":58,"integrity":"sha512-htjw+VlX0tHJjQHbJh0HsWyiILniFOiI7gFpy73tpqHqRE/cA82suvfm+3dfE2I5BxH2p9zSzPIP2IKTzq2IcQ==","signatures":[{"sig":"MEUCIQDbbBG6tQZbWyDvs0OtUi+i1be2bAUNXAFI5ex2TD9xkQIgS14rTG0mFmWwb5iJsSOYUyKlVf5g6Y9YVGda795al+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfwhAAg23+RINSQSNXi0WvOY8S7gphYOG4DifKKxJl8LoqBYQJnw9W\r\n4XrViw5e8K8iToTl9Hn5WtivS3AV86NK+Qc36VElInv4S3YgtiirYVpSEEIu\r\nytI3gdN3mRRFWFqcZDK2Ohls/ELeehLITAKOUoFyzTW4lDOF0yLE/3c+ZUQ6\r\nB9/BDSsHmnISU/mjyo0KLhtRVbFBzIWyViS0nkGbXXL0dLJzprLp/c09/ZCw\r\n4QdgDypPVZnmburD3kJpTokqdWkioY2gSydx4ShGy31hYrCtHgJRrM592pnE\r\nHqyPg3+4kgppL/LzSvXsBLecBB0XPJWhnGKV6c6e2V834VP6Fiy6+aHpMMPC\r\niuKLCfmvo9y0ZaeTaqX3FWNOGBJwO31tzZh6LBM2b2NvOANkz48mzbjQ1ypT\r\nYEJRUX72H6jSruUhtdDecjEZvNNG1b+3Gyndw0OTn7oGkJ31SKJVuk3BGC1i\r\nSaCqzLcCEg1A8MhN8yk+l5ggesCuuzU/AOZTmVD+X4nCwJsZuNrHWmAe8TF4\r\nB7fGLy7a2wmmtaMmVh4vC23pS43qZ9AFNjcRdOyx2CMooFi+xsmxs689Z9nS\r\nICyyRCz95CCaVFUhPkgfxySHLdjkpdzq/svXNbIYw2I++pfP6DpGgoMor7wA\r\nI24+tSWQhHObnKuHS4dp6Xzvfnm8xUetJ4A=\r\n=gnto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/tokens":"14.0.0-canary.23043acd0.0","@material/density":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.23043acd0.0_1646252895120_0.5217161601123492","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/switch","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53381556a6c142145fd3a6a61f61125cad82b577","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.6505e61c5.0.tgz","fileCount":58,"integrity":"sha512-1fCW3N2955VlEqyWG6YsYjR7I1ol9gIIHqYC/Ftg/rBPIoeiEnoMynaD5yT5Hzbxh2Rr8vatgWM+YKnfP8CiTQ==","signatures":[{"sig":"MEUCIBpYPoBgczDbPWndWu284djIJQeEDkYab3fyKBNpFkeUAiEAgFgRWPWh5HhqKICLaUB4AG806WscnVuPd5fji6bODB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwUg/6AsTxgRau9m6BHsu+3BOhs41X+b+on7d0jdHR3OEjN3ySUpRD\r\nEd5YoqlW0Wzl+Yc5Bwg3Q3qeKM6xIz3S4nXthy+YQG0kHMvPE6FGS2No3x2R\r\ntNcBKLBEQoUDMBNg2Y//ocDG0/b/tpuj7v+l5I0tXvjr0/MfapzaksTQX4W8\r\n1NUhpEVKsdyOtbae/Dy4bNHD/T9ozw73hhoy5tz2ru2EfT6lMPRd06Y22ulH\r\n1tIXBkgvJ/CFt4AWuNwrtM9oXGd6B5qMRJ7CW6pg7vXza0LufMjfhJFeXbuS\r\n6HbosPUBtBBf7Ii/zn48+Gmg32CXSBkeopUfKjmtEGDW2R2wrdwOjRPJKLNJ\r\nzzmarRqJ7YjP1mQQwzFtQjrUKgP2aK977pKJBnZk2Ddbo21Bu+GVTj2+TLSw\r\nPkZPS9WC2+NAzDM0iZKLW1C71o/zm1EbvDXzrhFcoSWIfTWpwP1/QA8ZnmU/\r\n0DvhRwibfEwy2O21W3ZD05YSNlUdurrSPWb052oEOEzPIwhoI3rZcFvKCVjp\r\nMD5lxDYrBLsBZv7s/PL4qSwL5HGCSsUc/U/J9jtIBrKO4RtAEe65/23LSioD\r\n8wAPMGIB/mcccm+OUW/gc1ZfuyZe+58Rn5WUrxIOIfRv+f1BZLzJlsJ0Pe8T\r\nEVmEbfx4x2yC4eSfWmOxu1xIZRXHMc06W00=\r\n=1ceX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/tokens":"14.0.0-canary.6505e61c5.0","@material/density":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.6505e61c5.0_1646337697035_0.45664082227686276","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/switch","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.16c166154.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"223ee2b2987c9469c980ca81386f39dbac6d51e9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.16c166154.0.tgz","fileCount":58,"integrity":"sha512-mxGPKr4rhCuDoWNSk0AeCS2DSIXBp3k619Xa3gVoe1fbgqQo5SyjCTvv8IQeS38LRiB3PnGAEDGP6kTloeviqQ==","signatures":[{"sig":"MEYCIQCH7/NE2ilj0yK3Utq2N8tjin9BRnIBdJY3KD+xMybtKQIhAL33ATx3LDVO6D6n1UpAwJdCBWd1DLgKyxsR8nmS4oe0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp44A//ZaMrHF2nhho0DAWVv2hNJJNuTzpkmn6ukBDbcE4F1wOjfw9l\r\nzHbMoah3JNZFgG4Zdcq0BNTE46cH0kPioUmFuj9HSYouiLh0wKf6eSx4TcVn\r\n9mMKLSYod94G9oBzuKGr/VMMkwXJ4MwDuU4ZoV24y2Di2uDDIZZJXpdOfeeS\r\n3jQ2sP25IwRsZWv7K+2EZq3ZTqfOLrgZqNsMv+m8fcxxhHvbNtWVsKV0uzr2\r\nCAXN0FPpswbox2npBqykVHeNZ44PytFrZLgCXpFrflqamRkUxHgUf1OqVMQE\r\ncH+KaHsPvfojwZ6RAgthrlye+h84aHmUphs2K3nqJtYbOkNtU01Kj5yAXX9G\r\nom9tXWObUgSzwNX8gh/o3ZkpqVOGyBposGIfbftgeqldaVa8zVfYLj7sm9b1\r\nb8smvY2b3md9/FguG+vin9WZi45Ag+PdQ1QAWJL9SGcvsk0nG7MV1yXddP24\r\nxVsq8hsx7frI6aNDBGjEMUmyY28sqE9ulFOCSjuW1iHeMBuFH4/Agn47I372\r\njRyVuuNwUvcjYBtcYEipv+KlwVvcOpGxy9F9jc0sngwxMitG3rQ8AG6vrnv5\r\nDo5oVdKBDGPiFOIQs+2XAD9A+HLWax4BrMn0gTHyTdEYVSvBzEKkPul6iNUB\r\neTWwj7cXQl1pR38DEG0WMULSyje631O9WE8=\r\n=mnIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/tokens":"14.0.0-canary.16c166154.0","@material/density":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.16c166154.0_1646781791202_0.9422402683086737","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/switch","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a88e5280813006639cf9dfd70f84624fc1b63d2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.bdf1d3771.0.tgz","fileCount":58,"integrity":"sha512-C6wZt7K8C5B2OQJUxdO3f1Agmci10a8AhAGI5zCck4OBMUGKFPeBux3SGmRfC7NI059fTs/YnZPQn/Yi6HuV8A==","signatures":[{"sig":"MEYCIQCLlI6wFQyRGy6bL44xOShqZZl6CVL5cIT/B48883EBBgIhAOJm9/um7Ehap+748J3m40zfMbVeATxF7kXoBAqb0N4b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovRw/+IPROvGtmkTtZD1vTO06oamIRef/EjWyS12sjDBfrR+V9HW+H\r\nKSOCfQaZMUEvrhgLAhbIo+gdTn2Qk52Od5/lUgqATSa0c5+D9QCeJJKLQ04A\r\nNOngNV/t8lh4bvJx4+jlBrILQK8RGwN3fNAQzXibKDV+27Pn3TnQVE78MkbG\r\nGPnshW5sW31zdlk1Bzi9TYv2vGQugiJ0BL7b+vrMcwWr+Cd0SY8B/biemSI1\r\n2UsQxg7yJmMsDVVTQx4s+YiBxf3BSwp3G9WuD7mMDC8VN3npn/GlXCbz/nt5\r\nxYR0TnrO9AgMdYlQrE9633IZ6eLQPErLMYY+G3QDHy5n9NOdqa0cV1cFLETO\r\n601pdG+UxX7M/sFUNbA7iF/tfbT4G5bK+G14dBjtwSbf5j8bCVZkeBU9qB9+\r\n6OFJ+v1aOmJAIXAoRyE751Ecu6iJdMUUgbcbcqtSqz7AD8Fm5ayYGosVf3Qh\r\nRMV3ts/ewkcFji2pAroHTEuG7YWLgHDfVuph5pnN9cnkvo+vWGdFItgyP3MI\r\nnQQjmVMR4JLMSaOQ9jqbJoa3jjWfeOomSyVQ0GJrAmmzRxMT8Q8Iq6NBj3In\r\nYK0MzouKHgTPmukQe8J58GAGKNsU07GiU910/o1/+6wo16xxiCPCuCtckN8V\r\n4c27OpPFdSYL5jTRPVcSwmku0sP2RwMnvNg=\r\n=6wa6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/tokens":"14.0.0-canary.bdf1d3771.0","@material/density":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.bdf1d3771.0_1647268169438_0.02559697749144685","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/switch","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.cf4292778.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1e03792e65f480d5f17376cd47ccbe76b1d898d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.cf4292778.0.tgz","fileCount":58,"integrity":"sha512-cfG7rMoBVrGZgMgLz/xV242xLst1Zbxi4ohsePL1uvdPH2SflY7zkNyh7+HauiLT1bgDXVD80h3TVrcdNtsvdA==","signatures":[{"sig":"MEYCIQDFjqfCg5W9itftB1zs5Co9szjM6ByWnUClYSvHS4yaKAIhAK3rRspcW5xa6a6r3AYa1ZjiWZuj0BegmBRj/MVaP6Wn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfiA/9H2egpQEX+RJRGTv+4O7yyZAIMjDVaM9GlQ0imZ3blkGQRc8M\r\n4BV+Q5Q4Rdv/VeVz7s7peLYNvwnY/wdAlVLrVXRPIpjOQLAhBzEjgD667TM1\r\nY3R+VnIhRmoem8MZ3FYDQYVC/ibWBi6cKbhrOsNnpRCZ3qS3Loo7sj3G1JGU\r\nqfVk9wEzRZcXFRYGzPzQ4gIF0CvHNqUcanotMwN0p4IZxkxhgnPyOKPzq9pR\r\nAeM/byeCBZt54LObfCHGren863bafXKz+DRWJfZ06pcTdMaj9bYgjYGajG9h\r\nS9Zd20xdWQHUBs7P7mV9fn2TqvkBjwuyMfGdtaE2KMLtHveL3TrQFxOlbXFf\r\ncUM6WabPlHq6fVEOKf+I2CsG/qJ3G6rbI8mpqrRp2G9x8OwWXge8tu/crzk5\r\nJX87NlZii9pFvPX1kcEB4AfxmlHTklk19rlR/QD9HomIZsEehOgOECYpAvnS\r\nQt2dWXkfTVSMrqjYmPrZ+ZtMQpMwqNwUZWO9Y3qkAGM+YDFPPY6THOs200Uj\r\nl+6N6nsljqMv1P/+vMpUWzF+pJGf8lb1q2gchAV2fyr5R31igRxa6BogqRY/\r\nSXqkhwPi4UpMGxmcVZNxSZghNferqRSWgEm9qW0so7cUBolr27bIbKdCa/sg\r\nLT4vOJ8NjPQLbiTnSO99mn6RrsiWXHBysPY=\r\n=gG2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/tokens":"14.0.0-canary.cf4292778.0","@material/density":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.cf4292778.0_1647304226883_0.3253507913829068","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/switch","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e2d7049f270249751023047056bbf60671bbea1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":58,"integrity":"sha512-vIkyuK6Xci4j2cxdPrcdgOVT0Krb9ar5WmrQmvYFwb2woRvdQwrUZN6FUfs6/kwNxWPwenQhxnAbFcjYQXLdNQ==","signatures":[{"sig":"MEUCIQDRdRM1bjY6D45QGljEgQ3g/fL+wuZKswQjYI6uGsjyGQIgBzMyKh5YZ17Ja22oh/orNnHmUGgtuo76db0rFjXYzi4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouQQ//aO0Gm9LotalWwtWTR4ClqFPYXQJO5w+4e8tUrMETzLqNqiXD\r\nUBxhKdxs9iTafBqFpb89oGWdob55vxnt7pIA7yyt3aXYzLBzjOoBUc1ZHYkB\r\n91KfpKRxs17um+eB8suS0vrEJerbz/dHyZ/kKMBjgyppvfg18m6aT8JRhaJF\r\nQ7WY641xJLEWQng4saCjpLyX11RPgWg3cz5llZzV5LTbGA+4cg0tRNa4D686\r\n1riWQ2c4oC3hUmNRtKwAF1Rz68nR4/ic0eOFXt3CL5tCXOYpZCrKKpIRsv83\r\nsIqX42AFI46uYgnxUWmn573RiwMwGfbX6eNtWWPsLLW9q7QxXnTnzN+bx6LI\r\nvFDcx5SSv+f1RgPnQXqPhPKDdEsOXd0x1TsWeFuXUB2+GgYwE68rxUvUN4QW\r\noKV1lCYZGvBBMWys4sfn/pZrn5C7ETYIPenRWcgfJywyOc/GpqTG9PQiOSME\r\nqqAc0GUSxlxe4M9GSo4kLQWShcVMmkj6G/LPY67uxtT0yDRCO+e0PyAABJDK\r\n+q4jeXRP1XnChbp7nbU3Rbnct9pfseQy2SmU+6wsZsmkyXHmsf/cXcLRD6fk\r\nEHzycprjJ6Low6afJsjMXwDb8LQYTgyc1wFQEUUI4fAF5vBMVL6l2YZKsxqi\r\n6PteWjlVUFi2E0Oyuyaqg9gm0AUcKXZ3wMo=\r\n=rHtH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/tokens":"14.0.0-canary.bbd43e0e0.0","@material/density":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.bbd43e0e0.0_1647463852970_0.918530151843463","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/switch","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c37424fc3209432e76b3505a083a6e6e4f19113","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.1b6afad86.0.tgz","fileCount":58,"integrity":"sha512-UE55qnTy27eSRGJx+sD+d+SvDP8YFr3Txzp9YM8FSxG0OSUse+BMYhqWRirgPzDCV9ztj5h+c7LYiqiNomrSEw==","signatures":[{"sig":"MEUCIQCZcJ5raiN/Z1g5hULnMR1Xuv2M50xz7cEdFi+ruqOGFwIgdz8HiFPL4n81FM/xHtf9Tmgu/gL92gIglnQcwi4orkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Qg//Zc/erxGNORCN1/amQA5SPhZpU/vnyX2b/EKkC4SR3fmA2W6L\r\n0mG68Zz3MXt1L5kk22kHc90QODpYrhm6l0ZqbAYcBerQqndNlkRgyoHuzvJ+\r\n5rKGinITZaWZ4fVy4SZStfDi2xKD42qvkLc08UY0kkbKTafDYRrN9K0doHuL\r\nFjf3bCAvhFr7iSpF+OhFXzBm2XCoFDPPdeFsvx9FAEYQxQByOEsVS5s0Pf7s\r\n3dBfXSYcIDgRtLBh3zKk5+LbMXUjkSEHUHW7Qrmd4o1Yj8t8zdcHpkXeziKl\r\nMdLPrN2jNdMT5ft4Ou2QzWTChUMBQF2QPkXXngWeEEBwtDNEwgC/fma65NUg\r\ndiTBX6rtVnXkpiP6GF4tfDEjBdCnRnsHy8vjSPgzGtnwLCbI1+bSwAM2JtMt\r\ngm/UaMStDyNzMQX/pdZf1INwds3j1ntEgv7PVe16fnfrZn2AfS6+woo+uB3H\r\n1HY9gtW5j/qbxWZD/eCnYGoFvoGU9xEWNi7CHRv6pOs/sPPa6bdPyTHNfd5S\r\nWJDSykXLh0ZioKkJzn/N/7T6YpXQLqlqD6eV9Sr5EMNFqRKx4osDcN5AuebS\r\nGVapIiojTD1bU5ksKsz7Te57Fj4xKLIwF10RZ/2XWDM1WLcWUFlwIf3OFE1w\r\n505JAinQjcX2DL6w6bWP2AKRnieXDNAdpLo=\r\n=xYJ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/tokens":"14.0.0-canary.1b6afad86.0","@material/density":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.1b6afad86.0_1647464665191_0.5636094498480735","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/switch","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b623323e7c6b82793c8bdf18345fdb102b011f4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":58,"integrity":"sha512-7ZWT3uj40gUwTR6NSuL/A9HSf1uTSeq0tLJyYsjRamM0zG3UqteNMTXC54Om8ayoJ28kmV0AVFNk73nCWHqF6Q==","signatures":[{"sig":"MEYCIQDNDKI7pclX2CEeBsN7rmCYrJKHRfaWNEpznzxYw2hNIQIhAPXh8HUpUIIl89wrJ8JaSoHyE+dAtVfYjUcl+cj0dYOS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNTg//aN1KPqQCXCzwTZbeXZ3dbiogVjP+v6CLuinY8h6INjUn7y6B\r\n6Ez90YP3qXjbPsbAd7QAZmm/ShERvNUO+u5UYheVo1Wjs/+mdIINLcJlbQYd\r\nzHN5V4WeUKaaqxIUU1o9KHwRLSSq9GN7ndPUoPnBpRO1mF0tzqhfIwJjuNem\r\nymHkvF2VHIEQ9UA1FeaP71n6KotLdYSCqSTSuJJCbgcrh4PJvgJCQ52e8r9o\r\nlhuXZi1HsG7TlyoixOwxxSBDb/Jsy2tLrwUeHfgnfuaD+GmOAoqw1eM2zP2V\r\nkIXZgndXnGSSLb42Cw13evuBpCDhUy7XQgX+VhDk+NNQMxMU04jL8TQdAE8m\r\n05gOFOWrjeS3TH06GOg+XqWTGGxgiqJ/yv7j3EfvbetCj/eRb7DgPMa6nana\r\nt+VYBheT1Q4Heatn1q0sZMUjP+P/QshO2RFzauesoc9fJwFfls7uMZ2xqvw+\r\nsCvc8JS+RRC0NgwPk3b2BJ4NteYsmNAwX7e/iaPGN+FK2vNrUxB+9kn0msuY\r\nez/X7stwJNxtWi0oi62v8Rrj36MyEkrz/tsBWcTaFP/BDEAa1tagbFpunoJy\r\neTmdLtOKVKLJ9AsT8HncZHi7YvQAOtA57UhA7S9BoRnDgayzxxxZCdQ/Eq6k\r\nJCRBXOHnphf5SNojsEO2V1KfEtInKcnx2c0=\r\n=JsL+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/tokens":"14.0.0-canary.bdf9d4af9.0","@material/density":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.bdf9d4af9.0_1647465521220_0.7947692017121069","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/switch","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.32b391398.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1ce715feab1874e0fae11084910bf2ea3a06b9d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.32b391398.0.tgz","fileCount":58,"integrity":"sha512-4xN49Z8lG2B4Z+IEgKvJvy7BN6mDnzQDzK7wgdJJ1k8HLPqUgNVNT/AkAwUADJXvgY/KV87aLmT/PtFR3/IFgw==","signatures":[{"sig":"MEUCIBae2yHk8uun5zjCXMyYRxNj597ey2rsGqqRXLOBc+urAiEAsfRlnu88Vq2m9IylFWZJOqcciVH+2uRLipqW5Fhsesk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfmBAAj2xd1tHhBcDrrhkcniivuRQfq3xDJCkHyjUBaE+ZJh7dWK2T\r\nSBuGlMuE5vm57pNTOHQ1DBqerg4CQkklfJ9ncsWRgp+hMbPsbexBZB4s7ZZu\r\nR+8/DhWQNDPp5JETxgBHc/gxfQ3KZxxEVEqWrmFYUXgWyhc5B6jI4W7ECIyK\r\nUWbwXX8fZwPC8ggS+pp/iQPvzAW1ipUEuXIuL51H1elxTMXF0zF/zk06CS3N\r\n5SmGGCVMWPqCGgcM76OYotKSlCts/s5f24icsMz0guCAYBiZogwo+XovOQDh\r\nhU7u0Ydiu2OgutPIN7ojw/1QIhBlRR8L3qCaMEq8zZNhl2nSo1iBYWZNFRMh\r\nQxhHnI98ZR+KCVPpcp7kpvOD//dcbAEskNUvMlQJpKOI+VRyimFATNFFQUUX\r\naigQNC9pn6XrxSyMaTBkgCyAOfyfQ93EeY9OUr0MqnxHcHdLmn//Rwi21OwT\r\nv8d2kthxcvU1hJzx+daJbBOnF1eYJBSzx1j6E0IaJdM96ZGrWk6UGd9UbV2G\r\npMvF2F56CItTJMgJPKrVi0DogdRvaOVb7Kvwj6WHupQB5vf57RVZDsOCOkn0\r\nq7QN4YCW97nXIin35e9XzcDPRAnwbDWMWlfJOOq9IorQOKc2O2qDo6WGT2Tz\r\nJl45gBu18t++Vh/+QkeLTblkje+5jVPfFGU=\r\n=O+j7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/tokens":"14.0.0-canary.32b391398.0","@material/density":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.32b391398.0_1647540009537_0.9231913052035992","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/switch","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54cc8f87295b6c572a3562fbaff3026abff71839","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":58,"integrity":"sha512-es0gHYzeanHhTnQVDpDkL5pSBugERanGi5mHrurmQQz0eFSIsP8o9jYeHW6sE4xIkZQ8z1F3SVDGRHZMCzdk0g==","signatures":[{"sig":"MEUCIHjag9OzRahi3GAJ9N4DA8oMEmNkrsm5i2SrLGrGTtMeAiEAtAXecxQAFlLeBsiaUk0SQxRS8FML+vDcvUDHFwYWP50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs1Q//QtKzko/s6D+Ny0qVarQfOkNMwajzbwWhiKXFL5qMJzQVRwYw\r\nIQaAqeI72/mkGn5DZJ234Igak6ogcfFTYMXxhGV7HWJMIM5gjVsjP1Vj6//T\r\nhVuhFroTU2la9JqI1YB/F8CIuPTpbQH2/6sPh37bSYl7MYxT5JIA2z3WGFoz\r\n37loKYXM2MiqSJGAfBU0RzTD32VxeAEkyxuI7t3/OdV94qnsRPN4J1vqY74o\r\ndwoNdAuJZb7VVapJuHRDlNZkrvbhD3C8LroRVKVX1s9EUB1qydunP1hfvVHH\r\nDLsZbuLVo2BqaVoLbtgiJIy/vEarbm91gQ5LlrWWbByABoIfrOJtcfUi9ati\r\ntYwvx/hNsaubIPmpcXkyrUfqsTDSqxaMz+GD4XiWzs2x3453b7AYl5ym1pea\r\nhd/Dq2W9gMH0I1Gl3rarckNH9wFvnIkXbvlv0VpGGmI4JVe0Nc/dhtavlQCw\r\nRcEbcXzGVMkfqC3hG5+UsSvLXsvWL2BWdRTN2+6gCUyQA+l9qtkrRDJfr+6B\r\nyzFjmVURcfcuMl4CRCztWtpNL7vnjXkSJt4TxQ1pgkLb/gM91C45GbTyvD/R\r\neJRx7EQNj0vAKgiK1z7zy/0UE1MbgHrc++1QkhTisUjFWthFcQdZ25vpdA7M\r\nm5019aHIS17L4ngJeZ9+BbJbhEa1ykuOaEY=\r\n=Pp8j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/tokens":"14.0.0-canary.ae8a6a3a3.0","@material/density":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.ae8a6a3a3.0_1647621605197_0.9649347147233569","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/switch","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78c6e1d0ec373e34cd1368b062f056e70f7fcf01","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.cbd9358a6.0.tgz","fileCount":58,"integrity":"sha512-hr4RzOo3P8DUhSVOson1dZu9HEhkDPeve9D0eOkgnMTtOz68e/wCzqy9wEvi87g6RGTbWQWfoC8lP6Y3Ex5HDA==","signatures":[{"sig":"MEUCIFbCjkSmOBjlrVfR/bUwmfbNMtOEEgWug7Kb8/giV0KHAiEAznUn6qb9bXQSIrRYQ4PuZlIMsvQopmYQ9jK1pWbOicg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvoRAAmlrxXrmqyVET4e60WMi0ydshAoUAwdTpbl6b8FjQRelI9cuS\r\nkwUJFuxRzRJXmf+ws3vqL/1bMufu4+2fYAEbWaprgXNA/VSwJlX17GOdFMkU\r\nhCV9knKjwKJfJfotoZt6gntl13JEzgPe3LZfNj8HOqegAhXUL1Rb/Onc+Tn2\r\no6afLMD9XcPbYDGaRNePmgdCoELKsDeJtZNcyh0p5CyK6y3ZYGEArGKiuFz3\r\nd+nyqHOwml+9f8Go/PbghtU12eucJLC8L1fC8SaBF8QKD1vtG8dfc6Worerb\r\nGLzSWXKZLWxe3Tmhyt32pCYtX3z199FIzv8MBECWiR/q3e8S1eme9OZAoDsZ\r\nXvEexTpk1P7QJiRFDEW8zUzf5Ty0aLkRUoutTuoFRR2Kj+cbsmyk97/pGezE\r\nMjmkzv1JUXe32eeiGD1B+daom3uFY7BVdP8b0+gAfmwCksA7wh/XEFOtGaXp\r\nkxLqyhfQzBaY5PltccZ9dN3/7AxQQDDLeEyXkZEKg2aV5HhfBJkoGgPh5JYK\r\nRWs7Czdor8SrEaa7sHqS9ptPZLKYpHhNGawXdWZqS9Thhw24jaTu+mw1XVK2\r\nRfD2IzeTeVpwSA964/sL/pEOuiL94R865U5Zk7dlaBYLYbm0Fzh8AkZ/D3JZ\r\nr9PmI6E95CZZMX4dp9CD5oHYPz+p0uw8DLg=\r\n=NuQY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/tokens":"14.0.0-canary.cbd9358a6.0","@material/density":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.cbd9358a6.0_1647643973600_0.4073453638326894","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/switch","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"199d3ca07cb3c1636981cbf71bc82b765b55835d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.dcfe49c98.0.tgz","fileCount":58,"integrity":"sha512-mtp884gYTIEAxvuLonfjDqOkB42BEGZNgeApWW4PtWKzT/lPyeTY4xTWQdOHwJrz9+a9Sg/w2LMIdwe44mtWVg==","signatures":[{"sig":"MEUCIQD44U3QPVko3NdpruLks2oHrXNDiAVRgXvvxF1viNLLFAIgYY9iKtZw/VJPu/BsxBJLpI90VM+f3suMh0QM4x1LfQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":726694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMeoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrITxAAlxVcaOEikBFYFu0S8mv5iVJ8qnkjIXnfqXZOamZS/DVrb9mN\r\nkLySioGNYOcG8DN0jA+PUn+gBHLwAKrYzfsMoY/X9blgmGbrAMuni4MUnmct\r\nSv7LROfaM2Y5GH+dWQMQjyBlxF8JjjU/5ufgP0c/WWzaHyj9xLuj320+Mlu/\r\nizg3qBT1Ei0HZvzSWLhunPxvQFG6jj5+kJb2F8SKPhjud8onVmaVn8xaiRwZ\r\nlfq75LItrC22FwcVpSB/674e9fsJEso3alEtonEJlW97k0zhPzxnfgR3D9Np\r\n9k0d3eijZR8m0neGjYPL/ueaoSsQzMgALMYxRypqq5Em9R+28WgXYh8OavWX\r\ndmgSXX1bhVNfDVX/UGUXmeRgzc2ClgnW+H5p+Jxx0sXfnjdcg7oj1Lt5kgNZ\r\noD4PV5CfjOUbQvsKHCaJ1F5KVLpFlHb7ReLfsJZoCI44gq/O6i71Q11nkEw3\r\ncaCy2oO0FOCdDTPm+GkGfig8wzcMLGFX6IjLLHSa/gNorwQ5gtCqToqUyyyt\r\nW9YNcIx2OFT0sXkChKpmGWIG2yDOT4oTp1D4ny8xFou6naQwasdTtOb6XyqE\r\nMmXsYSYQHzISa9gojD5JALo5jqN3sOu9CBasCIq43IgCw+XKAroJry/+KauI\r\nkMqbjBz28rz7wkF65ct+dM6K2Xf+RaesWwI=\r\n=qwHF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/tokens":"14.0.0-canary.dcfe49c98.0","@material/density":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0-canary.dcfe49c98.0_1647888296533_0.5619375173928063","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/switch","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3530ee82825292958340985cd27a217ea81b66d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.f31a833fa.0.tgz","fileCount":58,"integrity":"sha512-+HdOwKM6aL7khHrht940tyEwwIhvDdYb0lQjPYjuw5NnBwDFZcRh8GtUgFRw+qe7fQk4407WWEGiUgNAFVnTfg==","signatures":[{"sig":"MEQCIFLknUaKoRHS4B0nO2I+gJvm81IH66AVAOTFvKJRFMqrAiBEUDXOnw0w9Azy6M0CnsX1SKhWFWoq/Oj1uLuS8naYeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIkw//WHBfa/Sw4mh5OJ33r8zDfXaQRCf0YJJPPyxjXqF9+7uCFhvm\r\n0tiho+ljhx62InCxPaWipHqW05OHnM0dBGvseXVXkA4GyVuuCZOK4BwR/WnY\r\nqnR+jak3eG2cJCjWvdMVTkEyBoda2PN6C5QRIT8jXr5giXGSec4d5wr79VNe\r\nq3SqBk/CKfKaCWdDj6hejV81WTcN3BV4RMwGM0fs4KwcrGF4KwbPE2xfEPnd\r\nZyN2gQJx47i9E/YGMv54t1/JHliGOEI1rTNQ7TdyEIxa9ddj+maoapR4uIHC\r\n/Qk9S8GsexwbOD9ixUD8hLOjXdDniHD5CGH1q57rs8X32phmX3u+YaUXHBL4\r\nnH4SgnZu6ukE3CAy7ft996uH1ygNLkgsSSziigJeiTWFB/YM35DpmhGl+Tmu\r\nmwhsyoznal7+dQGRtK+xTfyo+eZzCjWSBvImba+pyWbmUfsTWLtTWiR45zPZ\r\nPSuTnx8g9IPfITDxgGh5R1NALDu19e2CKJrSuTqOavJcC277gYHfyLXrLnMZ\r\nR+X5Wlesho6a3Z7ganMfUKF/wHPda6QA/dS8asdTwCjKH+P6+/aSulH0zPDX\r\nrX8U/MHZsxsMhGOmi/U+YxuDeiwXE2fw3eTS9kyptW1+Nq5XsgyW+7P2FI50\r\nHHSbNpHNy2nPFzNXp3MoGp7e6X0atZ2HZjc=\r\n=U0XL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/tokens":"14.0.0-canary.f31a833fa.0","@material/density":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/focus-ring":"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/switch_14.0.0-canary.f31a833fa.0_1647996696182_0.4487258882540721","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/switch","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdb4190b543e9d44318405c8b0cd0a53be06ee3c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.4b92e210a.0.tgz","fileCount":58,"integrity":"sha512-e+9AhBbJxAJ+S3csEao15WalG63GsPo6G+Mp+kA6MWU/q3iI2JAztCbkBpEuI8xaH5hjXnwflZh/n7hr0LNdCw==","signatures":[{"sig":"MEUCIQC3Nk2c9E3Jif3lZ0DgiKhwSl0Gf2LctLOj+JybjhtsiwIgXNCeT5OAGBJm+7k2cKoycxXA8IPNs27Ob25S+mpOmYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreJw/+Ml9GR49OyrYSl27HbRR9LnzelWl/yR2j7sFZwusVn5gjWT1w\r\nKlWM4YL0iQH4dt2COUq7G/fJmekSjG3UnAeB7SEvtt9/OIa4RoiBf/ujV26z\r\n0QIbcWploeTdziYvZL6yEosVMxUVEXmJBsZL9nU3iY26q2Br/JL230a53kyH\r\nYXOVxiCLLxtz3w4nROliivcS2vhPsTWTw0Qz2Ay1FTGhXoUL8p0n1VNZUXL1\r\nE/Zx9Lrvx79wa4tryA1XQxYpVMToQJMDLfSXYA8vsYG+NO5fTvHCvxxfiJgt\r\n6mwFZ+dGUEYK7MbiOhGlpt8e3ygHt3A+eUva1WeWQdU4h2T7a9fuBHnkk2T1\r\nz2ruCt4cf7+D8Mg1h6B0YQ8GfupUNMRjSWhtPaq6YrR084WRzY1+8anJXfHc\r\n3kEH90/+m0nUoY0XVd8fFnc+qJKAQmZJ0r3Bph06GpvEdg7Kj6R7trL5kS64\r\nXAso/2ylb/TXHCiW9u5sNGQp8eVXcZ/Z8GmrCFkkTMuVL55c+WJJpsUBEeUx\r\nrxGXqFn0SFRhT7dL4onWeuxZ6y6wbbS2hTSDSdkbloJ6MR3wCpLHBcvErks5\r\nCXl043nILa8wpxBitwi0A9GF+sVOlV5diJU2PJqkdx2cLpyEyilFbXJ3g3Zh\r\nCHqsvBGihFjg5ENndsTe4mzTD3P8qk0VB1c=\r\n=mXLw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/tokens":"14.0.0-canary.4b92e210a.0","@material/density":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/focus-ring":"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/switch_14.0.0-canary.4b92e210a.0_1648153162780_0.9710891439519456","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/switch","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.a657abb61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbd78b3bb4c8ea439c4f138205222e9b6c9d7cd0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.a657abb61.0.tgz","fileCount":58,"integrity":"sha512-GYR7lziXTaVZKBGaB5BwJRJfd34XBO89ZB5Bpawp23g4NsazvgLONlPlmVZlsyXR4Y9bv4MlaS2CTTqBswQJ7Q==","signatures":[{"sig":"MEUCIGX84SARy+JK2onVTwAAYDJPyy9P+0mQ9tXVkjLj4SE2AiEAy3vWz6oWygfcTPZ6mnOLsjATWYCrSuz73erWoLR5G2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNPw/9GYWtzW26lSoHe6k9ME24VKHPNB8pea6fH59GuB+zewKjdjnm\r\nIFWxwYs4ydNLUOzcoTQ2rIaw/+3Of5F5lfICtMUwMAnZTXC8sPAMiK6QX1Ct\r\nZR3ELLE8aLzdvuMshdtOztZyvD5vGb5AcgNwaMSH7SN7o2g6QW6TYFuJJWRs\r\nuFBRTjO8J0NNUvA7ofFS3rhmFse4MvxcSI3z7VpjC60UbiRHzP7nupIzgkJ5\r\n8sgjpwyzTn+urCzwyEYcUvXXoPaaBFOGtKTLXTFY/kvkIcVjBzSWrWLcfsrP\r\nwiiJexdUxGje2U8fb7pkTESygqoNkgV05euSKc5nv8IU7DnfBsWHHiyl5hwy\r\n8m7V03QPYUBjTEMzw7VecMe5xr13qWTgTerWabQ2TeHnNfb9MHF60tXihyC2\r\nI91ZGSLtBl4Sg6C0/Ra+ivu5TDLrbEaTPz9xS/fWNDIhHurHQzLSLA+d08SZ\r\n7DfYWwzj+hiq6YbW6ip6PPOBtpZLztl8JC+Pxsz1MflHI/LTeXuyLgJImY0z\r\ngzPO3TxGzaQDIP70iStSOTMkXcz8QvPG9NruAr/J2g9rVRawbbGm95ecazL2\r\nptY5pnOrMT2ohuvVl/W2v+kuq1X+vjdIt2ASiSc1sD9as7gwg+ze1wM68rX3\r\nuJWbwTZxhbyLl5gbVLYOMi8iOoENKKp25Ys=\r\n=4O8K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/tokens":"14.0.0-canary.a657abb61.0","@material/density":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/focus-ring":"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/switch_14.0.0-canary.a657abb61.0_1648154447032_0.5626391812614053","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/switch","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.443f63f50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8fc917913a00abfbd2e51d5e3d2f0f790b7feb7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.443f63f50.0.tgz","fileCount":58,"integrity":"sha512-dawVigAYMGzRgtEQmYSjxHKUA8o9HpnwSNoocDAhyau6APCai9Co+sJTU1ZxECO+LvQ1oor9Hqt90kszohZ1BQ==","signatures":[{"sig":"MEUCIQD2HuzKGn5UESB5hWUQUfANt2BDGQjg2NKVTRAK6dmXrgIgUhnqbQTERbKQfAhRbXX0TyQsnW5hqfu1naIYjadrUt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkq1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfBA/9EV/huv2Pvnkwz7IkDMsrThdWzXkUeOaJ1nDPsZQZ+GXyQKCq\r\nG6l7unyK0NvoqZoREyyc5tCgwWDcyuQYKUCbFk2B0fX7XdWjMyxBqjf9uRbO\r\nVFA8uo2adMJeDH8XBDCZVRlcsf/+I35BZInIdZSqhi/bQZSSzMQqYQLiUkKX\r\nFk6YcTid9ZASZlF2xXfwJoMUfPU09iOcLm8mVH01hmqx9/gRPb/2uptAREVL\r\nVYtSjpOSHI75l7zOV/EuEltJcYJyGNZfnguZPSN8OmDeCIZklcwx2BLbpeUw\r\naXar5O7ZlrcjvGN6MR4WqRoFlo+oAxeqFYRuZyVwl7OZ8Dhy8m6e5NY6HWQ9\r\ntAd0EhxStbf+26AIjQ8S8sCefilVY9k6WO4X7Hrl4qe4nuovd2omXeS5ypEO\r\n19Qx4X98aPTu0r/vd5yYh2N7GGsWTxlHUxZNfRt+YPILXEUH0ZrFn/HCjJzj\r\nDMZ/fy+JxKa/vE//KinjiJF7WDsRCoarO2qY45S8z8JkkiKOF5y1Yp6h2t7e\r\n6J/xyUvHCRKWUpKoVjkxlKB4pd+aalLtrf5Eh4fgFvv/h47bbF5XKb0RrwUs\r\n+il3z5iFK0QfhHURRJ6ia+ODOLshSLmEylyiPZfIE7Ij5aTlDmtiPzkMLymb\r\n2otcegvnppy7XCAFzOsDsBF2KFEtQO3dtkQ=\r\n=DQ2W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/tokens":"14.0.0-canary.443f63f50.0","@material/density":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/focus-ring":"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/switch_14.0.0-canary.443f63f50.0_1648249525554_0.06266749541610772","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/switch","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.eb382f318.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"052877067affaa6f9de6259ee6ec541640723e79","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.eb382f318.0.tgz","fileCount":58,"integrity":"sha512-JA+pyZ6A+Pb0Lem6KoWVU+wgvV7j4RvnZzpZ/QiXm8Ge8wddQIcTSVs/MW55c761Ws4s86BLhoAPxBPTWcLGYw==","signatures":[{"sig":"MEQCIAGc7GsNnNk3TarXt9AT6QhNepLc2V+RpWSIWGCQCFJGAiAbShn0FDij+t7/YLISwMSaBoUvky5fwQjp8yE4jjvXmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Pw//dsW6HK339vFa0rPOb+FnP0dOCIMW5MpVcEZuDtKy+0/V+se2\r\n8IonsHzHxd4H4XYS/FTkXZB7DjT6TdF86i6fl0yJUDVPb7cIP78fl2YPUpVw\r\nfjfdkUOGqkxk+pOo0QLJU4+VAdYkyBhhC0y366CstW0VfLD0nWI75vuWaTf1\r\nnvMNagMZ9qqmb44YEF2nwO7fi2dqT8PrrF26KHNYT/e+V0YFinZZX+AZozsw\r\nNtqgDKXQWBfnUpWt4qyfPCKJCFIVDRAqd4LgLnfTc8rrtBms9UhLyJP2gX1f\r\nY3T7wY60fHa0Osxz+O1W9FMKCn5I1R4pwHI/edeZY1FyA6cFQEEsOlUMzIbi\r\nwt8ZHE8j5Bb7bswuF4AtCzpnWNMOmNq8cmoFl53p7AIKInNLnK74r9QhsePU\r\nUx30OLQ1H47FM/xODWT7zRT38JXtWLBvlcnT9SKRpE4wu8lZn/zSSg2XMMYx\r\nu+pgrvZO/IBqvh/82w7tgspeaVkIBhCrqxDUgofP8AXjKoqH1NykOotR8WHs\r\n3Npx0Zx8+YKFy6YVl/hOV9PvG2Wr31mKe//aynFMKa7M5XLWcL656x4gGpzS\r\ncmg6cowaqt1PjUmvhsPwIPKXoPK19ET6aIPR8arFfWxeOGINtY1AlxbVoNCw\r\n6vdGuFXgrjEe15mUL0i0dyehDMjXX3PYpsU=\r\n=HetP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/tokens":"14.0.0-canary.eb382f318.0","@material/density":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/focus-ring":"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/switch_14.0.0-canary.eb382f318.0_1648575347129_0.9766838005763867","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/switch","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.344d52823.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a75c13fec2369bb61e9cbecfe9ff49db7b8ac9ae","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.344d52823.0.tgz","fileCount":58,"integrity":"sha512-dWIAxp6Gq3ujOgNpT52YqS2/AbJTfubF+5U8R+OJ1AzX1Puk0qMqfMjjEiPiS0qN/lRmR7+//EwhRJTXe3QqBw==","signatures":[{"sig":"MEQCICfs3zQ5X1ttsBXVsZpdSxUYChrI+TAhP61avR0sWU6JAiBW3CoaLDLr5XkEC1EqkNHHtdu3GxGR+x4RjPNvUai/Bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1N4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDjg/+LS/kq50dd8xNQoMLOhzhWWqBe48HJGTGEuaGvXNm6mex72tz\r\n3RTQBUgCw9mipddrC9SO21kU+EmHYSPNNgEmzPUaYnv35+Cn6N1eGkAe10MC\r\nuOT2F2csz7DGQCjRdFpn5OGKNX01JbZHoYTBlpd9JhzevbNRZgzffjWKIvC2\r\nviArGGbJXIxV5YMREdTyeHwhcuXsqf8JEPE6/qZ/zn5NHmbZDhsbRT/3mcW2\r\nLvCdW0CI6MAhT/kKWKaj800tb7XLL4nm3pSb6q9nUfz3DpQ/RhYKyN8UGdn3\r\nuQ6bbCMoEwAsYuBg+ZRnQMkkKM3ihNoLTPCHQHvitEO6mfcTiw2V6lqy6TKt\r\ngIck68pc/TUPs5UX8fcxEo4IZrNoNqqwhOKKf4zK1e0F5PwN9mgh64QUSaEp\r\naPUxf5KJxDjc8tzRXM5rataJr1mUp72CDyC1MHMV5i9Fi0tBE6aQaVV3QjR9\r\nfflf0EDuwrBjqCBRNEd/EtqumIQbUdaWf0+URxciFvxuW564uQF0F8Dl75fb\r\nB+pKc2U5KlmvVkFluIBgSi8bxWQvZ4rW3b5OMNiAKk7uP32S0GrDcwT2j8eg\r\nZ8kE8+8WVZFBkQlVhWTYPtr7oToEN/BMl6LNltHI+iMb8CuZmyHkDNiKsGR/\r\nFF5NWHrV8uKwLaUvfEodGto7ByLuPObKA3w=\r\n=Bwoi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/tokens":"14.0.0-canary.344d52823.0","@material/density":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/focus-ring":"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/switch_14.0.0-canary.344d52823.0_1648579447818_0.4726549863801075","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/switch","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad81e2fb82e3d42b8ffc2cbf32b309a7a465340f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.4e372fb49.0.tgz","fileCount":58,"integrity":"sha512-ZCebExUYfk1q/PW03OLgbBtR61ZGBDfXSZ1wS0RFrs4DPlmnIxtXKqCKswvWqBQoPj+CYJe0teC0tY5ugY+dzA==","signatures":[{"sig":"MEUCIAGnXV271fIKgg9tfrl/S1tNsHNuKeGEh5tSs0KQjcgLAiEA5f/upra9p5cwOk6WFTqCKPvG6ZThdR2mlo9jojdwRck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnPA//e65kDpQrimB35TFrgbJ/S980Oy/1NBen/aAJ7Ues09tZqYUb\r\nqcK4nWGPnvURip5nFHKvxDrRLyHmHU2zD3aGJPDhkifFHGTwuvqcWHdf7LO3\r\neutlCT9PTkxH2QKsqud2eLi+pVwhPTnu/3QP4W/dHDChSUtUgjjA3oL9nZtA\r\n8tP0g/xvUZ6I51ICm872B0IdjLMwe9kpc+2sMklWARIYUsFssy71DjJyOPHt\r\nEi+mXjUyhCHCa232FanQco+2vE7ii61u7EL03BcEZsoseD0KYHt9UIpiExsN\r\n2iEUtwLcwDeT08mls/+PYJubs2U2PtGdBvoqWtXs3q0Rn+/hlWScEddlVvSb\r\nU+efnMe3VJoRc2jv5z9asYzr8WX1zqS/1UEpJmH5np5mqGGk9aioOCefh5np\r\ndCPN4clLe4CstWvSsVZtZ5CwoL/84XuBGJBC2XQtopeS304GO07z93CbmPX7\r\nDvUsv+2MsVfO732+xuhE06bHrc6Ci65HClRpPhYY+1e+DOq6F/68Qyyc6KtM\r\ngiTPCxmIh3vB/WBTI+Ods7hWEV7dj0X3Ak+Z0NdOTL0/i+zyCa7PWF5OOans\r\nBpRkCFcV49mVbK/rMpZ24NxWQaAHaNUSNNYZMhTm53GaHsnYmyY8A9OzeB7c\r\n/K4wztNIORa3+N07Ku+0s4VzL3zIR7o81hE=\r\n=8OdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/tokens":"14.0.0-canary.4e372fb49.0","@material/density":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/focus-ring":"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/switch_14.0.0-canary.4e372fb49.0_1649363627719_0.9250142415303186","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/switch","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da190eb5261efe5808d938399735e6f3fffd141f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.3e30054fb.0.tgz","fileCount":58,"integrity":"sha512-fmXh1l+TO1KttS1y23kPici/1LH1TyPz8IGQN0jqZcpeb+kJBZ4Z7y4d4FK4Qmx2o+/lOupN8IPUH6xKQTTj3w==","signatures":[{"sig":"MEYCIQCfdUt3G+7h4ujdxwVBo36eKwzx6oGw8afgsdAAnKl8qgIhAIsf3C3Su8DLrbiIa194GS+J6LiXnbCgkUFMSliGD4m3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0tpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqAA/+JaMQtpQv6LQ/g087GNyzm0da9uLcnEAUTbIMYXtvKRdPDPeZ\r\nTU0K0FfYZ3FqSxVY9ee+BOT+xPR54Z3wx2SlxYbMMbU5UOXD/RLJKhtvdpYJ\r\nizR59oOn026K6yTzYWTzAlKxGGAmZKVwwFv0zq6EWBf5SE2WJOvuG4Z/XgDs\r\nJQIcxmERbfqzZ62TmOM78Pkl28CQswCq+ngCtm3yNfvECssE3kk4a5VvOzTH\r\nUjs8kW7vv2fustsr76cB8Q6vmV7z4K/xDxhkDgqV31C2WMbg+42csaydnbp8\r\nWGN3UNUeJ6anOMdFtdhHZ01C+PCn6NwaToKaDNSOOf6WVz4jNGqmWm8mTMzC\r\nRltJ+zbjd9NQkUMk0P0iJv4/Q4iz5DQ2lulY5+tre2k+V5NHu5dcuXPkN9nP\r\nNtp8s6QAKtSidqBNW348FzP/fU82xWs+DbydoVaVpNU9xn0JrdtdvPiSecD9\r\n14ywB1KzW8KCpy0iLgBbm8QsG5ElIxMUwKOYIT8w8PjCpThowjmejWXy/Q6A\r\n4FksmSk4rmzsa0nnknV7/9FOlIHuPwKaIHFmFb3UwVpXYtvRqzWXqHQ79ysD\r\n4Cr1vHcv6N8pVTJ2j8m/ToSrmDyJCyIJ9UaObsi1JDT2STHnhsqC6knn+Hcg\r\nK74NHpjIDveMH3qTnch54A6Bb13EWRK8jdE=\r\n=f31/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/tokens":"14.0.0-canary.3e30054fb.0","@material/density":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/focus-ring":"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/switch_14.0.0-canary.3e30054fb.0_1649888105659_0.05085076366375452","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/switch","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4e9a1a17b94d8df8b186d528c6fa7ab9d789ff5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.8c4da223a.0.tgz","fileCount":58,"integrity":"sha512-rzeZNWD0xONwvZsbvAX4oqEQaTi5qtjoUbqKjxSkeInbBLuZr6363SHlsw/nT7LXBANoH1f641a/vW9IWaHWbg==","signatures":[{"sig":"MEUCIQCoOrybl2ce6xXhzh24GuczdaT0jOAjOYXTqR78FsTGMgIgZ9FrtM4aH+xkqwhjYFbiGiuxI36WSVuIcsk4rdEeguM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRiRAAkcJXnuCmkPnZQGBxSXikD5eJLYMASgmKAk9rtXB8oxTbPxJg\r\nLcGvxQZfHFeJAZRD6Mj4wA2PgRTRPf0KKTV9qvrIwnCJbGGzy/WuLIEPx+Rn\r\n4zUJT4qFmUr+4kpUfoB4zWzO528vRqjUlbh4emdGVeie5q2Ziuj43IbirEdF\r\nev1e4OcJ24jG88EFZLd1XD4bXHfl3Uk1kftFINqgs5XiDuo/COIkp6aszT/S\r\nHBxWiWli+n5optCD+POKSzB5uV7LBKE1Jsr1OEkuIjxGsANO3MuqNcXPhkSy\r\n1ARAQouS/izrVGAM955XlZunERYrsztdqwlm5dc+WWge4ExBwvAsT3//t+/W\r\nCkGYLn6iFrITcnNS0MGLyHCUSWdijA7VKWtkdfavBJPdv6ts8Zl4akUiVyaZ\r\niMfJGQnUDd1WUuSC51VOc0dG/GANR9V0nL/j/GcEzDhNuu3TE49c1GXip5Y2\r\nNggvChpIdJacRZZwdlmvZW+7mtXtC8vTbMV19ffDJDz7H5GcqjUs9kglriUP\r\nZZxKJ54mmNqdcjnJBrRDlq/Hqr7sF1aHN2OVxNbK+hq7CrsV4cMaXuYYx0di\r\nWTNyu4tvGKwq0Nn2/k4JpklQlAi7pduf5bb2Z69YL6LL3+1m3742h1+2zLND\r\n/Ol2vSwDTvrrBBQpFaYD14Mi4qaXe2U5wTU=\r\n=2RB2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/tokens":"14.0.0-canary.8c4da223a.0","@material/density":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/focus-ring":"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/switch_14.0.0-canary.8c4da223a.0_1650381903728_0.8194363830633422","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/switch","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e434caae22d2392636b3584c946a2ab0b817b091","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.7de8965cc.0.tgz","fileCount":58,"integrity":"sha512-HuMwZRRp/QrAwosN/4HU0xDjVmVnxo7XT5J4J393GyUwOWzWWC+puWUPFzQ0lmDLzpLYzmD1eJUW5i/oic44mg==","signatures":[{"sig":"MEYCIQCq94VnFtdWNJeoWGgpG13pX30onaN+8F+GGQQR5a78ZQIhANfGgR9xyr7AkSTb6QximNWyyA2g9IGWRkvRgGk/rlQq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprSA//QaUrvQU1Fihlh62kZw+I4dBGgH6pZh7eqRABxrM2ZDvKxMzM\r\nMLveWVNgm5HMUqX28CMjhToQj4jppjkn1Xfw1H9dyX77nHhFZHGCMbnqN1Fb\r\ngCQ7wbSRjkYinKcnz5m04eNLMmX3PpZwpBe1hvrcbApVcI9ZNp6BuF2EhvkY\r\nTBNqfA1hx2/Ey2Gvpe6WPKpvyeuXwXu753JgNE79KXadEXnlNVzN87Frow06\r\ndSEucGz59bMkS8Jy1gMSPah8fIhv5Kony3Wp6mU7Fgo2eB2RHsQ2mzeiJUcG\r\nnmViGFh0QE4KAJ4V+6Y8dCw01AIKoumSGAxanatQdaDO44wrnS21oA0Fi07e\r\nNrx+6/WYfuMrGgHHj1ahabYJV45gsTvo7gZJZkQTQCkHRMZ6ULt7kL9nnZ4z\r\n34imFp1H/G2UdrJS9Zjszfr3om4O4DZjhdo29lvU9Zjy1i1EYOl0fCovM4oi\r\nflfMhXM0rRq9zb6eXf29XiSyoB2Z+mo/tjbAC7w7WNatTMd+s2rWWteROu5o\r\nY53jkJCHNaag7z5tn0IUEANiAYOLifY0jdsWoz4ieOIkAyeMmvE9zdjLH5Iw\r\nZZVv8BI+1susDzvyXuz9ITx2KUVW0V5IoRsC+hzUmO7i1XtIPGYh4DKCY7Mw\r\nTfgxdYsTYK0R09RU1D/zir7a6B/7LpGirjs=\r\n=JGeB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/tokens":"14.0.0-canary.7de8965cc.0","@material/density":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/focus-ring":"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/switch_14.0.0-canary.7de8965cc.0_1650399857003_0.36974178295915205","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/switch","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.641ed0851.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777b8c31c07ec83735ef668fc76c81a58f2f9aa6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.641ed0851.0.tgz","fileCount":58,"integrity":"sha512-8NE1uCdSIogtD1d2e+8yAjFIZp11h1t1SUW9q731Uf4QiXx/9v+IjCGEfqNT3gFf2wnHxU0zclJEhuYwF39LLg==","signatures":[{"sig":"MEQCIDNTJFnfW9zav8riuV9lJNIJrdLs1rEQ3kIOKzor5ajPAiAA6lkZYHbIEr9CD8x4Su7ajWqEDEyUwwikkmiUYmvz+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":743853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv2Q/+KTF4BJhgndSCdhx9Yuf8q/Src8Rn7fGccq8QU9WkyEH7tst+\r\nQfMGCEvmvm1gL4zrlIhRsBvAkM6Kw7UC0l5YsPt5eNvNSQazqacAhYfJzazS\r\nDLVm9wOOytqeoVUVEJkApmFUv+xnXPihh4gmi4JuyuMwVWtpPxlgKg17PHjw\r\nV4m2NSRgSny+Mv3WUm9dt+NrU1J5sYrR35gHFAoYQefzw7xFkbERbQ8ZDU8M\r\nbbUg8tCZYoXgjVjxxZLVjKMquba3iVuqlE8/HByiIJG/VAnenK1ykNMtCdS0\r\ndOlEFfqTPdze5CDP/3i3JU5TLw1ZIECjZeorVN4q2NbxeQf0LAR1dpm+6e02\r\n6Zu8R6S711ZhH1a8UPKFLs9z0RigFfXYyECzVuW8fvQ4SM6QI/E2r9HRQ86g\r\nPGUxonecyL0wn3SCIFkshjTR5OAvsieZwG0FFoky9bOyz/Pan4oTIsjpB+U7\r\n5dM+kInAkmKl66WJtVCmBfzvLV2Jk3CNv8erg0OJV+rE5Bc2yY25P6Riwz9B\r\njtDMsTFH56g8jC3oUei+Ex+jDgJYjlrNHsr8/8SK/s8x7aBPmWfzOq3dXlYu\r\n2BypLjztfP8nCsQN0uQ+ERyebUQtf2tKCHcS5+17xXVklvFAAkVoshgBZvlb\r\ndEVYWiNullhgqksJ+heAYa3I888a7ptiGx0=\r\n=A/X9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/tokens":"14.0.0-canary.641ed0851.0","@material/density":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/focus-ring":"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/switch_14.0.0-canary.641ed0851.0_1650470795600_0.17870576486152778","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/switch","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.e88f83024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed842c283b03c81dada9c8a8f3e6624906002166","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.e88f83024.0.tgz","fileCount":58,"integrity":"sha512-QipLJSo4EgSrnCzXKj80dOSWxctYzZzim/Xe6v/rSl0w6djwekKg+ilSx6GIKug90CAt8LCmxbGVoY6iKEYTuQ==","signatures":[{"sig":"MEUCIE8qR56+YFjwtdMyIIAgJ63/vA27sKqlS5MYY2GLtbDbAiEAxjNqzoj/kxZBNkgGrWFqleXltsGCDVmOPZ1HPZpPhXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":744225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEd0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriNxAAmar2ybEyJzLLxxX48mcbq18cDGmUQBwDuo+19WJabP9euTxQ\r\nSObBVP7a+a+minDhx3/wDkTav4osAV+rvJ5GJyX9aMKydhpITuFN7ZH97YIN\r\nwWrEZesnbXLxJeLvSO7YGDxk82L/kFMrzcULAZX+wo2vnx26Ggx4nfXTEPmr\r\nourIN34JG9+ehS7ZzoHvYmxD8mWK25dfxJfVBFIngcrYUW473dEECJ9gP3s9\r\nI1k+JWh3u0jBjVqEXZ2Z9+gafoKRBfHe/g6E1ZTFcWqqN516OEkhy6oOb0FV\r\nVSkuJ8wHtLgEzwVEGvZ0jDd7WIc1N56aMuZymLxbv0jutte5nlCCVIVjv5zn\r\nDmjpINNMYDKBM498VIIcUojVuzcgEAcGQUKKQiyWVY5DddWLOmZUcEBlUPnL\r\nGJ9LtHwgoGD0RAingTDErh3CeVVOqVo9Zh6bdRAHeo//VDiuDxzjAvUMahDY\r\nTqQfroQI246TMNhOX1pkzZFFuqXKxdAC910yqTGBctePPChF6xGO6UqnjJpN\r\nkA8KJCe7iTeTJkPKEX/4oOY2q1P5f0lAebFLbAz5FlR502B1jZYrnZE3w+87\r\niV7ig4MrLfdDL1qsAnY/HWUS7aGf1YzIzYRfw9sGdBEJ8SIvyQYWBxbDreeN\r\n0nxDb9olBZiv6q9X9ThqhA2YvkQZAik1RGc=\r\n=tOwh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/tokens":"14.0.0-canary.e88f83024.0","@material/density":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/focus-ring":"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/switch_14.0.0-canary.e88f83024.0_1650476916257_0.8385908942222426","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/switch","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.7321d6254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3f16056f2626ecf1a5e3515c90e737cb561daf2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.7321d6254.0.tgz","fileCount":58,"integrity":"sha512-2kE8P5v7O+aOtwdtcKsJTcMdAOiCpl8Goj6bGwhS13uir8Fr0IeLhn50nn+OCWOfvIyKxbIWri6DB3tNZsBLGA==","signatures":[{"sig":"MEUCIQDktw9UeztO/PaFhmyrCUalSxk9n4VPrr6uCKWYoeTabgIgM/rEGvNvyA+4h+YS4/OrwTHcpZ7R2XqNtc41lC4fy1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4hg/8Cw17SSvoZkqy/Q8wP8R7s2GxPQbT5atlGftuo0sUqi6KlB/P\r\n1xElKDID0wJzD1qZJPjrOwKG+3uRa3lgZunVO59wLUTkqSqqT4oP4lkwoY/5\r\nzzH8FgQqUDUX76VFyIfRgDI6x/202x6pBEQqU0ynGnZ6BNVGP7jBAAP0g+1L\r\nCESxk4d9xxiEG8YRiVA69HCOQ4B4e5u125sYrHm5UU/tzgOIF9TFkTMkpp4c\r\nQJfRJDG1Bl7h0romWZO/EK07uggfmSYRY5WiqrFRoZErTPnpfZ9qmf7Esyf5\r\nzNYKOiIQuCyytE0phli3CRD3xOzp3ES3gWm7iQBmGogwLcQ0liknivg0dz2g\r\n+pFq+umy45HRXC181EuDgprWIzTOBlHGLPpL8oKllWveOZsmxJTV15HiASTz\r\n+J+RjlX5BJMhilEYY9brUBA1BqeG/qdEz7zMKLGDDkj5P3rjQRI3eur7Pr0Z\r\nsqFonRdGmay5r99zsE+wdjnxLNrQW03E6dGe+vkipsrjEg0H8ItWE7vRNj6L\r\ntrKY76AphHe7RezFvitAqldh5CZwYRT7WmriHHYMc6bRJRDnHGuoPr5QlqFh\r\nqJTx91ZS12ufhvEZiVDoMKlBSEyDqktPr/6dcg9GFwZL1Eu5K1RgAB5asjGR\r\nxHmDP035AUcGSHvRkSn1aIG0Fgpf2piAIQk=\r\n=QKDJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/tokens":"14.0.0-canary.7321d6254.0","@material/density":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/focus-ring":"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/switch_14.0.0-canary.7321d6254.0_1650485530463_0.07353677695786653","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/switch","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.3ab956515.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8febd1c209300a8683779f1255e8c2bc78a7d607","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.3ab956515.0.tgz","fileCount":58,"integrity":"sha512-sF9eI1kGX0DnWSn3f5dso2EmY3qQevsA0Jwfd3ypO/aRsbJKfBLyknFugdbmtnJi9WI3AVBaOIzISo64Fv5+5w==","signatures":[{"sig":"MEQCIClbGAooF9336kgQ4XH78OnijW5aAckiwq59Xbama/71AiANT3Xgw6vYyUhBQ0XlMNYC832uz6vqOzf33Rdv+E2dgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3Jg/5ADOgxhjG9ugkG9vARF/2PsuQ99PFi+Xj5hW7/2hNH0ptArCW\r\n2cU/hsropPeB2t1hKAsOpeoQHa9lw+PPJHgeqvg8cCFxy0b+kzZB8SS2vIeX\r\nJ8QqK0Gzjdb8e2xjWsAG20vc+hIcOVtglhFECiStxk3X+tdoqba9HRAckYTd\r\nQHvUbDd7tLeYNunvTG/vuNiagM5CYnCOK6kqTY5pfgnx5qB1s3eY1BEqeDOT\r\nojRGNMJOUScSrte+IDROsJTMD1PqgPnkUbIQyMpjhpV7gN8c7syleGlC4xwd\r\njdG+OoA9fMUMToniL+6TOxqy8hqmLj0BzZvYm/RB3qrZJFqcwxf739YzpLWF\r\n7tE6rFeV1fy8OkM76uYTM3lt6cjz3d7ZbdixY2MTIho8poEumynYD+nFNnYk\r\nkUG8r+1MimOmg+X+V1m6/Mq1BYyW7OCYbNW3qKSXccN/dAVVZn8Nd1Ucpxve\r\nXcm3CWMUc22ym3s51QGBnITWYoNXfcz77vWhGKmbLCpY9HLTLCu9pYjliSXQ\r\nVIn0OvWb9KMFN7mYbxw7CsPSeh00Rn7kB1YlVI8feKQ9skQ+iHozjsQLfGCk\r\nU/9ARSLWyAdg8UxNUtQxttL+0gO0tiDOKY6tYNFMijOkbhe1N328GDxL2sUn\r\nd7Cky/k0TwKc8EyoEmg+69a6Z4vEH4yHtV0=\r\n=cycQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/tokens":"14.0.0-canary.3ab956515.0","@material/density":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/focus-ring":"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/switch_14.0.0-canary.3ab956515.0_1650898965188_0.3267309442229491","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/switch","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58a454aa9a7333f4107755b9c1fc6d3a1fbe0d9a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0-canary.53b3cad2f.0.tgz","fileCount":58,"integrity":"sha512-hL7lOF8tgYaS1Spce6zlxfveoqUlqDTW+vv+R7TIHwzLD5HJCdhTiotXshOKCZLoSi7Ljx7JpCdvNqGlv4rpIw==","signatures":[{"sig":"MEYCIQD38KN8iHH9md212+wzf1u1svRLN853w4MuoXTjJEBvSwIhAJPGPbbTLWtN5sDaGtkqYx0pVQpmzLwoXNX4oXo92lKy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPog//Y/uzb7JSrQ69nwdQOi02iLF0ME+Zwcpk/AsFHmqn7c038x0B\r\n8dB5PIUx/G3rWmJglEb7jjmqtFo27K2oe2jimKKx42qSEain6mUiGf3f4a7M\r\nMVjT6vEDp9K8IWtL3ldD8LRRxu7JP70Q3VAB/BFGp2IVMLVzFdqCONSgRgfK\r\np8b/M/ZQB4lGFK8KUKJ7ZcH3UURYOdlFd/kI4j0d+2zVaTDYxHACHG9PUDPl\r\nLrdFQjz3/NmQ55XqOzgrZ9ZR3ZBwooAtbRWAwycExEd5MJC6fkRfgn4s75Vi\r\nvQUqfxX+n0PAwjly0KV4l83B6RqwZ1SSOKDJU9wXuoPKkzAnmPsDAXZSyGx1\r\np+vqW4Q6b405yYupGGbWtjZR016KF/CGqW6lfoYfu/YZN3AdeU2NP+9raOFR\r\nDr5NxWzCl9Y9TU8RUSbSF9hfTIXYEqxYhjlbCpYIT+LUX28UYH6vPUQR1vaa\r\ny1dXJAfbRrGyrMk8tHOtBoKjBbcAqeo+G2OsChF/pP6ANskWAN/SJ3xwVU9c\r\n+IaWUYyhnfLu6/xtcshcEqmYnqRgiqjcRkUJeWi2ayso/tPjMA+haYIM8GgZ\r\n7rO3lJrIKrFz3XEULBLUDyTg763aeIoFP9DKJjESEdd/1WdGc5veUV5imAGS\r\nixumrDwd7dIHAlOIiX7c6P1qGoA49FNXgs8=\r\n=iMCT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/shape":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/tokens":"14.0.0-canary.53b3cad2f.0","@material/density":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/focus-ring":"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/switch_14.0.0-canary.53b3cad2f.0_1651063577352_0.964045463671878","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/switch","version":"14.0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@14.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d302a8786ad7f8809d9bbaf416dcceefb98e833f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-14.0.0.tgz","fileCount":57,"integrity":"sha512-vHVKzbvHVKGSrkMB1lZAl8z3eJ8sPRnSR+DWn+IhqHcTsDdDyly2NNj4i2vTSrEA39CztGqkx0OnKM4vkpiZHw==","signatures":[{"sig":"MEUCIQD9CltAhJNgHWa5/KEeZ7Bbehgx6hpFDKTiULvJgwQpFwIgU5lOs+lPKLYiW8sx1rA0fMUlyBrovlNa0qOcts5NSNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":744628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+1xAAjKAVmGC6t1exmRna7TCIdXHkgU1vYDh3ibOjZariIUE8WQS6\r\nsgS59eLXRiB66khGDRFJtj2gbUThdaMAJaN+Ce0v0v4LtT9/9UfKtMeRmxb7\r\nTWcVH0Ym6SNwY8toClfCocDzLBcY/hBD1RTcQU6BqmhDfbbTmwxpRCtDc6HS\r\nDiBWnmS778sHLx86qoAI82yYM8GMaE6+exOL+uFvchVnO4AOaI/+imjz6Isq\r\nmeeBDH1erLLqQ7yXHnr7QF582jWF+zZn+JJ8q02zpohfX3mZ871IoU9eL+0s\r\nreRTOkAwLO8S97UfXiqKctUC18/G6LCmBrrENZJosKAX4NADFJ6sBLvyi4qs\r\nx6kpjOsmu1MICuzkiHFNaZQED/a2V1TuAf8oQDWL6Iuz0VeDms/ECXrhX/ME\r\n9hA0h/bZR3HZpxczAxFffK1pn+MbiOdkf4Qw3shQqmHjr8u0tjIeRVHfKs6t\r\nkezeOywCJmZNNDHtvdZ3WRBGc9k9iMuX4xTs/QVqqOTImxz8l5is5aji/OSZ\r\ntRArBNG5yVrCZ6U7NsdIm0YeoXFjos6peQ1bnMHlEG1/IKkujs+PBFfIpBfC\r\n2aN4WHFMlyeZPcJfVuq7Azaflvk+cH6+wTfKp212z3OS5tc5ZAm0HEPNNPGx\r\nRpb4J455HvXvmvxH+Zkpv2dquN7xJmbWzRQ=\r\n=yXfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/tokens":"^14.0.0","@material/density":"^14.0.0","@material/animation":"^14.0.0","@material/elevation":"^14.0.0","@material/focus-ring":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/switch_14.0.0_1651165010414_0.7180746992515501","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/switch","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.432c815e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d85ecd907e1c0bd663026cd74fbcb72ee2ed60a3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.432c815e5.0.tgz","fileCount":58,"integrity":"sha512-tVvugkp1D11QO+jquJGBWnMNVAE5kpjhVSE8BMYTuidSsjTTqHldcNA3S8ygbtQVWmn1jWdt3mUbsKkl2SqlfA==","signatures":[{"sig":"MEUCIC1nI/m6ZGmHCtVpmXLs2qdxuv+e3treKC8NV60ZpkOFAiEA5DbhOupCDj/htWbKpW5ZP9pzLHzeIqhiFaWKNhMvT7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeKg/+LpxxFbMfqH+YYn23MnLxJnZCV8x6D0jmNznDr5ExyenjXApK\r\nrawwdUjw91UiSjMi78mVvlc03VGN/clQCkQTxjeGnE3egCvfvy0CgvYAxbUF\r\nZxmrHb8a9jA4loRhnZnWCs2wiy/w9xQc3dKS2D+vl8L6/7o8FSb8PDRkMLuG\r\nC7IC321H8sIWbWPOGKxbK+Mr7dCTyehEUHs7ArlKVGkz7yW1HmlHAC4o/X0r\r\nqvyBPQpfiybIuxpGfKVkafWM6wmoIPN83voMrbxIxROITUdFPCa/yeOh8ESb\r\nGCR8osqiz6h4k7G117CJLuwb/rhhb0bFfK2hpy7K72WeMNCT8jaK4tZhcrdA\r\nLkjEpxSTwZ8kW76Fcx45rP4wH6kkrdUhKvBksbmgFrRL6IaM8ja0ZyBUUJ+H\r\ntSr/gv3Qo32lssvPiNUD2BtEtNYoek4cmMzh6kHPGBvkf1pSluYF55BUR0dD\r\nXYDWDNlzwovhF3WCnvYZww6EfgrDfVyqTuWbR2xgKpiW+MPDNxwM8RZNkvkr\r\naHGMZ8PsJUFda1gNYuvGER0hef27YH1zTn50fbw0JEylQx1hL6WG+WaGA0OJ\r\npgjhwuZdW5YyhMVStr/8t4/yUaKQgcurjAiUi5KVvpxsmAzsy5QoWk4hLSl+\r\nSsUqy8b1PUl36/w1XIm05g07Kkbm//ZEFvU=\r\n=DdGm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/tokens":"15.0.0-canary.432c815e5.0","@material/density":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/focus-ring":"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/switch_15.0.0-canary.432c815e5.0_1651165074428_0.7756742639488385","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/switch","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0eebd0001148c308015cd213d729e56dce97341","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a0f01f669.0.tgz","fileCount":58,"integrity":"sha512-ag92VEucnPu7IMicw5iQ/COPYi1BTJ7qqNgXhjhV1vUGK8pNtiKHwo9hTgHUBqUrWHweCvzcrxny8dY2iOCVPg==","signatures":[{"sig":"MEUCIQCS4KcMIHU9HbvvmcgvS4/Skueehs0iL8TlA/en67a9KQIgFUcOtlKMRZXJlSXQPPGywRdbrBsl9iKuSQnIeJxoAPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6mw/+I0/0hQUELx/tq7PU/eRTMhYQhq2XCvrVGiPuR2cFBnsRjjgR\r\nOd1rYK3lSd9Bgg1z1C1sn6TMcn4Mqeoz9VurrjeHC6DXJrbhdjARQaSqJ2qI\r\nUMEpxeYlt4+PvGzmEnoscO5UIYaKAfYLFMK92dnnRE63yObcTazY+u2nhtRN\r\ni2A6pRoELrT4L/qjq20/EpEI37KFsr4CyXwPum49loq8Yh66T/Y4QU6Kq/dU\r\n40Jx9cr5WYowkoRqkYNVkI4Z0vWG+pk9Zc1nIa2s8h5I0hHaq8ibDkJI5UdY\r\nSrrayXUtC08mhY9PkVSVuc/cIbF51MgCsPR46ixwvTPG6SAqnX+Dp4/E/Ced\r\nQQA5Zi/ntU46yulgDgoTvVwmh4kM8DfaxNfR/i0nd4BFSH/wNOiB68SltdD3\r\nfbdtlcQ6u2QE/EcRKnOkaSGSke3GfHqKCUz1zVJ8CBtw7469cS0iQeGQ+zCp\r\nm41wMc0Ue8HwHo6phGITzeL7UsRCLxjOU9GBm5KR0mietW/MXA38vJ3WZZF7\r\n22R5QTLHupvjgQm1abW1LwPYOBpx0VwMpp5vk1Xs7eljtowdiXxB+9EMwBFJ\r\nq4Onh6cQCcCn49qavxP3yD49SJk1riF4XXXkosRJaGEP8bdaun/XSGyyAk4g\r\nXnebQfdIW5PczdUwn6llghbm/9Ybs6gJMpE=\r\n=EH5T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/tokens":"15.0.0-canary.a0f01f669.0","@material/density":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/focus-ring":"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/switch_15.0.0-canary.a0f01f669.0_1651868132344_0.6538064629552323","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/switch","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33819b132adae862f4eefd09b0059e5ae39f3bcf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.276cb39a4.0.tgz","fileCount":58,"integrity":"sha512-LYQNjJyrBAFx3JQnAckxVKKk+87sdhFk1Pa8cVK7Ta1+vmZmY+o90c1ckuRZ6zQbgJLBDR6ZuURQDBx3rYI2cg==","signatures":[{"sig":"MEQCICf/0cDceSAu7g/R60zAHFmWKyGJUTjddHJ2s7Qcw5QwAiAPdhYIVJrFPMY4unx3Eei52XUFBjVfYyyO8U5RvXOgtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNnRAAmLr1UkMu4CkVEO0WP/HGvg6hInU84hApiEySvw1QspBBhhG+\r\nRgI+5AJY02gF96x1rKEZQdtoBo953FynCf9UUJrOAFwwUpcQfbDAJB0wfhca\r\nkHpYo8FRNbFyqFEPn5ezym9makCWr4bxZBhEc8HRLp4v5PMn8eMCvdOw2oci\r\noNxPPhjF1JNQ8RBMcVYJp6+PvOIC4GWp9E2XiLeoKFpORd1eaAIHbi2npAYE\r\n+6QvskGBkxcr5p2S1l68aos2drA8QlZgtcu160H7joONCyDEzdsByVnDCjmL\r\nMRC6N2nusiCOcf+ZPqmZxduV+Abwaz7zqvtHuooAq/PlYWrJ0+/vPEFY2s2d\r\n9NCoo3zmXtbPXiA+w6CDVhaeKcLj+pJYCo1sk8y3AJrbTIwEuiEkw08cChqk\r\nBO2iMyWzUJzcMAwGQO29pS15LpSVgFasZ85arQ2QzZaZCauGyW1C3Hprx3/V\r\nJetjkqKZ5VU/R/ZuTxlm/eNgiFu8s3KrlFVG5AQsFMJEI1QR4msrrli6Nwul\r\nKkkE7c3eQKVkrfmJWj+j+5u9ZJkwElIfQXSzNkh4yQdcNDQOli5feUYeZZxi\r\nsDjcRTszC35c/lO2G7p5cwejNtiNxit+gwtOhpDeUec87SymYAU97NRhxas0\r\nREvrFIL18DUqUVyRtDkTXKc3jdxo0PLqYpc=\r\n=nk1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/tokens":"15.0.0-canary.276cb39a4.0","@material/density":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/focus-ring":"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/switch_15.0.0-canary.276cb39a4.0_1651872743109_0.5003328269882539","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/switch","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4c557f9eca6a11f8ca017ec710d59a2d07bfbde","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4fe98ed70.0.tgz","fileCount":58,"integrity":"sha512-EZjeJHI3Ub4ZuUtNYnTdQCy59xetPBVz/+St3R7TmT4gSp2nRW0mE4WSqjlJT7OAyWJqoK2XZsyUbb/3+Ca/bg==","signatures":[{"sig":"MEUCIQDyLgSAxviEKQukPxA7rOz+Ii6LgAteFle1gvgD35IZPQIgQBSGjKlEGNjGJGsWbj/c7MfM4jxui3gN5bNmpWsxayM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooZg//eJL1Ufs63jQwaX+PG9HjAeguK5E98RwrsGHcbqiNe3z/v1od\r\nHo8HiFzGyYNWQYgQ0yI89dx0snwZRSdT36c3Ac1CmYCg/94nsUcQGgtGHk4n\r\n1jOyXZeOTxVrDVyRbIq++6fhKebsnySDb9KYbuntPck8AT3N7vJ1N63HeevG\r\no8Iqf8C+0ChZIOt7bmcvMa8dpoppecxdlF7k3e87X1SnuioJjeiKwhxI+7RC\r\nQ/Wlku/9bzQ3sQywBgJIrDU4PBKU4LABAULH2aF7zOzb/ybtF/so31nH3BJB\r\npAxwrEKhB1URO3QQbeRI8NEvGE2Iu+CliP4S4ztWK0hxAE7/RVop8O78B16d\r\n2gHA1CgCh2nBwOhlHD10ObO/t6MmToqpSX0GFpL5pBop3ZTHdYPzTgig9Awx\r\nEJT5qDbLtr8Y5dxBgwkiEsAyw8s8lQY5/O1JTTDHVN0F0YJJt/zFcIpGJvEa\r\nf6hUuYVXEKpdw2bMSjiSb3wPhydDNds+yP16slwZuYfOAE12ghw2QJ5GQvpf\r\nnbnz/QRJxS0MyCVsUUBas3UfAUgsZxg+LW21rwHo/acXCgQJcNbQqxvT5+F4\r\nBHHjLrJEOs1Rl0j5ilvRPyEZBgI7maxZCuRGtPbH7ojvHPFS1jcDw2ei8rXa\r\nirHV5VqntrwYxew4Gi08QEmNcbLm7JR2OdM=\r\n=CoE8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/tokens":"15.0.0-canary.4fe98ed70.0","@material/density":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/focus-ring":"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/switch_15.0.0-canary.4fe98ed70.0_1651874213829_0.2451654836969872","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/switch","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c48095985f49bc946642b00944bf7b170820ba12","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.58b130a3d.0.tgz","fileCount":58,"integrity":"sha512-aSODx3FwAOEIf3/Hd/ExFLOzFizB2A6eXkyDZVLhyW5x9yGu0nPWBPd3lnwRkNN0LOTjRxrKN/0Q+/voNxgLsw==","signatures":[{"sig":"MEYCIQD4VU+ruhliZRq929+FkCstQGv6++84IPYc3XTKSiUmrAIhAIE3rIoLR9fbZ4skRZ++3mtLRUcT5puqfVgZf6wp/8x2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZowACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZOQ//eK9Po8k4g7PB3jJrnjJIiT5ApcLPLhi2cJyKK9N7t/ADIl1h\r\nQDOdc8PH1ise0Xu4ZMa1R4iGajWBW3Ms6dqDuS8OeC1e+WRi0i3H5+BfTlX+\r\nWJyW11oU6vdZannvG4bdYG0gl1EgKzVWegjaisZ+gqJCyOOHUJvTshnzyCxR\r\n5Bq86q6RQJGyUSyrWxYeRb3a55aWbOfSEOgOK/4w+NKC8gWRGb30tCaJIepy\r\nF4aF7rxFCfp92ZbuChCLPfxSIeeLWwsmW6KF8CEPSGYpvqZ8UUpHt0CxXwJL\r\nU/9sjYJb57as0uSDT7NDJKGk24oYKebQVlirtJq2Z1lW+Vm5Li4fC/tdusrF\r\n16g7Ij+RBkWN3G8/PmP/l52GvBak1fasQDTRnlTjvUSByiaI2e/gfFauGbz+\r\nuTujH92L25erZqsE38RQ8TwlZXhu56mgD9pYbRwElBwRYh2KuXsALYTPpYkz\r\nglU32Dgh4LHk0ssnHCpUCbv5MJjmcA3VjZQN/NNQlJPz3C1tIRupGc6MrnDu\r\nbNSOIQPJtixyxhGEN8oskC01mXpMSa3lXnrWowD/352OaxZ+qg3DkEDpJL2f\r\nHyRMzQCEAtuYGBFLOv8+ezNL15A/YrSkv8xFNMcBeS2rDoji+fWEnf6kW8Tr\r\nBmAyDoLydybc3QX6LOTci5J51JgHwlij0YI=\r\n=YGF/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/tokens":"15.0.0-canary.58b130a3d.0","@material/density":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/focus-ring":"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/switch_15.0.0-canary.58b130a3d.0_1651874352447_0.24864262024903794","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/switch","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c41fc880cc3dde512a311c6bcddffb2cb10dde2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ae278a2fe.0.tgz","fileCount":58,"integrity":"sha512-8EbsDUFmRniLqeWkqrR8MG8IRDauaSLH9PAla7/lHL1LHXsJ97gRk9aoZKhfe78HfrQCzRxT444pnTTRlk6Hfg==","signatures":[{"sig":"MEUCIA3VqG3t4ABxanUXd7R+v9JE1RHzFyJ5Opj5z8i1PzGUAiEA70qoqHBzh9t7QoTKS5nXhgub26lqzvYNUHQNIkUe/XM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJ6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqzkw/8C7TDK6aMmOJ7gsAZJsLZjox7VD2jN9iaeaB6ZHodrQJ4ZD+r\r\n5jGjfEmhr8OhEOmFLjm4PD4EAKyKDV7kV3aDMZ4SGYWoU08GnIVYt2J0YyUg\r\nDF1NncDGYmSrc+6flMkh9fhNQF0wZqX3v2ydhingu5duyWHhhKsUvHZUGIs8\r\neDuH6XFWmUt3G7fbTMu+1N38O20vgf8pUIPWRdimweA7JnlCMdosCdf/u6Hu\r\nFuH0KLGmcyAbNmrlvf2gpUt8Yt6OhruBogyfJRtkO+6eF9ynUGdfyLaORAAb\r\nKggtxYijxCaR/8XkB323OhqApPBwW3fI48xgydMxS4gETsaKwDE0vilFxZPT\r\nAN1jsiT3Jfyn/WRG/8O4/GRQGB1hUUGz+lMbUVe3cfF3gi6NfKOsyzO7OeN/\r\ndofxAW+NNy6uwbcR7sq6ScC2q3dm/bDqRM48cWprcSPQp96kLo7/eyZxJSUF\r\nWNokSCcLOTEZ3nD4BjxMSvuI/NBhSpWUOopwBVfCAm+1TcLIfBREVBuyiztT\r\nAWCioN5osEMeEKOxqsoUlIJv4qjIEsY8fMCd6yxA+X79v92Mv0G8ec3+sGO8\r\nZKz+rAXPkD4JiY3IxcC+M1Z07d4oy8GOlSfE8aYM3uHS6lZ+dXvHwSXGkrS6\r\nxbKdi48BwTYOZ+XoX+XDaGlwZExCYe4EjXw=\r\n=PFoZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/tokens":"15.0.0-canary.ae278a2fe.0","@material/density":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/focus-ring":"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/switch_15.0.0-canary.ae278a2fe.0_1652109946175_0.7415592758403227","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/switch","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6e458e8d0e6a57709100e879b0b2c1434ddcbd0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":58,"integrity":"sha512-xZrfBfBxui9eVi+QLoytwKTb2nVWxRq5l7czXquHwReuvaF1TFWlOrhXe+yRdhwLeW8kT84bKyRfujiY41u9UQ==","signatures":[{"sig":"MEQCIFmPwLWmMLlbBTFQAoXXLUXIna9SgBF+JaAoOb/gNC48AiATe634inP9aIoF00/oP4ERHY6gO+m3jXbZjRhl4ukvAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMtQ/8Cx5tf75AdtjBpOtZt76/6hJ417qXbe4vmeOwZO+siVWVbzkQ\r\n1tftuNmoGSwXzDtswa9dY7vKkFyRE09ebNYAyVv5H57B8vg5MTzxJTFAxplu\r\nr7sMRY21w+jy/sMvxd6yGCF5/VeGrD9UaQSqfUdvCI0KpTQ79UGE42vY134u\r\nxYLzmM05rXfNGY4NMlYMlA8qdLS/lTjtP1a8yY65eRvO0iWsBuP1GGQuYx73\r\nZxMUHs/NByYhuYJmgnD9b37iIxneJ1w4lHjkWVoQIG13pvUdfKphrN/N3qLj\r\nKdVdrfIeRh9bQc82vTERUJhHd3+EFtISwGuMI9L92up8NXeGwvgHC0ZG4URU\r\nGBDDmFV4sTvxOt5iikh8jroLp1N9APxfAhUwEIhyp7f4gb8k7veoZDBqDbcA\r\nMSd0XIt8vKiufEqoU1fzYv+sMud0gUST1IpgvbtLVcemGx6Xe7ZrH3T+VHqs\r\nJ8Y7Sojyf4gzWnIJGiE+nBK9t4J8x2lkOAAUn00ijaDt4CDXRE6wxh+r9Hmz\r\nldOjhVI+67/XShYax3rb5lRB4oxr/5cCYVLeUK2SliAzh4JgsdkFd5TiTLMT\r\nua7WQ8pv5f042UzM6HYj6HUBSKL+Vdo3D8a64rwtNw2zArqTNb7VAQuaSriH\r\n46Vba2OPYgag/zc7kKmou0M6AB1eoDbr6gg=\r\n=o+5U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/tokens":"15.0.0-canary.bebf5bfdf.0","@material/density":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/focus-ring":"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/switch_15.0.0-canary.bebf5bfdf.0_1652236873015_0.9465053491741025","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/switch","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34e2282c7631f2facaff37c2a08965dba6ff3e3b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e6072cd6a.0.tgz","fileCount":58,"integrity":"sha512-wrF5RgMu7OopjBPW1YSLBzn+40SAgrsIsEaCZLLeQy+tL7DdLzqTgVb3SPsL0yfgLu1mx4Z8dYy8pjSg77nU5Q==","signatures":[{"sig":"MEYCIQDunQ9mRil7R+RGfr6WPk7GB7k3qaDdH7kFcXVTKy0gQAIhAJhTz/z1coqqddv9gb15dNGLcLcxjSHb2sKl0hdFwgSE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGfA//dCxcANz+lHnZNw6HvoxPakkahg1AahU11lQJhrZOwVY/tqn6\r\nK3KX0j81hSDI1H6V/vdhRw2KKfgsVelDZgT1qfRredFpg3lKJ7rj6WDwY5IU\r\nPF6caJAO50u9I07C7rxBqDVhW2YK/ixp7Q5sRlIItz42IVPX82rxVEWFUq6V\r\nCIbkCC0i+h/Pggd1BVLstvhG9Kwtfu0mwjxYU8+iM6aTz8JYXs51qTa7n1gz\r\nPIEp66V2i7ZIVpowYr8d9lBzcGTy0wToBiM1ehiqv2+2vB9i3BwvxiX9hq6p\r\neCE50LgZuEJLVxR0dP2Gs7QDgLaA1lUzui+xCHglSif8PZgffEQWCmffG9xd\r\nidSaSiib0PazoBcYa8hi8nG48THVzZGQzqSCDRlo0gO1G/WBciU0gFKI+Xpx\r\nlj53EJm8mx/5oAYmOYmAB650+Q/k0mwzbPKJWqvy98R7L/w7B2C35J4CtOXh\r\nTuj3VNDjafm3KrICrDlbCBC0C4oRSXMUwYuqMY877znKGh+xZxOMuG7yE6Q8\r\nUGb2b35ju9LKItUoCRSIf9/K0VrPsAaLJP7w+T+KcD6LSplxHBwUZnzZKh6U\r\nfk75bCrjOF9GeieMFOw70gbiQjTlVvPELzP6q8PKbHy2fbs4+KG0mr3fPZo3\r\nvnDiNhOi1eRPDIvj37PewxSkIRax5+Z7Is4=\r\n=TrSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/tokens":"15.0.0-canary.e6072cd6a.0","@material/density":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/focus-ring":"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/switch_15.0.0-canary.e6072cd6a.0_1652300364876_0.5788051501659537","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/switch","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9085d2ee9b5c36f7958eb1032f5eacd76fdc8b54","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.5b40eb988.0.tgz","fileCount":58,"integrity":"sha512-ISd6WWOwCKsXDAgfgvudWJchs/mNGcaQiTab3/9+R9fvtFhoQi5vDXMrKgaqbC5W8wkr+CQdxgvUlNl7yH3yeg==","signatures":[{"sig":"MEUCIHZHAgVVPVDtAR2GQw6SBYD37gdz9VGG63XyaIALAZ2SAiEAmfXotVLOkH35TNXZZWqulo2N7mwml1xzCkmr3OnZupg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHS0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4bA/8DE1+N8SldOKXdgeBSXaoBEHinqbBqgo3KpMKxuAKRBKglkUp\r\nTqq2FPMUTkymXvidY2yuwQZMEFBizxDZkvl3UY7QHDAG/SlD9/Nd49rB3nAC\r\nNDhnkJzgTdbq96Kbwt/LkZeHVMl4xquXzTSkvgJssQWx81To1g/WX97NZeX/\r\nPevaq6fYTypkH+hh3MH3q7x6yKiAb6esfZhVlEjD3/dXMeRbJ1g0TidmaVNn\r\n57iCw/xHk6Kq4qbO6a4ts4oeLuunQRnJGUoXf3cFQ+tXzl9f08e1TTOok1tP\r\nWZc4CtfHlndV8sidn6qNZLHriq0XKRn+SqDlcXOy6NvGucu74h6LHvIhX03p\r\nYsJP3biJg+uUEaD1vHH68zEt51oEolu2gxn69df/keBeK9UCXD2ZDM+7/8Ly\r\n5H6O9sdFn2v7yu1hAy0KkL472bBuikrUlfqu7uTJ/EUTtRfaKByMe6XCTAAX\r\n86qxzQzCEDYx/y+JRv0P+EGSVOXqRGvkQr82mRv5kn19uL1xmhzwL5gfeo/k\r\ne6ZXzXSC2LanoDLiQDQqHPh4Z4CqUGxVT1b9mpkE0RraO/JUUsyP+UbAYAIp\r\nxo/daVccU5GHxV3XZAgrQAEunEqdXk+NwGr+LwjD2ZKXWPj9QElklESM1gh7\r\nqN1oZSUIhlu3pOZ/fQmQheCb+cOOkJ0w6Yk=\r\n=Zx55\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/tokens":"15.0.0-canary.5b40eb988.0","@material/density":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/focus-ring":"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/switch_15.0.0-canary.5b40eb988.0_1652323507826_0.4273549408136055","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/switch","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c2dd6de1ff38aa308b6345f9c5a063561cefe66","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6a61d62f6.0.tgz","fileCount":58,"integrity":"sha512-jkYFVnXxIqVZUAX0x0akMNtGzqdIyWpQjqA2B4BLKtju3en8e2oI/ECuFPcmmW+l4P3okr9cQjk9vTZSvNfHvw==","signatures":[{"sig":"MEYCIQCQiqMHFGmV3sEzETg50ImXHUqdnyA0cFyv0nrzlnk7CAIhAIhjg38V/F57a0fc3aoMCqXPiJl23e4frjgJsj/v85oZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphfQ/+M6U1gh5SzhFMSI/7FI4mAQv3RQv32RqZGF+TwqZcow3B/hjo\r\nq+TBAZ9lEuBJhumLZv4br758TtIaGcAtunvVPjeHrEUMMDwOZNrVb/gmMUsu\r\nDuvd+tSCOM3OU0yyFdhunTOZO+GbrmNWHM3FSumQ6qcSntEgQl3wZ+LAVdzO\r\nPGjetYgtpcLebawktKPhe+2ZK1Bp0UpnoKZqbnV1HpYOZLZ9foPvI8s6mKl/\r\nzf7X7Oa/FjRPUThMurwOi6TKu2cgY8oRQMI1t3Fw/aWJsXDJ/TGawQe+/1QK\r\nQw2pUXSWPU0Al5mRsxX3BXw5Ku9dFD5AzCgNMqlPQHDsETHKOv6wdt7GEe9b\r\nwv5QmUUZhX61OMZeEV8Ow0J7jATn0xVrwKPUeDYG0mdvdQJ0ZpA6YtUL1pQn\r\ne/RuKwMu1OCUdkqYl8kgbSqMjhZaILvm19Ge6hfFtJZpK6kbQkmX0Hf3LzXw\r\nRxJ3YmU3WC+ZZLFKzrY1ABf/EZjkIIj9WXMJKGtCq7y+/IIcXwh4gQVS1MzV\r\nlwHiGWCqzPhmRbyXUvikZGBYG0Epktw41f2T00ELsgSOSZYQIxZTHFAIDYwY\r\nBVJkLNvuAW47rwHqZVqK6lRHAynP1qdWUBs+7o/8pT5wy49zpSki2NccaDn8\r\nK6v/w3FrhcAmwFbUnI/b2Yff+tJyLrDa7P0=\r\n=3xp8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/tokens":"15.0.0-canary.6a61d62f6.0","@material/density":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/focus-ring":"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/switch_15.0.0-canary.6a61d62f6.0_1652387266939_0.5224225224442511","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/switch","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.05930a453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1186348a6fbf2c878484ee66ada41a153fbcc31c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.05930a453.0.tgz","fileCount":58,"integrity":"sha512-LciecUTAY0eKGl7DKS4s5XW3f2WKqJMAW+XlrXlpDhZUfIRM7zn1HGJYy8r56MQ8ci2DkwDhrhxM7OVtqVx7hQ==","signatures":[{"sig":"MEUCIBq2s11d6JS4k7p+A6u+88a0lUxJ2eiaQ5IoHkFaRGhkAiEA2NbHBXR/0Ir8m8ESyTVhRoMCjXqhM/e/XdXeMhf1U0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqf3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO7xAAofYM/N0k7hdh3T7DNev9X9rWLOCGnQUvTAoQghD46yRkmJCm\r\nGZBMMXmiqnP2kvPSquHiDUo6smKLIwNInZMNf6SSXBWAloPjtTb4fivoUsgr\r\nh9KBUMw+MgpepCl4aa+Ky7jKXoPCtulHlYsYk/mvdpskQoh/Y45WFceBa7E1\r\n8QLOrdtxpiQtEfQXyYGMkSgpcBvaR6I35FZcmcCVq4Jp4FWIDB5ugBMX/rM4\r\nXyyKYxz6jDbM+UbLeTcO6Yl0Rh3z/+ZVo+/i6UK1FQKOcMVLWiRjQ8OuvARM\r\n5xFVnU049KtaIXiL7x7UCW92f/39CWqBpqxXRox1BGiKjcjgAZELduAcD8Kg\r\nMtzbwm8oy4lywBklLjO+4CC0inpQ6hLcEUDtBios3yf3U1phFEYYopRV00tk\r\nKqVJG4EnIjyqgrvLnLA1913MsGA5/BMXQrRRlY9bmICHFIsuPsTxvXD0nLw0\r\nmcIlzJ7kHGv8R0NjylGLNC4owChONHH59PryuDECS1h1WfMDAsdTgDUV2uq2\r\n/RjEFoFGPSjG6C/VX4Sk6n+a0Rm7Fh68llrnP9vx55ixCZ4ELYImXEonPI2d\r\nixxcYfMaMvDBM/uu7pIgmz/SlOPB4qckumwyJU5ISyro3VqJNRLqGVactcds\r\neYFHLSjsV9vJhMi37oNIts61ka8fl9JQ++U=\r\n=mvjX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/tokens":"15.0.0-canary.05930a453.0","@material/density":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/focus-ring":"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/switch_15.0.0-canary.05930a453.0_1652467703344_0.9856631308208468","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/switch","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63a3e50eb575b22bb9a4f91508d0ff79b08f5093","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":58,"integrity":"sha512-YItohAxHYezX43pYqrhI6gyuR2L2Dt9ccvdQ309oxY4EGvv2boUwpId9C+GCjlTDn/TX4+8WYritMIjPxApDnQ==","signatures":[{"sig":"MEYCIQCb38jDTil5QQBEfJbPkJFxyBPsaBCWlokkDBTsggO0vgIhAINht9zZcBeVfWtYJzhLcCmEXm17rplSybysPjqcL6UG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvaBAAhKMNKr7H2GV7jNXQh7/SBfBTJ/lJBllaHlYI+NIckuflkCfy\r\nB89XmioMpB/BHDImmAAthZileRGyECs+TJ4YehEje4nxiS7UpzMxdC5Lve7c\r\nwGRsCFTXBbXZxzhebP4ng6ayYYFeeEfZrc1/YXIRiVzJXX4XvENhSDLSga79\r\nGyythTnEsAf8mSEVlU8ytwh8wCUWzVe62WUNGWW0vMvmWe0IjaK7jc2YkkFd\r\nHgU6yjZ8iyb/yO+bwjJuBClr9FsBI7Vw1TJ1JkbqccEOFdsm4hF/JKeMFIHA\r\nhfB3UtDzFKuKJgdcBnW2t43J18HHwARatMqrMx1p76W+oVxn/Uub07040yyD\r\nwb3GdOXzIY8WEi+1emwJ7f/Q7KtGmqmqMGjmW2kYruTPf5/LcQcbIRHxAK4T\r\niMrLkLIwF0z/5M3EFWQr/Ml6wknDV1p3T2M9RtPNtiN7ZLIPXUMXcaFcEbie\r\neK42Gt9r3WT9dlidq6tjnG5QZPJEGpyGLwmY/4gwrVJy6GmwTllJ4IfO0Tt2\r\nnhn8qFERTkhWE8kvdQh2UMWfOI1mxSDzpbHey0Rl14uS1ndvp5XiKKoP/o1z\r\naAO+vGazUIFyowIQFMuXuzA5fPrTdhrjfrW733h4bsToduKvaQ5dEBgqLTFz\r\nT9YzB48LNIR1EUoJlYG+gs9oEk0QcSM8tgM=\r\n=0rgq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/tokens":"15.0.0-canary.c0a11ef0d.0","@material/density":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/focus-ring":"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/switch_15.0.0-canary.c0a11ef0d.0_1652911313099_0.9997905407562622","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/switch","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7b5b9e33dbbf96ff2abbae749849e5a95f247dc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2f9b268c0.0.tgz","fileCount":58,"integrity":"sha512-FIN3Osa5AhBNrsdbnt64g8tynJf5dJV3tPNKyTzTs7JjPdhZAi8FfXAghIsxJm72dQNdZGgsh5GnTtK5bPUiiQ==","signatures":[{"sig":"MEYCIQDIkga1x0uMMjufixtgq/mlWiEJ4fB7wOxvzty2AEpS6QIhAP1RyQ1glEsv6lPz5pMn0GMrASngfdvqmAa7d4fPPRFF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN6Q/+PCxKseIYgzKATl3eczlU61NMwEMCahqUHYd1CqDYWIazfx48\r\nupVRaFqTxzFGjMC/y0ds9xUy5Jeze3vJ8Brtr7NBVLoErzgdwvj13EeFxk8P\r\nEpoTrMC3lzmcwzI4Jyw6ssIhvyO4g5ZDYw5LXjMb6wPs7m7D3vpj5HoOBCFi\r\nRROopXKUE3b/PTqz2bVwxz5CibWoInnUV3baj5ExJ7S/ORZbBECdQsqRfxED\r\nwDwIeuH4LgOIRdsnnhrhT2ikDZpRIsBC4evYsb4kGmSFTAMEbQKUH2TN45Es\r\nSmYJiCV4qxc2sNGq8X8uLNifIaL8Fjcjd49YnLV6bBOYaV5N+XikpJJSAPUl\r\nrE+jTCM0HkBoCKZFAdXgzlBtnjwa4OBZJajT8BH9D4XUgPaEpI6nFTo2HTwy\r\npIQNPNfVm7wmdubGZg61vgpOJ6/gWazERTKQHRxV6CbqD2UUvqwx0QBu1tvs\r\n78VHJ/U0D3qun2RtncQZYj0Jzl156A2aZi3sa7yA+11wLcuQz7l53mnYA1mu\r\nahb6l9PUFN5BXi03neiJztMV4rD/RGYkhDZ8hHqn5ZuwsGG7sUSBaM0Lf6Jx\r\ngfBe6EnVU5usLyyS0BLNZYR4yTRTz34W/zFgcBdbz+aLMdqAtggHn05O5p/R\r\nuPQElfv3WZnMDEqSn3026XFC0RtfzWgk7EY=\r\n=voUV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/tokens":"15.0.0-canary.2f9b268c0.0","@material/density":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/focus-ring":"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/switch_15.0.0-canary.2f9b268c0.0_1653075214482_0.2724228265862221","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/switch","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7741345b8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ce03e6d5ec26e25b5c7610113f43b3a5d56025f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7741345b8.0.tgz","fileCount":58,"integrity":"sha512-dSRuQI1dHDXi7HfS4zljAWQlPkh+5nW/x9uE+O0arS6byrkMlUp3AZLDxxwdoGSrF91kE5+M7smMDEJeK0LOSw==","signatures":[{"sig":"MEUCIBp2LPVDHm3kT7KExrszV43jiVBQKIrnPFOJVZQGmd/gAiEA/imnU3tHPLA+qnUnfZ4Lt9H/7lGeZNS5QzIiXphZQmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozaA//U5lIDWkW4QalqgaZfXt6A/b1WRU1jwwaY3hhJ2ie3z9tIeVm\r\nuKxZKmT4YDywCvTd9cTwswNkhywhDqQrY1oh0ND9nPhEaq5QwXJ00fbFztYM\r\naE0GG68zw1I2B3imiRcPOwzVP2Rg22HALVE2mrH4tfvhmbE6NSWxclkr5zW3\r\nxr67VKoKCY6by0R4leO6a6tafwah6mIYGtxwZgOsoopMA+31fdlAIIlHkFmn\r\nb1NWGfl49ILXrRGcx+LPzqFcsZC03zs2gyXurSPldXAbz7LtGO55rYt64vMS\r\nn5fmmQkLKAIzvLwC7sWaOSIYtt+776ishReBCBq755UaX5g0FIFXauTxz57F\r\nK9zsbIcrK5sJ+yc0jEQAQ/zs9R43RqoM3W7qaQ/X4ufrsoUK2KR6ASWX1b9Z\r\nPHItGNCt8c4i3wdCfzKDj79Kl9sZhJj+yaaRY6fifGVp/TmCtVSamn6M1A7a\r\n9IRaAH22vrUr+hjK82dKoYQrrlVqc7DJ6D+05PSUehbG+2qAnxtiEU1p0vkS\r\nbvFnrFaGFjQmhON5EFIxDnZZFjIh5AUCJNseYBpI7kNkipYzVwHixLXYJ3js\r\n0Zaw0keEgpETj/2+8Q7WMu2+AlA1sS2utKfwhm+bLLNinaEPIz6QfFfbz7t9\r\ngB1mTlt6x50POrcMTsfYnoijtb7THwt+jYA=\r\n=PGzo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/tokens":"15.0.0-canary.7741345b8.0","@material/density":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/focus-ring":"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/switch_15.0.0-canary.7741345b8.0_1653077019485_0.31074383736518807","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/switch","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f807e793f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51606da0d12ba408f85b57cf2f2f5de552dd32dd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f807e793f.0.tgz","fileCount":58,"integrity":"sha512-MMfZ9yu+dVrw72/2/WwUWv7irpM5pXEYh3/Ohih8XEAEGFBsnNypC5jFwUxuzcKfF7o6uW6DEqhOmISPnqcgmw==","signatures":[{"sig":"MEUCIQCdbdyIijM8w1hC7hkHjXFdFBtac4kMBzL+yTVI93CkewIgS8lAEEU8R1D70WlJn5qIrUub1uiXOP01ui3EqhgsqpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo94A/+KS2AQyjd2hcq9yxwUIYuKM/khrHYaAeoe281Ndf1nFkUcYpT\r\nNl65iZxQLbz6iQy7VdjXLjtGTRVf+lE63QGOOlm4GMdkkYqYowNkmA7DUeQI\r\n/LQLsglz63URzgYnTzUqyZEsf2d5ja9p7/H2zFzudNbWn0M8tQWFxJJsk45x\r\nWktl6gesyIusHrWIL2A5aTqOOXkZEQf9iKNYkp6Hg5S8VnuRTN2wHwfwRVvc\r\nPES/ncVcVn8prg0Tq0+QcD93fosuSUa6XOKG1Dz0pCcxx5nOoltgx2CuHINt\r\nTyrkhy9OUdZAdssKXzExrw2H7+4+sVi5SPFHGf0iDVSA7aoQPfz/hQmkRYhW\r\nMMYhRTbcjwhbFGNLz+IMnhETXEVNh+4QIxZO8nDj0Z6z2WSNokMUvGa/A1wS\r\nZ0WnKZkGPg+9yma9yr+YS5y8oRYoPeszcfyYW1c6Mg093k6wJL7RYvv++vMq\r\nZP8rx6b9dJllayBgbNjR3mqDYt+ByBaiGo85Y4aiaZgDA62XertO6Pla8BuM\r\nTPRHU5eSzWb7tH4WR//cBRl9BP31/zfMMOjlVcyF//7Rbo2vpIHLYu7G0uFy\r\nI9mXOVxaHd+RD6JG+GzslsbFnOXbxU0O0+oGoSi9Oc1a01rhFebV07K/Z19Z\r\nZDJkgUJbAMs157v0EW+vaYSQH2BHlIcJVvQ=\r\n=syxq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/tokens":"15.0.0-canary.f807e793f.0","@material/density":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/focus-ring":"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/switch_15.0.0-canary.f807e793f.0_1653085362201_0.7925560138460859","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/switch","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45d1987039aa7aeffb7fc616381da4792806fb41","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":58,"integrity":"sha512-ekDgR6ethEYpQvfy065FydO/4MS/15xxpwvwDpBGJ6HSCJPrIkW5MBzEOsO9DVmppvXvFLec5gzKRFW6qo8p7g==","signatures":[{"sig":"MEUCIQCziu0+vHSANDAgOxdycZbg9rfNF80Hh7BDLxCdzLxojAIgOMzDu6QE//Y/1xReLJXvCK8DuQmNJrcwBNt8JjJ18wA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6EiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3Fw//TayLWzs4hr06X09mpismw1X0r/K+EoV/B+MLMkjQIf7ofanz\r\nGAl+ikc+Q/omnu6bCPU/uqW8UPiLVU2anUKPRNeSlnDMJlqzKaKLjeYhhfiP\r\nVpW3sssVUAGyILG8h8/HYeAwi9xDWqZs1zZs2sbI33Pw3P2ZjnXw+pBg+nzD\r\n579MkbN2S6gDRpdVUwvPZf8u4mY7zyO/4a7nyuQc2SPdgpeQyiA6Hc/OsUGs\r\nz7ieX5w4zSDK4Yd+cPr7j2f8Wwhr1mZIYJx8gqnCdgQ9DDjhFJCAhp16ttr4\r\nKu0JFtQp2/YwLp0kUDxeFV1IxwsLwjw/PAKqDhVUyTsA8Krs5J57L2W/z3Yl\r\nl+Fl/x6Hex+IWMkFasGzuFWFUCiW6s57MDIZHFFHbt3GQjZZ4D9BOQj/jGco\r\n3pl1s8CWsM32Bylsg+uVX1nwxSp/qy60L6KLyjG/aG6ht9g1tv28wD/fQA3T\r\nJMtQsfK96enWX8/bSdBJ7yEUqMpdWsMfKKvGdCWqHQkDXiqLT9l+sPn+1yuS\r\nRneWK+ez1NCLLGSRGXntcXwjPZwPwP5zfkTL8BAiqLy570XmHZFKZGYw5LDK\r\n7WwtCXgQjKVy7muDh2uA4sOuOL0FwSBh3dQBxqpK7qlkfvL7pj2b9ly6jj7x\r\nPqY7eEsBa3bLNdSBRQhBp8ih5bRIoVauLfk=\r\n=Pyv9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/tokens":"15.0.0-canary.9f53d4a8a.0","@material/density":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/focus-ring":"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/switch_15.0.0-canary.9f53d4a8a.0_1653317922027_0.8374163907176535","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/switch","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc57893473ea08baf7b4780b637d2d32266d692b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.77cf00e37.0.tgz","fileCount":58,"integrity":"sha512-GBG4GR4T28zm4dQ73RJIRdHBOpjopgOVYXO8QaNpqJIhrzmT+rGfhYBYp4IXl7oCCvs6T9V0p3PT+z6V2in9Xg==","signatures":[{"sig":"MEYCIQCQUBtAVSjBPDfwuN627ESeKrseZU+N+iSouOYgA05iBwIhAL6R/Rsb7qd5zQIh4WbD7ub0WGfno2TBDPZSnf1/REf5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKrA/9GmjOiYpmJMr/38f5ud6kuTMQWd5ZJUVYOcBMBwPyCUesUuS9\r\nbX4isRSUSrvACzBmIprDwhssZCXlkWLLLB8nKawJRvmDD+MVkMg1ShO+uqBu\r\nSkVxvDp7gRMJ9TQ3jNKUvP55xTqciufKlD/bFb39ZBZI/GQ6Ri3Yg2/UJ1EO\r\nAOg6iFNkEvjmOcacBylzHixw6pKHFnWmxPdjwkhhcqKElD1HcmnhvDlXrZLc\r\nxuNj7vSLP7xAnqAFWUGtxsoxwNfJQ4hS+c14FEoGAypINztfCmo7W7FKV3Gx\r\nP22AcRvpsSwbddMh+d7BaEGvLXTlAp7uD6sN4YSckp4NbMwW9rJlhHDx6iDd\r\ntsbPSwUQRyAnUfuKII2BXJnwdFimsddVz2As6ZPlQwOUFwrJ6GzJ1UMEgYl3\r\nZua3Pn78J4PuUS/rrFaChgvckiU22UoUmAHH9QT355IC1bu+lwuklVf1zw1C\r\nV/I0qZdzQPkh0eEn1igX6yOVyYDEZKuBfpajt4rmdfgqqroiiIUtCVAuc97V\r\nFQNBM1ayfUO+ASdtjD3UbF8cJp7t4G9yJ0HyLPeh3J/yKdGVrcq+/RgLfOFC\r\nkbsfpNyLM/XyFNLylxoJ1naC/GIW3SJdWRXLk+ATObAm5VV2gSzVPvVVJIca\r\nNxNS4d5TnoirP7y9TOWkbNU6qCY6v2bvFxk=\r\n=M8mN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/tokens":"15.0.0-canary.77cf00e37.0","@material/density":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/focus-ring":"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/switch_15.0.0-canary.77cf00e37.0_1654018863824_0.5946040094431713","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/switch","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"953a6c669a933552e09158a42c1f0d213f2a4095","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.3c7b844c2.0.tgz","fileCount":58,"integrity":"sha512-rbRGvouGxExFJeedLbURH8dy7W8LDalXGQQzUGu1t47zmAoo5gbULa8kpfLd4Aek1QB3IY9rvXHkT9KDrtpVxQ==","signatures":[{"sig":"MEYCIQD1AoKeSzZVkUubVYmnVGpRS18io3lTjBEqaUs+Ef5NtwIhAPC4JF1nj7q4CFlssVGTHIS1K1XXmY7yq8g1afuwEMgO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqylhAAhbd4Rip0dLOKt+YUeD3eIG+2180R9zXEq22y5W2JDV2b9BMb\r\nuNKqvMtRNMIud1cX9nKIv5M67IORIVwfam/YGP4Mi6Is+u4NYnidWj9y+9zT\r\nR6A7ZS7NP8UVYUpgTPlV7GOspYREwQpTJJMOB0JXzFcv/EPuQzm/JobrpSUR\r\nEv41kaMa3Npnf0zxupeDlEiln+ZmTMfgS+x66vQtZ+OIczyc2fWY1fGb1ipj\r\nKXYb/yrCiBQ8ClCTmVhXo1nrJoVHronoMV+UaX6t0F570G5o7k1LUm/6U63A\r\n8uzjF0KlszQlMY2Lhhb4BV1AZFTwjZLQPA6x2W5Rm8BWcq7Di/I47vxT4/bY\r\ngznKXmP5LIk+1jpcSmKuR8GkmnAookYi9iIsG6NlGorNvYz8k1BJSmDsvjR2\r\neqyMppOvVvfbYo/ijdpaal7+izuAIsTCd7CmcxkHRhjHEqBRL5TZ9Pm+qy2k\r\nzfxlNeKBoo48GXdYhmoxVZEzb1BWVC/OaBn68XXo9dldeEM+MkLSw6RkCJRV\r\nRjyQOl7y/tJIPdEX11Wqu0VfjApLbx9qq056IhvjjWfiCD9+CKdY3kJzZG+I\r\nowaZeXN74RCImf+47bf3+5C3UHq3dnR56tHiFjj3fJSVNyC4Fudj23sW0I6N\r\nluZZKIYD4zgQXTj2d3qybRIajeb0TDNVBNs=\r\n=nu8v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/tokens":"15.0.0-canary.3c7b844c2.0","@material/density":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/focus-ring":"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/switch_15.0.0-canary.3c7b844c2.0_1654640528253_0.3099208519936405","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/switch","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.df47894db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b31221ff6803630addc5a55831245940764bd081","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.df47894db.0.tgz","fileCount":58,"integrity":"sha512-Ip2lyIfabLcEr7tfaI5pRuopB1REDaJp+tnHkv/wA/QYldM3WkL8oLs/gjbRyMgZp4t0PtpOnxOMs1hxH2/wSg==","signatures":[{"sig":"MEQCIEX0AO/7IHvwCIH6TpLKkGtOrgnZxzXxPtZnYTNx/wQjAiAfvBpD7fYY6cwdm0w/3Bp8/9Dlmk/utk5FSfH9Pi4noQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip29PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX8g//WOtJUyI0zpJias/sNhIqvXuqD1+vGfP1/SJE29O9CnEMeKDN\r\nC53A/UUhe2EdwTB2JQ6x8KB4kIMasbfeb3Am+q/KJX/b3ljVgTlMkuOeytvL\r\n/pG8UM8LFog+nEVdMAZUjZAhAAE3D5cMqHZkJ+zeHcEsIUthuQ3vMOAXsseQ\r\nQav+IyC/Z7A4nETpMQT5ohC0OZk5c5iHXCxDgZ/4BMfPDjOXbbOrxKqLMGYS\r\n5roFyCmziGfdOQhRmzIRHz5NrOx0xfDtTYdyTQuQgcxDZs6Ikb1YB9ZM8YKa\r\nakRKoVNezYt8niVRVEQuw+VfeRHCRBujXeWVzMc+JnGiJYI1e2DaWrgfgkXZ\r\nFrrF3ZetbVpLD+y9aQxgBFT4JNv6PcHTkxrXCx5FUNhMy+JxhQacFLKv83uA\r\nlP34Hq+SaGLttc0sChHFmucbe+8UiSElW0XqBE5P/WzgIIJhV9lhujNyml4C\r\ne+CJroow6mcZOQoP9CFvI3d7FlpJKNzzZ11PKMf8uz+fciStFj8JX0yFep8S\r\nlKHMkh8YxOMh4K+8H9gi3gbkJaYcNU3jBkYQPp4XRzkcb9EnL9h1aq/g+b6s\r\ni0+x2j97R0NzIXrNtcB3PBnQwxhZtKE8XCe0MOWOzPXWOn4My458PDGn4sYc\r\nN8Z80nqsatOZTTTCKDz3BY8baaWFlKu5R2k=\r\n=e9Xc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/tokens":"15.0.0-canary.df47894db.0","@material/density":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/focus-ring":"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/switch_15.0.0-canary.df47894db.0_1655140174877_0.510598201040749","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/switch","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f419559f30268e10939bbd22981c161e2845173","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b18a873dc.0.tgz","fileCount":58,"integrity":"sha512-/k41LsmY8EZYvL3W6RMBS/FYkuX3sE/6YmicnQqdaEiySjIqXnXEWiqHBTG0Tho9NlOhlBH0I847+1FIqtUzHA==","signatures":[{"sig":"MEQCIG34wvO15EiXetp8cm00PlSZKG7tSNzIEz4g+WkkHPlHAiBprJaarWh8QKetyst6zc283/PNDGQSmUL2NQRVqzW5Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUjQ//fwGUEmIPl5FjNNB2tpitjJAfsjXyFJ99Mw/0dexumwUZ4Jxm\r\nY4VkyyAjFZC3SJ0qc7ocKuNlu4e5Nm1RW82m3F69KAcJyc3g0DyvBM297VsC\r\nb5xagb33rVThdW6Kd8fYpC+YfWOkaV3il9rGqUYxOfCOl5CkluHbqjr/DSDF\r\n+J3koDsPdU/ryeUskwEKW1uPf/DG6dao8Bthy04qpMX57SFGiKftx4HZ6M41\r\n0Mz7faM7Szd1U2rw/uUYCaWbdVUls91nKjsCOqsDMpp0EoUY2+2qbT4yxayh\r\neIffk5I30OBDSSc8roPT2G3FYLUxHbe/V0DrABKjr1C9D7b47Y5q97bMjKWo\r\nyCQ7FgJN4az7SPpApmSGjYfFMe/Jlf94TNhsXfjVr6Wie/3Hwhoub86pOADD\r\neqkx1ScRCLhSM5/tQscS4xM0+1on4o17zS6texkI71tUmLRXPFWTMCp82xYD\r\nvKmLqmTRVidOM1x/EuQOyQGeTmkUy+S191NwLr1mRsj4FR4dBKSEcrTT6O3r\r\n2rBKTFFKtCb9KWMQ6urLLC+lVt2XOLklm0Nx98C7sAcCn6ecLhzwGAgnJqoH\r\ng2oEtKqDu914aYMlrjbvrqrNSlvl9b7npcxQb/o7nuHhfVIiRGLmc4wgG6kI\r\no+OkHCn/fQD2riCglrGWb6/lqLpP4esslDE=\r\n=CPuo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/tokens":"15.0.0-canary.b18a873dc.0","@material/density":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/focus-ring":"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/switch_15.0.0-canary.b18a873dc.0_1655188241839_0.3994992513346185","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/switch","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ccce093ed6b0f2286b282308409953c7e85dcec","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ba9c29637.0.tgz","fileCount":58,"integrity":"sha512-r39O2T1grFJJielejoOosYPqpcB5oA07lHtjo5/9saCybiZxrpSeu75FWBba6KGMJlhQ4yrft4ahjKoLe9ujiA==","signatures":[{"sig":"MEUCIALPCNPeCdpzoDOMcQe7SBWwjfUdUWkE78A45iVYfXSQAiEAt4QKavf/LJJeXvH5tzViGSLdpLV/1xBC6zz+j6Ocezk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNpJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrInw//YtZdYnxEcoiWQM8OQV8Ws8UB+xpO8ZNvVTjh0cyVgGDQtoGy\r\nb8hSrdoBB2oNdq2T5WOlQ53PoA7WlODK3GXl7gBis02gEzbjI97yJ7KBzbqk\r\n73EV5DuAKRT4jwvkQLGS4SuD8Lq24b1CVj1o75bc+DSRaCQ6o5YFuyB19XXi\r\nG1uYMhP6ff9T117goF/aCox1yqShqvFF9YtkMcgRNUyLVte+c8roqQqm7b7b\r\nm4pI8Bw8KwhwI/L3s0IbXDkT/OaKmg7H1lO3nw/U7vIckVcUuAjWuQwv+Wzm\r\nsgHXRb86ow4hCo3G6jzHRv317jbfy/Tf0YAWVrHQ1CVHiNNysObPftkkjPsN\r\nzUNP/3bS4tW1j6XWlxQO4AHGwgO7dyuD24y+/ymdkuPd4NqQtEoIGKKEJG0Y\r\nNLQR2uY6TRG21L9dwi1KEmq21OtcuuvQq+zQVqs0SHmwu/5uj93HQiB5UELS\r\n0Mq9nF2zr2ZaGNoKGPgYQwZnTDbR4nywCU2LhjnMhQrfzIgjR3DcqSM8HStw\r\nTywRb0jY7mxuOq0lWXYg3KKzFBEU5WuApiZ0f1t/+q14v+fON+xWLdwaVFo8\r\nMg8R0cwgFuYYb0mnv8VbAR/DOcPzKwLWT9EbafNU5XaLfO7y8H1fTDZobC8z\r\nt5xTBp33tdSHiFkPHzal2dC3MjCa/Ts4UWA=\r\n=N5Uk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/tokens":"15.0.0-canary.ba9c29637.0","@material/density":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/focus-ring":"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/switch_15.0.0-canary.ba9c29637.0_1655233097287_0.516365697736971","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/switch","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f12797aa16e28d308688098fdbe872ca67625ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.9bfd12f01.0.tgz","fileCount":58,"integrity":"sha512-Rr8OMRwJL92seG/Hzid4KJKZhtGnpKijS/HC9AqPzjB8AS+jq355zZVRqXer4VfVobJZU2twgZZMroj2+58mcA==","signatures":[{"sig":"MEYCIQDemp4gS9UZku/9qKySucWTX871TIFRaTcM9xieTlujKQIhAIJNisjAjPjhJ7TdnPw2DMoT08us3clOAXpSgQoHps5Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2wtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe7g//WBZp6Nw1iwP4LIgC3mN509H2M/WFgzUS4ETOYA366U/xgSjR\r\n1ELpnybheJ9aPMx8HIaLtKwUuQxr8rz12/BuXtafARHtxjxHLw7kPYfsqoRk\r\n8d6nYGGqx+l6Gzw3g/G909nVr7H8+iQ/UNblSp9IaozxfhNj5aiv1og/omHt\r\nr0vQfTJT2pxbued+QoT+AyIliLsn67+Rfz3MVyReDDypZQ4DXd86CahT6OQ8\r\n9IhN60QwAdhrn73H6qQKCkIdAonXwGp/lWf0Ouh+JIM03bFz+JmC0EUa66ks\r\nQhF5K6DVszvTt+1mWZdH/qNT0bK9I2U0MwlIotOduX9xOpeEoZulZwrqA6/r\r\nBuwTZIm4wklNmjn3TXK7aVpapqoY3LpI+qCX3q5uhy6fWE1LoDN+l1cBbhxs\r\ntZ/PBY65n3oTY1st7i7D7v+HECRGXzqKFXjxNK4ctm6RTUSz8Y2A8AUcqI6t\r\ngcNUsQGx0Mz4JetpuUVlxpsi16QnERPx/y0jhggemMF6HK+G1Ooi27nVhHbJ\r\n60OjZTuhMZ3FJCMHpfAunCBmBRgGM+FmWl/l0Grz1yh4XG8AJY5paeM6BnZH\r\nK48o76+/j6JHAoldvdv8LUHGZ7y6/oxbVs8HUOKnpENtpWycL/ZzzDNrGE04\r\n7gMnJQFdwVD+JKSzL31BUZaTAb+uicPocCQ=\r\n=7+pg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/tokens":"15.0.0-canary.9bfd12f01.0","@material/density":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/focus-ring":"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/switch_15.0.0-canary.9bfd12f01.0_1655925805680_0.22698674029888255","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/switch","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.764de225d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4294b2015d0ff4653c6c2c37808da154b021ed7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.764de225d.0.tgz","fileCount":58,"integrity":"sha512-3grrQzGqTNkUvKRsxfwoNIg1+DxlVK3pV1dYNq7663KtUF8qAaSN/oXMx271D535yOcB5biltE9FNlRJL0BdJw==","signatures":[{"sig":"MEUCIEAXW5BCiIZxjE8yn4hJTRVbyHo13nbo4+tAZG6IzCe8AiEAyuE9g7cgDJVBc2xPedg5VCI4h0/EZ5flfsx0ATp/J4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojjQ/+L2CW0mctLw88VlAREd+j1tpRuX4P9fjiSfucpaznpczC1rsh\r\nKEZ3GPMGSESD5aM8mxewb3C0MXbE5cczZOOmaUoVtcxDDznQR8MN008W7xPw\r\n0tzPMBWQqaOjpSAfGYWa9WdTQR6KRw3YD9OnrwO4R67Nah/nLUb1pG7aVSPN\r\nphRnH10xkdgHyahnTb6kaHGgaYMj2poSK+Oo0rjanKOZJP1tsY8MBHv3yVRw\r\ng6AHXBZaGbyQsiWLDQjvcj3jqj9pmpQCHJVTQnF1Nr4pSCoigqaBGkUa3TSr\r\nlIvYPxxbw1zeSbj6vHYQn9CgbddRLkp7dNaNUDZe4OQWnEDkwF5L8aFobtEb\r\nzD4vgb/yVsrL7Jv1LXgM6NQ1tH5103dMQoiep3KFQYEQOC9XCxB2dCuTh7XD\r\nr2EdJ5/CwECtOpWqj3U2mLmth4TqOxnWg7RVd/69og6pKb4QVu/kUo2m7dkj\r\nTyfGeYkHuVZDQdex+5c4Ze5amhWFqLb3wBUce85PBRTmtTWqCxd+cvsnGe8+\r\nOFLHegNMAhQF49zdye48qdSDNCeUQEUo0aoIdnkupNLgEg6f1c3qVBJ4K3Vt\r\n0QT3qEHB77dd8AeJXICnGDlyXk81HfwsOg54Do8ksfWRC84WtqkP4ReeK5ox\r\nKLN+X8zf4/TSd6++X2jhhUKJ9o684Zb8G1A=\r\n=+0Zt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/tokens":"15.0.0-canary.764de225d.0","@material/density":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/focus-ring":"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/switch_15.0.0-canary.764de225d.0_1656520077377_0.6487986810175519","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/switch","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.31e517cea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77e4ba7df24176cf98de5c2f03b3d9aa6cda769b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.31e517cea.0.tgz","fileCount":58,"integrity":"sha512-XiU035AyTmL/RdN1Z5mGqNd2BnCtfIPkSNyUhJXxZ525HC9lx+8GqHK7QwFZnrEMhTpI8DPAjtG9C0sTcxIUxw==","signatures":[{"sig":"MEQCICukahXIsT6sTbvRGqJgsZdXgDAJ6mo4RitIs0+bW2/HAiAhwME9QMlz1/O41b4Mtmso9sqEOG0ihRAaqgv9YkldOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzz+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraqRAAi4wlMt6Gj65gU1Aa+0TqRCZtzyp7b7M076/3eRxfXIkMWc1Z\r\nboU7A3Xu6I9dbayzSFWehPfV/rvYBWRo4c8bUR1dB6Ap1HArrDTx69MRyTAE\r\neF+GLXoT/rNlk0Z+6AlYSDTnYtGoVcmJlm+mKkpqJ4cPiDJug7adsBYS5+Vz\r\nelXe4jW5N3t4P43/mPXiKaTfzZuA3OpiprZ/DwIZi554fdzFdV3gm53Lfpiz\r\nCXk+60SMef/ywemROlB33IuTW2N2hXCRq9AN5pXAKtpj6hDLNxPUmPTZ0xWn\r\nvn59bgNnUDSF7CeCsROPIQZ2Ydv86HcwZBAQN1COLhPQ1xPhHnhlQccAVuUe\r\nZvXuTsb1DYvAgSW+50Dk3NANykKWyKDyE/FaxkAqzmEvWhcb/Lr07DAftRDI\r\nl2sUqTMdfiO4GUl+KxOy7Wo1gNSGLb2L8z5LtTLOinIuGXDCGnVMVHFkjSJ3\r\npi8MBAvfvmqvxaHiChp/k20YUWv+aE6+pa0LP62qDi6hRJbxADzyYt5W3BdQ\r\niL8ItxcAF8SxX2lX8vMJkRlRV1MseBctj0fhGuWyxwGKMYjdNGbvbQRUTy1x\r\nv1ROiK5JT6tMtTfEQ3CjfsrThNWj922UNB5l0qcsXguvcZOHCs50SAVOmNZv\r\nF5I1Bwu7xnDd+bnbp/4UZSachhTxou1XOSM=\r\n=s7IO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/tokens":"15.0.0-canary.31e517cea.0","@material/density":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/focus-ring":"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/switch_15.0.0-canary.31e517cea.0_1656700157781_0.31900950782821824","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/switch","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9cf7d6723bc0e4ab0bba0a17c2d811b1d744c32","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":58,"integrity":"sha512-UOxIQJIOryywzU29UlVZxJv85OqLV3Gqi5Rp4kJjDgpvbBBG+zvSGwrza7Hl2SrWs9HY58l00ckXjhKy5rfHmg==","signatures":[{"sig":"MEUCIFbPhYQNsYrEeHVJaLzYVWMat8V+yfuW569NhbIvdUw4AiEAw06s1T6SYJl2CX2s1LYTO9qx4iYkIFUq94a4AniM0pY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3t5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDnRAAm/S//rmcKwHM8QZBVwZZGyqaAmhxoxMJIT6HKf9SzD9PsE1h\r\nHfQ9fm8TyQVSQXTTeStsAvZhGah3OmqPSXV+Z8o5dEjHuD8V8gN93b3dss7E\r\nvjCGFq+sGxgMrCZMrSyTOlw1aXUghm+lm4lPS4gWgoK251kNx17WYtuuojbF\r\nt/PBh2NstpqnVSHzWBF5lwtPG1m9ET3OM9ccTYldR3EqE0neGg0yi9ghxjRA\r\nbS3uZUYnlweupM8bxcZEIQSSr77VzGmaI/CQSFBW0+UAMCE/1CEgUcyBbhro\r\n5+DvW7NjY2vo669YJROw5gKjSTiyNMTQ3LLz4Za5syGlNCbOJoLXOatNjwgu\r\nOQhjlDQXTWEGmrkbfDMVvZe34iuX+stKqUVtziHSaqVFeOXizmoZKtRDtd/A\r\nW4XJvT//0jhspK2ytksovr6zif75kHwiMuDR3E0N65s9gaILnjhDtCtULYjz\r\nBfFP387YfMAUYeYrPaln6oMetpvnLnee+50frovmpMdBxO3ZU/fn8pzG17Z7\r\nEhVnLlWYgYFmZ3JNoffluhfc4tW7Ikr7TbZaNzgkfuhhgRxTDOmV03jdFDV8\r\nwWbDv8nYm7AUauiVrKqTde9wOlFYnu1O0gYl+jguoOv7uMYfGfx+aab3On0A\r\nKinMfJU20YMLD4GJYMe9JQwtGCQ+/GDyEtI=\r\n=pmyc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/tokens":"15.0.0-canary.9ea4e8e9c.0","@material/density":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/focus-ring":"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/switch_15.0.0-canary.9ea4e8e9c.0_1656716153200_0.9143731560286712","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/switch","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ad8f6efb9aba68e80adf0449e9a8ca5831964b7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cd5bafabb.0.tgz","fileCount":58,"integrity":"sha512-lDwGw3HE/t4NtfqiKzo1F7umgxWNA4LmpmHqjieNM3prN8J6V5ej32p3IdDcku5H8krLmsvv0Jzox5qNs3QBZQ==","signatures":[{"sig":"MEYCIQC3L8GXn+9pyfFBzOSZDs+izVIucNHFAV5Ae7ewODMEmwIhAKv7aU/i1VLlEj6ZKc5kClsZa440WJMq5JkuOKrJJKIt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcyNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSMQ//e4q1koe3fOG04yKLLNoZjsz2HBD7TzEjVpUrR2J5smZixG1a\r\ntARTXXCUtppsW3kCrCpH6s8aVm0gEpm0gGhDze7xAJ1Q0Eoy6/bwN6eR/1uM\r\nWO2He/ltZepECEA7YzfFY5MWA3XSfwTajgjPYheZGtU9ihXc6udF+UNFxXqa\r\nR2BYu+MLV4Sue1eNvhjTwGaF6mTloofR+6I5/zW66cET09qzgPkNSP0w2/kl\r\naqvGNFFoykG88TYtU2lANCTgEkZggx8DLLcfSfvQQ7osSLI9fS5Y9fpP26cg\r\nfIvZAaDNn/p+lnlv+GfFOLAj8UHXNbE3S7XuH1Vq9Ij25tCZdQVkBt+XGyME\r\n+4zCJ0We8NZekmddBYOIHaNQM+JV+XPjJb6aXPS0+pxDO86tPKKSI601wn5p\r\nwt8s6sNPtBTi+w9wgGb8KYkSDicS5qIIqBWh6B8A5jygpP91+32EgVIvEcTl\r\n1RDF2u0uR40mKMA0Dav590esYmak6WAO/3V1JlGwk6XDnS3lJCjqeCzOSajo\r\nAemR6eOowjg5d2ODCodeF/o5En93o9Px37IxlsUkvboVuOvzTFRWm/QBwiEN\r\nBQaT82t480ImVs9JE0VBeJGXGl21RpJ7ixejfENo0zcudoQnOJGQo56g4wM1\r\nNhuX8PMRE81vPZuH8L7iS+7KfK4+xvYLwiQ=\r\n=3w+p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/tokens":"15.0.0-canary.cd5bafabb.0","@material/density":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/focus-ring":"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/switch_15.0.0-canary.cd5bafabb.0_1657130125469_0.9112207056573991","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/switch","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b3a3adc3e6bed0296eb58ad16e73eb64d36aa3c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a02fe49d3.0.tgz","fileCount":58,"integrity":"sha512-uE7XuH/I3ptLsSY7yJO+9Fx3YoEOo6sQHzNWnvvkJ8inBBlEUj6Cqw2Uug602GCxd3yh6u7clMQPJwQ1GWMXXA==","signatures":[{"sig":"MEUCIF6TwuO5sC1M0nvjL/2JINB1Z1al5y8S1xhEfti3j3orAiEA8JTLmUB959rCrPIcLW3Aym10/Hlbh8CSDJM+RgzaWvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLmA//X4F5Vge9nI6UYPkTev6osAJTknscGbcmhPjLpJZUs6IJ4kre\r\nDSAjDJmlBcG2f+/kKnn8C/xPODWLbuUso6FjQtX6Ax+qOA/Q2TOkQU7xabaO\r\nRhS1in+R/nX9FmA9vBU42ACzou4MT8cwrpu31F2Srp+465Jr3E1NVMy4Jedr\r\ntVEHNWl3945x59DkGdiOgBmk6YxlrFmvxrbCK7+V3agXgsFFrdtZXEXk3UFO\r\nyixIJuSaMN7I9eDZxydOScm/K2lAtjXEghgOfCHAMxcqQnkwk1vTNQ9Lu3JR\r\nK2nklz84DlT3CbG/heSPAdw9yKu0nh7e7BhvW8b5CXNjo3AmlPMVhfHhM4Ws\r\n574IMbVNq4l4Mze3Y1kpCuUMwdP2GgyLC9iVGJ46/f3PPZwY6OnhB9nvgn4Y\r\nvOVl3+VW3lPZrpx0HEmedAqmdAuCkEhVJLH8xdwwwKuB8TEizJPESl4pj2aS\r\nwF6xEQlIodaugp9ZwzzCOBA7iiQV/wcECNgQhIiWudc6Zq50eKtKeT1PgwIm\r\nxrGopj4fAJKlPTxQHsi6UeN/XoWKBZ9ypSCExfGzrdhlI3VOv4OIfXI8ZMMW\r\nqKB7+Y5Kbh63l6zJVihn2h4shRg1KklNMjHyv9lADj7+ZWyxr/4QPGqFAyo/\r\nIU4NNsk9DlRXLCr4jw0bURL3AvSzienHNco=\r\n=D/nL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/tokens":"15.0.0-canary.a02fe49d3.0","@material/density":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/focus-ring":"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/switch_15.0.0-canary.a02fe49d3.0_1657133519120_0.4770398738456667","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/switch","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b71b77309e5a52e7ad1ed08f20e6544c031b6d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.826a3d8be.0.tgz","fileCount":58,"integrity":"sha512-K7glhI16GD9TlGlhI8ulLuDB0u0Yfwg3PE8IrXkcosqFdir2nPauUOjxd7cnHJOkChgyhOjK9cOkCcfm4jpSKA==","signatures":[{"sig":"MEYCIQCuFkisoVhuda8aPziVFgYF0EhHw3zV81F9tFpJnPrVgwIhANaMtqDw3i8/JKCouxVoGMEQyHHVMMrKE24gKPuWzFWK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrWhAAi85RhfaiU3ZWn0/gyawWZj2TUFE/cQHrf2VNckr25Flev+cf\r\njUlZv9pfB2eWufA07UcW5ftR91cO94J3BZwEpMVF84gKnp6Ub13YWkY5LxxQ\r\n0D3qpKjPfukzUumq20waPIog7/oDRisbs31LH2hZmDJLTFg//8OsDGmlPEVg\r\nx4B+lDy8KX/MV7DiDoEDFcc8sUxhJ7MkV0IXz0wWLAFxsBVJsJ3rGmClLbk2\r\nhHlyCpM1jYuC4SZjoKVTvHLzrwurTDxN1CkqdbgwcN6JKYtljaNRieK5JQiP\r\nT6DS0XPei3Lq8Ulnqd8/A6lxFy3ODe4itO4kmggA0AWoVZUvlfKkUvWWt1YC\r\nOkZGHNSO8xVoaXNvFmSD4VAWO0fqERJKoa3gbG4Fdt48YEMzT62zlVKWPe4W\r\nH8JCsKwGcBeJt/p+0hMPiPsAtLjgkaXpsUJzpUXarH01Dd+xnqC/0KG51WzB\r\n6SxmkJY1dVIZM9hw07nitxAxvE3d9jtzEOWJWEHI/f39uGa3yx4kcPzgnUpZ\r\nAv9ekQQnYVzCRUkz7GGZIBpw2LLmCU8DZEfIwsse3j3hd+vMqb9WlcYImhpY\r\no2hm4FJ3yILUMDklrSsjU1/dWCSKLv0snmUMZ7fZZL6VCkVZYUC2e1GAl7s+\r\n08R0DvfAM868f5II5nGUJO8uEg3JS+TDD+4=\r\n=sABy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/tokens":"15.0.0-canary.826a3d8be.0","@material/density":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/focus-ring":"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/switch_15.0.0-canary.826a3d8be.0_1657135915267_0.012160415719702389","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/switch","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3538e5de024534a89fe528e770cebea653435695","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ef276aa93.0.tgz","fileCount":58,"integrity":"sha512-foz2D3vlAE99w/QnkrxSQkTZH75PwJc8dzDBRLa4gbs3J3Sci1HyEvHBMvo725PCgNhopc/Z8aHBt1pi8MBmbw==","signatures":[{"sig":"MEUCIC92q/36CUCa/tz0zlty1ymlWheGDUDftBxs6DgO6XoBAiEApcDpY3jEN+dODBbltSIXpX0XSkKarXiR0phUpArl4nM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrtlg/8Cjkn9dkaviZuCvN6e/AzaNeqtcTC4j1ebHahfKccInUmfKYA\r\nkM/pv9lxWLUQ+wrVI6EeLLUChj7lMI9Pmq0dcy2FaebA2jl1HOCZCQB9x8ss\r\nUUTqLjdXjnP2WWp6LSGQJ0mm6ms1FDJZx9BAfka+JOw8F8cZpTFeNppkT/6s\r\noJjM8tvEMp3ZmYx7IQjgGeYbg41hQ3kVB6eXvytCYFzjKUo/N7Z1HOa2Dbkx\r\nfeq/az04ZNQNKul6akWfqdtEtY+nxyjGHZOJ6OZjYfDLr4uKfM9KV4NP9WtK\r\nJ1HnQYlZSgKTa3FJwRNID/Ys5Ma7PNqSEUQa9SE+WwQZsSxFqPN7DmI3WOcW\r\nJQ4YS/u6yNGLLDj/T0jYbPG1rBL65+23+fXgG9YBhLbGmLvq6y57scU6UV9e\r\n/kvMgVLX61BWIv0PcykxzCkvkoa41G82nfSsD2i8c9jPQaDjOyBKiu9tyV51\r\nCzPD2unaZHWnpX+AGws6QphsY24QNuxMMlVHMIPIoR5m9ZnkEqtCBGU2y6Ac\r\nw19wtv8QRU1OatvrGgDSb+usX3cZJqzMd0ioCybJ2/jJCaC5kh633BNlkE2g\r\n6i1N8Cdx1wGnkXjgUJw8o4UGhnt0DfnWd4DlcUf2ZF24cDmPkVDZnBBPC2F5\r\nDlXBSronSCEJlfoiDnaHNOfri7MmFhPVCp4=\r\n=Rt0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/tokens":"15.0.0-canary.ef276aa93.0","@material/density":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/focus-ring":"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/switch_15.0.0-canary.ef276aa93.0_1657213416178_0.20872817456244785","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/switch","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79bfcaa56136d9854d3236956c398af07c920a87","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.59cf61d6b.0.tgz","fileCount":58,"integrity":"sha512-n72UONXbctQjx6ONGErrSLptOUhNTeJ5ss9NK88M1bT8vj193+z0Nv1UqRoSUq2Dzb9H/qfXQKp/e843naGP6A==","signatures":[{"sig":"MEUCIQCq1haimOWGd/upilSjcra24rt9m9TiqiWhJnAL/5AG6gIgHnHfXX6IFC0swBz/wO6NyWvl3lg4UC6hYSVPaD+g+sE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixximACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5dw/+PZvomkjZVBDynX2nLyVJw3bzWuebLX4ZILBV5qgREZ9ucoOG\r\ntrasOQRpbj1kX2XyH3W70R8KNPiP5JXSS+OFyU6ohN1gTUvIChDhCxDPTvFT\r\nlAiaRLFa3BxpDDN4gWDEp3Ukitw50GL41OWLedrN9S/4kmKjTyL4M30ZpVSL\r\ngrWcxdPdQznXXkk9MwCwt+fP1cnKNlnRnTI0nTZ0rJhzvfVXnFoiIfBJTwh6\r\nyYAvuQojHqlgb/9QoyTfO3ZBaDWDt44BrOdCKTTPItWAdtqnoTWhqbyS/Mf5\r\nf8tcz13WqqN3q/a/v+8YNQro5rauguu/hIJZBrjV7N6TwrMJ309QB086AHxR\r\n5pHg70BpJaGNS70APkVZTPodcx71CQzfQMFpa8RQ4xVh39fnoSkveiO8mTix\r\nA+uSmZWSKGeWen3xTKyM9g5a1GQ4V4UTquBAOCsRe9zwsGb6Iv8ARR2V6yL7\r\n52SFd4mCEt7jfLTdRswXuh8aOhA6IiQ9m1sd+0dONKGli2HQ2ESdkKJLRQJA\r\nFpVjN5AfH6R8rZ2x2FIuQHSJ4L/DOIzxM4RLllItmUly2qnAS1H6gkc8KVs8\r\ngR8j3At6htCjARZJaAlzTB8OFoRhilt6lSCpuil/jqQjPAWCvd3xtr5KwytR\r\nth2wOeC9qgfczvr0VNqa/3XlCFwTrYsYghg=\r\n=XsDV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/tokens":"15.0.0-canary.59cf61d6b.0","@material/density":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/focus-ring":"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/switch_15.0.0-canary.59cf61d6b.0_1657215141872_0.14542119952608834","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/switch","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8647092f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddaf8f57040f78a15628344ed4c5e8dc9d342520","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8647092f7.0.tgz","fileCount":58,"integrity":"sha512-MsH8mCyipFg3w4dTNjDRaINSTpD2aufOziumsUZ44UsL2Y9QdOHszGK1zygxYndRIhRE86uD5PUAyscV81rZ3Q==","signatures":[{"sig":"MEUCIE5uRyI1x2EDZoywTgt4zBlME9928f3hqVEvOfq6YHu6AiEAqp1j5azyk0oyDuNkDEBvlJ5I/SYkRidOwEshyFjVJEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0SFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiORAAmfj9apXYJu/sZeH2Ymj0dLxM5/V/3qy25QgOyVrnrH9tZFjt\r\n1ivTSiYTjrzmtVcg4kEz+bnd64QDG5vubDbKoN3/r3jZclZlw7I6D2CBjiPt\r\nO7hOgXoSz9FKKHZMEqekPm419GTMPPHvAubsMTjjohkjAdpiJUqCtMpGuEbY\r\nKL5gOabzcjfa+vpf3XlKjLQzVZ+oG/8Co00ANDQvPSflPqAlInVe2BM4P4wB\r\nHyMKBrosKX0oSj8+28XYHc/q5yeFK0X2N1/e4huDjg0/aoc+TGTHbqowpAXD\r\nJb3dVHYCKtLaK+3Aa97EzHKT6nlGCnu+TkjG94Qt38RVOkr2FiLNnZ3+UW5W\r\nHJeQSfn1q0Fz6iZDFs6RVxjzgWCqRK57zZvUNZgTvs+wG16BqnN8ljUmmRBI\r\nZThQ/1BWJRqlTPnhuN7T4Tlh5yfZlN1Bokmm5EAaRTIl+7b7ZlTW4TYTbRQ2\r\nhhlbMZHXQNXX4QM0H1sais3YUL+rth+MKCLys+lEqzClTno7TdLdImEOMNBf\r\n9dehSNqzXCd4KJztswU+sghzxB0hpLo3gHrzhJKu8/nHU3eRpfNvgBQem64x\r\nHh+pqK9ztv/omanFpAZgSWVaSf89kW5re510Cn1f6ZwX4J2AXjIXEyAiqH9P\r\nSwCXTG7b5LHzSboS9DJqsvTSfkrtLR2vvQw=\r\n=IxXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/tokens":"15.0.0-canary.8647092f7.0","@material/density":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/focus-ring":"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/switch_15.0.0-canary.8647092f7.0_1657226373768_0.9584502640956567","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/switch","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24e9581386dd470af9e729215bfe85f672c0937d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.02ecd4d85.0.tgz","fileCount":58,"integrity":"sha512-G698hMFhhJy0U9QumfzkDHZ+/abUVSF9N873XL6oE8I8quUhGzV46OTstGbJHtrgzuuxRah4mxX3WNzCEZBGeA==","signatures":[{"sig":"MEUCICG5Q/vkGnccBh493zVSqAoMCBK9r+uD4WfhjfvICugDAiEAj5E78DEQ+hq5ShNbCNdx+/N12FEbSk7gsIhOUOYgzH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPMxAAn6Tb31kQheHjoNK4bhXnpjbNAM2jl/HJJZlCW7WOqPHgk5ZH\r\nakQFq3l9ulTiuHatDHLfMZVWPk1fQFMeLLOko00vKj+PKeorrEuK3bCqAgm0\r\nIAtBJN4eSu1zkJx8DsL2p1Bdy2KH9vwRH/KFzfazDNlm9JqsdLynyl3nIpx2\r\n5myMTHq+6vIZjIbdwhWr75A/xL01hg7+mK5CNZGeZPwoDjUwa0IRRpt8bDk4\r\n4PJnj7wbEBW3BLwgKxALsUK4gqA01XcegHWjJZCNf7i1kNMK+iYjmR5E8SUH\r\nzJgnI4IW8ytFiR2lg1pmR3K/WjiQq5FSknzxwJGucUYnScOHR9Dm5VkR8k8q\r\nyfw+LH8AoMcKE9aj5HaH1X/0ffVjy404pHDPtS2SC+a6L/p2eaYx0cx4pYH7\r\nmZbR/Ml6mroatZ7MVGsWeelguv7igBEyBQmDg7bhcRN1zYNmCCRQKuTzvgm/\r\nhrOKH4I5wMmxbAapCHwpk+WROSVFX8aOAdbpTimubPWjjiUhN4YJ/kWzFAts\r\naBgHr+s9NuGBQr5E63zygsNPzUkt9z5Be3mjIM/nx8LOaUHfQD2GWxXqFE5q\r\nm/x+uOvVECLTSy4dkbGwoHUNvNdHzUeDIvfSfHuxWLiAtehLZ1mxzIi6DV75\r\nNDdNNZej7p0qOuXbS/qdu2udIdV76uCMPGU=\r\n=bLb+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/tokens":"15.0.0-canary.02ecd4d85.0","@material/density":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/focus-ring":"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/switch_15.0.0-canary.02ecd4d85.0_1657557611887_0.15965357593284146","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/switch","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85fa08031a356bc1f68ed90437ed01198c64f6ff","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.63d3a146e.0.tgz","fileCount":58,"integrity":"sha512-fyLxmLYJYOy6VINDMCdbCpFQY3MpN2fokQMampJA+xAvTbVlruwVuV5KeuqaEDGNe9pQ9vf5iSlgeBOZSjdtHA==","signatures":[{"sig":"MEUCIBgeLvfBkb0BRfRVxbWJCxEJyZepjqPi2L5TtENSNkSeAiEA7jo75NO6qC7rd8rwY8gOJhda6fEiT/Cx9BWa9D4zopY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSsQ/5AbNNhZ8CkTkPw6oA9jC38u87bIeqFW63ZENZ5n3dCgTSB0ke\r\n2B9EPz1us8fk9kc6KW5kn+sZLRdhDnjaqyWTkLSs6/1RRbje4QjL8QOgIQQP\r\nitmzcir07QmfbbScBnaVAPLSDwuxgrRnIDTs8sOY6hPRalV/5JXT273IycmC\r\nTTeZvdoz1YWowZ14oeu0yPlj0aOsm3+eEiXsgwu4ZFGIhYOZZRwmNpFUQ3Hu\r\ntgFwBD7D57/LtCtKjscl73GLsEBgenQXJrCBka65EQ/yrAtOBzjYtkX767cI\r\nggRsGBYlO93ew1R+ezmLEUpjn5FgqAgBvVmmODTW6alud/Ktm5Vsf4EjcWi7\r\nvn+zB5O2pvj1NXfRxmxJqlhJoeoOLudBWFmwMG6uyUhXHCyBd5glvABcufNb\r\n9isKPBGmUNQ6+7RjDSRyZjR1oEgJywo/FiddVzZYrqxaNQBiisSwI90Ousvs\r\nEHZ4K0S5bFiY0gUKKpBu4snC1TQR2dtgdyrIY2ibFE31gzdoZLPyBpyf3A2Q\r\nawdyBj8WLsoLsZlmxvmFqQp5nyc9oQI9YtdXjr8ZrBMliZixS8TPy+oNai7Z\r\nPcfCZAirR8Pn8fq3OAfHrOByW3pzAxUhP/SNTgpnwLnd0xkql4bFvvBpb85y\r\nTjiJZA21XqJRS56hhUG//fLKFyfy7K6wKEQ=\r\n=VDaj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/tokens":"15.0.0-canary.63d3a146e.0","@material/density":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/focus-ring":"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/switch_15.0.0-canary.63d3a146e.0_1657625881148_0.8016164889217945","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/switch","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.88db01990.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20c06f89d62079e7c58203f97bdbb8f81765d6b7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.88db01990.0.tgz","fileCount":58,"integrity":"sha512-57L63S7kHoA8CxuD6D11C/+vK1prJ214gXnfZdNukjDGfWH1Sog3NYR7ioRnviLxzveFX06EAFCfao+8heuTwQ==","signatures":[{"sig":"MEUCIDmeDFn01eU4pchGevwrm7ZrMoovk0xRHj8xdEjaYdQRAiEAhei6DlYYc0PvleMHSPnloJyvcC1B/iROZMJqIcIjFa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos8A//aXjEiJcH3I33PrQdTXdWZN5kJuKr+hf5uGMvdWEwQXuhSQjA\r\n6Ds3pI37UybAZyFEFJCVm5E1lKy13ojyy6LhWJlqnlTefUNZTNONQ1MOSh5U\r\nNxm8dWnKc310rCgc0hTTrQQhh6qjbX6tJTqi0bsP3/m+JeE8MB8qyfzVerzG\r\n5xlTXmhShf8EjPddsCXc0eTIlGY6DvG59EUyCAwxsVoIJiC3c7fFDt/7M8VC\r\nPmqYGWgM6QB54AgLTVobU3K2zcZYnqEi8c2jBKThx7o0OpqgkycmMfoGvhD4\r\n10IwBDA9GxTLWuaEwIAzUqulLP26t3/mpcua5Jq+ENYZikyPKAV1vXNmNENQ\r\nSnjpXs1ShqagHNVfuExcjALnQQwZBC9yA9udr/GxglRn1giAqZz81OZDzaOm\r\nQNbNRMKIzeeZI5TAcmWWlGRpxlWGe5Ze5xefZYnaQ61MRMUIfEHKdC6/e6nH\r\n7VT23yQHsY6FDwu/abxgc4HWaK5N3w3IsCvZ8k31OunCNegLmJl7SBCU76kr\r\n5Vtb75ABLRoLB4S7izQ3no77bbSoXa5yWJmr75YHszMWTEEwKhAmncILxWEm\r\nBpjY8mfWZ3s3DijbVUVp1gw8PJscyykTJehoXE0KbCh8deDVAfhbxHIhIsCo\r\nbCSBreuQOVzt2hOu3o1Fc9iTz1Ev/9t/grM=\r\n=daTy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/tokens":"15.0.0-canary.88db01990.0","@material/density":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/focus-ring":"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/switch_15.0.0-canary.88db01990.0_1657626063546_0.1946412870332892","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/switch","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d7091c8ef2f1f7fe59e77b98976a6e0f75960a2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6432d8fd7.0.tgz","fileCount":58,"integrity":"sha512-XM1eEijlx0YL4BiIgtyDjegFRNyzNFBJ09cm9iAISBubP2fRE9QpY6W4/4tcWdmTmm3z0ZLYOMTkYCamXXW74A==","signatures":[{"sig":"MEUCIFxjzjSzkRA0FeE4rQ6pnRHVvV5/pSqUqij+oqmU2DqxAiEA6uzMOmbjz8oCLpaZcmZCRIen13lgMg6UgVLQGB3BFTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+oQ/7BJYvOxMJaiksYh6udfhLEphSxtv3JI5uN4wy/tbxZ9fIT5z7\r\n+st1DjiriegQxLTKjvLPKrFrSXFFKZBWro0oXTv7b4brxkjoWK0fuLSrl6Iy\r\n9PKCoPeIvNnuY09lSuwaMO/4GcWVIoSemiMMoMc9nFLGqEi4GTKhxMEegIR9\r\nyj143PC2M+fOlyamuky6uhQ3HtIHc+syDYd4dMG7squr5nIwjrtBVjzn2thz\r\nkhdTSLP3Sl5gCTN2vWeqAbSjoO+28rw8IJAW2+HAVo8qXRQIkTM7jPN48lFV\r\nJZ2VsTulUvMeTZokyItvR+YtD5CdDslNsiKd00FQk6Aq6esyVZ1hccsFzzI1\r\nqfXIkaX2EuTYgA44K2zWV7fuH+hG8/iAjeymrkrrpckxlSjlyi6u2WcH6oIc\r\n68ceIcypUgWy+rXQMzAEDb+8rqTQUxEw7SR8pKijv3ELykvgJdAHKzdu0X6f\r\n6uDBv0bmm2XhVgNJuLevjwzzqW7BYYGJ1VofP480xyqKd41fjg9vEFzv04BR\r\nHHzLybCeDh/Z603OBPs5qAbCfDh+UlJUitDCAdxv+bsNAo5jmE24r2DxzRx/\r\nhrAMQa9Mbtw1vmY2dR+O/YtYPZdduZiJhLyfiR+0bbETqUW5ejKZXIPiNHM5\r\nBzzPQn4YRbsWCumViwpOpf74hXiNbEltE+U=\r\n=k/++\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/tokens":"15.0.0-canary.6432d8fd7.0","@material/density":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/focus-ring":"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/switch_15.0.0-canary.6432d8fd7.0_1657783790681_0.7287069108523678","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/switch","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7f8362dcc52932c96356a6f5633bfb557cd78d1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.085f9b25c.0.tgz","fileCount":58,"integrity":"sha512-4gnrmb+Gi5TE4LW8Vsr9IvEiGnhdVgrVVfR/FvhTdGGrZCde5ptvZnYT0vAxNYCNBraJfLo+2ZcfamfOeT0ACQ==","signatures":[{"sig":"MEYCIQDHbsdMl5CLLOu512PuyJskbg2I3AuqOQyrmL5rKBBh0gIhAOK5Pv9wid7qtf/mbOhKNLRSz9zm485q6iM5JAgSyTaU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolYQ/9FduH9ZLKNj4WC4Wf/XTSVwBu+eF7sHCNRrHZyrl63uvk8sba\r\ncWVKYOuz7ynmVDBPipQgkidlAUmbyIMW7xxL8y8fkdknlftiKbq5P8J/VrZt\r\nmYhsXDz23oB6t4tynbKhqmQd/KeSa5npuX1YBl5I7FpdivR8U14LnPgd/TY/\r\nHG5tYaRWBpoWzsDfhoyiK32RFsTIMS2ranJ5txgM5J0SONQ5S//XALc9mDL4\r\n83q+0r/YB1JC7xVPFjjG+M6u1K0pcDLVsCT+Oo463NrZHcKl8vulIombyIap\r\nH/V1WqQJDjZGiRBn4o4TGt0uHpnDfUCh9epkdZmDt3z2JMRMTLzb6U/c1Avq\r\n5YlqrQvLqH8V25IMP4uT71n9b7cJb5ceI9Xs1xfT3/pQrL1wmAsxNB1kcGRM\r\n49L72k6rnV3S+2wbVTuTGqZw5acaJLgumZgN+jA74u8GD+3vCnn1kyUvEMx7\r\nI3Kpm0k+NjlKoKWc1vyNtTQUNPmd4A7zEa+NGhklbRCz78klbrGm/Kk01zhr\r\nWFUmfOCDOTJo+WTZcqC4UxXybxubq3Jq2pJmkb7YbVHsJh2+umnbXaIZVhFL\r\nkA+2iYZg+LZL/IC6aOBQWDgnzK17jygrvmIN8hXuxYJieLiUUmMzhpmD38d7\r\ngtduWGZPXKeK5mEFfmlFMX4RN0qOZ60ZJTI=\r\n=OcSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/tokens":"15.0.0-canary.085f9b25c.0","@material/density":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/focus-ring":"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/switch_15.0.0-canary.085f9b25c.0_1657816552696_0.9872887045819625","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/switch","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70e7af986b17b90fced8da72932265d5afcc0861","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.39f9424b3.0.tgz","fileCount":58,"integrity":"sha512-3/G+wj1mbJ58ZANK5qaHYSduXbj/FgbJZU7D3xgCymvWdHWYftuwKauspcSLWGqlCuzfs4RRy9mdSVNCVRsAIg==","signatures":[{"sig":"MEUCIDnLMOoE+hIUWPXhxB5U4FZYnkfSBvXe/2mZqZTvyK0MAiEAqvAw1KtCy6wXCPoFXkOepC1Q/U3O1C/Kcu+JoR//VH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E0CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovDA/9HFUQO7GH0N0tRisZYaZ7RNqFN379FDSNsqw/DVR/PX95GG3/\r\n4rWG+MnyO2k6RSqjGU8Z8mUEfnkl+0lwTTU+Z/anALpRKlp5coME9ouD5dtE\r\nxP7Pb0XpKix3mf11NDaSOVhID4CqaaKtOX9NynccC7EgVmYWO4ZBGPPJMXKu\r\n3oZhLZzHkkBgLJroIFHc4+x6BtsabX8GpDk34ZjhUOPOONPdVlcD4NLXcmJ3\r\nnegr8daFovjDH3SVO7MTQzF/5aZxpx17gpJNcjCJWcA7ax3DoFtnbSOeSohX\r\nDzZMZmwMIG6KnFCyVGpEU/mytkAU3pszvoVammc0Kk4k/DUhzytQ1JeA8Gwz\r\nXYVi8ctsR9sqT2q37NNHxwDgvX1iHdNtpX0S16uzJw4qaIbqxpqLrSL2sJEx\r\nlaN7RZPf/wGJ61hHmsHgOpBQzbO8sHTAyywnTFMqc+6Lypu53MBiCvqgqB1k\r\nmhD54jxcjRQ2uzvztVbfZg5M5Lp+giXhdA4yKhPKrR10TZKqOZAH9s8Jrhlp\r\nmnOF71FqoZh2uPdMvhYDMSaDAu+EGoS/dB+1tkG+tHTFvcubw+vghalU4jIX\r\nzHDqsMA4yBogZIX3hAhkr+jwQ6anGGYN/rlZmNneLJDWqwl42LWU93MWlsR1\r\nfofu1NgLuEmlIkL5kGOkoBRncCDRRC51/Ho=\r\n=6lLX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/tokens":"15.0.0-canary.39f9424b3.0","@material/density":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/focus-ring":"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/switch_15.0.0-canary.39f9424b3.0_1657818370090_0.42094233351392374","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/switch","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8284e44771b07fe27c4f3ce13f10c9cc25ffda4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ae9fce587.0.tgz","fileCount":58,"integrity":"sha512-gcy33nGlnXPSrarHVkXCNsJ30mjDqhiyiyK9Ba7aq8d2+q+vpkGM/NvWP1+w66Nl9i6sYSjL4WqKa2BsWmNpoA==","signatures":[{"sig":"MEUCIHOdoQm0dZd5HfjsVo1cLwh+1deiyzsXmDtDOB6ectd7AiEArE58RLhzyp1Iz/d8f/CiP041/y1KwD6bNSXTYWDobdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXxg//cu76FH23eJ8oNqaP+58gQxbc7Mc0Mv2gJo+Lb+vkR79Xj33A\r\n6Ojzvpr5lz57WfWhi0pKS/NjLeB0Dl8xjzSyNq+ztepIUmRhU34EObo7Xjw0\r\npZetT9pXxLRx5lSAN7ylwJ7clhD8+wquFuLk3+HwnNCO/EPpxWkKGxULYaMY\r\npbhimWSlp5cg6K22dHbl921vZJESudQffMvY6HA80Ea6UVzz4BYDBqAYRPTC\r\nw5CxcFKn7ezOiYc2pSqqVBsuf7joYeaPsClt2q9ltIJZT1hTeYnbX/llc2qy\r\nEF6DyOVKE+ODVEsxFHeXAtfGSDw58XmqC3CT6wLkLWQA1YB/hijEDbNn0A7j\r\nO9ugKARTb5Jyr6rpcMuyzsXCv2imMNIa3PvW77D0qzMizz6qDncqOkzZKs+8\r\nuKVvWAfvrgZNLpTK4SpqBSneaeBc7lZzQ+MDeOIhS0kdunCrwtJvwPljDRiU\r\nsp000i85HYeepneK6D1O2kFgawWqB2p3vODBV8uP0CkGOTtqV/+DvltUt1hE\r\nl1kTkRppwUdVXch7/EU+8ylalbyZtz/Clgoew7GMMNewe2LfAurgjmAr2EGY\r\nBodcWat/2fdaP81wqeY7d1wNEqBfAY7gVMOwR4L0rsCcQlpt55ohC4MjDxr6\r\nsPIKBul86NeZzmI8aDbo6pD/5cFdBOvXjy4=\r\n=Mb47\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/tokens":"15.0.0-canary.ae9fce587.0","@material/density":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/focus-ring":"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/switch_15.0.0-canary.ae9fce587.0_1657822145588_0.956247270760967","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/switch","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0e53b33774603d032495466e0329eac3d484f36","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1ebddc343.0.tgz","fileCount":58,"integrity":"sha512-9wyRNuU+jl0drRVzERhG0wuMTlLk+146phqUwrZfdfs9DiGoQT6VlFfFHW9OtFNvphQ7uvziCDRhHLCYtMsYlA==","signatures":[{"sig":"MEUCIQDEa5DoVCe+77Y0kU6E7azGRLyxhBICeWJrqUAlfHb18wIgayusXqaPlCJFzlFXyuu25B2Edp/F76pEoFOeUKpKZPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrD0Q//TkrX77/m46qcRds612qsBilftE/DGXx9Af4mIuhb53NAeksj\r\nOCJKUgl8zbJf89Hf3ohhqNTXcP6dc+lddaDbdD44PPhKqRszN1ObcCFv+itw\r\n4NNfaCoinaJilasg/8g80/kigPVuH2e8QrJN36rg+RUTUPUrTS1x4J+R1pwC\r\n/x9b9SDga9ojzVBHj4lR/zEhH9q+tJrsR16+n+FHFWKkq+2515jp3QtW1cXt\r\nd4Le7DcaKV+VkX+JojoVugB8MZ8gj7BbPSXo4S8HY1GvmcL2OEgf6DxSEFHE\r\nQeJ3am1HJ2jjvIJbVDg6Zj8LVj0RRrFb/sPshNRjadamHdsHjfFejioyym3x\r\ngK6uiOA+TB89TEVVS9RYrQifSVQJY646W/WmtzMGxylzWRUYJCFo9iJcG/gF\r\n/NeuOmg8HRrinp7YSmB6LugJ1K+1eUpMGAdjhptXzI1Z2J7KafwwaKPsjhNJ\r\nqRucB/OLhA9Gch8nh65QRzYpAbZc8uxufpl0cwm5CtiiZqsCI8BbkIxTRipe\r\nHq4EQwlk04B3QcvdZPlPVe2Jmq+vfWuzd97bUJuIJ83TYEZoZKMygTGQfkNC\r\npzZxuQ57dssrznjDloZBBLSZHhHEvo/Gh3+Oeykn/L6HY9v6G6mLN8EgB/Kz\r\n0U1VW6aAizrXh7jj9PlF8SinwsrTSc4YQdA=\r\n=xnNE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/tokens":"15.0.0-canary.1ebddc343.0","@material/density":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/focus-ring":"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/switch_15.0.0-canary.1ebddc343.0_1657875018908_0.35061611928770975","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/switch","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c5018840c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1d6c7729d5388b41917235923cac55ce7a54d03","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c5018840c.0.tgz","fileCount":58,"integrity":"sha512-S9qEgQTLmEAV5r7VsuCmeclh2zeD63m7WkE/li0SwK57H0ONO8fPNGzIcnZFkKlteuPpToj3hUwOxproitcBqA==","signatures":[{"sig":"MEUCIERkNI9/cpNY7q3KOL+mVikBq2Wb/z28dm6SFLcmpJnUAiEAw4WBkqBJfrMHVySrK+Q6A2rJkeaxFhRd3D+7IpDxTXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFexAAnSPSBJzX+I6Y+WgnqPFSUPg2v/iSWJxCaOZGpcYnDR/V3wjt\r\nb+elUzT6q/r6gK1ULqvEYjiJdL6UzyKdhBaoAmqtDq51FbJL3T3mf/n8i9iE\r\ncbFY0RHHz9RaS6Zgiv+xZAlVG2TQ26F2SB7c+4xZ+UmuY7E6pU9NR3r8lrfr\r\ngAL96BjN2FT6v8txR1ycpwTN59/55LLW8yn5kcSIHn5N6e95J0VCghDAqFRc\r\n1cVexJUgWuz7FHZ151AuPWhxBea7HqbyNXVF05yBkeDy8vfn94UgmJH1J683\r\n5rP/5qKlcZD9Xbm4E2UoXZMSpw9ZxJKeFDFZZ8Xb/oVgExFuxGGD7H7jNidx\r\n7ARCWEJ9GVX8eCx316Nf86XznBvpPjU916OwiYZTsu5IYmed7ObnjMgkhjPa\r\n1hv2EDHl1O99SoAXQlcennrNTnCxYxlOvYFuozaStzGEAMCtSkYQ2gUwG6oj\r\nK4T2cUPzOc27l1QaeNa6fREUGCQsh1WO+OKjH7D8Ag+uhAy5QmJdXA/rFX/r\r\n6ZtP6yji13yiI/rPkq1Bx8eTvGXytHCdCxIyC2dZksYHIG1WurZK0sLr6YXU\r\nRtq3KFgXyjm/eJ7J+3y/DJJlJ1/dYd5XI+wxN5zg6iDi+EYmx7ZSHU15wW0D\r\n7M0ID3AwYG/W5VddHprIcncJdZpb8vqdb6U=\r\n=1XXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/tokens":"15.0.0-canary.c5018840c.0","@material/density":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/focus-ring":"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/switch_15.0.0-canary.c5018840c.0_1658137448921_0.4414850335213707","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/switch","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.551b40d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"917f3f83b70d10e16c79ebf9c35d093bdef4f00f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.551b40d18.0.tgz","fileCount":58,"integrity":"sha512-u+HBRq+0xkCc5Wc9mJDxP1NoZoctyH24ler0V3whttu/z3SzbZwAe/DlMqkXfAzZfb5ekypkXu57GY0JnSe8eA==","signatures":[{"sig":"MEUCIQDWoJt3NiGtoMpXKpMfBiUtITyJR9ooF1BlzLpG3RvRlwIgUMnymVtjKjitdsS/9v8tCtzxefQAcFgYWNg1ZnVlf2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/yg/7BNehUxku29QQA+RicklPhNskxqwyU8Xg4VqBt2SUKbUuB6Xm\r\nd6yXS9gj7PaWdwSj1uBJI96dr0pLs4w9vnZ0Kk/ymG2vGzguAbTJ7MrQFUCl\r\nT8rU6M+C2BSjINpxb0SO8DbKPZ5ZkznaNCcmVxFOqyqKgMNgNcvBcx1B5jik\r\nSp5fUDaidT5PPS8rYp62JT8Z39i/TEA2zQbSzsvjpjnncBg7wr8XP47kIaih\r\ngUH+dDC3GgmSsXySJFsdnrKERpDvUGR/nOLZ4QcgjpmUeGTwkxsMueSdiXb1\r\nPuH7Zecv1zUY115Wl4hOCBrN2frRI0G7pfBt5Hlzh7hkxVt3qUYIs978hg2B\r\nysUyItU7BJ5C5oA2TmVUJnQZqHyGGLtlBip98PIva9pT+ZY3yz/4sH3+Fx0I\r\noaMxFbkohaz77NmBSXmb2g7p6AT8js3ntL3nVd5whRwkBDaVvLP8YNPkF/l5\r\nO0cDVBTpOaH+gTi/fQIsN+UwRWAugcjPbYqlvFdBfnmqfnABbHp1Pq8IUL/r\r\ncNPn+K7XLghAn5ofMNW7Zf1xB3njCw2vhOdh8oLqc42zomBzMDwo9ndX9jrc\r\naNpMPHgBBUJQ5vleDOxzNrvhRJrZccQk9U8szpoKO4Y/2jjeBL+RM9Q9mfoo\r\n2Bf2ncA+Ly2BCYEf2ZkaZHUz6wFqFDwTC4o=\r\n=qkqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/tokens":"15.0.0-canary.551b40d18.0","@material/density":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/focus-ring":"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/switch_15.0.0-canary.551b40d18.0_1658138526306_0.9446413680355903","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/switch","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9d42c7f159e0790b1a84ecfa29e350c4166402","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cf9f12371.0.tgz","fileCount":58,"integrity":"sha512-vZgQiVyl1V1xC1JJeaA/9F0bNHBz0JUT0SWKqRBCRRUZ3NJZdUaOoVFPbmWvmUUvzhAxRUcsTaEB2R+2jDbXSA==","signatures":[{"sig":"MEQCIB3P4qx67CO5rBcdxplZndnkA2kNe5AouvCqpB5zDikDAiBR3rd7KdPKeGS1tIu6wTj0Q5oPfzkMHYpXunwpML9yWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TCNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquJhAAhy+0/yLSG7oeEfoLgM8b7SYSjQ0OUOs8VPyMVmitUickC+45\r\nZY4DqfYNpgiqyLraDQi0P4tLq2wYSyG36t6/pYQYscvG48oz/coaqRrLd7j4\r\n3KlpItjRJkzWktjl+99YRXNPGijnE8z8wn9mXlab6U3Xp+bA1wgdl3JMfKaX\r\nD+Bl93lE+iUgG7fy2Rh3pzJYLjEynkXucKId897FV2bNCEorF84zmCaHyGKr\r\nOfW3IMfORKYetjNDW9Qlhx2R3csRI5klEFHAOrb7OU+/gzNjpaRZLPAnA091\r\nkhOKChtF7Jg9RXz+GWZ3/lNJrl8h5U7e/yMHVMKe/cvZTk+k3xAZAy2+IYI0\r\nVKnQpQWC/UUlV0wIjzGPiGeagEwR53bYFOyTAINNvvHALtWnWkrmN137DWir\r\nYVGu214cP7zaTHQu6A3LHllDkkoIdJ4UsPQzRkZO/l0MCdvbLi5/PS4JF5jU\r\nOvRubISqR6NczTzUJfMUMu7phMzVjC2YarOWTOn4vdswNDEERXfdjnQkyvSO\r\nhKdSHP0DigPmoor0vmc5kPorEyO+NnZ2DNzr8jKce5iFX5mJP1iF4GOMgMj0\r\nfFXkmbZyWFud6R0rx9Oyb4qq2am+kiygu0NCfa0hx8Q6BFF5fyF6BClHWZKu\r\ndin4p4UXXJonezRHGYj4NXpKbpiwCgAOU/0=\r\n=RCYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/tokens":"15.0.0-canary.cf9f12371.0","@material/density":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/focus-ring":"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/switch_15.0.0-canary.cf9f12371.0_1658138765627_0.9490191234055168","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/switch","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb0e29985a41de563543266eeb9b32fcde400b7c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2797ff8b6.0.tgz","fileCount":58,"integrity":"sha512-Fz5cBSQSQXyubc5QxEj2tKiyoyRvg4Xjbv76hG5AGjcflyfHVwqWhlNAgHsrhlLyNTQzsS5IzlEcJizKIVQ1Xw==","signatures":[{"sig":"MEQCIE++xAP8+5qhTKlMTD2CmhfCpSR++0egDuWmw0A465x4AiBHl+0lNn4SS918T6KnIz8pRviD3KK+jYTEH1C0OhAHlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHkA//efdeGqn6blPkw7+7feGEng9AVXSYI6sqDAacOoLcagyzcCSM\r\nCLo8G6Kd37ggrzYaba8dzlmKHzlO18erNiV/Zu/+u5CjVADCmBdZrjWkgbZW\r\nbKos3x3c2x6tt/SeJQk2n+1HoaoRNiunlCVsEfI7Wy41oqR7yjGySyJnw1Ro\r\nNgGVtxpBjmC+euNwS1hsORHLAKnrsjOiJcHszZTCPLIV6N0QguY9JVe0cVjI\r\nksCMHQBs/a6hyUZ35Cx+ey1B65w/FQ64WsaxPCm6xeq/8dQcGG92Ef4uyWk9\r\nCJIhPCjDBc3CvUoK269FJ0ZcNJkhA8Vp1KToNNbUF8z/qawRbmaPuz9RHRVR\r\n20k9+rYADzlgXu/vZve3cNbbC4eSSthaYNjEEGZU0mvRmaFCdcLedsKXN2Wj\r\nFiO2PTPK3b8Yr+4aqyFFWS0Dr7YBrcqRPt/I+KI1bsJoSsX4lvYPf+Rs4Uva\r\nEs9JgGcLbgQKfNQTk+eRxCYtzaD4/na3EdVM4EM8iu5UXNml5ICqWhXKJ4vI\r\nC+Mv4W/vcX4oQWXYPHU6ol8OjayMPeEZJI1HVv137avC7L8ZTsLMVCeYlEor\r\nL19Xbn3N/wLlTJLKHlm0DxpkzBZgunM8F5Rrr385uJ29SUGU8yjmKKYY2lb0\r\nSqTMK1w3cv/LvBy4wanrQcI72IokZEMGlyg=\r\n=gbM1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/tokens":"15.0.0-canary.2797ff8b6.0","@material/density":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/focus-ring":"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/switch_15.0.0-canary.2797ff8b6.0_1658190310672_0.4783827396942719","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/switch","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.110fafa17.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b56d9356f8504f60cfff251a3b95d5738cefca2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.110fafa17.0.tgz","fileCount":58,"integrity":"sha512-Q4MAgoQEQY49gD4FFETBaZA1xBMyCsSFQnZ5xK+CZ7qBiBSkiAuVmqvulSdTl0UkjzPh2euwky0QLlw6MSjlVg==","signatures":[{"sig":"MEUCIQC6aAkk/E4dr6Pl29TWojXKcQOTGkYOaLg83kUS0zN+lgIgSTBTClG943K6d/BRhzozO1sCMzv66Te9x0z8i4nx+AY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfsA/8C4dUkXp2FX5El8R2Rz5UBi/lip6vGvkykVOOUywqpzDYoNlz\r\nJKk3pcPfdXyYN0icfG6Z43tAyXL8WfgqLkG3td9JQCHaKPhQdf2uWk+sFyD0\r\n5ZO2bjYVwmn2M/BQkM5MZA3MfXjKVynuaAp78gJdCHicwPLS68gfcLVOaBR6\r\nhOWx++pEQV0Aa7wI9u7O7EADPITibPYz4t+qJ7FTKTB5DdK3yGEic02pDdF1\r\njatlE7MqHlpXyIfYv0Ro9Xcvet8Pq5vvA99w7k9kpJFz0mCs3huUppF7SFM6\r\nfuBlI02v6e9+MmokjB16936knFaV9mOoMrasZBvrkiM7CNuPC2IB+OSeiKk4\r\nMrCbtrwYz2ulqnunnGQg1eFlt0KINSCDvwuV+gvhTtTFeAIi+7Gdd2EjuKy7\r\nZQs0m1JQ3uyduPSGDC/319V2NhgApzAldaLOmRd0fAGkjCXQVzzjaq8fbruk\r\nfmA79hJk9t+1c1d+imlWFMDNG/pEqsS5Y12W6Y70uLaokznkbsxVO+qhPhb2\r\ngf0odFL7EbY8qGUEcuX/E263/IM7jIHkl7xgyp18axs4g6mR2If3ZI0iXqPo\r\nsRj1sVi26kGkiqKumVH9i5EROnU2XQnEsnw3ay1AF4upW6kB+ZZF1d22/XRp\r\nY4MNjNJqDIEfnHUkOUTJ724jvI6LXzIg7og=\r\n=/yj8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/tokens":"15.0.0-canary.110fafa17.0","@material/density":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/focus-ring":"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/switch_15.0.0-canary.110fafa17.0_1658303264487_0.08394362446781001","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/switch","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33a47c8d8902f841085eaa3adda4c9da52ff71b2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.386ef1d2f.0.tgz","fileCount":58,"integrity":"sha512-pZMHJY035HFj92DoDn6ZcrhPb7mpo1X8vmW8SVKl2o1TjBT//CaHqqcHNeWi/fnDtzL51UtZFhJX/6PeryUBcQ==","signatures":[{"sig":"MEYCIQDdsasoZwQkzEMylz2snCOYXKtuo6SrMrmBq+KGo/ogUgIhAPUCDRXiV9q57EK9/OZ87lcMtELHf5rtCHVt0bqyhl5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EeNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpmew/+P4Eel4tJiB467pwJRe5uqQGGJWdGQiGVpPFivRL/H3uAcDIE\r\nFBRo/aXSQ5IYZG2tEI4rruBo06y/1TtG1R8d71d3UO2Lc4FoSQDTJSZj23fw\r\n3hSVuJEvtGzQBpbUaEhEh+B0wR9OZtEt2C219tPEWkt0zxISX2U3wlpv0k01\r\nKglqAMS+4a9Di2XAu2THj/l9An/hkH4WOuIfzEA4XlGQO0edHq81FQNqFANK\r\nqhDKuI0xB44gbD1Fib0DQ5zqULlJWy+WIxtBNpTXpxYFpOB4k2hnDsb2fh5l\r\nTsSBB1pDa9ALoiQjEhGFtVF3WFAbURiv5ka40KSYhWoD4CafIXMvc/MjYl8R\r\nOXUAflR6H/SnFr8rB+bJMoOsALvE601wtC5zhHEOdewUrvjgG4dVUYlvQ2uI\r\noBSZK6RTO5MTL/oB6+u9rOrtCuiPz5Heo5KcW1NTuRsVpEF7Bjt9Zjm7Gr1Q\r\nG6vLjmAdlhNc11RqPfaMavMvNB/00KoHOBNGMnh7xpYfKfjPMWg9e5g7mGob\r\nr+nI1zJKILzDZGJyww2hjm7KF0ygZXxqnpqNWIi3bYNQg6Ng3h9NbG1YhdCv\r\nZxcVHqaa/rQY1YiCTHh/b9Ud04KLdnDVD4dCwzR6dhXbktoVWD2lkbGHFnmV\r\n9eqKw/bs7tXVBE8JmF+GTtlfpICFT65R1J4=\r\n=9Z+V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/tokens":"15.0.0-canary.386ef1d2f.0","@material/density":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/focus-ring":"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/switch_15.0.0-canary.386ef1d2f.0_1658341261390_0.6119234062955499","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/switch","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c3924efef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4cd59c0816497fbd33026e5ad7a72398f9869b7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c3924efef.0.tgz","fileCount":58,"integrity":"sha512-fUVhX9oRD9ZlFWcmzhjzzr4VhMMYId36F++LfcGngNMUsEw2+SCq2QHDcqY7f1OyhZHeCWkUhXi2Wtf+udDsXA==","signatures":[{"sig":"MEUCIQDZUmj8BM9kNYz3qujKLwOaKCYR5jWrh4ALFQ5yhvAncQIgeXhubliBSJJjo4pJ5wkR0jKHftDon2sqcY8bEmpUVFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJQA//e3beMbWNjST5TkvZ6gtb4cdRFLsX3iEPj5PqFUkrDN3O8yKj\r\nzN9n4Pb/qnrP+4nJ368o8oF7yY6PuazJaVBttLso+wbkmY7tAHPiTV91Y4ef\r\nP+SGee3XG1CCHCWDd4SC0lUymIDqFvn6PXcbrbwGYePTreEkaurYKu+HDjwp\r\nzeHKPTtr1YcYCs2t53rERR72qUhH8AQ8xGCs9RUwUkBk6lYSekPvG3HB0i73\r\nFwcwRiChsKZv9pmLWBs3JGdDlD2mv6kKuep0t1sSFa7Ybq+tuwTqmJ4MqnOA\r\nCUFRtpDyApIaG3n9xebCSz+sEWiogxVfPtWl01ynwsZBMzFtRLp3WVefTm8q\r\n1caWHkPMkGAVA3TBefqTB3j6/6U2IIOgGWrvE2g2c82F37MqlXWIMn7AY2b2\r\nK0jcYTVxaRi6/bHbk/xb0y1tTKA/Q366aDCKSaYvK3s/l6QADjmKp3Op8P99\r\ntvEWTMNxpc5eakDYFAnzQ1e3Wj2T2lvfYUAi21umJlO/e/uKHfwzBAsWaOOB\r\nY5zm5oAE0tcr7OBsdWYMo8z1L1WPvoWxxKW34knVqaVmqPfT71suBWLwhXc8\r\n+fR9nQ02bxiqwu94vxZqCM2V06HxC6UGpm54UHB5xU/5Qzsu2w5efN8xn1Fa\r\nZN/FWC66Femb2tsbqKEWjqPCizUVjTbcnSE=\r\n=5cEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/tokens":"15.0.0-canary.c3924efef.0","@material/density":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/focus-ring":"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/switch_15.0.0-canary.c3924efef.0_1658341842642_0.7475182370101603","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/switch","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22fb054dce24942b80bc78dda89bd0482477d2a4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cf5c5907c.0.tgz","fileCount":58,"integrity":"sha512-+nZI/2HDukvz4U5yxGnU3iXPPv4d0faZZyrQrUu6nhiOJFqZYXXsJIUcVj6s8BMxkXD75X20hf2u/k+j3guANQ==","signatures":[{"sig":"MEQCIEGZO+Iw9eeVN2bTKUCoK+N5D1KmeSZUal+4lJugjC93AiAf9B6cK6+5kaDzNoVfMWuFpSFn9LRNeT7btSYXVI+dwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HInACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFNg//TgJpwgqdZvjhAuYH0WvUcqrlskPJaGLSjkpqM6jpXO7FNA14\r\nbTcspiRjXimPRDatH+kt4bhXwN7bDtMz68rOfPeovrkfRpjtC3XyfuaLvNIR\r\n8clEBb7GfLXdfjPmfnZhIIcNlj7HkB3LyBOodzQVZx9Xj0XqZOzbBAENkscy\r\nejACJvKxxrOEYUjEL4gxSaXDDLdjPwLQRLeHhpELtuTr6jhNmF0LIVhzF6sL\r\nTWqm3ol/ciJsNlBtp0L3phdTr5S2fwmJ2Wd5YU++q0I0Zf4A1aK2Ylm/4kiy\r\nOJOmK6kIeIBpQ6EwIHo1pCZIr8spsr9hmnogp1s61F+fx5qqNnik71aUu7CN\r\n7kqhiliOgbKbPvrxStKbHPCWa4+BnJJ1EcNMBRiUu3f+B67s5MfRXyVAHkA6\r\nas38G0p6H6WsqkW/gKdhSNmsENo6xtfNEBDPhZx14uwuLpdJCdForvSfX+qF\r\noiUqLORseLFZfqtu5tIEtCc+/oSz5SUJf9P6A2PuPB9j7rtLZUpYpwjRxnmC\r\niv1RqBU6AXofIZdvQ8hWczTzWhPyyBAELj6gRU53ebdBE6ZpFaHsL76kpWvq\r\nDsK1TuOaOV8BgtSrvS4/l/bLAO98pQ9ykiMMh9MAJTFlv4FASATJjz5SQI7c\r\nAyiTZgM3OsMsoNNKHqjl9gsxa7OwB1Wk2Iw=\r\n=LrUf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/tokens":"15.0.0-canary.cf5c5907c.0","@material/density":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/focus-ring":"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/switch_15.0.0-canary.cf5c5907c.0_1658352167105_0.9288281933526705","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/switch","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0617e2319.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9431150de7952024f5de3971b3392808cbd2e4cb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0617e2319.0.tgz","fileCount":58,"integrity":"sha512-lFNaqdbIvzg/LLg0o+rgOvO8h9po2Jjl3axhvgJIy6svdgThpR5lz6Dnl8uwm5BLUEiERqEnLzRW/JVUrJvqsA==","signatures":[{"sig":"MEUCIED8xvQSSwJUAA1y/qoTi5X4xe963bnQ78FSqXhbvzsxAiEAiDdHU7OQlJIhIDuKcS1jhgka0xzEA+zc+MNWWNoQmZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZ1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT/Q/+NKkRmIPfV0IS3l3JQahBsyLShOKU5nq/vTgnC32yHnpe5YDn\r\n1WnIyFYyvfyS+mj+Qp+BiZoUI0Qj+kxCw+Bt+yrSOwkpwXfZsB42iHw0NqLh\r\nzKzBe91Sx8WnfU2C9f1iCgR7etRJ1nkCMEZlPfe8g7IVRQw/iZcGAM8IBmtn\r\nJoQenY6sB7VyVE+URS5wXEwXiz8F5x/N6jFuXMIhlMouFxQxZP9glzAg6QyW\r\nka5ttaCjyBbGwG9I8QhaR7r4f7JVXWmNrC3e+4Grs/14GWFUm5sRGhdqkGhI\r\nlRd+3l5rYqOpK/lyPVHUOVOtX5zWRkDyPlpAjKLq53aO1hWDEwh15D+1bCwF\r\n5id9m1Ivm4DQmlqMFTLwkwvqtSh74Y+XdvwqXtev9vP4ugbqXe9DV2GAExzI\r\nB9iCsFVYaYTujWDVZpq2jBkJjHqdG9+KcFm6KmxgjMUpHUUQ7BomkjiLKZVM\r\n8nZSB/68DhS+MJMPuGKeb321QwjGzdbWZrQwy2Qq0oF0DTgqELsZuylfD8ls\r\nhEITZPrUrIs0BSmGk2bePRYvJQl/I63Iu3XuqVEyPvQxNMnbYwzv8zSWZ71I\r\nnRCyJiSMCy3VPVXpBjdlK1Bs8vRiTBhNmDUpU2Eh37eG6vXAAuQ5H/DKw76x\r\np1Y+RoNNzN7gIOHnmfbyRpVA1MM9R1Dk/TY=\r\n=I/S0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/tokens":"15.0.0-canary.0617e2319.0","@material/density":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/focus-ring":"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/switch_15.0.0-canary.0617e2319.0_1658353268832_0.2150234436275278","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/switch","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a743b7967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59b65321407faf906c162952944b78ddfb1d52ea","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a743b7967.0.tgz","fileCount":58,"integrity":"sha512-Fr0mJJ1FOyppkekYocSc3jiUia+2OcQaP+BuDu5KrEQAHnGH+YIdDSWqVK44QP/TxU9Qry0O9ph7rBNO9WsALg==","signatures":[{"sig":"MEUCIQCBd4vzIHXRH1jX9oHkYZajCKL7X+eTJgv3QN0y+4ZQFgIgErnAf94kBAFuYgz4jRVxCoK1hHkutxXp92YJARJ3CnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HprACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQpg/+JuOLaKK4pwTS+QQjoLgJDJVnzYVnpBmq1I6zoamCzK7SpIji\r\n4mD8Pi73moNopSxjdia2VuyoyA99DRwxY1d0l86iEtKE7ALQH9f0QTgoDE0b\r\nsMW221B2UzX3XjhlNVnh39Ij/Dh/kUkSLhY4rD2d8SDOAFbQS6CbaqGDQl7d\r\nPMfxD1v4nYfJoyQ5+oxllL92DRbRoKbOeBN1/ft6uDBlX+K3G9doR1t2Gyyi\r\nveScWDmpDFu4nROJe0UA/YHCTG7i7hmqYuAwIaM+wiRJMVP1iEuoSJ+FX3Ft\r\nuIYti3ViyBavKRC5ZM6zmqul+RQExnUwivW2CxEUCtzqOc5zmcK5LUMgytFe\r\nAKnsP5ch7Knxx5YiHzezPEBIGtyQFqsI8eTfs6vRwTTqh2j876XGXLEImPHe\r\niVIbUBsIPElaIH9YioHw+Z9QIFj8hMzXUA66FDPqiYOrh/GznebakO40o3+6\r\nnLa7hYcFDiOGfJj8xuief7zgd8+JxDogaEGLBLcWW9V/Xn2VO3dSsaWxq5k0\r\n21y6TgSWxnbcdGrFjNaSvwDwi0iWjrZ6rz+bwmDRoLO67ImIhDgessHr3FOq\r\ns7+3BH0YqmD+2mRMWG/3Q2HUx2WVevHvvDKhsyLU+F7yA885bF0e3OiSuSof\r\n3NnESpGSxMW0+dcPZ3gYu4MQk6I3wJHvsO4=\r\n=+r0R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/tokens":"15.0.0-canary.a743b7967.0","@material/density":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/focus-ring":"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/switch_15.0.0-canary.a743b7967.0_1658354283650_0.3073578390614069","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/switch","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94165c14bac939da32bc43e6e5a23d1eb35e840e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.69fd619d0.0.tgz","fileCount":58,"integrity":"sha512-aXv36vcFNg3cVzLG2mA/1p8qyD4iNbOawnDSDmyhgaUV1q9EJ8asNXfSLselc90kdMrv7/sizk73K0wA9VBuew==","signatures":[{"sig":"MEUCIQDxeoIFwbHKAjPi6rAgEwL3J88tEnlhv7sdwCm7ea4tJQIgOggbpwo5BMFCkj8yZoXP96vhAzWIRU4CVXfwFFVisG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H1FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTgw/+OlvsXbPYYuZqfwX2oTgYZs0k64rBGuE+quCT1rFEQ/MXmAbl\r\n3t9NXhHz3b4BpiO/LlgIZgQNnQnz5RkYRF5kbYeC3XpN13i39+eUbvimt7v4\r\n/jntCCQ/6Zo+DG/FK36Gx9VzhK95ny342PDBNILYxLCal4EjctmD+uGJIijh\r\n42WP9kW71Le56C+WsR2BEoF2++Z33kFeMHqblZCeX93SWSFt3trv5lkAokuV\r\n3ytXlPy0JSAbtTKxRPXOR1WpIveE99nEY1ZilxrJlFSZ3B0OxQambx+ai6yp\r\nLiOKLsmcHYuW/ZVNALkO33Icq1jheopKa5ebutUh6BCmJsP9YJid/84+rR37\r\nFMdwlH0OCZcGwTJpE/lxqJzXkOSPNwkHhG6bkVLyPVNRidiUjNQ1pnsb6Ebt\r\nyc9NYH6iyAK6yRPRDuTQPu7i+LkXTIoWIk+S+MBaWrl8BGSXsv+JeDL+ODWn\r\n5cpwEksz3nDnqraDC3wLvq38288lJk6yatxmSLYH6rCaXIanQLs5w/Z+oUiz\r\nP0wwn/JLg5EyOiFKapJzHimpLo1ZdC08PEebdQs8CJmVWtfDA6CEXCjbklKJ\r\n9XZemjBCDcHdXvF3z+QdVeTz5Yur+44qj8Xy9PYz3rfhNgmZfvz1rfDb3bi9\r\nR5knwctDe1xFIErPK5UmXYnRXPf37v1l0Tw=\r\n=WPmN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/tokens":"15.0.0-canary.69fd619d0.0","@material/density":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/focus-ring":"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/switch_15.0.0-canary.69fd619d0.0_1658355013145_0.3786491240833443","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/switch","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4104bc8d442080463e529f666d6ccbcc51d2ffd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":58,"integrity":"sha512-NCVxZKMaLtJGzSl/GLdi94krH7NJ4z5TgSsBsQAA0bX8HaHMNUzVU3ZjHqMnUJugEzBAb+lCkI5KXqWrSkuV8g==","signatures":[{"sig":"MEUCIQDspWAWVGTsRSr8c5OPlFGz8HyXTgp/4NjCkTwvicwCpgIgUD+Bjc5cyTVMYpm2d6m6iCh/DzS98qxnSCDUjYLdIGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AVQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryKg/8DRKji9hrcA98dUQtCwYpLOaBFHdcsNkeIE296H+NrO9AQvsB\r\nOxV75aRfnzjKTtWS0gl6FupnOYaG/UwcKoEAi5rycJtZ3YOytGtFg8BHFDMq\r\nZZSN+yoPapThlwhKDV/ToqUoFVsO5IMj8EYW7RvJfiiWcqetEgE8jzcMRotH\r\nmU+t7lELGLn4TqSMTsvHQvSKgEGoKWvgwjwUp9roSy6/l0iaCOrynStAK/VB\r\n2G/kI6xm3cM/Mtssrnhybq00SgctW5YSpYDvH8klWY+aDtOdmZ/s/dIreb2s\r\npzKRTJ6bfUOrZZUPpnj/msjg3W44jD1Y2B50eIuhha4pDNMHFAMiYwCiZLaZ\r\nMKuEG9rSym4xIJg7Earo7PAj6VqNJK/SIaRAXuagyXLcLD0JqgNBjHGIqbK5\r\n849pe7dfqKnYSlons2igCOb8p0ijStuUrM5OUbsW1Q7zOyIFs/Bgm8AjjdqQ\r\n3BrTprXwQfqSvbntHbCREmDI7a4zbNnVEeeQN4lLxFfa7zsK7YxcidTcYJD7\r\nmypZvqwkPA96zMyUVmAwu0rMNiz5F49WCCDCAlr1xfakfwGo5aDk+g+MIlxz\r\nC5v53o/Lq4K9Rl6F+aWRpYEUwVbrwuqzXhjjGSn3ULoLEJyYkF0dMSfNbncR\r\nBdKGXjay30EPnbs2e5ZKiZUgG3Gtt22AJE8=\r\n=zUSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/tokens":"15.0.0-canary.2a6ddc1cf.0","@material/density":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/focus-ring":"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/switch_15.0.0-canary.2a6ddc1cf.0_1659110735936_0.3705441862346064","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/switch","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eee84aa14e3e7ed41b97fed57f2bf6c1090d47e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.86efd56f6.0.tgz","fileCount":58,"integrity":"sha512-3/zEVbMI1udL7n096nACF/A7KVGnq/+G7KxSzAb1Kxk4KAK3TZjeil1SNSsDPHHUBK7lcoYXmFUmh8GW7Scveg==","signatures":[{"sig":"MEUCIFqq1z2U6JARTNy0YohZcEivLKghpm9umnryP4ujIHrcAiEAr90y6HW5k6P9SX7AzOetrZckieIA+CS273D7ARUrnSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TjQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEFRAAjgQITXU3Xb5LzOUroekRr5wEadiONhpeeQ20ZUpUi4h9sKGK\r\nyUdd0go9Sz5qnhSNXbQXLXwWlOPPowuJ35pWL8HVnKft9j8HWfjMlzMoz62x\r\ncVAmdcBSWU64Ip14yXl75Waqpr3bdc4j8bEmWKgnB4B8yZmn/Gq/5VDrppMY\r\nUvS+1iIVc7lpZTdnM6N0ISZwZYO0dVl4W8Ap6GBlixpFP5sCRSJdVyW7kQWe\r\nLZ+EP3fNMoRpHOQvU6+wuvPc0vx5+PaOCf0RMeikB73lliBUaAnIvBlhIY1M\r\netdJgtJV7EZxAfeB7KPuWM9u/W04dmiBfmy8VPv8q3A3JfhSzyF9L7XH/s6X\r\nJy85DYb71e2gSeDVPx90FHVI0gYvnbv7ucHFRN0HjZ9jwkhskMnIew2OS4Ll\r\nYRnhsZPytSSw4+wmLl+d5RwDc1GvgLARf+pTraci79cZ9upN0yy4102BMR5O\r\nwJB0vbr4SfDh6LyaRf3WPThoQRFqi6pzXfoqjGBGZaubDysRaqoLksfSPIei\r\nIigwxo+QeSuu+BgG8fFv8TZWIt4MSWRr2O/8O8Ss8Y3zTNhDf37jG24M2prs\r\nY61dpMQ5EEF/5EWhiDEKxrelmwynZezwPSAC6J0On4QHyhT8Iu0yZwQ/xl44\r\nFvtujYdzmVFF+U/Mm2XcqDfx5S4v22t22OE=\r\n=VMLf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/tokens":"15.0.0-canary.86efd56f6.0","@material/density":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/focus-ring":"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/switch_15.0.0-canary.86efd56f6.0_1659451599899_0.2707305177430466","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/switch","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a9ab133750a524cff66d0b1e68075c69b896f57","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ccfc24d19.0.tgz","fileCount":58,"integrity":"sha512-Zv+jfYra3l6Z1UZXGluKa0dxGxbU+SLP/zLaBP7v1jKYgjumZ8iP2bZ+R857e7eUNyRWPmr7wYvtdjOJsJFlwA==","signatures":[{"sig":"MEYCIQDI94HH5HA3AUsmc+FEGDjVFuw4s2+W5o/0DOqFre5q2AIhAM8KQQlB4Po+IzyA2PPjXB9lcCU/eIEJWD5vMO0V0R0P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rsGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpq2xAAgyKL6Yb+armfbN5/WhnVpPHX/f7eCqT9fMEq3fOugJGegecc\r\nBIpK3U9dN/i7SlOPBywZDr0HARJ0JDXX0RdynMmKndHNpb7rtbVypQafSeXM\r\nHhRteXuLy6CSVXGoIRK0t0IlytPrN7Soo7ty3yU5HR8cjZZEEv4w7K8GejIt\r\n2MaDJqP45SE3PgAIsuiuAgbjvyauoVOBUm2iRPytG2MMdwokSf1L7g3KeUif\r\nRJWBvkq8JkBuyi45CZ/zdsD4UuldmM+M3A2JdcZTYCe+Tz9lUU+oWI8Dtl2t\r\n/Bw8gAQynnjUm8sj4pHJZAgwgxGDISsei4M10sudxBdNEK6BubCnMAr04QZ4\r\n6KTBUzZN/dkLguiQrPIEG/+VsSH36qwiQXw23s8kfz+0WRIjRWha7sem+f94\r\nQsoy18vm+W9qP8DrYLONc+7DWxO/VUi2/uEJA1cJbNW/TJs1Vfzr7bWFjpUw\r\nqfnL5xOnDlKL0dBEOV4Dx6TcPPrxrpFz/GFoRKudlJ61a9Iggd+3r7RhOKrz\r\nQDebHMgL0y2mlTXcfjxOcQWTi+x4L78K6x1r3iBegiuDixFL/dDbvSnYDYGO\r\nwb818NAXDu/nXHJzgQmNIZvVgMWEAllGZgGOvgM/0ShGglp9RJ+34HW7eEAY\r\nC+rjClmrbOmep/zqTRtrN72juFc4/iqrt0E=\r\n=fS51\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/tokens":"15.0.0-canary.ccfc24d19.0","@material/density":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/focus-ring":"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/switch_15.0.0-canary.ccfc24d19.0_1659550470409_0.6842375332033164","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/switch","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e4570146f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54132e625b7c5a9395f2b4c7b12d7b417b05344a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e4570146f.0.tgz","fileCount":58,"integrity":"sha512-hzpStcFtCEdMjqEmKE7+c1G0bIDXdjyIJU6Nes6mAb5Qe7cOQxT24JiJtjVMSdjO4Os9GAxggcdHWljB9bzb0A==","signatures":[{"sig":"MEQCIESZkgtR4KZtuHALpiZyHJBh/197kXWJcISEM8YTST05AiA5yBrtiefOoCxKkj7pFyU9zYR60UX371jMmoWzO9e/8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfdhAApJBsa6pl/wKXpt2on01+5+pw9WZUEiLjr98X1WMnmIeuaLnj\r\nuiw1wxCMjPTVZQgcpZTODuqdbu1NtRHJ5rcKaUgVcOM+ibZkVE2SjdMg/oD7\r\nOrlmGnkaxidv7TKVtyiYncT4t6U66wwQrfY1AX+dUsuHVKZeSSY6NAFWgRIU\r\n+CfaAc+mfb9pX6pzeB8W/cZcYy7X7xTvn3bAD2n8gkQi8cENOcY2pPyGCi2S\r\nBfhiaJbhDW1C4B6ZM9wgEqLDgWNqN7iyl3GocNLpGV6LRUJgSQr8F43EaPS9\r\nUovMUl4IqceK7tcdFLOQOz62mxk1y2QYsztOWXWoneb1VVOZxsUaepYg1yzT\r\ntA0D1DMhO/3Oa68eK7zZefim3fihAtQFFeWeq3qelUnaylpnqBgn+/0s9D44\r\nw3rVggfEqxA5XPuB698ttxspqEy1YS9LKwmhUGNvsDSwnWA0QJOv+847Xjxn\r\nqI7k2Cymyupy7dfJulgzE/h8yYQpGcMGAMdKEx8EsfjfwlRh84EXfFVvyaFg\r\nQJ9mRaS+p5GS5MOEQtc4vPYiRxH/x/cKN5q/0OA+07XD5HUh2Y2eTGbtIJyC\r\nc9qpW287qM98Fvddy9C1l06TQUTzv2jfYqqeWcJdC+4k8jV37S+/8F7SuJ+L\r\nVOd5C7JSWlTb+KZ5k09Gw0rhiAooOA0FBVY=\r\n=5Oj0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/tokens":"15.0.0-canary.e4570146f.0","@material/density":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/focus-ring":"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/switch_15.0.0-canary.e4570146f.0_1659552105142_0.9200472056155027","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/switch","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e81661428507fca5b4c101d8ad7b4e24c663a7c5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6683a36cb.0.tgz","fileCount":58,"integrity":"sha512-W9z6oD43fK5u9x9pV1ah3TnYDiKv3JD5RUs0eyxi0neJIlej4A0o5D55UvwX7X3XoNseSDqA5N4ry6iBr+6u6g==","signatures":[{"sig":"MEQCIDb991BTnvw5VoUmfjEsbIjIp+1LkfE2UXPH7DJl3RnsAiAHemhwqR6wKIJ04lz6rCWnSotHyNJKExNlgX2CL2Pk7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6srPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZQBAAniyugvXzDQmdeb57m0I3pA7GVMmzHNNmfvLmiis68e9tFkSN\r\nUbVzCCnAHeIbv2bkhDJznd2ebHgKgFr8+H6Jrvn5T1eUGSDU/Bc/9YAENTg4\r\ns86OwNY49lAlfguIrJOo272o3QKmpTg+MPhhzkOV5LSUn6DF/QvlbekkO2q1\r\n76rFCzvAgs8VKZZyH8EV4jCNay7rd+TgOVHu+Z67IbKzCUrLWtHVr7Xg7IuZ\r\n66B/6gc3Hw/FfnHF7UxO0P0mUG8qdZiwdKhbGlsv/U0LWu5Y7pEs6305E8T2\r\nJYjfx6qDSrMaLHW6eLeNXqsJCTpqDoUUhJEuc2oGReKpu2iJGgUdsP6GjSry\r\nLdD+PxuHHDbKyrLIgrgFpcvm9s37KdKqlUpf3BWWSU8j+5/M+Pm6Chd+A9bG\r\n6K9ySmmqpdxttBphbOkPC/nVbgWaeb54XrKUfOYk+b2ONzAI/M+oQ8NzpgeJ\r\nysORaxAS3dclS6UTAZbaIrZF3MsUJ8hvRfpckd2CqAzsXY6+jG0sbCyvdpal\r\nab2FizU10WIK+/fP2XwK45VW6WrLjgLdDXnsma2EPvhEeOf4bd/lkjxgT7H8\r\nXhC5Mkfn6N/Z8uGNdpr0Eu0MjqNkEfo03N4CwTHOOzZBE6/XNfBKYi994inZ\r\nDXPoHNoU7QlHysbZN0cdyGdoXg5lCvQhVyI=\r\n=xKLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/tokens":"15.0.0-canary.6683a36cb.0","@material/density":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/focus-ring":"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/switch_15.0.0-canary.6683a36cb.0_1659554510917_0.18349951972475376","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/switch","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.10196647d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1af3972bdbec62e9a0ce5a2f32145cee8acf9070","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.10196647d.0.tgz","fileCount":58,"integrity":"sha512-pyepp3g6Zf//2OYerE0gU4kpPX1ZMst64KqTqKVBqf7NZ2FgAH0+DaSNwdfzVeclacdTh7RIEldjeVli9Ny3iA==","signatures":[{"sig":"MEYCIQChbsvUjj+5Monz7MVsyxIK0sG5pxzmGu5ZhsFxp5YJSgIhAOcd2Yp3DMZTUJSxATRb0lHguqhYn30cLuKwdwjmI62B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8RA//b+ZRdF5IDNZKepACXTviEgMzPjVu4Q594yWiq6kcqGFH6jSy\r\neXaHfQg6yI6qBL5ZxQwQHcXFbQzh4wotPPHjC3sRyNrVRx0D/pQTzrEueQE5\r\nxp4Wbrg92X5xCqZIJUjtk5esH0gro8Yd13SilTkQWSwTfUdSU4jTG8CfZCAM\r\npBtSKxmTCF8zjSsnZ4dlpR0bQDG5wwKZtkYhNEiyzOPRxmRN0e8KXA/Ysb2U\r\np6MsAO4DRtna0RAWXXF6GPVuCHm3dFdL86Tm/K0GNxkqz/KkLEr+gwrKqmT+\r\nSw0Q2HAF+ONBO1VOaEESmiIbMQ/wDOz3nA7+7XrSk+ADrLKrr8uOlmckayyc\r\nY1r0tvhwTy7T9Pmy1RcDd/I39RQKSZPahCzJO6S4Gi/ajLzDJkND4Lvqz3xp\r\nss4xdnW4x3SvdqXoSm16byzxE8+ZmX1vmb2Af9rZmA/vCI586XjqeIqMDnPS\r\n1VdgcGme3h+CBnjhDBbTiU5BCNRjFPHp9MqveM1IR4QUtTiAqBnx+ncXmLNz\r\n2ISsuJId0nhN/OL/mQG4prH8B59yOJ6n1pNon8jib0huI5O0oWEFMjfM0tsw\r\nT3+/wWrS9tZoXLxX6xp3FUsnlFuoq8ZEWbpJ1QAIeIm3BZoKSM2/Psw9n6Sj\r\nLGoI//O7gmsZ1lQTKxI6+MtWEh+WkW640QM=\r\n=XKyh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/tokens":"15.0.0-canary.10196647d.0","@material/density":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/focus-ring":"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/switch_15.0.0-canary.10196647d.0_1659563683041_0.9968370757217777","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/switch","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"759465b75363038a93b5057bd5a40bcb56961344","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b20d3d73c.0.tgz","fileCount":58,"integrity":"sha512-YMycD/S0pD+dZfkaJL81EKENpvJTpK1MalHSnmw+B16ZGJ4gza2tbEhFonYp+8rZGc0rnoYL0fEdO+TN6yDmuA==","signatures":[{"sig":"MEQCICjPeyF2cECmxdCCVHw0mx1JgwGYQP5DKwgownC1NTOFAiAnosLfwn3yO2aHHhA8zux+ruuw7MbFbF7xFYpVDiKN6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDGA//eNlRkRNAlsQ3btZSpXxxoDfhKGj/99srkINu3hjPQf5ppNiO\r\nSzegKhdMI3r3hcMq83MRGsC3mqTrSZ1m0xaB+6Q0+/15pkXBFufgzBYPHVY+\r\n55Me0nS58owCpdVAIDW1lbV9D/mEaVBHYHXXq5/cnKNHSsG+TWUbtfZUbjZ1\r\noPIJss1Oiobwg2NzkTNeCoPFfs0zEFkM/8VOVmaGVZNWLQIQ1y+Jp8hUle3v\r\nteaeEunSZDpoMdTIpbuDHaXWAnwlXmdBIjggpVJZ5yol148iMnoBAX5W8T/A\r\nRnzo7IwXb2zkZcK4NRq5E9A++zpWCZHMhCKhFpBtkrK6fE4mzrosQzVXyjxh\r\nQcnoB3w6o24SsOt7H5Qf7t/M2gfYKTqkmR5Zh+wu73HTixkfOXPjl3ljrYf1\r\nP7C2nBGc1Orr6LAHGx8kZNl93By05AkYVlGmb0UIEyZF/5dtX1mAwE44efal\r\nUd/w8IJJsr4eyr3P7tTU5HHpeWwTnKz9B1lQTqCTf1XlbiCt1hxzdGi85Zxn\r\nZ090K80tzSwb3hA2WBxejHM19ZKp0+ABCzUGCqA0JUUhEduSIMUtYqmGvlZO\r\nF/xhnA3twLVeJu3aqXxAwGPL4mXA9u0yrlq57y6tUwPz6ZsLUlqxClCM1FSw\r\nDzSITLKpQbs2g3ZKNPlz+4J3QXjnSn/uLAk=\r\n=h1TU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/tokens":"15.0.0-canary.b20d3d73c.0","@material/density":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/focus-ring":"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/switch_15.0.0-canary.b20d3d73c.0_1659653032486_0.021708819683322167","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/switch","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19659cf0945a7456d676ab8c3aee865401d4243d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":58,"integrity":"sha512-2glJ6tomeckoZC9C7bD0lhMFc9GG4lkhKzxOvFaWHyWIBXyx92N0HFRYF90JGE3CZFek9Gl4zzgwsPkzWkCf3g==","signatures":[{"sig":"MEYCIQDJ7qbOLYPmB7Hlw2NJjLHM2JntKjSHrb4Jw+XD6v3JvAIhAIMc7kXw7gBO9dSjOPXvnko/2SGa2pfwiDgKa9BA7sZB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nuIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEFxAAkUXSC3/yuYscHfNkhbmgNt3WYivK//5y/GcuRZIukOZoyBNm\r\nDm/bbe7zAQHLxLdSwSQAq4XSvpRCFp0g2GikyuyOns8uw+foqGF4pmx/WZrF\r\nhtAynkXVMhxtxu+lovofwmTRyqiG5xpecJ/jCRbRSNG+i6NmF5ewx0/vSNt3\r\nF07PxH/fk/5ujyYbCBmwNqWjBeG6UwbhktJSD4DzB6SUQ3WFA3+xn7Tzv/jZ\r\nkyX0n4CQe/gkUnQJCaIPCj1zfq4DyNrXGMdFHe1UzMQ8l7Q+nY8dXbyvrRCn\r\nxffcPL+YNccOIOk/Tg/VLhORGYv3+0Ct8yfjbfu/h4p6De2RBTPLJoBK2qBv\r\nWUK57XKOBan3UHvpEHtPsVsuOQ+fwgGF2EpSN0R3Wb9R+Of+ommuEa7fkmL6\r\nhGjRdgGsYQg1sLkE40I+n+qce1AkSmjwkzaM4xx8U0Y4wy2Q0MF75KCeNDca\r\ntXNQkq2qyMqM+uyJq8Tvd49ungkSnz78fEjEIucjtRpgk0K/2L4TRyr5KHL8\r\nxM+GFXd9Y3DXY+p6KUFtPDBpPJp9osFBd+gGvRAd/MGi7lqDoHbVj1aZSc32\r\naqlZy3lFEe515TeEAQroW+74307gVzzd++BlcBM9v9sUGduZ4asOt+R79vAc\r\nGw8MkT6IJPAI6TEyKoxAYBrKRfu8L+t3I24=\r\n=Hy8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/tokens":"15.0.0-canary.47c0c6b1e.0","@material/density":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/focus-ring":"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/switch_15.0.0-canary.47c0c6b1e.0_1660058503814_0.4062456144575437","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/switch","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1314743fee920fb8204aaafae7add93aa35a73bf","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":58,"integrity":"sha512-sEm4ktw3eG8MeVtaZcLVPzozTKPcJn+3pfnCjkGR1kqGOPQRHNuG4qJDq/gUTRrP5c2cnVqNQM8HwzPVkx0NMA==","signatures":[{"sig":"MEUCIQC8HTTd1ZwLbZojJv+6zFmnZsit/x4va7Em/SXwuMfRRAIgCWT2zPbf1PluA8e3v59ySrWzj3hmCyFv0wEY4aXCzsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTTA/+KRwflmCyqI/pdxMNEEo2gWgmR9KxqnmPk7C5Y8dCzfl9bYc1\r\nyosl10Ksif5yJ9uT7ktg1ytTWT/t4WcJjl5+DXZfEd0brqauA8zDLjYwYcr+\r\nEjp6a5AZ1APbnD4mNRy6pFOBy2BRuh8Nz6khJk3+NdkHWhbiL+UOeFSLbvvj\r\nFQFq+Y1OWtGiQgJul5AbDQLsDR43pGiT2aSSlRkCl3kx/8MCHTFt8/j1fHJV\r\n7d28/e2kwmtwmeR9KAiZGOXvc2DpJu6l2Ne1A+BVWgKokIzTUBFctqDRIK+M\r\ndZLhopXf0OCP66k6vsuDH3MouNTtgAgeGc9/To3X4hrkFhQAA8W8YQsZCrC0\r\nKzeOwXtWT/5/2JPi/dX/8AtPsO81DiJr6gHu5htO/Xa8WX97Sk3rSCLFeyEC\r\nGebvA8zcIfrI9c8IqeGVk3OqqfjfmWvIJrdB+xSMY6DOc0Tpgdto7E+0BMwk\r\ndS2ZAZJpi8pIWAgH8aOGgJfw0KrbS2XRnEY/xR4ezCcqZKdfgRM06T7IFUlQ\r\n8MQeLdysemAb/OnK55RQvOu5k6Wjpw/R1eV6x8sL3CIWw4EYKZQonBo0n2O/\r\ntH/2KoF2Oy9JSkwey1J4+xnsJC4xKsmHdVMLaQkHucd2977rb3W4CtjPjoUt\r\nTajn+sqWmA8YkEWbMR/ue4giK3ZAcve4llc=\r\n=QwJu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/tokens":"15.0.0-canary.0e3dc8e38.0","@material/density":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/focus-ring":"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/switch_15.0.0-canary.0e3dc8e38.0_1660243611417_0.9943291575277629","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/switch","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb75444e8970f829765b13609e133794cab98358","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":58,"integrity":"sha512-/YwjQIwD2DxdxZoFeZsfHwXE15gjknRSZO/AaRgxhX2No8ehWtpNpVL9tY/Is2nO9g03nZD+CsnZYiabtNnAgw==","signatures":[{"sig":"MEUCIQDKKe6USQuPdzRGpXrWmBecL+sZhRbfW/8y6yTQk2m5cwIgfeXLJvgjJMjovnVZrAhTzqcEQI8L0A0wrrQkiL9eZu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpb2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpnyg/9Fy+vKTfDt3bD0RLKTgMVw2yUgT9t0svVKt77Zv7tzhz6sDfb\r\n+zgNB2Pjbgd7j0mrqursbOwlFc5EH3ago392IKX/8Q7VJbYuR4Rq1ksq3JoE\r\nqxwDKjtU0NGzkERNDQ+S7lnpivcm2ueaWOLaoLMQb2a6cIDpAQdsbcDXEFPv\r\nCZm2tBWq2OYB4oC5ZhjTtrW6021JeqH6RDgzXHynycdiIqXL9spAV+29fv35\r\n4GF/CF/06FRuhwL1BqgUWSi3rPoOpfb7+xyTZ9gOMV5PIDaevI7FsQ/SbqOZ\r\nq/lCl+tofmBDmZiW7iYtGKJFgjcKkfYavfzEiMzZIPsi4A9l6xUVawbclULa\r\nVf38PubxOXYw/PQ4PXJvt04K8XBhmdBsYP8kbO3688b1Hz6RJj8NzXwz8WM+\r\nFlQJoIvC8jL6NeXCB7V+sHiPxmQKmRkCzE46MC9j9GoJCP18jddSqzu1A8S7\r\nhAvfEjOn4mAzIhbuCNdNtwnA288v+4sgva4N7LnTjR55roNIGgn11giV3KOX\r\nISDZStyQyhW0VJsxLaXYso2IJfhPbaIGIfC01uHDIBMGCSTUhKZ6ubn+MzeM\r\n6u07HaAJdEDraXsjEYXTZg/H2vjXe0O9O9hOzJeljY27u4Me5C1jiv0kJ9P9\r\n05yTHpWx+h+XUJr+RsENW3O8i74CXoQlpkY=\r\n=tGQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/tokens":"15.0.0-canary.d5a11f1c8.0","@material/density":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/focus-ring":"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/switch_15.0.0-canary.d5a11f1c8.0_1661900534270_0.5943562245273559","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/switch","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.bac992a95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c7550eed2dd1ae43d815f168222d71039693b41","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.bac992a95.0.tgz","fileCount":58,"integrity":"sha512-k+NaOE8gTqhwLqpsLhWTD9OBe4uBvm/ADhzLjlRB+ddXR7u8vn3wo+Hwq5jkzDyT9lHsnofKE31IGYbpSqXh5Q==","signatures":[{"sig":"MEUCIQDW4jJdy7zgW/q6ZKFqz1agQYqGSnmIXL5a2c7LbDszUAIgASWqKv3yp8OsjSg/OCrhOz1XBvt3gUStb8BUv5ei/YI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFoIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJrA/9EK5Qu89jicMCHEx9VLwXOvDoSFMoIQwic/WjTb0nJNd/RIc9\r\nxrdx/M4qtyTi0Qs8sPkRIElaVO1fj5Zy/zJlBMn/n/LEBzdHfn/czFv4jt1O\r\nBWM8RF7dO+NqbUtUs5X5wbZ4A70YFnWpz5uI2MKyTHtqZtttA0dpvfM7siDf\r\n/OpKGxq2/NkLr2fhztiwJOnSeGOwAQldo+fWg6O5mOtNDrMhmwXju3Y8UPbI\r\nNO7whIb6lpdbFCpvln04ZWcbPPwyYmd4vskzIo8t5JmMFsVUN8lcDuE1VktQ\r\ntJojiajXWZwuNGEgHM0wgdM7ZmXT7LN/nFTemGkLOBUWLlVAPus0VV8ZLquY\r\nY9EsP6jNPCwohS8uKknUt0TjurgxIhGeTHbUgYODO5aS8Ykm9YGlEWQ7+e4H\r\nCeJu0tiY+D0bn4xY1fqrAPmFckrKw1+2m0HsgnHcOCPBGIoz8YJO0KOS7cd5\r\nFU49dNSmhgKdS1qSeLtdlEiTab7H4zV2AXaHKe/bldSG3H3plViYJpaJfvjP\r\n7VrY+of2yoaPpxDgdwDTrlKYoBUCpHsiLkxs3NxYMuMpceDp/TaWPrUp0zhz\r\npIKpv6bNQJjxG8nNyu3MWqWTJDgkQJ7UKjRKnsUvn58JHnEVIShP8ZGcgCyE\r\n7gBKFnC0VbokNOprA8i4NuDYJY+Msc9rsHA=\r\n=WNwa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/tokens":"15.0.0-canary.bac992a95.0","@material/density":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/focus-ring":"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/switch_15.0.0-canary.bac992a95.0_1662016008490_0.34142941975021945","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/switch","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2daa7aec77d12d9b2cbe93859879bf9487d35f8f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d25f3404c.0.tgz","fileCount":58,"integrity":"sha512-ygUipDKzBr6SQnyjKe6QKMZR3uOLxUBvijvYJiS1IoFGuoTiLTAwz6jUqD93RygujwOd8PypbZhH9+4nVf7TAg==","signatures":[{"sig":"MEUCIH55GoZh2jCMnxvAAdn8y6kwyPpWwBnm9oLEvfo+aTNEAiEAu+dCglhORwfBEVMNQWffrLq402vt8UlmFaZyc3KNPeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH9nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+3w//R3Dl0K4mHNZ5Ds/RUmIP+ePXc5e5aVKzTeSXQxjJV/FXlgBZ\r\n2npUPsWghe0JqBdSFg7ieSsf+Z8dQ4ZtjJSh0uRauxjZeQUwRszMHfDZ7Y12\r\nixrBgsO0yOK5GD5l2U58saK+sv8j9pSuamt+1Pyndij654ZUxXCEsytunLyq\r\nMrZFBI0nFaKux2eMpyFlR9pCU9QBmw1iogKyPYf/jlojRC/T0g13l9yR8lE9\r\nCWp+oOX6rdv95HMklHl8i1JkyUZZaFFqvKQlzNVQVs6qoJFxSiprwkZCXmya\r\n9QHaWobXmUmdnZNipGJzDkh/anaMUymnNfPJOVAAHKPRx83z03zNdqiTZl45\r\n4mLht1f7fRJagck1H1Yeld/DqKo+lA+WN5MmrbOlN1Xe29ZXREhsJaGJllWq\r\nuRSjnDmyo4j9Aa9tXK8kTG4mJwPaxlvmKGmXT/GhO6UHMNwXe3Qs70n7FxZg\r\nZIvv729gjKcG0cO3dSjPlh7XZ4gabbGFq/nQIZpUm9CNQmYgEEncE04oEirG\r\nfEho7O1yZxjVW+lhuRDQHHgpcdkNnpWmiMAMq2bu8e7YOIe2SsMPUC/tFiPp\r\nrF/FojXFfSLCs2Ij9uCyfGw8sFponh4oFD/JMRBZcwSe4JvAJ8+ZJC7NYx82\r\n9L+A5jCPn/U56S/pweygTpKfS/6JNqwPY6o=\r\n=OqbM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d25f3404c.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/shape":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/ripple":"15.0.0-canary.d25f3404c.0","@material/tokens":"15.0.0-canary.d25f3404c.0","@material/density":"15.0.0-canary.d25f3404c.0","@material/animation":"15.0.0-canary.d25f3404c.0","@material/elevation":"15.0.0-canary.d25f3404c.0","@material/focus-ring":"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/switch_15.0.0-canary.d25f3404c.0_1662025575040_0.8866862751817242","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/switch","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"742aab7c320f1f30eaf3614250e6b774a38c88eb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.920d8a79e.0.tgz","fileCount":58,"integrity":"sha512-QdrLG6LzPp1DPDIOsN9YxNSuWbR1QdhB5AuZhD52SDiDJAKHp3dGg9SRlWDWGjj6lMZPorSZAaxaY3u+DwZavA==","signatures":[{"sig":"MEUCIA0iiky9G7l2vTBBsnw/Bs6N7uMa5bzOP/d+8fj2At77AiEAzr3rKmWHGosnlSYskHPnqzDy9pCLFWJzgdQXTdS2SMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpciw//b1hdUr9VSLJonH5eGx1oeNbY96xijm/aRUFSfMsEaciaj59M\r\nmzu4IhKr9NJZ0Ihg+jSVKnYKGxL912/5abP4cBEfTGE/nFNVpuBaIBc9ouVU\r\ngPOehgtGbENouv+PDzkmZKywA//jb6H8e8ypDuxvZSOHba4rb/gwjGcaHoSw\r\nNhNfdrjvkft6ASVsxJvpJtGpBd/CXkqGQ0RD0FR8bKxznoghOsZLuFrNH+VU\r\nnXOCh7lWBIOG8Dk1JHlFfW3XQJ4afFfTDP51Hm4VdzM027/36bsSIQeZOJ3n\r\nVnw9rpbiANVMY+6/x4wg10AH7Eh20AicZ0p0Iyz5+LjuAHFuEpU4su57+x6v\r\nWdoIHHeSRpqRikAZp/BEESd169fsybroH48RHJpwZ7jnY0gFA43IGnpbPJhl\r\naRfvq1taP6hiwTr8jhdQlgxnpW6OVjwCFi8kqTDbTpbysg+8afri9fAixaWe\r\nG3RjtQVUgpbnrPi/8Pe94BB1I1ZCUJC4wp3wcf8wcpEVAjNQXDwexLbHU1ma\r\nW58Qn7kxCPmMTphq1+1ldOPPOepotFboUnit7dzydhbOkvDUIYoLShUKxrRk\r\n4F3Cn3fLVWnUoGYkf0cUi7tY7Pt578VzBZfjiDfNPgKat5JpHnPqb7NKBEY2\r\nE8ooq2kfbOR/Xa01eRVSL+fsq43Ob7aybZ4=\r\n=MktB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/tokens":"15.0.0-canary.920d8a79e.0","@material/density":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/focus-ring":"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/switch_15.0.0-canary.920d8a79e.0_1662063717144_0.9851266781460173","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/switch","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c363f267b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cfcd5d3b6a2e7b404e9ff062fd4ebeb9e8019ea","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c363f267b.0.tgz","fileCount":58,"integrity":"sha512-UwC0dx6nrsfWcrvNuOB8XOleitD7R2EenFtu93Q/0cFJFYEzpBErKwNx/3eBsTdt6dwGzVpfP+U2qIt6QpBrMQ==","signatures":[{"sig":"MEUCIDZVmLw4oiXB4unSL3x+zo60tFj6odhBbEA55JLfajyWAiEAl3DBG6B2QKjmYY0w2VQXVHSwEOBBmAlGvYD1TDkY9SA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ2A//YEpy77+Qcx1ud5mcewxqVfp5x26aazbzJ882x9gPfCo4mrey\r\nuwfc3bc8KylLvtp0cWspJcJPfwmiKaEZCR5zxvgxeVFW+y4B0ek8hu6xy1OO\r\n27JF46bVmo4daPL3YVuir3GjVq6yzf+aW+Oi0+BnIvhq7BQqR7PiTQ/+4iAi\r\nFeNyQUdg5lLEJVyTNZMwNab6dNbnRYkWcfvQKuD2yu9s241lFOOd1X10PgtM\r\nBpH3BRkfSMrZmjoshkQf2Szx+fO2vJANYVv32xBcgwb2kgIJ68mxVqtT5ZMl\r\npo+OvXzpmoBCFRnjPwcRTSc7WPEKTzw+CiKVC9qRiC4OWLg8BjWDacXJpjam\r\nV8tJmXP921Gug4MiUZZAZxhR6/REBpvKx4zRuQQAzL2uz5O2zDuOQ20dolQ5\r\nNpxlOn2wHdUW6Yu38bMbG0iNwl/q7+9ty+BxikzLK6Vc8GII7rWtAh2ooJR5\r\nB9ExzG7q0DlhzB12Y0oElbCiR61jsN+NSv6jfBO0tamWhyOP0AY8JqaAwqD1\r\nVM5veUwOx+bDsHmDaeMmLsxjl+QoVU+sMnh9S4VmB4oaEoQQet+tw9AXBfZO\r\nH4OY8APJ5XPI7CNaD45DEP3bIsQvmPJYZJhxdjrXP+zPZALqvX7LCnDiMBSo\r\nuRtEq7XGkaAt6t14zDlin2UgaVQWx6hTuEk=\r\n=/evq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/tokens":"15.0.0-canary.c363f267b.0","@material/density":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/focus-ring":"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/switch_15.0.0-canary.c363f267b.0_1662067153468_0.18483732402041042","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/switch","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26748033eb1a9cef0d82c97137655616c1325497","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a4eb4937a.0.tgz","fileCount":58,"integrity":"sha512-3GEIFWMr+fIGxnhICJSaobXadCzmISyX0YE30xlhN9W9G8r79tX+NnTuhEQkZHliZsNobluGAZLsVPaC1STVYQ==","signatures":[{"sig":"MEUCIEmBfa7Qe9GjkECbWjfxVX4mXN8ffzEfqOgyn6WFOXFoAiEAz0wzLM8N41MQHcgGWLMvboAXqzt4r5+7N2s0rHtqbNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLTg//ck+SxYWUIGjHUC3W+TdeZVPsFv7DKi7yqxCxIw/P4MphJQpn\r\nIWeWJIEixyAgb7ooh3FMn0A0bnWT2DvcWqT1vOaMCNkXqosUo8l4JUM6F/Zt\r\nV9I231gIqEYKEvpcE16FCkGGX1XzQc/IDdkD7E2cJf6MSB7WL4hDGuNlg4I9\r\nP1geNiwNCpjZp+gn7jeJuzGOBhueEsZyjHoTJfFuzEksESOhH4Bz8wUCe/1d\r\nDjgnYf4zVDJS77xQsNRCUtBp2fsZtXz5TCXBXFW+IFA0ctjv0hQGhdV88HV2\r\ncP2QwkSQgM2U/sUIY9B3CeUODAO14Oa6NvMH/OT99PrVC6UrADete443xa2e\r\n0iohZ8F0YEIXr86xm9NYZxQkrWBEXj21LUPmiRHKpDZOwhto2dCTVZW12u+Y\r\n82YI8UiRWUdYuk5ZBgHt28ulOSzbv2rmcxKtv6BARpKOTE4dztDCwypCHpMV\r\ne9cmV0vP4UpPqHDZemdJqe74hf1RRFqLMs7tlwxpLzFEyjYawyS3ag/KLcIy\r\nywY/bS4jYJ3BTLs/cgVOyYd537TaWQ7voBDWRXBa0zffvOGaDXfmPTT8JIPK\r\ndRdMQ+MZUoExq1el5DbnccyarjKCiel6lgDrNJcRDfgLGBP+2FsNNi8Dtz8b\r\nKB/QooENjJRkdLqCvECidD21twLi/Vs4pZg=\r\n=G0aL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/tokens":"15.0.0-canary.a4eb4937a.0","@material/density":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/focus-ring":"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/switch_15.0.0-canary.a4eb4937a.0_1662488445736_0.5449706468599365","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/switch","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4299717da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"212e253c6647dff794cd9ce0023b03f84e2bbe6d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4299717da.0.tgz","fileCount":58,"integrity":"sha512-4PvuxRQMX3xCnwJApCWeoGYbs3nzh+LlsUReRAAT+XmeDKA7UgRFTCMT5yedgzqOs8gBzeUv3Ck7QoXDUSP/Qw==","signatures":[{"sig":"MEQCIBDG2/EkjRlLJfg3DzYMILuUqDk9Umg7V2shHcM8618sAiBilepLhv+c/nCANHl3o2TlWAr9IgleOZEuWq/V45Pflw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4zRAAjFjQpPA5X5QUFWfsiCQC2J5TwFOLK+jwgWhMO3lBH5MtVfHg\r\naqOIk1+y1OPIZ+iccuexFc0QtdZWwxpZ4SxeRHPMwYUzee2e/3HHGB0kWAUL\r\nfSFubn1T3cDmdfDeWr67hap56AiEWCIIlLwGtRSUGHjLtppJKmt05aenPaXp\r\nuMUOKoPCiAx9lK2bhIM8EXAKdiPC4r74HOkJr69rMyFXskimdiepvSAjoQF+\r\nqLB77lnYXJKGnBtf1QCttSrjE1DIT5RuPpyrfQRTzlZ6sUrMrpdGbmOZH8dp\r\nUc49TvDmDk2Eoqdg2NW/ep2Kb4iA/t7wVECGoYKOK0E+zIc9waRFpWj3Z+4a\r\nPF8+sNQPGhuiZ+zZGwZxl4off8yM5diZrK1/4eMb0BRpovcw828MzDfMko1H\r\nYzTqNr3Ixv43svxG0h6hjiDGd0GL5sP6ArL7IwOkDwnOtkfhSRPgDGuv9ArK\r\nANVwSpaCMzjauGHT9NetWlsXHl043R69zppzg7MSQFqsdaRS67Ng79xaXWoN\r\nG90RM20IPzmgCU2+JcWK6OaUw24L0btqhcJSER6W3UZAMlY66/ie33Jga1oG\r\nbk3M5eWyR8kuo38Z/48At/3i0VD6IjlIn7PJYZrICnV2gaQfu9GHR25GkHq1\r\nN17sIUdKrHXdX/BH32cnlde3TVK2eDX7F94=\r\n=6nIF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/tokens":"15.0.0-canary.4299717da.0","@material/density":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/focus-ring":"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/switch_15.0.0-canary.4299717da.0_1662567401985_0.5450612398188976","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/switch","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1a512d7a31fb1cc08f735173b7d45a996f98c28","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":58,"integrity":"sha512-ZJ7UJev8kf/WLU0iYSP8uGqagdlZFKcOMHDZO8ObDRRaRNItCMzNl57asblwI+KhQxiApTf9uy7x5lo9UHJF9Q==","signatures":[{"sig":"MEUCIAq3r4ZpZUYuRCz11P1IRVStJT4qtQ1b0t5oUTqLwsftAiEAiDHKBrOoTRDXu3KiVrWp8SBcdSdK9YxjpcLH/36zPh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyYA/9E+kt+mvbokCHU/wQF45T9umtfd0t7Afe5zyxLhc0QDo3xXEx\r\nVBrFxeItK7AHi1yT/mf8PV0J9Myq+P0KMO48R3KyILX9lEwvtloc0nznnt5k\r\nvL7oq1/+h9tJa6a6vLSx2WCYGMWZmYTLktrZ9GOPNugwGhUfaB6mOqD21Dcu\r\nJ+CUaSU43wCC26owSd3dt/EwQa4GTpgGmB8gjKBGOE9yH1IQkyLVNIm4FaqM\r\nOW+DuPTUAjZwd6Y+ouTu8sOuDQiVrCp2tZ1+H5roQsMM5kWLlhVKhYmr2gfy\r\nNn14Fs/6ve968eN+oWrgYWVanXrwWMIQ2xi4ZHB9N8ctp5jzQqRS7vUqYQU4\r\n2Y56YxAtvFnaliBoa2f0UpPTFFxg6IgREPH/Vqor59c6ClOKX2m5cG7vBbCN\r\n+dHVtht4yDtKD/ncr1QGRXhJu/EpssvNZM8w+u5Prvh0FjkAdoAeQ8uNWoMq\r\naZb0TsIJ9+0TN/Vm81aQ0URAoPbspHeK9cYKQM4EkbGtQ5UQpny0A1h/DzEq\r\nRH41Sphkxg8yhkl/v9+Y/Yop2k3oGyW9K/UzUltDR8q3sdCfITVq9rXlNBuP\r\n/IPek+qdA+Kn+VD2lkX883em9a+BFLRD8u+iw+JBC4u4l4AnM+Urv+CSJ7LN\r\nWAzHeVQwVBreDs25BzowL+ebc8uK6uO1Yaw=\r\n=GXcj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/tokens":"15.0.0-canary.fa7d8d44b.0","@material/density":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/focus-ring":"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/switch_15.0.0-canary.fa7d8d44b.0_1662578393454_0.15844704861403147","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/switch","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c6be1888b59bb156a6f4bd6c382b9ee8c053db0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a40e3c768.0.tgz","fileCount":58,"integrity":"sha512-EHXWO44bI1WF9wJFT8pEBB9PznMDXcAv6VZY9AO/qHblDgbm1z5eeuUmJfyT7CIpU1qkmSsyj4Pt2YcSAveDmg==","signatures":[{"sig":"MEYCIQDDY7ochscQH85yTe0fWdCuOsEHTKuEq851o+JHsP5XAAIhAJDsEy5Ig8bknwO+htJsPKAYuASsclAkFTr8PiWcUGHK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrazQ/9HeBU7lRob63Ho0sfmN/An9I5bKCoKjNdppMX1bYRxftk7676\r\nW6RDrSSBRyPabKwRKvJpF3E+gmWjDMXxE1GQ8ckHGEgIs+fFUjmU8t3WwtC5\r\nxAEhfvI9kIxDgfut0ZJaHs/xlVhfqVw0dgYIe8xTZrdb442KEIzJuwc54ei0\r\n4d/npI7rpoVezddQCIKxqJzz6WVKx6ADjb7Guyo89yqFwn8pT/DtEQCWltSZ\r\nF7YWNE+jAWw2MB2Lk6sxKB+nxuHb1xUm6AUP+64GltNwdap05pr+dnEZIq+6\r\n5SmIrfTdEt6ZzoHxQfse+JUs3Em2z1F5Meyn26aQWd3qDMyr6+mE3/Y9mr5M\r\nE2yv7L3oWCDsXZidLMPCmJVQ4F0NKQyIqsWXggk1XEJJ+QIq4AU7/73b0jS2\r\nTF3PA7wRxvOBIC5COYIrzTjvx0y1U/Jg2MJuqGNgATB1P1VpFXjgzbqr5A07\r\nFLWBeGsoyWb95BeOLBvoUnBzz++L/OgCCQGt66CaSo62LjZiY1xXjVVDQMNL\r\nRimyaAvZA4fiJ/qSG50DQJdNkWK7H18dls59tjDLTDnhMQzgPmgboH8W7Sc8\r\nys8ylYo4HqQaSfweb7wWLVGD91BkEDEy2pUlGTA0bZ7fxKqhxHHTExVvL3AL\r\n5iy1Gfxo8QKFQycDL6pYpfjG7GkrFRbOO3g=\r\n=4IU0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/tokens":"15.0.0-canary.a40e3c768.0","@material/density":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/focus-ring":"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/switch_15.0.0-canary.a40e3c768.0_1662753890137_0.3069771087913846","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/switch","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"783c41b43fb90c68459ce7796fbe0baf85feb50e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.18cdc9a00.0.tgz","fileCount":58,"integrity":"sha512-qFiQTYFZS+kahtFW5QZz1r6R6zOQSBeDT6bDKqH/clNihHvWxU4mP1i6usYaIltH6VyX2FDxG01wgmg6Cr3ocw==","signatures":[{"sig":"MEYCIQDTs1NaFur3ON1ItEMIeyOL5Qu0+6rSty7gsLwU3JVg/gIhAN8Jb0H+uaTq4OUCVPmX7f9+p7q1QwIKjC+vmAIrOoVi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH568ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7HBAAg6/N99TQB0FT82k0WLzY/KGAVbJyP9S7XoEWpeEpp2bVv4Lv\r\nV6AGg9KmbQywqzITwQcoaTlbDgbCHTPgyuKULQ9Y6yfRFWo2+pb/0kzc6M06\r\nQKYCQwTbAE2wlo6OViTXXvM7QxmpvM2ABXspguzQEVoIAFYao8CzR/mzyUkO\r\nIzb07Ep7AqLtkoWzjiyORnbYbXfQ6I1bZ5vmaV4C5/6cV+xrrrm/CHvHmyMr\r\nmNDjbXSUK1bABE/Y63gBgYpk6+mAR65cTvFUvwv6MjEY6ODW74Lt05cNFARX\r\nKezO4RF8ENJRQY/Ld+OOWmaDYguQT1d+f+2+eU47J9hmJYDx7SN+xOxXvC3j\r\n0yB7EKO41dPEihgoewiIQhIThNbRpklK24csbl6CO0LEhLKa8RGY1epSlh4J\r\nymGwWbjmZkfFLcXV20C4MwZnQqcMjqxzsWpbyXddhKHL8hKgcQYU77hrNlt7\r\nVwvFWzDLAtoy8L6mAD1GiFJerKXQVJI7wV9KefaM19TSnyNBnNw35mL9h//3\r\nmY7S8St8UskFhpAure/BmaZnV44wMW1hzfIcOhoQNOIcRnm/PeehglaBDxcN\r\nKTEA3lSfN+OSCb0p7MudklpEtsbYbQmZoviERReD0/P8SW0br5+NaKh9NS21\r\nkJFOVIXCSw/eObJZ2RBv3gtEN9O1liGlVBI=\r\n=HIjk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18cdc9a00.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/shape":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/ripple":"15.0.0-canary.18cdc9a00.0","@material/tokens":"15.0.0-canary.18cdc9a00.0","@material/density":"15.0.0-canary.18cdc9a00.0","@material/animation":"15.0.0-canary.18cdc9a00.0","@material/elevation":"15.0.0-canary.18cdc9a00.0","@material/focus-ring":"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/switch_15.0.0-canary.18cdc9a00.0_1663016636597_0.2937004611679179","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/switch","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb281b3e222af2aac138df3ea24daea62b6b720c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":58,"integrity":"sha512-vvr/xcRvL1hBiJDut5clq/snAw8gFa6Hs8F6ZlNm5vzxSoOGF+17d+kqsja6isoiBY/UdlAHhzRcV8wKhBhaxw==","signatures":[{"sig":"MEQCIFpAz6rf5uk1sxRlCMgTyktGAynnrE/NSiUiebYwqSJCAiBZrrJCL3VpKAx54oXd/GKlTbe6swjceW4e6TJz/f8IFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr42g/5AEiVg9ez5XZlVpfWlLDDUgHeSCP6gO5XUFhddgjcpbXTM74N\r\nQqyoJJcnxsAXy2L2lc635O0BtXnGTy4P3jmRhavKFPphbPF8bjgvXA5SJtvC\r\n9A+MN8Ul0sQzY1WvQnw8jHN/mah/CeEKXOJgxqW+Esh6iS67F3VOO3vSPQdi\r\nXxZYN2xFcn1tm9d/hr/Zos+l8s3iGC+hrfyAg12izFLSUaPYy/Pn2dkBOqJO\r\np0vNmqCBhneW77HTvBkCpE/66Aw93iwZCJE+QaE7etOzOtavfGuogirc2Ssl\r\nFfS+LAaYtjBR8ZaYOaPIVfyWTBvuoZ+mz9Gs6KYEhoefA3p32DOP1yRJG6Id\r\nH5/up7FyLG9M+/sGJyh20uw8/toEAvjGqrCyXAifrKMA3SWG/RyvMNcK3y+p\r\nqPvgPn37PfXtAmEaRK6zlaAk/h7vd3g4m/ciZ2Q5mu4Tp/3sH3Qq3h8Wc5l7\r\nrVi+B5jQETSnC3QYc9UGQWSOQWxoPoMWXVjG3ul7tng8Dla5Yn2jYtANzz8O\r\nXjrHBPTXSb6Mc19hJ6We+V4lU9DTADQJcxB0H7mhINVCQ2hU2anILK3Ak1Yj\r\nHlGPT+r/ms46H/OgTk3DvOL+XhhtiBCMLEjljLcbVxBj49DD9a6L7nQFEQfE\r\n5Bj2MbLfTBBvreMfjtH+sXBsbHD8r9JKDqA=\r\n=ek9W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/tokens":"15.0.0-canary.7ab3cd3c8.0","@material/density":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/focus-ring":"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/switch_15.0.0-canary.7ab3cd3c8.0_1663108808226_0.9863067011664568","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/switch","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2860d244d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce99f9855b5a332c0f3bbd0efe1ee455ca27dea","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2860d244d.0.tgz","fileCount":58,"integrity":"sha512-acV5gzwMxLfCsXSf+qNhIg5AQSw+SkmfDNq3+9KB4exB6w53QUgp+zHKQxsSFe1RWL7GQyeeZiitL9mW0XKKcg==","signatures":[{"sig":"MEYCIQDujtR/7RV4gyhK3ZzoOx4FuejVdHJ2isOpVq6nkJrLeQIhALtRGHIrRt82PNn/hLwagF7cdoWsmtaVZFTdPRYmkhyp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQAhAAghC6SD1P5YHLo4DCuEkaqdhvzZrYe0Q4q0Unn0HhI/yjiLS9\r\n0PMXG4Z7Cf2ZqItaHTQYmneZopWaZyhZMoOe21au0/S2hlRwWdUJzuilLmn9\r\n3dKt7/dTZd93bSqoOnWcgwH5ud2k37A9HPPiz9DUooTPdgVoNUqhAExptCk3\r\nbNkHLplLTER+FVULFNbH48UHkQ9CBGKdo0pA/VmpRqdUt9FWaUv7ntO1ewC5\r\nt08kGwJeaxWUi4BfSkYPGFnLDs98U4btXg2J59YZ1mIH6DSUOFTlOFE/j1F1\r\nUgfkZnESiY3mxPQdnq2/WxGQv+W/XTH9JTF/LMNZ3zGFk7ckDrqqG0pUpb9Q\r\n1k1LC63hg25dSLkgP144R24sbm7ujkr7wElZQZe6tD/qkLdR34OCvINwOe/s\r\n0WBzzRq2ykbWlUCV6RGnv9bmPFo2gxKRRnNFSujwZJR83yz5IznJB4Tk4Llc\r\nDF9fjFiEzuKKO7SjLZ/9E/wPpLRI9oKBl8rEGIiDPhVtkkt50ntrBL51P1pB\r\nAVS76zmO7FG6neFEfct2a3hbKURVeuI5RZLyYffqUpAzboRXuHdiu98HbmEE\r\nu2OZ0lufzkbqmu2r29MuBLj+R6u6e8V2pN1ctR3EltzmujaUMkaOxvEca9eq\r\n/Hty1DX7y4ktBvUnBwSBhAU17LT4958i/VE=\r\n=qH+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/tokens":"15.0.0-canary.2860d244d.0","@material/density":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/focus-ring":"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/switch_15.0.0-canary.2860d244d.0_1663368946299_0.46400981720563816","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/switch","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e8726533c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbdfe6a080759c555b1c9d4d754a36ccaac15202","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e8726533c.0.tgz","fileCount":58,"integrity":"sha512-QO2jnKWJT1nVXvczTMFamwUnjbgUFflFjbA+fWFfauNOMm7Df7dg64/P0J+a8CjwQoaZSB8gM36sESNJ5d/cTg==","signatures":[{"sig":"MEQCIH+HPt2YHYo3zZ/hALPzFGv5pVE+/ojp9AoxZ0YomHzAAiBxpiWc8YUIMYQWFnyHaas36mZQcxuResfda7D8hc6Vww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiAeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRfA//YFKDFootDC82nZJ5s4BDVlU9hSU75ZTMC2M9nnwYtggnzAL7\r\njXxcj//pLMCXrppoCoHG+7fLt/0V+7Nq9BiqQ2QqjDPMCATw5eJN4u9UT+HZ\r\n92Pve/FqKEMWfPE7yzH4oNTD0l+r93CAFQEhG8581SRD/Afi5TFXKj1uLrDi\r\naTaGt3QSrazd20rLXywxDvYVcRs4/v6pHxnBofYB4Cin0h+ga1Rxqm2kN5Se\r\nYmqJOrKRO+vKQVy1smDKZNL12Cn65BHp9XH362e2VRNcf/mLETceyFffSRuo\r\n3+/XhMoZJpjLt2S2yrDHqNET82DWVGwZ3PXV5NqgOidovE6IoJkOwnHXEe/z\r\nQp86fyYzMYrA6Od8NIygPM1PltdeBqj5Hxj3RzBeJuoxlca25ggON1/GQ5WW\r\n/gMJ58AEDmcNPN7uqkRCc5/JNKHgTFoeYOoxYznGF2VF5VYY2O/WwfEJ6zST\r\nZm9yLiPzxLbaXncpgzkWVCZtxD5KzJn1pwhCzQ6LU5hH0+zVenADssCune7R\r\n/tcHf/QFqdnBYP1D8QHdbKb3FCj2+4WGbG7Td4IjbZ3CisCbU3cj6KDeMxlD\r\njeq3J6nGGS7UqfbKUET3NJF2V9C9wWtLtV/KZF7KHwkUqwileQKzNj4KSEHs\r\n5L7ddAQQzhqkppK1IH7/zQCtH7DfAbKTB9c=\r\n=t74Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/tokens":"15.0.0-canary.e8726533c.0","@material/density":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/focus-ring":"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/switch_15.0.0-canary.e8726533c.0_1663705118507_0.4145921218163957","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/switch","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f1aef90a5c3927d8ce6e939b610b9b770908222","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.00d8de0aa.0.tgz","fileCount":58,"integrity":"sha512-TIUQZHBh+HU1nl0dwvrq+Ep/+Zbf+kRR/QJrdxtVvqZzEgiaf6kMPiak8tuKmY6Qqu1NSNV+Z8v8zb6LshkblA==","signatures":[{"sig":"MEQCIG0V9f+31yTg6LAVO9I6fS7YRlYy3JRaaZdGymfH0SlCAiAw23u5GbuzMg/Fvh5LUcdukzQ6lNiEz2B7jkzsQcaFKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyv1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaDA//UJ1tDvEPjzwGSZwSdlpMNsKjHM483SHNai4uKMRmRS91fluh\r\nUOxahu+EuMZiynMNTMH2XkovtA1bvakGYqTSnbZam+c+FPDtrzEA532vrgWx\r\nn/hbSY2Fj+j1a/h7F77QULHX/mc6/StmXHfAcSyqa0wdtL7ys9o6ocg/cUrF\r\no212DyNnyjIhzTuBZugWCn1vmHtYJgNkMRCjF7kfktXZIZcdZpgaIB2tI1/h\r\n2T2iSGFFKwq0omQsddNKOeQ7n6b/kl8K8VbZ6ALocxth6WtbKOZ5DjHkQSv1\r\nk1a24WWk+ZSSUY7Fxoqk1aprjonVg5fTnIx5B6U2vXpTIwagQKVYis5RGoiu\r\ncIYrtjo1y7P6Vc4pFK7jCOiid/mDq79POVUw7ko23eQBvca/J8nx/WeTaudM\r\nP1kCV8eoliijLTlWest1fuybWkJTXGvGRLNJPqpNO6zer4cBnaiJJ38k8UWq\r\nira4K/zoCjEgnLLF46x6iT0YSk7IGeU9asR2yGruqgsoGl9qI5u+quH0N/ac\r\nFLjNZESmpYQak0r/vEoEkyBZoykCDXZJPs/7t9pFx/28CgQAtTb2VLtybK94\r\n1ojGPlr4evH7niDwmW+Cc8SZOV2BUBR9xpMepX3Fdkj4McF7TqKfjSdoCbQ6\r\nlYZwQ0/QPXiUa0Ve12x93+vQTpFeMGGbXDQ=\r\n=QCXG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/tokens":"15.0.0-canary.00d8de0aa.0","@material/density":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/focus-ring":"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/switch_15.0.0-canary.00d8de0aa.0_1663773685034_0.7921194932243132","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/switch","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.271aedc30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8e847aa824cdfb48eb5b98f6d0c25317c96a4cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.271aedc30.0.tgz","fileCount":58,"integrity":"sha512-WY8F1fbeAAS7PJbuQhAKi+uxVJqtbTcFJESqfhaG3aT05As+n7VMtPJuVFe5edKr+qH6zgVOfXNWyvaV7GENOg==","signatures":[{"sig":"MEUCIAYLfdPA6VL8CUSYsX3WD2oC4PmLvNeDSbatUL6lPhh/AiEAhsoZiFKklgnSmEJJXI9ybbM/ZRq/rjRDSIk4QD4dkgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU+w/+NTTuhnV04XrXYOfhDW07I5ZoAXQK2Lj0iw1lFhNPEe8M/eBr\r\nSJM6jBMLSH6MqsDhvZHulxVoPvhUdnbS6P3i/4hIoDUhm5hDD0wIFX8N3ty4\r\n1NAkB6LdMQXmCcA31ThlbDErFGNxWreWfmMRuatURYz66IJbEUk7904e/ipc\r\ngRtp8FEHsq2oaZ7bXbf7SHVRZUgHqSmv6Saj1TWMo5i9ocOoElv82AHJToor\r\nIcV6ZCBt2HlCaxwmcy4uddMDCcSaFfaGggZxeFwoBTbvlJu1LjLee1hIE9Tf\r\nAPSYKxTalpLdXVk6/7WRTnCAMmlBp8oymFhCMqsIG0Yz93Zr0ItMcFuZ5DSH\r\n2hRn5Nc3gHGLuqlkZeLYQ7sCKSyHNWEOMx90X/FLb0iJGUTu55dfqABxs586\r\nlemQM3MKESgBxrbfI1bmBEds5pB7TBQbx0FDucif7uo9DlopUBm1+7jZXW8p\r\n5hmoe9ylW5ywGY0Iz/yqH6rd4JtqLCvexqnGXtLp99o8lDIvnqraGeqUOShn\r\ng6dR6uAGxPv1xiCvyYhAGp5KR8MnnlKgUngjrf6xmsL+F40xK0u1900lltjt\r\n2Fy1ZgqW03nfuFqCNvrnG1qyjkdPCTXuQtql6o3gq4bPtJJesyQc+u0pPd5w\r\nPgUyxDcHQ6cph7a5d50GJiceJtqQiaiL6aY=\r\n=aKHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/tokens":"15.0.0-canary.271aedc30.0","@material/density":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/focus-ring":"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/switch_15.0.0-canary.271aedc30.0_1663774619868_0.2202705826051361","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/switch","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6c93b4bf14a58e12eccd62b8a900df303c5cf59","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d3344c16f.0.tgz","fileCount":58,"integrity":"sha512-FsWKji/vlYJ2EH+TGvfb0W2a4JPQZwXB239nNtt8wfqU6F6Bu2H7yjM/+DG/u06MF70hzNyYiozwuc+kbW5R2g==","signatures":[{"sig":"MEYCIQCQy7MV/GNXIA1yA7zXbx8rS2YTcmG0tf/IrB3FbuwaHAIhAJRQ3LigdRLmxAC1Zk4P2JmIq+jxSFkhiCe6XNXULfdw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCoEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn9Q//dZQ/nlN7HjseuFdFMEfW32+aI/8FTQkQc0/FjsbrwytnAS3T\r\nshnn/QEEdBplsjk7J7ZX5tCgI56QXkiVf4M7fxS2pnVCE5TcwdKZXRX7QphG\r\ncRyakrJw5sRPOGPnp2VoEj3kZLHZupYZltag8X3qgzR730O7bVxCiQD5yePD\r\nZIzAZfCnlr5JhNpge7shB7g+A6nA9QHycrK+t7iHF2nf3AxD48TYyACfgE9q\r\nFQm/gQZkr9KoQHRoKIxQ/7ddMYYVF8MwqsRwDn6JRAAUeMPYTQxiEnaPWyw2\r\nKq7uGo4mxBS+ycuBas91XSankJ3Xh4UYipn/d7H4uTVCOJRIcWbmZBTz1PdQ\r\nH0XVV8mocSopX6JMFW3O653wh4GAhYIxNdmXeQ6358Oko3jmF2sCzho1Uw0C\r\nj8BFBr1AysSOVnU9CVZFBF6hefGQIXxLR0eVn2WACwa8p7M9/M/j7Fsd8Ldf\r\n9Vo2zzyYd4XFgbRE4YsVGoBtriPz5kj3icg/jz0xbIvJPCSHcVKp4mEZTep3\r\n9Uj6zkn8q0GdaLCT1EmV4Gxw4ivnXxM1PiI7XjZPiODSgqg2VFz6uVOzV3/v\r\ny8f8OwKqmx9xVVLHiNKdKQczGCeq10moLdLuTwmwfxs/RwDHUJwy3/U5b/gJ\r\nF5YBMKcREW5fN8HBcIYZVWkOQxzz4sCFYoY=\r\n=iIYF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/tokens":"15.0.0-canary.d3344c16f.0","@material/density":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/focus-ring":"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/switch_15.0.0-canary.d3344c16f.0_1663838724627_0.9171988826428157","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/switch","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bcbe26e7f05ee34991ef9c256fededf8ca3ffe0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.94f20ccb8.0.tgz","fileCount":58,"integrity":"sha512-FN9nDln+1E7I7kUbmRiUhtckxMkvXZcU2xbJu4RjzmvzN3+zEP3fpc86B/DeFMwITEHC7OkBjVD2Ju7avPQJWA==","signatures":[{"sig":"MEYCIQD8sU11OsAbRdjN3yq9ARh8ZNhIXZ1lzor2lalIkyIr3AIhALYRsaDDsWhLeTWC/eu9BYhQw0cUdYVghUayInIBhuDk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMosACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCSxAAm9QeEHtgdYFS+d6whMnPxrs/meGhxdU7fCkqxjUROAE9kBxW\r\n1otsgSosK07ZL4zLxrYlAP0IhxhhEPsDIW9agueR3RjTACELqSTwfzeXk6LH\r\nk3g4xFiKLdl/nYJUSUYzbFiXCh/xeubgGZddCn+ui8jVgq9MLvWBaGUFrOK9\r\nfOV501DSEYxfmdfqjDrWEDuPA6/+ZqtCTw+VSIeGtXsiQ2zG2MFGg9tQqIn3\r\nfu6LA2RnWZt3lu+FhUXLmDQf3sXJPJNeoNrRWaoyBw9cFiSRus7bJiPUEC4G\r\ndJFgJRREIza4DS3/zpFDl6A6M9bATwSTp4fI9NNEfh+o/8HCLp0LFKYOUBIG\r\no/zMJnchdecqygkgYrmTaBDIAo8VHo7Fw8gMYMbty7oNYPgF6mfe+zn8JFxW\r\nEFMhkr2odO16TYZmWyToYLfEQ6lxo+AdbT6Fi017W5IHD5FfqmR8KM8W1PiR\r\nu02sq8FHm/WA2E/69o5ruPv4R8xbVp0yzCAyAzIJQpMPPEi/KI5omdQeR1R7\r\nRABK19iji0s4bPm1MOlSdU2KjqHIpKL5HnAYzuSrMiBjUvTw+CIyt8vbgRoz\r\ntsHDb7bTeR8bPFvUTraNZhqi1ZHzXJn6O+4hGdb4hdcza3QBcMQmIh3TYdMR\r\nUOG59Egb0QN2XyPA0GEgR2ceSUwtAD9wmks=\r\n=0vHA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/tokens":"15.0.0-canary.94f20ccb8.0","@material/density":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/focus-ring":"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/switch_15.0.0-canary.94f20ccb8.0_1663879724377_0.9451083750345226","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/switch","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84169eb9bab5102c51286123792493f2d30ea51f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":58,"integrity":"sha512-Tff9w1gPIwuEsoYu1TBHUIgnhmI2Ok2iE6+ot5q8fELQpUF9bFB8fMXq31yVnXS2QcYRSUag259t+McvUz5b8Q==","signatures":[{"sig":"MEYCIQCEPY7C9TZllRNHZGPsDS3bM6Nna6ITpHGUhk9wK12SBgIhAL1/7flhUca8WK5ruvJ0VMzogTrcJLr2WP+7EiSNAgBi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcwZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXaxAAku5xx5qoNSrmatcEweDNZgSbJ2um3kdkX/i86S8FKtfUlPPl\r\na3erpbd5r4g7gaCfaPQP0CAIpxVgpjvRDNOEliqpqPfuJLlRT/uJeoMNUa0r\r\nopE3lneTaIDaDnS+wbjLgzzXSW0XPUPMKFYR7OKBJMkITc5bPX6U3yVsKUxV\r\nCHOS8pdMH830KOgjaDapjNQHsdhqjTNPJ6iU0+uFJwS6v3WF8juCF2baMsvq\r\nipiiphqtKx4kYcjhVSO+uD4Vc0RIxpdayV5sb2mqkZJIaSZFfjfjaQXI3hrl\r\nbO6HcbkgE/PqChJ9D88j0idVCl8Hvm/LHUVMN09a/eIgNFpJ+as730IDWP+o\r\nbP578IRbznBN58wd76UfW1DamBqeiCVA2WBH672lNzoIguFoUenao2aUpxTQ\r\ngVwrFCRhoay2FvTzW4GOxVqMmdplNpxTYN/aQorVyruQIzhlhsFtxyFGfvA5\r\nYFfRfCRLXB1k40BLDISdPOYGmbRP5tIMg8OxdMKyMi+mfWDfgvDFw2zd+xFR\r\nbEKT1pjD0Z2B1j5PkLNjofI5I6wQeNfsZM9S7eR91LSOMV+wSx8mSQ2PGNmW\r\nzdGmO1J52Wb95m9liG1c61guimcZ6/pSFFYlRbtE9Ln51F7O3dAr4Df0YnQH\r\nDq6BFCn8dMhvzyXEb/XbBZVkEL/aurJDaBA=\r\n=09wF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/tokens":"15.0.0-canary.81e4cb7b2.0","@material/density":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/focus-ring":"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/switch_15.0.0-canary.81e4cb7b2.0_1663945753300_0.11094347949095984","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/switch","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0bffe633a2e42fdac01f7dd10a4b9e2122cc7ab","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.aa85f9413.0.tgz","fileCount":58,"integrity":"sha512-BzjZlNlnl8sJP0dUABZOkc1Ehv6SmA//2//BHRhyxW7J7XBU6prrXo2Lvh3b/7pheBUhCT2D96Z7UcKlCIxKYg==","signatures":[{"sig":"MEUCIFacq3laLbpHJNGn/VdD8J1CFD9d7Rmjn3hthWbDttAfAiEA1Fm7jo8I3t28++T5gRpZWVQgw1E1pbqpAL0iRR0/g/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMegHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDNg//bAxiScGKEtI0X9BSJGoroepSnF7UPmqkIX4wD896h6TIGmSZ\r\nF1Bqsw0tRTnoeQXb0BOBLz2oqj+Fv3omVWZoGECENIrBQFAdZ0+RxOuUmqE2\r\ngw9BO+dVhUVyhkeZgV0qVvJP93ooLewXZEvsw9tvII7aLcq0ewLnlQsTDoy7\r\n6gs2Dm058ezVokU/HJeT5Ee9B1vQZrWVt9djt8OqMfRT2HLoReq37r1NrK6E\r\nB3D98PYSNHkOjmgbxxOlZUrjyZqwfIMrSxfUBT21QSS3m6p1KulnaZcTfRU0\r\nG0FgDLJb+u0vnyVgwFzeRkr2JNfoPkGmPmwxZInuo4cWL++ME0q+JGsHjwRH\r\nXMmeRbl6i1q/QkMvLeNf8rs893TiQad8iSn1LdE4D7e5f4D/8M9XBWwkKiXk\r\nL5V4K+2O15g3KAGQp8VFLeNczETVZQSsoJLq22rmPDT7lGQaESVXdANkzZgM\r\nj4G2R0CcyFzduOrcwXZUDXAhPZ9NmrrM+sZJ0B+DZde2SXKboZ2V28jCCcQz\r\n69YGlIWZdnvmZAClqMribDuNNCSHHeJQhHnSJm9iR/DJo2hRRvUngfBJkErm\r\nOvepLPUdZ5lXJ+/HmQjb3vTbezlezRtoEK0bqToTB1vBBWXSOo0Jz+UuFiPP\r\nzrXX5HqR+EN41PPVeTuLXYi5vkpcVHMdptk=\r\n=k0JY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/tokens":"15.0.0-canary.aa85f9413.0","@material/density":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/focus-ring":"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/switch_15.0.0-canary.aa85f9413.0_1664215047636_0.1322621131894408","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/switch","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7134a7752.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23175433f6ffd1493a7c17c7fc5448784130c2a8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7134a7752.0.tgz","fileCount":58,"integrity":"sha512-qgyq5wErz6nrydx820SK+QLLJHvomvE6HwSlKUhsA8GLn3Bumby1uyMYFWdLIQEXVFbcKfjyiYeQZ4od1+VTwQ==","signatures":[{"sig":"MEYCIQCDEKSFNzMMlgFWPkYvLqsSjObkZguJkvAiD0T7CQtjYAIhAO8bR/0oCFnkZoT+2iTAo87ADDb022/P7VFXBmpD43b7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiCPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowuxAAmkPyJRAi05ZvA3PXhlIAmqdQeyPtAFjBjR8BuAl2kruh5C6z\r\nvAK26Yq7Tb2GpXWrwrXYIAyHXpwfHUVRJFBVVcreTqQxXlUWDAPjZwLUnA68\r\nwgAM/waFI4P+DrnNN017szNPeKfwpVg002GLmRMdpDrord5ka75eN5umGrPD\r\nF7+PLDDm1g543z2fyBx65U7nA6tgMAARHyF6bsN01YT9YuupXSLY+3tlKj06\r\n6GcF2Uxd/s+iCpWklRpCmZluz8IN3rD+af7mSuYlmoI6Ytz5dV7Ij93RUVjp\r\n0wIIMniPrapYisz39BUjrbjyr42oJaNuw6tGyl7iSqLLGqTeEMawal/X2zRS\r\nd97azGrzSelKq9YsUZV/b9NR96VoGvo4R6Fmd42ZPtqhDRb4vVqajCeTwBFz\r\nxFdG0DVn0W6+eXQHV6ngXVixzDudYm4fonEV/bNfQ264da/67KMWQxQqkGGu\r\npmh7qXK3TdL6cAP7+O0fIwyyCIz9xwGaxy173XsAL3+dzajnTqvsI24BQ7WV\r\nqV518FNcNDVfQ0LG0SLybsiw1IBVQcusATUcZRbdt4izeTwKncQtzYwczCjd\r\n4ZmzabU4TGLyMatoVzA8XMmWLzfMN5uQI9greh65ECC2pU3SuG8c8XbmQkuz\r\ntUdycPzfrv+VnitlN1t6aB5Ch+EuOv+N4WA=\r\n=gGVe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/tokens":"15.0.0-canary.7134a7752.0","@material/density":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/focus-ring":"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/switch_15.0.0-canary.7134a7752.0_1664229519127_0.8985233627089566","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/switch","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed59bd688b12e7cecef0e374487e2547e2946afc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.70b8ac16e.0.tgz","fileCount":58,"integrity":"sha512-SZ63pSuVxPwueR5Lacy4qx6nu19L4HSquBV0cbMJEPtyGDtP4bEEKs46G2n6PIzyfYmnZj7K9jc0OpmCs0BIkA==","signatures":[{"sig":"MEQCIHCAVZrXtd6+nvFrBV59wLAAvouxxL6MMvLNgodvvmgMAiBfS8gYTxbqqzN8Su/Nz58aPbtxUbUtxMPJyyl0NMH0tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZoA//Wcn6RfWXKNO2QqsYDhoGZqOrB7YkLx5lPwpLQE+MunZ6ShUP\r\nXf2bNUkJlyk9ZqQ24jAJBigMg8OKrxzUAq80XlSHYxctmfcaftfAaR8XM0QV\r\ncLdZFxjKEAw1Qq6lKOXWvK8DCVApoOyjJ0cIEKJxHxkHvVdnYQ9A2gDr+1+S\r\nAwMucrD9LM3cMeothIVS8Tdh8jX51A/S8F7nDOrbT9X/OouozFWIBEGErgzE\r\ncvEEN6vIfa0XeINOptPX/yaA2Q32dUt2adVj8xAek9pUG84OIYvn8ZZe0RNa\r\nUq/VKXOF1f1je3QCd8YY+bMHFGijLsB2hCuhPO3P/mzlZD5TysQL57YJL8bR\r\nGdHkomSkoeQA9KYrDUwFCDGaFzBk6SiBL5oRcXrlBqwBKF8ADXyrQDsgIQWe\r\n7GnImux766E+h9r8+e3MKOO2UumomqF6gzZmWaQhPMRGoKqVnz2vz1P3xEb5\r\n9Xo+WBpkDorPvnP0cneUBXMOMve6A09A6Bk39wuKdqLRn/ewOBA8gE/5NI9x\r\njghpyrKbckFhh7CvuK2HKZrv7GRKWebn3cuPu2+EZ6FIxO01n/R1bIo6Nx3u\r\nttiMtsl3SId59tOPZbHYxqtMDaPMPR+9bg3neLfBqSmJA6Apl97tyJaMl1fQ\r\nysrbD2yicUjzDjmxc1soJU9knRpkH1AaGDk=\r\n=aNTu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/tokens":"15.0.0-canary.70b8ac16e.0","@material/density":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/focus-ring":"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/switch_15.0.0-canary.70b8ac16e.0_1664318751461_0.17990459637955247","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/switch","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c20d74405.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea801ef1dfe176d8f454aadac29bf9395ed5df8a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c20d74405.0.tgz","fileCount":58,"integrity":"sha512-AZjuxKsF8XDIQE5vhip83qgHngxwu/+i/63A5gvmtTS1CUIhdGSMB+sKjLXcnKMI+F9fmy2nYX2aopW4ZzsJtA==","signatures":[{"sig":"MEQCIBkC9aAeiVy9HsYP9X7GriB2BuBsWM4e8Y7VGVNTMLLyAiBHbaquKM1SwaVAAglGuVUmpnyuumErdxGJQyth06Bu2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4f9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCeg/+J5/dniuLC39j48xUmKd54pif2Ycu1XIVsPb7u4LgoCgc7Elj\r\ny8XjnhKzEup6MWesTIhZ/3ly2xcb+Owf4TDGETxAki5VTJalq/EAudMPaJ7c\r\nUrB/pHJR+oVu78ALNDYxNeQ6s6jhidgMxMa2VvL8bjI1g+YpH4q8iZ8TMdsS\r\nZzn+BXV1zMEWfTaIORXrRXWve+0+9fERCZ2Q6uJ0DLKqcFu+9ULQ0/M2LqfG\r\n6IL7Y2zNkTr9K0xqB1LOqnkU6FVc1F2quvqkN+D6ZiY6v89jEhJyGMn1A1cF\r\nfh0RxStl724/5HZvEr623pPiRMkl8tRO5ZUuToW3Sym4++XttrsFYpk70dcy\r\nJBPs3X/LUjj+WhbZ6+yDL6HcTgXdct1g+iej+2zzW0lO1hxw6gg47G2TCn+l\r\nHBHwPt5Iwmz5l3dgTPpN5zgBns5Ph+olDMcFroyvieTIrPNx/CQAdSmq7+jO\r\nO/18OVnNb2oIo60a7bobS78lJIAlOXdkm6CeNIU9lduOQnUU9+IjVyLWcStB\r\nqnoFphn7iO8mamGWkUryng5v0BUYLFdvtBva+X3K17AXjQM22R7ZzhO5kUWC\r\n+Ui8V0Gslp2o67ycrZjN1+C7xRbZazvlhYlq0PaiWIg38MRkO1+SVjrXy1cT\r\ncFjo8WOisAl7dB48OZnsn3AKjwOXO2Roxz4=\r\n=WJn+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/tokens":"15.0.0-canary.c20d74405.0","@material/density":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/focus-ring":"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/switch_15.0.0-canary.c20d74405.0_1664321532766_0.6233395419547563","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/switch","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c9fcfc10a81c1055079ef3896f9b85d54448443","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f033fc8d1.0.tgz","fileCount":58,"integrity":"sha512-MaB88UqeeCRiv1Nzud5cEEx96aZhki1kraUlugY6d+rz58ObOVSXe6nJqPBrraxbFecnHQEkgERSDExlnK1evw==","signatures":[{"sig":"MEYCIQD051Jap0jF9mM0hhzhUGBrck1fOuCvupdxZZHlPDkK2wIhAJApLLC9aKiLM/FOa6jfSafzBWHrkNTD3glC0w3kk9eH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM44dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZaRAAi/tyoTwElObY32E0GG5ETFcaT2iRVjiYBKECm18SSFAEqtVl\r\n/AOyp5o+XfAQ/lH8q8K+efAqcET1lE3pfm4+7l9CkoTmYaMwXDBmUdorD7kM\r\nYTPqq8TkHOklUr5Y2cFZccPV2s4j3GFHKLyQorkZu3LtSmiMJZWkGQQ4T/wo\r\nkiBwxj4XeAxUVFJTNFYmHEGQJVbxBmL4kW2mSP7uFDkV1sQ1b79tbT78N2u2\r\nayMfFF9HHxDw70wbjAGAogdRZ+NyvzJ3Z8D0PqR6jQtnzH8epnvDzAl9dd6M\r\ns8+yIMCxmyBJLQ0xAY5adEt16YvgLL398ir47M9ZMqF1IZLsYWFoL7g+5UBz\r\n6evGUWFe0e//Nsygrfml79eR0y8iiJbaViKb+pViEZL5S/OARPmGHAbNIdbw\r\nlNM4uW4k+ZwpePzJJ1eTn0HL077tmyQQVcwHa0LoLLX5L7uHEjP84OvUPUvd\r\nPY2GigXROqP1Yi1mG5bx1wSFjl2Bo4SJ1638+6xwky6JCQ627oCsg9zMB8Cu\r\njVVfDqzofpuGe3BwxkfdmdYYnx1SbbSE4rVE9aMc6FoBVsJ9thvXw4idLTRl\r\nOWXaHDD4RK5Njb4gXbcbxqOwbEJWD5iFk7Apsfbk0fH1U2loN0FNuqJYpJKy\r\nmq346AcEnKAY6Xx0IedEIc0uvNq67poutcQ=\r\n=42di\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/tokens":"15.0.0-canary.f033fc8d1.0","@material/density":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/focus-ring":"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/switch_15.0.0-canary.f033fc8d1.0_1664323101484_0.1585988221637824","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/switch","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65e18e3e3ae01e59ec2c37933419b0b36c1fb5d1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8d7ae912a.0.tgz","fileCount":58,"integrity":"sha512-MGCiZsRCMVWIQNjEYoHx12sf6NNQhqml2ZRuZPuT3XRj4LDhscqrLudAPFexhS40y680GYbb38t0LKlDGwAYWg==","signatures":[{"sig":"MEYCIQDDA1z40hltnXkr/lSK3WGknT+clSJ83efSKAQnTLDz7wIhAJQzyCmUeh8u+leN57k80jrwKTZYiY/E8XhrIVnuY0gH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIBQ//cbiicGYdpztStvEbvRvy4C+8KnT6aQSjbr3x/KP7BYgj8Pxa\r\n9ND1k7ahnvbRJjzK9M6aMrn4zXjFsgyKT6/0XkAM5PeqmlYax+W6S4u+1Huu\r\nOcftWKS0wSIvMMShtnGwrZGzJBkqSbZ0Dvl4YPrALzQnVgCQK1/zjMwbNssx\r\nJeSpv5CSO82qTaK2OSYTLDUGbyAY6jcmHZfBU07JPKVHFWujpx4e6enDarTy\r\nGsVl10yhbxVs8hpwykWpQu4dq8D24jaEr+N9smJHa/3+H4yLdag4fovWoaP9\r\nOnR8BQzs2yI5QWGS91CKIl5A9+4PsVQ3V979dCBJTng0fq4K9L2cgUiDvviV\r\niAudKwiaQWXmHX6LXGgLRwmW9cegvjcmhZxNXis/GSbry48QuD99rKz2RxQb\r\nOoKCoC61u0UlnzMm5bICgd3rBiQhyUvNxIsAk+VQkJFehkIgj1JDxLh+cfyL\r\nc9WqBpHUVRdSbEra2G2lFbW1S3MMKUV3ah9xD8ufUkbs+laRrH8cZo9NQaLi\r\n3BYcrBWHVuAw2F7bATfDwsVKASqViCkK1oE8Gst9zHJcimAnrc3BAO7vJGos\r\nTTzFfGS1b5mDa2ADEzSdtFnn3tL4f9/PDnfngpoZR+ls1M0U4lWxEbO5kyjT\r\nsA77PIRQ+9mV82/qkDUmTCT95Mu4sjUbidM=\r\n=jDN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/tokens":"15.0.0-canary.8d7ae912a.0","@material/density":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/focus-ring":"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/switch_15.0.0-canary.8d7ae912a.0_1664351823535_0.700210364143232","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/switch","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.db414b864.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1791063e19db84d866d54bc815057037789d6edc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.db414b864.0.tgz","fileCount":58,"integrity":"sha512-GX88NrfJSXH3gdvl4MCK5Zgwgv4KMb6pBoAyiKP1Q+CTXlQXZRy7OSx4OG8N2QVxPFG6ukJM/2ZO+HJSaZ2J0Q==","signatures":[{"sig":"MEYCIQCAu/gFaUfAJLMxr8WQ7EXaD9mpXUxcRi0nYDj4MwP/RwIhANZ4JbXoPE1rXzq/CwNX6xYP8e1AyyL5ePs17bSk/Axj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof9xAAichoeRYGavF4kF5FLQVi2SAoHykwKyJqMD439e5AzKz3gbQ4\r\nAxwwpbmPK/HHTmLs+Qkw/r3DSUsgRcIJZyWvz5Rzwo9j0nKjJHvIYOqUnLE+\r\n8oU4JCLZBMamzc5TtAwnPjoCGZ+Tkjt+dhwxtWIa+zRqDwgxnWZ0kBiNFxOa\r\nbvzgNdIA9lDIIJM/s2tK4wQJ8pET4hmP0TdTtdXqxzHCCnvQ6l6tdyR+8wuU\r\nyzXyR86JrBSmLBrrSWXVDPgNitoxPqhOyhwwY+iluCbaRIAh17IV22T7J/Rb\r\nJnBkLH2t0Q/6fPaEFIpj8jxSrcVlo/N2gV3YLpGkStK/fsnFCCb8A2LePCZx\r\n8YhFniKcWEy50asHozM7HnJkY8yIWtJ7pkVAjHxOLx6Lsmh2wP7AxCvx6CNs\r\nr3O31nkBaUSQn1taENj11yRUJ+qsNfnROY0ApScoVuKYNZCK0W5PfBgDM/b4\r\nin1eYxUnukILNUaHvyuTYlSFOGPZsY+H+Zihxxqey8Qho0To2Hym0wBaNe6Q\r\nAMxIPc3KQFiQ8pTLvnKwP+FR+ntduuOP08bGT0egAyxuXTa27TKmTnRL6KYH\r\n1mtzhj+Kv+BTVHL6sBGdwqgKr+sG18xYTskrC4pQhsqOKO+aPzLgL5RY1i5P\r\n2ldN4g6COXr4IUZxc9O3YcI2noJu8m1hM4Q=\r\n=iVSm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/tokens":"15.0.0-canary.db414b864.0","@material/density":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/focus-ring":"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/switch_15.0.0-canary.db414b864.0_1664376823620_0.9093009032920147","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/switch","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bbb04280a998e811f20c9964ebfd7898314e2c5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.28cc6791f.0.tgz","fileCount":58,"integrity":"sha512-Lqtona54cTI2EGyzJlbWGPoNR3rnbvWi5W1wFccGeYid0nfxWaQY3RB1gXxm1fTwu7XiJpNWO5lZher9edGyKQ==","signatures":[{"sig":"MEQCIEI6NVAxyDG6DluF0EOT3ICYPpDp1OhtT2+mgjpnY9XNAiBNY7342xw02KcREvvNhL3LiQq49YMi6wg9vRoJiFD4RQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI2HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBuBAAkiQxBd1uCLqy+9Hype/akgYVQ0uRmbwsTpWXwq2cEGUmAzPO\r\nIe/J3yW0q4ZHHNhUeRFcvq70X432ZkDFCJpbVzUGpsm3NeNVYT+RQ/XEWzoN\r\nM9Ye5djZPgqYgFV2czJGafZQlH/wQaPoNNIf+BgIQRwuIDaNaeLkhu/G+8n8\r\ntzEtn1sGfQXUhkCMzcHwgdErlbJXitMESCFR8EAGPrkFj0+/oB3W0supIquO\r\nyv/gtjjkYRp/bakBYXSTfY5IsWJeRzaxYNNVyR4meoGUao5x9jii5QB4DUcy\r\nnLJKozoXAKXBRqYpfwLJPKBWg25GQvGBEngpWVFvT0as5IXHY0VfYQazuRoY\r\nhF1DROtLokAI2iXrt7AXx83TJ1guZbhUjguwni+5gX33gQhYi2THZV3pYcDq\r\nvuhXuRldrfNoDVBHhZFvTKq6qKS6JSvIOItJ873EypJyStkVePhWsc2wsCGG\r\nVJ5oUPc6Zgkz3j19PW7a+W2GkdV/zMB/tphT+wT6TLsaRnDDGVWUSuHIn1ZV\r\nVvyADLMBeggmpLpbeETLP4l39RfR+7G3sURn6Q2/ll+FK0+IpcWvBENVimxS\r\nmPJ2HpeoH/2R3uPk8P5/xIfIktp0vAec53X1JefDasyDrP3RTNoAM16P4G+M\r\neCFfLhs0yH+vtnDgC9+X1wMYpCny3kvhsKo=\r\n=T+fP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/tokens":"15.0.0-canary.28cc6791f.0","@material/density":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/focus-ring":"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/switch_15.0.0-canary.28cc6791f.0_1664388487191_0.007229182016727842","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/switch","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e80d0deff8e0a911c69c31029708e9b4a3dac4c2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a515a2d18.0.tgz","fileCount":58,"integrity":"sha512-UvVKy3u2ZxBPhgRNFwk3mvDDvGJs4Q64a16D1VDdc6A2iGaTFAGmAzawvphV2eC0hAc9sEEW3moYXhOITRnMUA==","signatures":[{"sig":"MEYCIQDS3fsOIFGh7DRVTYXEJMMd9fHnLsvIOhOQdOjqPjVZHgIhAPD2sZMsemr9mDxms7oE/Pgzjojh1SCBBz3RwgdqUgwd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrx8xAAok17jkKl3xYx9nJc1A2gjD2P56UXaGgNC8ArxLlM7aETmG1e\r\ns+mwdYJ3tP/u7KhodgyVSUSqPcfmmI5Xeqdi7AZbGT8/zx/TYLi+SbAJc5YE\r\nDCuzSEf3//iVH5sx5wiBqlHqz+yulhx3szntWOMPnVY0BRXBVDi0Vw0lj6mW\r\nu1sUvzlzWjPQvy/yhX0oJUCUPYb3Jg7knS3lDnv8nrZJQ4AWiVO1TJbIR8Ls\r\noXXmiohZws3MJa6gSltVezhqFHGj92s0SdAJxSe9oaJ1zgAfaGLCm+fXDpvq\r\nIuwaksfJxKr33IWdPbmspsgdb9iafM9s/SqtChjhC1AIIjdKJdORKJ0feEOm\r\n0xkhwGvl/qWcsc8x+eZv3uDY+91+Fnvl05qcqolFs9OC8rIrrPd7H2Gb9WTj\r\n3HN6TUoT5i1Z4Ope9dF7ycl3magj0h4cS1ZTw98XsqH53tHE/CyI10e4jwZ6\r\ntT9sR8g46WcADqcJ17PJQ8ticVNb2rnajFAHxvn8rrHMeVkeoBBsZxXkIVkD\r\nUnOk2E4dWxu/NYFR9/L9X63X/ats8qQQy9Hu1rJawwwVXWTFreO0N5RpwiX9\r\nNb3HFC1hJFYM6i3Rc3SPlDa2c9Yeigno757oBiM0xhvA3XjVrk7OIAkRy5QI\r\nFi5q6JNu8FQ8LKfLGyRQeyzUBS+B2bd/WEw=\r\n=cT2E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/tokens":"15.0.0-canary.a515a2d18.0","@material/density":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/focus-ring":"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/switch_15.0.0-canary.a515a2d18.0_1664391407655_0.026900367579052897","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/switch","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ce9523167.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab4015aebd044cb9a37bc71faa4d3e25776f61c7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ce9523167.0.tgz","fileCount":58,"integrity":"sha512-X+h4wIPhoDV2DM8oSuHwhqb6pkcvpFdyLAwn42MH4m22XPvGYCe2DCvMRIli9/MY3E+oH3+oRjj1U+uam/kLVA==","signatures":[{"sig":"MEQCICWxOJzeLxOxRq9Z4a9LnEe8JER2vhxOJVQHuoDO0bwZAiAGjeivKnrRwNAPNz/E6GiTimbLYHoU4GydROGtfMg8UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgDNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeNhAAlg/0seCTfi7JlPhZj9dmDNkD3cSfdj8aAkb5dpBcxm8/L2fq\r\nYuygPyEkGNJfr1oYPpLwmoWKE3/pSY7N+j37CqJgdTB8DJzcU11WHG5Q3f8v\r\n27AauSJ8HgA8cozmaNxe8iHTBt0aW8ZlVfAHCYQNnhITI5Vesjuig8yw2mGQ\r\nFMHa42z5I/tIFSKI/wxOSSgySMhWMi0RnZSbRjRCLHAPHHnNcdGWoRLMuh2E\r\nhPC+TPm6E7omn3vDpgIZiayeBLeoVDu7OUZQBdA5jUkTwjxblGfr19RKFnCG\r\nLkvfzLl7gnVntRm8/0hFEERFEdnbDl/4x/tRCYLlD3wepigz3rug4peHYwSd\r\n6dV4bo2/64eggnpSRjg3jok/Kd5awpaxlCyOY6+V/b8HA/epAf5WkQdXNIaT\r\nGW1HgxRWSSZPP4HVO4gMoUj3E27ZrtNLBANvXvC2zwe8SqK/O5SkFSSeVG5C\r\nxWlTHgbwUCjkxx1c8qVx3d48VjniJuY70qjiZygQ9sTCTC9kP4vCQk7uO88R\r\nT2jJB6Y2G+BoXsXWPdeTpxhV5FV6AtUYr7jGdns9/dj1rEW9z9VKOgUkbrjG\r\n+WfRGK5Jpw1Vy1iXA4sgpOsTuNY8PVOel3n5ic4R+SFeoL4534C+hrXK0r6p\r\nq/gWXi0aEUu/mHA+n0VYVeygPkr+nJ0aIgY=\r\n=3+E/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/tokens":"15.0.0-canary.ce9523167.0","@material/density":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/focus-ring":"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/switch_15.0.0-canary.ce9523167.0_1664483533422_0.12218820337495195","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/switch","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32131a80f9a3e06e285dd673a95cd794b5b21a7c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b2310f7dc.0.tgz","fileCount":58,"integrity":"sha512-Y0momOZePltxuFm0JG/GrbmD+EuVrZsxMzmy+MokUj1qj0iCFLW0j7x1fpap6A/FjoRJ7NJ/sfiH/7P0C819oQ==","signatures":[{"sig":"MEQCIHeFERb8Tqp7yhXlrUo9WBV++o1PYv/TC/LMVLoY50GfAiA1bhBq2c1MMym8MBoK8bYHGU7r0enSiMX7gNQy7Zaprg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":745830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjT3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDbw/5AZEOYRBq29zDQ6jTHWDkOa1KPP/Vw+9Kbe7fCz4Ph8O9+EgD\r\nsYLXh1k8ZhKfrGy7UiiCZSs4eS6UXDtmmYyQa5IvODCQnxsc1Eyh3qIQX2Dk\r\nQMQuESfxeX8c5/0jC9BjX6eQvszuqFjd964tIeqiVSAH02AXLAklt+H+lp5c\r\nFu2QEUXsNkl1NFh12hWsGZXLlW7P9+5HnXXP5P+dix94CZv2Uptdv5WtY/hI\r\n+92yehppypBbhTIECBJVIhzn8H1leXIv0EXRw4PCHBijFQblhYOopj2P5ZbV\r\nhtTVvNWhuSPYUYUoPJr5rcbK2h/pHyQAUrQzbFL62NRgprLKe5RNBTRj4icN\r\noQz+m5t22kP7Bj+h6hqRUEDi86R1AUeCYXI/fRzIpNFZujt+7KXUd4qzUj1A\r\nkSxv702dt7VRrz6/HRIS2zMm0rXgRovZCnLL8l8e1+QcmngEH+eK5oaOxzEn\r\nKal2aCQOo8CQuDd/TQWTexi5e3bSocU+vV6uqniYUsLABsyVTGn3rpyv+z57\r\nWotyma6d/1xyyAngX6r0JBPC/hBA3lIC+bmSRmOKnsFOWAgfTTYlBxsSFilY\r\ngLQmvekN+fu2X8rNGlJNT6YFaxJO5wCneTlBZq3wQcWHaEwkgsvoAnRMxLFn\r\nObkbsH+8b6c5O2fHIN2735+2rCjs9jgd9OI=\r\n=fKj1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/tokens":"15.0.0-canary.b2310f7dc.0","@material/density":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/focus-ring":"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/switch_15.0.0-canary.b2310f7dc.0_1664496886862_0.30515110650304567","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/switch","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a44241e54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e443a42080eed0d3f05f81a224e27de8a430c60","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a44241e54.0.tgz","fileCount":58,"integrity":"sha512-v3tC+/sshm0jAOktOi4RnRlQYxBpzYtnWqeM7zEeZ185oWVWd3BjFYUIuqPAWA0jUsb5V54LmO3QWS4tNoIzxA==","signatures":[{"sig":"MEQCIBCWaaw3kjJ8m342v0VpPYxK7djy44DaKNhlKp8zOh34AiBo7NerwbAUIov9MUkzjCOoz9CPZWGlV3Lc3j23pZF6ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1081639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw0BAAk7dTj11KdxZxGNrRVTXc/sGAjob+McOQUhjaUGimq+fQe8Oh\r\nOZfuR/F/zFlEq3Qd9gDf+HZt8RQIw/6UzcSDzPE77qr7rq+hNm5uEJIEzdpx\r\nUhcWk3JbwiWU6X6p9vbjobH0qRZYY0Vku0LUENyko4gT7EOTtrG9gLlEp1W/\r\nacBw+/Q+kKpVPXqBicBR1X3TSneogb6HSZLd7ibfd762ifkzhcBJGjsIEHij\r\n7erBoqeMSRNQBdBwtIYNgEaiGICwAE5im9U2CobE0uvd6GOwAg5kjFmsVIax\r\nIhDoA3AWARtmP21NoNkMjUPIfoVn9Im366uJTGzzLY/u9XlbfjJJmDzRaBQ4\r\nOBTJxGcLtAydJDySeFO9plL+rxysjMjASzekOxt8gAuD6/NawyXAafUACpS8\r\nFotcBAD7/DtynYqt4mZrSFbkw0j9aBPRgF+Uy919UYuuljdrT57lALxpjRGJ\r\nXWmTKmPntH/DAlsewwANYE7oTS9RneUpU0aEEx//YPEnjOEwNigKMPbF+GaB\r\nm5tL8nbRUhll89vTlaxU+zNEWE1/nz9sS/2kl0xQhuJfIWcQz5wa7xIN61O7\r\n+QNIJrJDjzuK0TQ3j3tMJ5mFdqLmt57WbRwWtpBtqqYcOdNAeir5p91XI7FH\r\nvVHpXUI11nE98lCO/bqHl2zmnkWrBv7/Gfw=\r\n=IFvH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/tokens":"15.0.0-canary.a44241e54.0","@material/density":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/focus-ring":"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/switch_15.0.0-canary.a44241e54.0_1664526123430_0.8297574824048852","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/switch","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a05c6b7b6b5a6a6e0a9edf1c582b2a99c247492","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0ce81e115.0.tgz","fileCount":58,"integrity":"sha512-sfz18vIrHiq47ycK2CXcYlTXvCi9AldoX+CIQq3BsXrxk5EuOw4elJm2ffibTFJTGhnw8g+t7hiPJIvbom65dA==","signatures":[{"sig":"MEYCIQCyMwwwJCFol/KaAs/ZMdpX1eVsMpg79q/8FYyciTHl1AIhAOUP7fcPLNXegqshgybVUFSmDI6hGb2u+ZyYrj5mX2QI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1081639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzMiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof6w/9Hqk6z77VgDRvArtExbBh5PBYxjgLpkzjCic36iNdBdiFFNEc\r\notYnUhrsbDi7dkIJBkExw1R9HLTWAfDFnO2B4vCAAy3OFwbd4JUguJKaYcjq\r\n7gL1sK5l3KrswqMS6UYFSwXU2YY9J+v2geWS9PVKgHiX3rcyPpM35v8S1r6c\r\n4qTLjlrlMOXqF4kAzMUe6Or6eEwdL8xSAFhLcOWyV6Qyh0pfSgrvVj5w62OJ\r\nSNU7Jj73LtOFP1FXsv/jF4DbTlc5c9Xwed8VnEEs43OgS37l1Gv4cqcFvYOn\r\n4rRNA0+taMFpCYsK7ZARa2rrX+wQIUr07U+q7yo2M0JmWOnlDE6eWdUqlgM+\r\njGw0PN/Q18x7zPlWkRCL0paMalO5MlthaNiQha7+tXdOt6pjzZ1+97GG3kz3\r\nml4hhWnFNZ7vLRkePgZlK8yWby+4a2etEDSo6faLX2hpBw6u3MUfYpdhOhXt\r\nwqh4IYAcO6peEziiHzYSHZcJqmju/IGyucEIhswvVptGxrP9OKf8nYYukvHS\r\nGzoAnRYHSIHNjgOViGe8AfqlCYzjWVQ6mMhvxdE0lhb38fFSUgPqiJp560c3\r\nnmPfmSPrjCYB2BGmsyWugL7HOH6hNuGKr4EX94JDqqyu64q8S4+ZPllT814Y\r\nZdRWat5W9kMoRVeqsjNpCrnCOxCH01V9kRY=\r\n=XE7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/tokens":"15.0.0-canary.0ce81e115.0","@material/density":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/focus-ring":"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/switch_15.0.0-canary.0ce81e115.0_1664561953702_0.40728051212081207","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/switch","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fff2b4d7769f0a0ca2e4ade2b30f12b4d78166c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":58,"integrity":"sha512-8hDB7czY3Y4NcqDuEZgdu9vb9DU8dd84Ltkrz+uUxaWHFe1e7kDRbKDEZW7RUs9wKWimmToXTfPqdYl7mozyQQ==","signatures":[{"sig":"MEUCIEZlHmpGePS3rgWXUa7EqQdnsO5e+H4NrlbtwLGKOGwoAiEAhFXR2Nb31y/qf+MdaseOPW2Kb8lB9BWSn/1l/0+vciw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1081639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGtfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEEg//WpCtvnznRxHkOVv44qB7fcdX8Dbfpgxz4rdi5qKbnQsdBASs\r\nb0hW/TkFOc4YzoOlqU5IOmWyBlWwUvcj5gWwShbahksipkK2xl/JgatL5UX8\r\nY/xLvl8mkZ77cKJN56uWEWat5XbjGjs425j9ptELMkMVMjX9yGKYkFn90Cs7\r\nKKfi0hG/Fli+yIF2AD1gr0zxesLViApfWY6Vlrc0O+437hN7WKWKgRHDlIul\r\nhPXX8FWWCdLad53/uvOvisJ2HP85GN9JlpS1Mp+m8uMhcZVP8+TwcajQxrHB\r\nuBsicYcAj24Of3OQab8VvCE6HrfpiKoYbuq2e44nLQy8qY5u/MEfxIpLGBv1\r\n13TNjMR3WNgBwL/PZl7x3c5hNJvrCN9Sc3o6qKWj/98ZSd+EIn9ihDGZbYyC\r\nEF7ZyNY8oF55YSLycFvhpn95S63LZCTjqIwjIoAI2lqPV3KmJUeO9locwRvU\r\nw18yCD8BFEVpEOj9ZQAlyEAo6DyUdcjQA0z2m9UyA47+3N4pRjXZe32IUADN\r\njWESfoFr0AO0cyP9LmYbhI2WOoPDMF40AeOQLSAeq3w7KRii7rWNfpbHC/x6\r\noFWFHpLmG/Y4HLRPVQZBsBomVtGJ2wlAqHuzysMdukqh6LKE1V40/CRddn+g\r\nzpSIv6Ot48s245oXUXELGuI4iDIRoVmkdjg=\r\n=4ty3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/tokens":"15.0.0-canary.3cc30f6ad.0","@material/density":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/focus-ring":"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/switch_15.0.0-canary.3cc30f6ad.0_1664904031160_0.7224990409104277","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/switch","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"740a6f1fdb4138d950b23f7fad05bb445b6a43e7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d9cf98e60.0.tgz","fileCount":58,"integrity":"sha512-DAglbk7y+1jFUuwHQx57N17tBKBl4vVMrjft9DyEc1+EpUyUvfYpImUikTSQMdFNUbr7r7+kIm3Mdkx/aXYp3w==","signatures":[{"sig":"MEUCIQCLgDQXPO8Dpv2/1h5b6YxLshsBPgdvBBpyNSGNg6t+BgIgXH6yXTOBYYjnKgG9ia303J1gaPhYyOOCoz4BGqFwq64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1081639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIPMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEbxAAl3xxFkQECX/noLT6/0sfW0+Emfu2na0/FwhdXvbBnIR7TGUa\r\neIgtiTy0mNq83tlXrpwKzoHfvqJFFfEgY8fJmPQ6IDvFk3kR9zd8GGBy2aDJ\r\nFITYUsDdytbyBvf4OD/kFUnCVez8xqeLC8QQJPEn92Mm4QY/eIRAc/HM2R1C\r\nzOsaTS2sijay8QW5tNKMC8eFHJMVGqBxK2oGKaAkvdfk4gapiDRnkW4fs4eV\r\nr5a2IjIPtB/ID2MLKOmBwjoeovWdV85md/iu4KunVckT+XZX4jJMV7GN5bwv\r\nDqED8cwcD1wMHsbOMstjLjK1d1ez31KmoV2ZlVGNfWeKysY6ByMW5G0BTk4t\r\npzOiSj4kNOwnnHyTIKI9Kp+HLAWL48Vx9wDEfvCsJfm5IsJEXrM1nqepxnv9\r\n1sVGHeZWxZOTCT0jXpns6bIvH5VujdYvK2vXaxgUgfRbgzoxaTXNVcm1AFkv\r\n+yvVPh54GBQ4QHUU7pHN0t5p7frE7TF1PGphhb8K4Sp/QWqsKxLxe9JnXbGn\r\nHG9jcnrgy7FYoBHpBj5J6jv54I93DAtYpCEbxZJmJO+fWNo/gDk/cIjZYgLx\r\ngfjEiLRUY2Flx7WPw98XNYtWOFSgRzgA4nYrzuGlNQG78qmAeV3wFKGXSNhF\r\n5gsUpquzHD12GGRHD7DVuJrT6qoq+1rcFi0=\r\n=ULPw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/tokens":"15.0.0-canary.d9cf98e60.0","@material/density":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/focus-ring":"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/switch_15.0.0-canary.d9cf98e60.0_1664910283940_0.7713776369407923","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/switch","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56053d7d4e2c80d89ba63be2b525640f0a6b3138","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d71935c8b.0.tgz","fileCount":58,"integrity":"sha512-3Md3gsSsvXRtIc8WDRw99L2YxRL/3IfnwT8YxtLR+yLqKOt5QKK2SIVF7SgY1BRiiaVlzAqBriiMQ/5bphXNhw==","signatures":[{"sig":"MEUCIBa4JSTwjGrLJS23NkES1iczEl1f0B3ZKEU4z4/lFJqqAiEAqsjSYDIBbwlrfHCTLMcecHfNSIMlBmp5RFU1UhznsHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1081639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo63ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdwRAAiv/9HPCzr8FHE4sf/ehNoY34YEYBXLnpv+ZQoeo+SzxSkNlQ\r\n57hZ4ayS8BqiU9V3Z+TNrA0x5J3LuV8dLo4VBaLqASuPYaegwwxrggVr9SqN\r\nTLk+y9ZBHer7GMuMoVMLo9vqqYgQ0Jl+yIBtHgTg3Ol1VzUHhUgL7NTExC9R\r\nd5QFTUcMJT18kxoJHnIcNPR1zJiiQ9UifYAKsLjpbGXLsAOvZgdOuWuHxtPK\r\nolj6Jjygvfq1KNGWjp73pnySRi3clmqUs2woxPcKknCDlYq2qezMx0zZtNXe\r\nyXk6d1NFw/xZ3VeGXEheV4fwVZzetHyProCntMwtktDGm96A4+6gGgjACTj+\r\nQWXZxMpBBwteGzZSoSv9gmHDcc4/VZTHs93BYERSLEV7coDyaarfrpqNmb+G\r\nxlksRj1PDBPHxzuXql2DeYGGbritsB9x4LHvK5rRLrnbJnfqTvuKc8jSwaCE\r\nnNf5Jd7WvcKcVXHsnICJwTzJrCGxNUDUIXTaZUogCZZh0Ds6osMazXqbZbno\r\nKbvzXOP/SnPozdJY1EJjGcqUruYEJxRXI9CIkn6/71SHoZP3W8kqIoHDeQop\r\n47vQXc17hNvyzFHAI/0N5BJnFwpApi12pcbUNc61gKUpQsXNVyB8ttilftit\r\n2IVwvPKzYVQ6KOwR2lcHYGCaSCk7rJCGZDo=\r\n=aWr5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/tokens":"15.0.0-canary.d71935c8b.0","@material/density":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/focus-ring":"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/switch_15.0.0-canary.d71935c8b.0_1665044150964_0.11644156517458604","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/switch","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3769c5c812f22b8fdd69f8493728e78e09fc1fa0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.49c56a25d.0.tgz","fileCount":58,"integrity":"sha512-iu0spozUx0ToNxbnc8C5F+oZ8i7fsKHaga4vAj+GXc9B7hQe9/znSJzqNDb4JEa7Vo9TJMZ8CBQVsKAJ35hcQg==","signatures":[{"sig":"MEUCIQC6qsbJB801vOdhLmBY0p5YE6my2TEXwzL1dAsYaKEEzwIgJsqTRrLBKrm9V65sBcLgFowS62CaMWSZsqwQvVjSh78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyPJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJXA/+OEEzWvTx56pSeHUSgSCmsDdqwXChaW8K3+rHKZFP36cq9eOB\r\nlaCkua8ujrjO5wYcKG9qeh1P5/d/g4pPfCHvzz6UqVxYMBjGm/sRyG/jQvQf\r\nJtl+vxzk57ru5G2kQHK5l5zB8Od0oI934HyFupIQCmXLEAfcx/2OhF7Y4dnF\r\nHiDt+tx2JygHjCROtCmqq6OboWNiU85Sr1VPMSa54sK98WcxwXxsR6bRTphD\r\nSQUqoN1sB3YqyvnW9D7vG0zkAYT2nhHQ/hEHitnvVdMfNz6gerBsDYj5B0X1\r\nFc3Q2rfpELstdGMP9+7vICjJNmrPyl4Sm7wiBqf1KgCpKgrtc8HomFrpJjCb\r\n8nQEczfw/OcK+vyDMDRq2eJK60xjXB5oFvaJg9i5bFWr/wfVhtn9TvmfZF5U\r\neEFwJo/wnlYzDL6tHk+sf7EdmsWbNVlUMPsl+FBil7kuBcRfuVCQZrCrtpey\r\n5OOEs2BmCB45sQsZ2UDGMFD6VTMKt8dniNbtnzdSgSn68AnnGJqdegqyMRO9\r\nPWr8KTkjGk91bk8nvcYwi0q177oMoyyopbHHXob8HcxJd3IyFzaspcy3MlNz\r\ncDgtAt6JQKgA5teFiYyBlTb9ctQvQJHLO5oVtVoafGt/kO+OuFk/2I8fgUZS\r\nJH14Kf9oQZ7Bs/SqErHocxPAFUkIj3TXTz8=\r\n=HjcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/tokens":"15.0.0-canary.49c56a25d.0","@material/density":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/focus-ring":"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/switch_15.0.0-canary.49c56a25d.0_1665082312910_0.13122937590535444","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/switch","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.07acddef3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a85b956ad9bf28227ff63e622a2d57734c5c1d0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.07acddef3.0.tgz","fileCount":58,"integrity":"sha512-prXk5on6dwYiuTpvrONWpEQBbBU6OUsCtXfFpXIzI0MYVqucEcCt3IERTc+L6OdqVDhLdTfCIFBkjzFIhEDcrA==","signatures":[{"sig":"MEUCIQDsmEL3Odz6rYiv5NDGyanoHqoXibHAVSfXLPNGTA0i3QIgQkCCHnll86H5bIqFjplMtAk23l2naqXal5mKPZyAngQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJxQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPVg/+KUtl9McimsDt8B5EVREFBDZYIBSpznx26/14txp66IL/IFHe\r\n4hOMBO/1uhL3of2qmGc8LyVan5qspRoRgA917tTgQcrYHSYM+7mK4cTpkBtS\r\noJchKfxvr7gpikWry1KIyI1nZxqwTp8FkaCfRBMxw3I8/hG0qEQhaMa7rLTU\r\nCaaUsVjsnJ11Pjmyv2LBwQB9HrIOWQ09dgsgawiLJWXM1QZtOnI3tuE8K/VH\r\n4sq42VtRim3jLw3/XbrrJBkUWK2IqqvHRZXCRA1N+ndRwAbsKIzlBL3S5hQ4\r\nPveIyAO5geajMxzX6nM+rPMZRbOLi4qvlF4q0PJ0CIhpxtzNdfAzpVGJqmam\r\nu06rnLJV1g3pyiM/2aUhvwm48R+qMm8ePWCPjLy/J034wiFmXH0sbv1a1S3n\r\nmSuD+9+lE+R+BIHyM4YxQc3FqWYIKW5BoJ5xuZh2E4GxRpTjsRvj20jHF13l\r\nsk4Deh/uoBc46ySTzDUcArArwUKRmm1zVUXy+dP38qo7vYLmzSSxNiZLkqqe\r\nivlZKFcqQ+NLRk0QDmg7euPZYEBDvTj+KnQRh/TAF7twMYsSzDgzVZY5gt1U\r\nuk33mALhUTqxRGEsBMotjYqgugePvBJO1U4Gl0Hm+8BaUCdYqks5wuqiL9Qr\r\nzxv9/tgAp1m9posPTkI1yI7ZSoki4+RDOmU=\r\n=6pCp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/tokens":"15.0.0-canary.07acddef3.0","@material/density":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/focus-ring":"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/switch_15.0.0-canary.07acddef3.0_1665178704364_0.9514913575089547","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/switch","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ce1676adfb660fcc9136f7da67ee2cb700c451","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":58,"integrity":"sha512-BX8UpW+fS9KgylJ+Mee+Cy9X5cDwQj+TRSppjnW45NdBwJzkU/yvTW02EaJRkX1xXAs+DP3oN0H/wpi4cPhqGQ==","signatures":[{"sig":"MEYCIQDQhIxjpxUj756if4+4xw07SoEja+ACFdKWHl0qtwTeOwIhAIP4f2iK1gqrZwXZclCSu4WTYUiQeQZ1vgs3IPhDnJK0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKCJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps5w/+JzafdsW58t1YMAkpaPVULnGr9y2QywR5uHX8f0PMfWt2PEYA\r\niNxBJgS/sKf299uxBqNqzwokcNcZ2xCzBmGPVq3uxObmEbLCc4FzaB2qkWVm\r\n3dipWuFjvz7Q90HpXYq3ZBfdQ84pYONxqX2ce7P4HNhA1LLRPaT7dQPpLNQ6\r\nabfT8uINeWImG3c1mmgAiZ2rAq3+PqdzpEjkjAPEOohGevJFKokrGBvMRNDc\r\nhj9Kw9CeuRTAkB3Ut2gUoaC9dDb2Al+dyK8fJCRircf8KLctSuzqb/wmRcd4\r\nyLg8knj/qmkaXNQ4lqN//ajNU6ITe4EYXEUNQitmGpGGkZAW0o70RYt9QOWw\r\npc4SgY5xNhCJAu4IcEQHh28/o0G43RL/l05gcjRC+a6w6WtvgZF/ItzWilWN\r\nn23N3n49CE4mTz5+W7RzBYqPxDkFGxUlFKhYc9XQitPyowJSKElTyJ0An6Hw\r\nMeEs5ACQ7ro8sTN2wxr51vkWfh1kga/vfOQ17hWIN5iD1lhz7kmDb+1kW314\r\n+OyI5vKrHEYf3NiOdsIFyiyypQ7PxyOQKbzWwkDqyTfaNwfzm/EAF8pIh/LT\r\nEBDHD4SoIOFpacutZ9ouaK/o7+Mqz89RZSK+oY5n0duNzoQf3hoH6G8+KjMb\r\n2II8FagAFh/RgP82Ke+/o32t24/JrrObiCA=\r\n=Lyw0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/tokens":"15.0.0-canary.1c74eb2c0.0","@material/density":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/focus-ring":"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/switch_15.0.0-canary.1c74eb2c0.0_1665179784921_0.7560071069521961","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/switch","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4408bfc5c76edafbb9fdfcdf02eb28f09a6b3af1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.dadfb713e.0.tgz","fileCount":58,"integrity":"sha512-O+YNWW87RZ8oKH3tCu5y8ibe3IX0IzWoFE7k8sMBa5/njRR+Klv9s+NWlGJJoamGw+OwOq9qOX9bx6Pv7b7Dwg==","signatures":[{"sig":"MEUCIF0APMrIp2LkYCHwwYNXN6mEY0tSZFvy6rKCVTKhG+vpAiEAxJYQ0e8jEytk7Y5COuIYspfo1XlOaW5dHZCTSDtsEuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobkhAAhduCN6cYlPSUxGqLJqPvfPgb7llOKJX59+W81BJe4TLHNq1L\r\nIXBo0Q8+sgYJomhsL8/I/MMwGDmuXmsx/ai5B70lN3i6ynnbhS72Z/kxTSsj\r\nZqWJdLDKzy8xcWv1bMpfIQMzrCmDDV/O7Rg8coX3i8AP2/HxVtcEI7uZAv//\r\nU2lTino4RmU1j9OttV6ONxM/2nUa9BiiDHiZFCZj9ghTcJCYVrjH1+GZPZat\r\nXmS0T+7FuadJqu/nu9lsX5LY/EYO5OFFCFFANZxR7CskXmx+o+6cnbhCRlhL\r\n8Kzevng8D4BMord6DQsK5Gy5VLl9s08l2hIXdhoM6fwEzFdpD5QBK4FSt6QB\r\nTekHBowTwE1GU4Kpbya5vKbWSa88Vw9a47yaUxY6lVdySwezxspfADqyhSF3\r\n4jPIZ0JXPEoLZRgYPPhg5py8XdtDyQ23gE16mFgtGkT8JuK2vbt3gCFhxqIY\r\nBEjui4M0lM5BkPKR8J2g5Nq7AoUFVUinA/PeLnXjCkFBbigY/NrVRJfHMOXB\r\n1Dl5m4ivRqb26HcW/hHE/Qmsr4NIT2HgUthYeWMvFeLTOIuLK1w8APMI8DGK\r\ndAOFBDRXQ9Ly1fQWsaxTpL6NOcCqeXvcjeQQZ+hnkbel/WgmcohA0NtFYPsa\r\n7yf6Uckjtgc6fJu2t6KNaUcJSIxJ4JQspe8=\r\n=cxnU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/tokens":"15.0.0-canary.dadfb713e.0","@material/density":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/focus-ring":"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/switch_15.0.0-canary.dadfb713e.0_1665205597119_0.30776857893031084","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/switch","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"605d6babc1b0dc43367fd55b5a9427cb6694e040","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.395f1ce61.0.tgz","fileCount":58,"integrity":"sha512-QqvuNllhEpQI0LUtw+6iaL5ZdFI3MlJmLXym/p55L608maj+pb5QxDfSQhInrH+uVWo0s9NPJrD5zRu9eV8QCw==","signatures":[{"sig":"MEUCICct2sQxOoApev6JEeGYFHVaonihbzQDA+knOeDKstMrAiEA0TzC8Z3DkXFGyX41UNxHMOr5GiXzRb+uVzaL5ffi1Xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQXWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnSQ/+Lc5b65pTLjARB2ienSnqIkSNhuVUyh8exJlsJHxJBKL5DXHU\r\nIUACGidS1FZDL7O+tL1Dkl4ZTAFIvOPttgUJhb+ll+Juusj8tzHkLk4mS/dz\r\n/w/f+yEV9eEDANMKH7ksjyLo0tyiFlNWhG3RbS/blATGFDIxtUlGmr7fNTB8\r\nQQAcbFRyAyh1sRnB4XxRebvz6dXjv6RoNN9s2/xGnFR7S31Kd+b3yytR8P7m\r\nfQXvgUFlEYjsW2ZDadk2d2j8SZ8B9y5LRGAbogVcnrVuBG62skFuHePgHNSj\r\n0/dr81FIIlBmn8xnTiQhWhME1fmE168iZJkx9AJQ4h5VxZguS6hDdsWaOtVm\r\neq8fljcj/I3bX6QPAvxPz4vE3lJdOyoteZlIorstWXUx5eXLHlXwTSYy8Kfb\r\nlVyf+uQB5W6bfxpKf0oX2+Mt5EJalnPxF8RkePP4u+enqHKX3yVsZqyyzxrM\r\nZZeJVYLMvCK0P2bTyDPAc3OhwvgD0cnMWKMqB5Kh+62fsbFIsV6mItcDbK6S\r\nA6uK5xMdNj3tQPCogrxA3ff67Sk3d65oKSJD7QHlN5WX8siHMHF6/6hU56Ky\r\nhgSyAmXoQwzJrXsb5jhmi7GDVKgLaZ9eqKZ/P0ieVp8S4XX65DIvH77+Pjoa\r\nQJMh2IEEyOWKZIjGauLQZU9X/blLVy62TgI=\r\n=varY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/tokens":"15.0.0-canary.395f1ce61.0","@material/density":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/focus-ring":"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/switch_15.0.0-canary.395f1ce61.0_1665205717848_0.5118507632593732","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/switch","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cc9274fa0b7524f5c14597fa376771cbdf46c64","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e741b5c82.0.tgz","fileCount":58,"integrity":"sha512-FpEa+ixMK9Rfq6I+iOxSlUsVFRJjXKt1EAdN1GicHQn3bbJ0XNqWDgRp9mgq8asP4SOrzwgpacAcsG5dJlaEaw==","signatures":[{"sig":"MEYCIQDgVggLvymfr9s4KL0pFfTC8azaNLwhEISijDyBZYR/wAIhAJ+uQI/pp7Yt8Tt9vV8B5nYjvfh6Lui+RpMc1TZT4/3H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFi1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfOBAApD82AQT6FV6kumRDxyS0s+N3h7M+sWoAzlTasQnGegdZmIVH\r\nS7ubAUzct2ix5K1dIvEnK48a4llb4HWJeHa5MWiFocABAUITRIsJwvoK6N6q\r\nTOPX7KjR/zjpfdtDC/BvKFmvd1zhxGAdUp+xa5p6Gc/hPPEHlXHW6c7h3pYO\r\ni+v+eEuDCZKGEPshWbp5DzqnwPUCr9e6uAMluBUS8qQBtV5df73iQLDcby/m\r\nsHv69XB0HJjibNtLJ5P4kIE1uHdGVLfn/UkM7UIliITQi1SskLutl0X+Dt6x\r\nz2IdPsKATg5rDx5yt0Ii/wvM5lPH0S29V/5XaPehDLGy7/wqUESXa6FiTHcc\r\nx0uFCDmZpWg/0GWzI55vO9qe0nj3+ibCFuZ9IPMdgOkPOnofhV5yio475ZF0\r\nZ00RKN8U/C3NsHiCiSs551/j5RtByPvu68OTdd9neEHtWWBCK2D+q2Ro8Fhv\r\n0p8Or8cQyYjvwl5rDpFLvH/gqjqqGgkLNqnHC0URYgfoI1ULArNcQjzdK72d\r\nE9dMapZlvRqKhBaAL/J2/bWXKesYAQP2TGtFFnDPero3qa0oMsitZxr8lbpd\r\nb5t7arctktxyWI3P70lq/j6DnFwTvY4HF79D6IENG6nVctGiO8IWVaX3E9KD\r\nd5g3VFyY1aZDEYebDBU03hUT3C3KSzkwUJ0=\r\n=2H+d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/tokens":"15.0.0-canary.e741b5c82.0","@material/density":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/focus-ring":"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/switch_15.0.0-canary.e741b5c82.0_1665423541153_0.083205008174557","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/switch","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a0bbe6308b01e1e090221586fe52fd6ac2d5528","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.582f3cc1c.0.tgz","fileCount":58,"integrity":"sha512-KpczvOtiSpv90GWl6ekOlXGuQkHzfHMPzSydsdi4DjNVzhXM7gAk+ViLLuWh+erQst85Gi5OcOrzo9xPYcpXfg==","signatures":[{"sig":"MEUCIHHVTPpgIL9bxT9CMLEBEvRZXTJmS3VodxP+QjNKSuMLAiEAprtInZ+h1ILfR9ZP3OFYhUjrDyG0M/JQJEDxANAiwqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPX0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd1xAAjOGZtCyFrsAkRlcFHvnz6NJrc8PTPjYB8+DFBW2shcR+TXwO\r\nI5k6DSOi/TubvIlCHwTMMmX1/AFfT++17wWMnrzpnH5mEPEn0fIuEK2Bb/n5\r\nsViPWxPFoUIH3Z8lst7LdAiCYPNIKgE5zmX1Zpe9OXWz0NuKeDk1SOCIzGK3\r\n40g52kNrg1H1VQs7pa7aPxm46X/90QJ/OCYdx3qaCwbQo3/gjk34GRaGCAGA\r\nRSYeZ6iq83TFuIv1hei2UI+NDnJ34VsSNn1JUYyIu1EMjWw3DkUdm4RRo8oE\r\n0eJk14UYG3D8KhIZCWO4+YwL/HFNCGEedUFoxekNSGImWnSe1jmd55EvvEyf\r\nWRPtBT4+GLFQno8THxIrsxyGHlxyAEYFUoXF2LS06DS0lGcidw5rj9QfMo76\r\nJL9atSQia1hL6mF16LDz4N4blznpiNbLlMg9l1SnvId24Z5w6XkBLxHCzlKF\r\nHLBAs9NxLj23FZH+/GVsniVf3WDvAXnXDCtkCXFv+cmxukEAHuxAKh7w+VFB\r\nqYSaVIM/D2Ai+SKO0oUztwZq8b68sDraj3xrqamX8VdN0OsTWm62JkTcxFMu\r\nyNrVYXd0/2vg4FIJl1Cr4QG02/LUGSUrIaq8YuSZ5fF9rQWkq9S1RVAW18P+\r\nfJTFKkw7nElosSd1mBx2BZceHQ7U1Uk2Sqw=\r\n=VCia\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/tokens":"15.0.0-canary.582f3cc1c.0","@material/density":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/focus-ring":"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/switch_15.0.0-canary.582f3cc1c.0_1665463796289_0.8452938436394382","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/switch","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"427c89f313498dce962f3e401bb4c1975e11711f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":58,"integrity":"sha512-cgIlJ7YOP2xlQuF9WY47U85XsRgraFu/c13R6xzhDjBAAEclvmlpAF42vq8rQVWAUHJLi51BzaOqAdG4LdkTZA==","signatures":[{"sig":"MEUCIBSxZKbXg+//+XPKW5pE9e5Pk0nUzJH90U8DyTebENuhAiEAhIoSQHi671LM+KJ+6I3Yw8ISXcApXsC0P5P64+qdaa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqz/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDpA/8CfN3LNm+87MiVvmMUUwIT0cTKcmrr/seSN9beHnD/phPdd0G\r\nckncILDvZ8nsbcRAQRIi7Azu+U3pqvA9SWeyAe7sfuEYgAAv7mRDRu7Gp1Mc\r\nKD212qR0zsuF5Bk2q3gbiX0GnovFlxYbPAcv06BueNR9+BsSOTNK6EnXWhvV\r\n31TDtk829BZKZ4YT8+lc9XHmLJ3p6uKY8e5WPMLeOHcchATJDx4cRw/CDYg6\r\ns1qA+W43JLPaByRuN2ZM88cbwMUuLwcZdv5VX7fX4+ggRhd4XgndfftHPzPK\r\nUVLV6A0PVzw5JPEoUnOB/cONKrPvuj62fhukEK+dxFyO2L9Ds3bAazeRorl4\r\nqEwP2FS4ISG83G6qvoHpl59uvdqky9ESYcbRXrKI/mt6szf0PBilpGFaKLVr\r\n6fWSKGs8OeO21/AyebYykqQo0RjUQeN9vzVc56uEPzkakEctRanEBUo8G6pa\r\ndA/3t+U4ijEDnRT0SPEzCbKL6VqvikDsP0ULkoeT6i/Z6UuBkc0lUA7w0VRG\r\nng+S0zrCfQHyjb+8EKgmLOgrp9lBDRCOxvplvG7+KkBsa0yt0Q68gLJS8LvF\r\nPZ7T1mF63Zaag2PgsoOT2q69VOFl13M8ov5CrNhfmyYdSDvaVN5fPvabqzUV\r\n5deAn3vaAmmdujBkuDYOOjI8jsdsgzUWMpY=\r\n=qwzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/tokens":"15.0.0-canary.b1a6e3e88.0","@material/density":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/focus-ring":"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/switch_15.0.0-canary.b1a6e3e88.0_1665576191454_0.20577001450541776","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/switch","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41ec01c3c13a281d3f09575d606cf751d5d17bd7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":58,"integrity":"sha512-H+I4/+wBjlR7CXrUVN37mJptBaOXpedy+q0KC9X8g+dvUBEPD11OrgSB8UuB0PHQaMEPaHPSNFbjBD1jyA0Qag==","signatures":[{"sig":"MEYCIQCes/KCcYyrpBUx6iEajut3Jv2tQbyyZCWk5Pinsx1W0AIhAJJQfHao2KWYyCsn52fZGtdAlfzgdec97hjjdjRQY9eC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRrw/+OEiKoVaOtyj6aEet7dHB6VhSKlLT+39bQYuDnHT8PGyZsxIJ\r\n6FqqF/W0CvpV0cyXkAehlJXgmmZWtAfoPJ6NbA3iyhUi8sNKrB2WwPokO75p\r\nGk7eQYEIvpR9KhwtnBbgCe7OOXZ4X0JggNzSNC2y2nvNJPbRUh/ro1AVIexs\r\n5a9I+cVCC2hkANVH5uSnWooSW7dSJdXabVu2o2SLnxFwZ1WHnUv+siZ6l1Q5\r\n6vdT6wioZS9vJkWKlYTyf3TucE0Rdy6+0YlU4PvMdu473xTni8DKlOd1TrVg\r\nX6PIS3HyaGAPN1ssn5hhfSqYdFGBkeMiE9Oq6FsTe/FRh+yvZeZ/asQ5vR7n\r\nsqOI0nIRj4+6/TAbeg4haIipZ6VV93gdBnE/JLrb0KTcx8kysevucMYQ+BCA\r\ndBFbOJMl8Jg4uXq5un48hiSEhCnmlwhuzsTt/C8oTQdrsVF8nioQNKcP3BeA\r\noAdlZk+M+vQiMPBmJTV/4fctYjS3Ob49OAtBvEjOmG2a06aItnHcigDWuiDn\r\nG45zmMcg0bS3NJJnofuEDj0u2k7C3W1/+vpJl1qLzNRXaMFQWbv1OSX6migy\r\nXBWmsH8g/nUn71mtKUqM8L6KGgHhgrtOzBeQYVAMusR+mnrNbEZ2CBbCROhv\r\ncafwfNdFBEOo4mSHXVI4bTR4ZggbqUbukVs=\r\n=1pTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/tokens":"15.0.0-canary.c9b1a31e4.0","@material/density":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/focus-ring":"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/switch_15.0.0-canary.c9b1a31e4.0_1665593963195_0.9492756411937526","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/switch","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5da6ae8bb686ad7877ea4daf6e9e00b1f704614","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":58,"integrity":"sha512-wYPyJxUxP6dB16sHNEiekpjJ+dPFOJvBa9yrS1X2TyLBVe6tJpDMdpsZ1lX0NOSm8DoJce+CrNN0IE0jg6kxog==","signatures":[{"sig":"MEQCIFmVwIMPpYuh+XWuKdLQsaM63zV99fZz/NPF3m33boIfAiBqNM1ulz3lUjcaDYwkuTP1zxj5gFHIjhE8agb1tMl3hQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxPdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0SRAAgHp5jXrVjayjK4GfT/t0fXkfUTraSqD7J9r1b1uFqLoUq/vw\r\nCalgWK0eK7XlwAqcB9C8y2b0/0orn4fmVStJVbUoSGW5tUiVAKhVm60/4iFk\r\nVEphb5a9sbuW2jlFWBdwVHTH9KuzosB4F2tiDm9qZqgPaJK30LD7XT+S37e8\r\nIOsSNZwLb3lKe1v2HiknJUhrhts9ePKlNwAw8Qn8djirqLtnlfROvBfYnFzd\r\nqOPR5Koa2czPJ5pafQyEOHcwzbKPAyQfqgeBArryZS2hg2EE0zlTbgApIaHi\r\nGUx8ikytDJ4T10JqRifL/I7xDb2EaMnrwWQD6BqdIEtNM+zUtIDtbWg0jky/\r\nM1syRMf+cl1e83V6VKeBlVbnl/7o/yNvzfauBtzPEoHX1ZGA/ElH2RRf0/vK\r\nVzWuqtUYiiYlj4XQDkxrCNhIbVV4jc4Po7mwPRmy/S1ElQeF+ix1rX5cBqzp\r\n0krcMTxkt2SsQjsPa0gX1wKC3xpJ6rA1SLWNdgYkZOIdkfoq7m0xhs35QtdC\r\n45O7g1yAH0bQIRD+mjgswTvgEMVlIeORdYhJCkkJcTKrD32ZYsM4jDpEAsty\r\nGVs8vpsqfioxxDSrZv2pH86V6ug/mzukaV9LqXGFG9bPdrjGEPSYIAt05CZD\r\nTd6r1nABdIV3yvwc79RMdc7zJUU2qaLpX0I=\r\n=as9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/tokens":"15.0.0-canary.13e9b0d1f.0","@material/density":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/focus-ring":"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/switch_15.0.0-canary.13e9b0d1f.0_1665602525334_0.8591460854600121","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/switch","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab84962340dd70c37c17ff69147ae894da40abc9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1dc797e7f.0.tgz","fileCount":58,"integrity":"sha512-ciFHicAwKLxmAqzG/Rt93MyxQekxmwEBvGlNhKYSUw7Qmt3kuZk25exPvMOmM54FCRyeHi9Jaw91+gM9kg88Mg==","signatures":[{"sig":"MEYCIQCsN+/uabJyuXFIC5Ylo8kEF4FDtMi1YgR90s8fVwIcNAIhAN8iBjhCLbaWZ+MuP2YZwRZH4KkzJOGQ9MY+9NbVU9Dl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS8AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+hA/6A+G46rFKDdAmYIg94RpRkR9/rJMRhra9e5yCgYXA4SQjdIlZ\r\n+Q+Lk8c3xWIbhwi/ZhbbNWTqA1MZYzg/IGM4MTQ/g4nB2BIv8cQZ6qwZxy2/\r\ncaaLrXDFV+pVw8bJqWG4eIieVVkKqc5MPVAx3GvW48rSKh7JlAXshecZvuSB\r\n2Njo506am/u6GlzfpszjTgrtzW6raDika9pfB/OFLuswCsYd6b/XVRpSPf14\r\n/Yoiuz1hmLsC7MQNzn4bNxFTi/FsT88sCs/vOyBTXLf51FXoCkpMbWiF45C1\r\nhZPsP1LH7wOiUbOMekdoyDX3SHmgUE+R9reEDepTid05h62cCj76jl/6e3bI\r\n+HJQx8BtXHMmwXJ61p3RM+NjHJNWCEdw65WhxFBz+PPIkGRdeRYvvVvZdc2b\r\nhbiwrCV1qCiT4y/pOylQx7XWSVQKY1pJdeX7+iNOn+azlzA+ywvrxxTNka8x\r\nNLHCAlGKYHqmtISCnzIK7Z6u38cducpJkUsoVLCOP/WcyBNrk3q4QnUaOWXn\r\nYxZiiPmj64XOZpeV8bsAmz9b05vCPe5yjtqHJslu3tvtsYTudPFqDWOiGVLj\r\n56BXugVGc/dN2LzUbNDEozVGcNDgcetkqQsHI0EwXFV2tom6+IWraZEq9Y8b\r\n873S4GeakRgrspyaScl5WAQROr0QWW3FAQc=\r\n=SgNL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/tokens":"15.0.0-canary.1dc797e7f.0","@material/density":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/focus-ring":"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/switch_15.0.0-canary.1dc797e7f.0_1665740544660_0.6452239770522905","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/switch","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ed4009397.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42aeeba6b68fb33558cc7f70cab52dc148b66361","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ed4009397.0.tgz","fileCount":58,"integrity":"sha512-erPISpQq8oAPEfAITP/Tr1w8BqZZfL/Dy+8qrdUm/tfDG6Cf52vwPVF5S2viQLIo4HhKnJOXsKmbCzBhwqAI5w==","signatures":[{"sig":"MEUCIB4tzTBd31f6dZATHZLGgmNbEVL3/qI6h6g/TO0tZUULAiEAmCh1V0dC3Nu/yR36N35EpkeELi0PFQi74F/K2EsMDiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpohA/9EleHDyjK8TfbSisXDQ+djFfsx4Zm00Oi1RrQXzF02aBGefOA\r\nxeLxAJAH8fHJE53lt8WXsE8ehGBolZ633IA00hjl5ylbu10O08hkyhS0FUJH\r\nG+Rit1dJR6epQy2R97bdA97d50ofUILSrkoAyS/zUtH73vc8LcsuO/YTvDQM\r\nJUQQhEbEgs3gnq69qXP1LmU1/oUfGRuED7w1P9YIc0JSUbDAJlYr6+C3dNEv\r\nP+o1iVihqBXyuEiIT3U+RSE8ryACkv4jx1NIYCENDB0v6rNLc2DnBlyJ9k3h\r\nOpEtUJlLo4eWlSySJFtxb3GjRE4thh9TFzsvRwygzNgMuEJmIHIY0AAvjhdt\r\nW/0Ej7Myufph84LDKXBFXCFnO4N79KZOJp5YOzSDBfqnzrwkuOwdf2Y2l6eM\r\noNbTllUun450b+P9OxfD3Ci3CVBP7XbbWclnjpxShsxWZ9vFza2in+ACfPAq\r\n66Uhj+yXqjyZGe8TS65j8TDJPaCvoW1ur5zHfVIieIe43Ypt9Vb1n84Lw9Ji\r\n9bNg/3tDo4esCZ940FxMqZJ4w1SBicUy87wNHEzoRuqS7pM6sYWcBjHik2Ap\r\ns2j+6Nr/bgxiV5oC3LBgr2LhQfuzM8c87se5l4PgSo4ArxVuJLL7LzOdi9qa\r\nV085DN7Cry6NZDwjXBioHQdkMq0H6Kph+NI=\r\n=1bL2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/tokens":"15.0.0-canary.ed4009397.0","@material/density":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/focus-ring":"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/switch_15.0.0-canary.ed4009397.0_1665766321840_0.024000043524302184","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/switch","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c42951ff7138db663250d079b943c7207cf10d5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.95ef196bc.0.tgz","fileCount":58,"integrity":"sha512-3ywRAUhGC9292i/NDn4ZlaQB2XdqmOc04vkAzhmkdDXBECNJxq+R8iyICPwuh+ypqcLuGJaOBgl3RXrLu8HIYw==","signatures":[{"sig":"MEUCIBeKyC+0L4f68SsEmBE0xDjF+pi6r9aU715JEsYru7qFAiEArEEhYkww31e9ZcC1QyjQ0joMK2ZQhc5QTUUau/NDbB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe1iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8OA/+N1LaoJfVnQntaqCPorpBZ/7pRr7qzk0glRAXAQTpdjELdOpl\r\nerEC/MxSdXR3O9JPp4BjchJoO+iITLVlTW1WZeoaJlV7Vb5kYpHNksjI/T4m\r\njz68tDaEpWYOnyaT6pkIR6uFsufbeLGngPiL6iBeDrU9zn5D7VqR/75phYa2\r\nvrBeiF4bIKSLoy4MQDuiPWH5BFqMjzYzTcpPFCJAqMq0WC4YUWa6XEeiaDfo\r\nx0afmSQGRdHG6/AGT5oFXawTlGc3bExXOuH9cnAdGZutDyQ1E5o8DCEfHilI\r\n/9uehKSaNLGrcL7VyQQfMJTUf0BCOYqN8Pm6Gz6X2E28rzCVXGytT07mcWxq\r\ns0xncn+7Xmh6jUA3Njbif0eI4kriby4FwWddzm/AhtEEn3TASAeXSslVJBls\r\nmzvn1e9Hx6PhM529eryciBZz6W6ZvJiC92ZVHe7jaaSOd8u6oY1F9t4nFTgb\r\nsy7S8Q/pgD1h6R5Aobh1nPMcp5TYlLpZ5QwAooZCCwYkIogeVL6+pdw0vsU+\r\nG+HUdQNmgS/ImAR6qrvwiBvZAm1XAfAEHePoY3HH8vzwv0BW90FiVLCEQ8gD\r\nhKwKQde/ukDXzW0MSUTlNPOR0rD4oGicjnDjwcqwTxA0ZQOHRUWF66iZ+d6d\r\nJpQiMSuqnvWAPq9RKsC+cWsJChBEmxnueuY=\r\n=x94D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/tokens":"15.0.0-canary.95ef196bc.0","@material/density":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/focus-ring":"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/switch_15.0.0-canary.95ef196bc.0_1665789282077_0.8448003299740177","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/switch","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d7108d2a9842521d09f5e14e564fbf629d2299f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.13eea1b2d.0.tgz","fileCount":58,"integrity":"sha512-XAWhFN7gXip9g60nhBhtyTk8/ydYbbvX8zRJK4tE3mcStcyBSBpz1a5kkY6AMBSUAZhevR0nOWvsn0cM0GdTlA==","signatures":[{"sig":"MEUCIBFX+RS2nL7Xw+UyAYq3KqWXjuIY+R9MfJZqyHgFVVTxAiEA7hsmIwxp2oegVemmDX8l/fQUiOwmNVhtJFKahvg4XBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNF1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeTQ//aGJstfneZdJxd4GoapeSoTWlldNOqtldY6ApMwvNR52WyK2Q\r\nR6+1Xag83BSuPBvPNkbkmjNvmfcuxf5hrT4rhEnoh8yfjOFZ0V6Sdd9wfahC\r\nulVaTk3RENeKa2y6YW4Uo1o2fQrww5hVT0Da03OO0sivZZuu/d0vMUGO7R/A\r\nd3DEMfNSK4/C+Joxg8V7C69w+EzhZrk9ExYv7rXVwCMRkxwRfFCgtNwt2AoM\r\n6QjZhVO6ozy+T2xLxfVMlWk9CJbGwwJ0tRWMoVRab6w3M7IjgLZHToWrgifr\r\n8z2ayspcix9Te+sSMedhdaCoABjEwtr+2P2sqLcg//kKZtO7cDNr75SjTEdv\r\n39Jw6BdiP+owEG6cAAifZXqb53rNGhIsQahq/0Ss5EDjKK0cvLbF3ULz6w7D\r\nPeYnZwk2WUnLcgo2OjiKV4jOkbkSSnCuQyF2L7FhsnnrNKIfXLDwsNPdBKVz\r\nSDNeYxP0o3evhEqcWW8Dj2lfVPzvJ27kmQduiYASihuObT2374XJw2aXgO//\r\n62pmPIjdnrtEC+oJNU6S5dd+yjatdDDtB0ZkWQm5PGA0E0fOyV/CfvoE1a6F\r\n7y27YWCX9EXGYAyxZrd4wmIfoCgKA5HgmSvmBpJWfce9osLAc1of5988D/A5\r\nxRCkPAN750rOMKnQ6+fTBpJ0k+usdfHffwg=\r\n=0u7N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/tokens":"15.0.0-canary.13eea1b2d.0","@material/density":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/focus-ring":"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/switch_15.0.0-canary.13eea1b2d.0_1665978741274_0.398639024688753","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/switch","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"616e8e1c68ba27666aa1cc99a467ad14bce71c44","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ef9b2babb.0.tgz","fileCount":58,"integrity":"sha512-tdUQWBxk5crsgqXZlDHFR6JJR7DnSsl1cQCt0IVxYgdW74H15quq+j6EjGjA7cmQopFyLTNoxeiNck4BPXwiZg==","signatures":[{"sig":"MEQCIB3+YrgUl+pJhLr52SYX0w37rjCpx5XfLMa3q2XNuS3+AiBdGn34K5i4X9MxMA67bwmiKp6uv255zHhEBiZVfRG/vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR35ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrKQ//UXEauY2oC6aUJ0eO3tX8RnrrRh/ovyl7Sr0hFVAeUzaz+pw0\r\ndfaT+VzXCzSJKqG2jpFwJM1U+LQcO5C6ylvdrH9kf182bNwd3GX1xeHKTRPE\r\nOoc73e0onoKm0eB5h/exOdlYM7ODxSAqrmG08S/UYdLX2eVg30uTMXa7JYeQ\r\nrdNnrT4Dp8GsnTZhIvEc8/RE1WYyKhlX0Y7Wv2DIkQ04D3JBN+FNTkEM/2r3\r\nqjLvhaeUwMABtN8MYw/MNy+6GfSd71mEJaVx+ijV3DdeeCtgI2MAcVuYRxXN\r\n96GHYkEaRZB/gXqZgBD8z5C7FWY6Fh2fc5uAOsKSLX//leE7QEFXBGPhVfYp\r\nRVRD+uXoF4uMza7gdLNfhofyhS2WsJUztE7BzMJ2cAYMc/FrpEqm+oKDrN13\r\nDmka1WVkafZjvaujIg0sRpmKKYYVZMqUsA4Aq4Rw7uS5rwHpH86woi4o4JQz\r\nszkvKJ5W+1Iwl2Z1ftslnRPMdzcgAbAZiKMczSZsR2Gao3rsKiynxHJB46ea\r\ngs+/MvkpgM1yTtUwGRIPak2G+8gofvti//WOre8+bV3xcw+ZZOMY8l/vZe+Y\r\n3KWjlfJenRX0jOMeGQNC9Ryw9oYH/vYo4IP4ZuXVizmlzMd1FE0bWC4/REtn\r\nqgoFR5VdLPjuVzYEoAVCYUA8tg4saPYEZ+Y=\r\n=Ymc0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/tokens":"15.0.0-canary.ef9b2babb.0","@material/density":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/focus-ring":"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/switch_15.0.0-canary.ef9b2babb.0_1665998329527_0.9275314815987474","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/switch","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eec9d9037c9acdc933f32283fb32bf638a405310","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cec7fb987.0.tgz","fileCount":58,"integrity":"sha512-h5wWQKJcNGRjjfqQndEBf/TDqF0oPZJfNICWoolpV3GH4GmV2Txlg4EjqjnAhiYgbils/iEuPT/cKvm5UvqafA==","signatures":[{"sig":"MEUCIEcLxMmJX9tjxQhwDyMIPh+gF1rDriRh7/FbC59QnEtkAiEA31T0HxBzdNIKBWtehW/J+WLZT6UBFMLdnZPsIuxwuU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTUDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSzRAAoZFis17v7GL8Cmj3wwc7UJYwKauriBo5lHG6I81e4Jbhe42S\r\nH1RpL2x9QXmA8ef40se1hKGy6ftwE/V85xTsLXwm7FAc9Ckuo3QWxr89XEpZ\r\nn1/+i4Y7Bk/dy40sBapF+YWXIV2ET14lSFz947ziNkVReya4ncspv97YrpyO\r\nPFYCKMCYMATQZEo54Qu/AfxGqeNEzqMDH6k8AHl/1M8tghmBfCQ9J5o0TKQp\r\nSyCInqR+ReF5cfGVueaR2GN3IQTaZF9XYTUvdhB0MfRWoqIkV/2+9MGbcdiN\r\nokDviu5g9NpFprh5M+f4DmVqmPlljkVlbIcY3/oPxVkJl2eIVF/3DebvPFjS\r\nqVxOvVXU+WlLFd/c4k/2XxEaCVJpI/I01seE+hWL9E2rqy8vgPsniEPzwW0A\r\ni7ppqohSCk4U/ncb+j66Q2odxhPcnyk165UsqYcabuPlb8eHrZMXW6+julWd\r\nv7CYn2s5xAkivugdfWFRs0aoc0zUP0o3qqG0aqdnH1aOXrXuNOd8DIVedTcP\r\nE+hcbpQC04g/IeGjO/+6vdhNL0S/FaInhM7SkEWdGH8gjoSIR8546D5RVy6L\r\n1dUgAm29fEOk8wTs3A1HrfDVlZusqXUV5VJfIThFuMOlbpf0o3R2ooKFE8cs\r\n+mDssQThudUBYf1XjI43WytawA4G4tuc+Qo=\r\n=qIPz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/tokens":"15.0.0-canary.cec7fb987.0","@material/density":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/focus-ring":"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/switch_15.0.0-canary.cec7fb987.0_1666004227070_0.5954500066622379","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/switch","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab20f0b1ec3fd58ae89531965cabaa9cec19d4d3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4fff58b08.0.tgz","fileCount":58,"integrity":"sha512-nQJxjPVdx/Fu+iOWlpXyX3lq7N8FRxYMZ+HBTWvJ2mH8ns92Pq/WG9Eh4mWNtpRwRCwPgIqp8G15GMIeN2diuQ==","signatures":[{"sig":"MEUCIQDB0+yyjMNRVkId0BKumuviT9aEJ+3MrwHyuTo2C/ODugIgDrlQuzfbTeEKNgAaNl0r7vaZh6IU3W07R8sslVH1QJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXNrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbIA//WHbG8JBKYf15l6WP/bNMNjipI1J+vL+tA/tcg7iDxQcr5rxs\r\nambG8o4ItqdWBExzGlSFfWWPkTbFMKBlvZwu588TEEwEIcGq0zOUGXHMI0Q6\r\nSgfhnoBjJzX9CYnPlYeBkIM4ydut94CTG/67fRpSlkfVf0yQhAAzC2ypf1rT\r\nU6ABM/tZBA7n7YHJXcOpzxSRQN1jzeajlySpx5pQjESkDfXdsn+N1E0JKHMZ\r\nWE4q9Wnb5mrm3c46p82SvaSbwCqtDHIfzE9Kq4QAvF6Jj2ilBHYVwo2VhwOy\r\n9mrcvWSCZq6EnOW/AE7s2EH6U2h0CqSGLJjjubfPC9c4jhl7wVDeRj110PSd\r\nLxmTddBIna4uk0ANhQEUeGGSV8li+W1v+swkbYi1N/9+wYXbx/YjO3IOUTyB\r\nzNSCVhmbdTdwx9C1IBsr42AeXWvp4fhooETQwIqmDyU/Vbep9NOD6RI3RXjD\r\n8o76ot8IlRkgI5vpQrVrJ7Wb8kUjsScgmlnKyHd43nTduzecAMInbLlEZnrj\r\nHBliLZeuaokP19l1nn9Nf5sJPrz/fMYm8DiBMOBUwmSKa265+JOmMyP9L9ol\r\nMQGfxDKOaKf6z911sSfyZq62/ORZ/WrTSi+I64CfRDmDGLMq93itcNOtSdIW\r\n7SHyr+9H2oYMDH/1p9d9EmjyoEcCW0huhcI=\r\n=VrK2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/tokens":"15.0.0-canary.4fff58b08.0","@material/density":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/focus-ring":"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/switch_15.0.0-canary.4fff58b08.0_1666020203685_0.5487418544527527","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/switch","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.587d8f871.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53c5cda89751c9769c29b4c63ab9badb714a3a32","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.587d8f871.0.tgz","fileCount":58,"integrity":"sha512-AOM6mrcO2/n+RSNVGaezr8gerg7El8BgBznkSbb/Kih9EVG/hse8Xxm7pgwEuykbAT7P8DdKpJYja85BfEP/dQ==","signatures":[{"sig":"MEUCIQDJoJXfq+veUjD8YoJHDtjhAvWpFdBvuRwvLvanhbv6IAIgShCHd4gV8mdio2yOfiZEZN1Tg8bTNc6e2DlNPISJb7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXuAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFEw/+MD5lawLYeELFpSwigoOH111oaAcIYhEAI3SbhaPMVPeuIPzl\r\nAazcfbrISE0gHuyAtrSEue9e0KVOfu68hVRBkHK+3RHmCGIT/5nrgVO9HiQh\r\n0suYoCcBxFOVEhuFzTD+lv8snyFqp45fFavYyqEYK6+HL7lmRdrAwBfxPpf+\r\ndl8HeYvbcTDE718h9iMUH49d1EIiyD1APxdz5+YSFNuxGhRc1N2J125PtDDc\r\nkYjoBrKjmIE4z6IoGUX2RrX91MTaRLEfptK6yaZdEkCFT7PoXU/GyE4pn6JS\r\nSdl+CL/XulR5ROc6JlZxdTk3mlclx23/gLxmEu188NrH2WAs1sznfLLc6kag\r\nAa2FOQifnUsF4ZBqz3nZuoMeQya4vJy3xQfMOslyHBt367ew7x+C5uRINz4F\r\nN/r1nbt2K5n9N+guIUs7XjT2quS3Dux2MGzme31FW0kL6VycNmO3jpkrLB3B\r\n+sJlJst8R0D37VoJQeKE4+nO4HzdEtGsVPmw6qZyGsOjXVi80ob4HvMcDMRm\r\nM/s1mAHMcm/h0RN2WHNQWMNOtBj2SyMdRJXyqUQxhJOSQXoMrwRiIT3UOPUN\r\nFu1FkGSf8+P3jfpVdb3yQc2Dm4CjKoCXTJREW3I9pQNpjRzVTIxsX/nijnDJ\r\nrgoavX2DLALcz4hgzRiZGxFeQifdEbhKsJY=\r\n=nNy3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/tokens":"15.0.0-canary.587d8f871.0","@material/density":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/focus-ring":"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/switch_15.0.0-canary.587d8f871.0_1666022272665_0.4847668357526205","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/switch","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5378d6ff644b4b3b34df17bd9ac9c904e2dfac45","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.edf4b98d0.0.tgz","fileCount":58,"integrity":"sha512-r9bDJUAKetegGkq//7Zrr419KGTMtuAoJBAISLn1aUK3nnVX/9BH0U3dP7HkLidTPljgq50EQtS9cGizTFl1Yw==","signatures":[{"sig":"MEUCIQDN3G1h6Bk64k9VLpZ6hfqOiBS5JEXeVPD7h0MXWwS10gIgRjikILNhFru/9Amj6NQH9/Zbv7CR3WkQZrUpyDwqlu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQSA//bpb71K1k9JyAzhUvakRzh8W+4AFQCQIVtmcTNOMX5Sx6DAta\r\nCVOnAGPgf5S3aacEO9z2aWDYzLz5tGMghfn/0LgDV+bZZREAjWiM9ji5My6z\r\n/Pf4vJFY6GyD8/Dr6bMrBkMaXu2d1w+YHYOrbJ/a+LELNZA3hSGjto3tkfGr\r\nkH2/rdAP7Mpdr9UdlxLDKbsrKoQ6ndLR4mdmaDq279xNs51GveyyqZA0J/rQ\r\nToHQZoTcwesnoEtmWMM6/i1DY7emARkDCqHunSwMAHXx8i5q8D9vjvXX6Gqi\r\nvsJfSMMsobj6bfJ0hzNl1nHTIf3GXyjQDcs6Vsxe8EBPouiWG/w7eBZTHpEC\r\n9+3sywLYL9B0NEOmnG05gimmv5l7N+wtQq/MAfF08Vu8OD4ytyvzHOWJBg+r\r\nVE3IQUxWZhjNXbWlqx2skxbKsFTCTRfLLyTelgDHtmywTjVXMbAzaOKpb/Ys\r\n2r/N7BhhDHKRN8dMKOsubA+bDYRiKLj5Jkif2OY23wLiIPLjx0a54G7vSQcC\r\n0+YLTfdaTGbTamcVOXsGkh3ZavTZmwLk+JYBS7ObfHSolEQy35mSap8iPMdM\r\nLYz3yrBimgYOwfcteaUyth0vWQFBrDRxNulStYZHnGWt1bGQt81WRKZc5jEo\r\nl5/pN9vXpNVRgv6Sld+KU5SqZwO77pG+ODk=\r\n=EpIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/tokens":"15.0.0-canary.edf4b98d0.0","@material/density":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/focus-ring":"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/switch_15.0.0-canary.edf4b98d0.0_1666024874284_0.10980724720335511","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/switch","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e2567598a310bd1fa64acdab366b47cfc24b29b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.024ac5f16.0.tgz","fileCount":58,"integrity":"sha512-qFPW0PiXu6peyLLMGiNtmas2fFXe4O4wmG+hR6CEd7moK7CLcA1Ni6B5u0vtsMRV2e2eZMkKqrRw89X4SSogAA==","signatures":[{"sig":"MEUCIFJ6mwxA5fs3sS0A/W+kRX0mK1TE8Lf2hTs0q6F742ijAiEArOruCik0ZPxs/C5QSfncHdSSnmPuu6OGvUVVLKkiERE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdp8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFxA/9F3z5HW3JVFLRgBDssTlQJQ3tJ1870eWOviUFxuRCeCG+mGaB\r\niY5oUKIgKHLojdkUS3I57ZQe9mFCJBg6E7AcwCBhV0UrMgwm9hY22vXLr9x9\r\nYW7vYEYyfIJLc6T1ccY5Lq75jQRukiRCxeklio7rfvUM6y9v2aT08715NZhx\r\nD+NwOmANE1d+j8kMwF8PYi1fPUJVllzZcd6ykb0Ao7HJ/fimj092yPbwbAU9\r\n12gypBn01h55MYre5WTBVyc41SRCb1sXzzqi2ZUOfkQKZSrsqVUgrog93pki\r\n3Db12SPU+uswvHAmsMoAIIR+A+26AwK5nxKNY8k/OkqQqiPxT8wkpqwKku2o\r\nK/EFmY79bqOXWL4RBOaroiCHF1Emz0LRz7W1y/kTzQ36MZyMjLGi7lCZXgRh\r\ntY+F5G2CJtMHpGdyByOM+bQzfS01XJeZsNoKrhNlddXAA+vCIGeEc0stPTq2\r\njqmsO4M/45Bt+Tg6ZhIMxFxlrDWmu2hUxBAMS5wObG5j5sTrXQisrgLA8dFz\r\nSueETEAFdamxf5PXVEinFAT4qD+xd837k+LmwdhTH2Ti5pKeMLMUlCtuaIAB\r\n6c6ycTMQSZ/QzTuqygmBwUC1JkakzizN+AoR61ZUtuKipHBUe+9d5nTC2Cs0\r\nJBpHQFBFgEDsnNu2vpHf324uMrB8AsxPPsA=\r\n=jHFT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/tokens":"15.0.0-canary.024ac5f16.0","@material/density":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/focus-ring":"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/switch_15.0.0-canary.024ac5f16.0_1666046588615_0.9940742659416979","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/switch","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11702c22acdfb9f1f53805a12d4f90d05fa9b0c9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c8bdf6144.0.tgz","fileCount":58,"integrity":"sha512-M1v+xBbTYyy/rjYve7hANPWZVLimNgXmWLyzZKp/SaJxIPuwGC4wqH8+6Xpur9OrnhHF1sM4+DsqD5NmUsy+qQ==","signatures":[{"sig":"MEQCIHIX7KO5Sr94jcUBTh0WrbQKJr1vcjQpV3UfXMAMoxwDAiALw3jkNEXCep48p1GKdWV2hiddwCt3ZEBYQQiBNJcd4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu9NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Lg//dPz6COckVboekDWaVvYeS+dM0jHgs0/rDjpv5CEypqvyl+Di\r\nE9w5U+K7vQ9DauO9q+72Gv7CTJnW2iRI4EezdsxrHyceV9k8Txwqw3I9NjPG\r\nixj4Y9tT3cM+0QmfqmOpO1HEj5btzkRgPMmFIiB3r0N0Dw22cuIT/iibp1Xe\r\nsctje+PMAhLRZQE3SQkQXL2F3VbOwOxhpAVhwYlaVKAIUPibhmgwtAEdcDyz\r\n6cQ0/NO/rtrYMR3WaNh8YzSdCwjGgzVQitqpGY9G1j521vzHzxe1UeJ+8VGC\r\ndMNJwf/th/8FzUq44ixe8qypz6ITdhfeUdWLLySrH8ErprfjziJDFpyS5v8T\r\nwpLiaWFnpokYC0t0o3Hb3osNRAqXkEAuKg0D2ypKxZL9qbi0p1mONJFfkh6a\r\nkSk8ZK2esUCYhR50Q9m1n3TnA/MsCd7A/zPREGYWd1LXPbccUDuksJt4bm77\r\nr+aOjqZCeEG2U8BO3WKsH5oeHbRRpBKXNZzUC+4QmgZtHDpv0Hf/kMwhWBD/\r\n0HDwxvu2CdMkLWIVCem86bcsnwBAWgEWVL3r5u5IdzHYrT11BqpKRktqVL83\r\nKXrh5XMXfbirRBS3ZCE6MzewzUUUgG0pTJ8MSTfpls7MNJvdOLE6/EqJGfPq\r\nW7UOoLY71TpxcyhVg2/BuETts7/2VcLWhL0=\r\n=5DBP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/tokens":"15.0.0-canary.c8bdf6144.0","@material/density":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/focus-ring":"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/switch_15.0.0-canary.c8bdf6144.0_1666117452726_0.273401129013209","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/switch","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.bacda4885.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d4b43930ece77a1e40fa6c893aaed0d94ddd786","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.bacda4885.0.tgz","fileCount":58,"integrity":"sha512-kZz7B0Zz1/PU1TZAyopQyOZOOdA4UV7XsdAfk7S2cyx1xpWaTzeoV6kISFQWvXBZqjlYW1+EBeIyOqD6ltUM2Q==","signatures":[{"sig":"MEUCIBdR44Wc87JyUcqgaSgxkZGlMte2o5mdK6vUicnzyag3AiEAmm+SZBmaAdsi1IwYZEYAeIS5W6vhAP4el/6bYYtlyBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvPWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqKg/+J7OnU0abnR5RkhQtKi2Hl4+f7I8bUla51TvuPo6dP337YG0p\r\np3gqFxJDaCkxayDF/gqBhL/Jykk+xY4K3rQCz4f2q0hpdjw6zO+9nu6/e9NC\r\niaDnWrv/8zMYhCr74yl3hMe3/6D7Biqa65S0LmP+qx2BuWVMSLJOydTkgAlA\r\nDDVk+3crtuUiCvCznIcQI092vv6Wj/5CAGCU4cWdJLb0lzFNVGL8XxfinRQU\r\nOgca4mkaJ07kicjdLEy1Xc6PNAnHdIFhse6UY864Ho/vpgmJohR8YoCg/w5G\r\nIk+CwPWNruy3qaAwvv1ti3+KY51Y23rB6CNmJwWR7Ism357Znci8YrJ2bhfs\r\nZgX23CqIt4p2XzoIIc3OvmeGT7rITNEonEifZWe0HuK3b6xET6x18D3FeU++\r\nOihqLPYhqP9jrrSHB2n9InBWdrfe8eMGfF1XhQdJAuEOv2xtT1sd/BdvfHkQ\r\noDkyVo2jRmX6gKl4680effPbtPAqM84rl7a9Zhp8BX6HeO4KrGClEkjiU0dF\r\nuWHOC+kUvSyfHk77zjIheFN9flvps+1YXXPgK7k6hJ7CyV+uwO24i0AxU9Sx\r\nwxE6lTrNQoERaLw9IHHRE/lV9mU/MS+uiaNPX8hQun30eO/Gnp76oRjxEI9M\r\ny3Zrf84iZYdWGV/mWKiM+7QZ907x99pTwGg=\r\n=00wz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/tokens":"15.0.0-canary.bacda4885.0","@material/density":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/focus-ring":"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/switch_15.0.0-canary.bacda4885.0_1666118614160_0.8623015804762382","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/switch","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad47b919c9cf833208126a7feef54e6fc859f857","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.92b2556cf.0.tgz","fileCount":58,"integrity":"sha512-fkmEy4bxEom3l3MefgRHOnKHJIRJ9JmXSV2LQykVByh7KnAYaJ9ORgEI9B9um6cifm3Jw2GuQxv0YtU8GcknhQ==","signatures":[{"sig":"MEUCIFkz2s/AKXlHxccbLgYsLXiYX40H8EkqE7lcr4xN00ZjAiEA5PcI09u8p1Va7c/TlpUpHIYh/Lj/00Ayaw05BJFo7Yo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT09jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcUBAAlMnxWSTrdqrT6vGisY1Nm0g8lrtDBlOig4lfPJQnbRotDbjJ\r\nPNYRxSx8A8HIqaBUsaa2JpTKm+zLtpYfP4t0WATIuLc5MXKgu9Vm+PeGJNkY\r\nOBccAHIY+4S3wwM6PNQIrM37eVqfuNxnsOIOtI975qOKr0K/kcyJD0qcuf2k\r\ndueMUyYZK2c9Bt/UkzwPz1rWqcEmpKMWIAv1PMOmWMOHYnzsGWKCy9gBXYGi\r\nF9WQbJcwOiR9ytn3tPnDKvYiru48i/U06vCV6g9PumQ2ws8IzWszsPg4CyZD\r\n3T/V00favSfDxeSQWbP/QUZIzD5uWok+8w574VswMEGtx9fILiYw/EP2deud\r\n9dSjzNTClof0vGDHvIyO1nNV3YXxGY0fIlFVTdpvVqq+iDR6PkEGvdnXiD7u\r\nygfFCoGx/Y8IvIAPOdAPXCX5lzaRnUL5t/jU6YkFtyLY/8ndt5K6WzbUoXbg\r\n/Z5gglmVDDdV39V7d4uRHVBP1QSUOnkVZM+7H6Qb85V4bD5j0G9qObUnkE7j\r\n/fSxp7+nTbmQs/03sAnxNjiTQQMc5yHWauOFv+7/paVeYgKjYTDd9YZuLGRx\r\nLUyDUi2EHQIIgIdGWYLitiomy/wHVqAd5WOgjK4opajt16/3T0D9uMexBb3r\r\nHlsjemxwmKnry0Bayo8EZKo7oFphgz6YL1k=\r\n=MrZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/tokens":"15.0.0-canary.92b2556cf.0","@material/density":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/focus-ring":"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/switch_15.0.0-canary.92b2556cf.0_1666142051151_0.9365251504230323","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/switch","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cc804509a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fe09c7273f775494c6b4f8b16d9d8d2cf218427","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cc804509a.0.tgz","fileCount":58,"integrity":"sha512-CY3/wSpBGijg/i2OSDNRdy73Qqmtf2KueMYLsUBNv2Zr9erJu4oNDm2IXjEta1pIFZoX05xaf+d+p0VBcTUXMA==","signatures":[{"sig":"MEQCIAUitE1QPQOF6koHgHRZ8UGu+Dd5JlW1Wo/4sX7nQamLAiBoQUKbDv+meGBWoVjnr8lvNPY9L3lNxYkySLbZ+9D5UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1BEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbDA/8CHszt7JhWcqL97nxmenoxc2LQVoFfdL7DoCqfNC2TGsnr1yU\r\nEVxSgl3kdFR8VVCY7cwya3h1Ush6IRmgYecTBtTcfmg8d4HDXr80GaBVKzYO\r\nyY4QKxHf1mv9dIUomZVGoIp6mcXXKsMtndHXlOnlZkVWyesAIdt6Z70wmCxu\r\nvmxEO5yoAUV/5M376k/hkNm7LSbD3zRUDVhlvpfIwUJM3sYiX7Qaic7L9Aob\r\nwNFWCEEfeJAhPxX7WdqkrVEiU29CM4+zhTnCiy/DY9Xe4XV6fatJEpwSCn0U\r\nh9FCwys7ibUDSDk/zqZq5+Tj8iIZJEIc9m1LyolJYqutku95uOfolgK4rfVi\r\n/2yAE82Xx+WDWQjUdWP74K1hEHEJKL/4JsbvahsSapHSutc3OzFOE8Debh7x\r\nSCV7ZJqv2Q/vwlDs6TLI9r/EOgGeZ2EzXhqeE+NK7tZW4ADHVUdpBLYS6Zfn\r\n+tYxFiUjQudoIP0rdQ05+9suQEYv3rwcdKbACYz9b2sdbmUaU4+4PKr9D9wU\r\nvCNeJZl4HpHyX59qhOpF+uSz4C1seg2nebyp/VA/W3680HAYCex5NduNyfpr\r\nQF5r+UEG/JN8BeIXqq3ERbMw6CpFTAQBY+UkToIEKbiH0/Dq8exbfhd3fmdj\r\n/r0t/WXNyEJ6kFgAf6Ah5lZ0ltPXOyGHH08=\r\n=wYNL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/tokens":"15.0.0-canary.cc804509a.0","@material/density":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/focus-ring":"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/switch_15.0.0-canary.cc804509a.0_1666142276684_0.9539569877642762","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/switch","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.982bedae9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b797a4cc06076364dee6414ff11653c9b74f6370","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.982bedae9.0.tgz","fileCount":58,"integrity":"sha512-MjIWhLWDUXOhz1aGhxKjWxZG35rJdtqryygTA0Cy1xc1aD3uAyL/9R7aU1VH+Oy5KwVjFs4m56veYzX98aZfUA==","signatures":[{"sig":"MEYCIQDLI8A4D49cYb90rARFD9jQDMm7WUhHu5igNc9W3Rkx0wIhAMuzf8D2v7aDHMOlDDPCDpsKtflunlbmOicCV9lCxe1c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1T2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKSxAAo18yK1hvhvuaaFGcJo61NGVK5FLbQ1GsYYh9R1K12fre4APr\r\ncEXGds/hnLWHrvY9PaLhHkBhWRAM1pM5TikOOSvDZyPRWqkx5Xcf9lVdwR+e\r\nodGZtVsrEAMdztu2WLTbSB+UclaVEUWdIvKn5d2AesXhlbzi2QvNz8QpFu7B\r\ndg4rYYAELd5efiY76Sy/ou2wt8f7g8AmnyXARnGYsAzLsqY7XX3QxgykMa/q\r\npuQXd93EU9kYA094ZA1Rz5ZdpfZ9tesOpZxYoPgycOPubbOm9990KqLqIOMg\r\nRBSqWyW2M+fmZ0BCWrmAYWqhxEOxU7svZWY6lSaoC/GcHCgfKvmSQe8s8Had\r\ntFNeEJnZ8HaZMonmU8/W1fLWz5CkT+RCfhixlBn/ZdAwU4Iuk9/ZqTz4pi+Q\r\nW5S4OyFsFqFQ4cxjgbK0GSrh6TrHhA+4URyn58Y+3d+quv2WBJ/a3W55gRRF\r\nvOUelzkuUtS0L/JLd49WdDguiGQMPYo8nKDWPMgdC2H/v/zIkxJpxHRqsPB9\r\nzZw4+g4RjXVOe+RwTntwJUXvp4JBvWb3hOV9LRWW+c+X66VXIuNFwhNUlP6a\r\na27nWzaYQwef9StNkb6zwgEXRb26BJ5C3kuBc/nyKz2uEYVsw1xTrwyI/dxo\r\nreN4m21MzhqoV+XkhPlwRkM+Xc8cnmX9hxg=\r\n=bvf5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/tokens":"15.0.0-canary.982bedae9.0","@material/density":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/focus-ring":"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/switch_15.0.0-canary.982bedae9.0_1666143478199_0.558231295993401","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/switch","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0825f93002cb016fec33481ee8b8b56238f8809","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ee40081f4.0.tgz","fileCount":58,"integrity":"sha512-qwgvy02Ho7tbX++tkIOBbgxw3ayofdSxKCjzfV2mKHqRuJZGnjiEf2wPeeKP9aqakq/bjZVv2sZyUuA/DaFQ7Q==","signatures":[{"sig":"MEUCIAbEkPXlwBwfxL6g1MhjJUXMra+2vsYpN9TOfzryCsd5AiEAqirVFuoEgC8BMlTpdiCVVaMgU3/iZajHVABmZh/zZq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFo6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphjA//VqxDLfqw1kblAe3kxEKkujys8R9FNCm6EkwUVmey+Kd9XJZ3\r\nPs4S3/5Ddt/Cxa+YH1iRov1BmmeW8iKp4pGujINP3IlhpjS9KnFlbcohHMZR\r\nNKqIf1+RswtGsdGSze0f07G4jr3kGvTcZ35O1FuM4v7J4Zvt4y63YV7npIyH\r\nHyVWbybQ2gyMYP+4WdTHSmwx/PQFMNIWVmYc3jWVGLsft+j3uW+7kzG9m3qb\r\nzMJ/ugBUmamx3y6Q53Nk+bzDTk07gmSg+ser3y1A9u147aJpFYBTIDlBg4qd\r\nHklUs/TVZ9+ENkBaO7GHfdMJjYbQF8aYhTFkC2LzK9a5X21whlzLDco+5izB\r\nmLRUh53OSk/KNVJ3eetKSG0TXB/mLAQb4dfKWd+XoOgpWqunIp7eFxkBa9Yh\r\nGWQqnqnWzpc7vFpIY0lAcUHbjham2+1r4p2zOH0Ruk+Z7fqbF57DMwFzzpee\r\namV1D+9sxwURtDrjE+gim4xGSVkZXww7MUnGHVOBPqwsiHCWtiXsgF2ko0q7\r\nQ2U3y5zhZCDohr0YE9FwdDOykN6HSpzXdsIfCoBouS74+f7EGAGRsWwH+7JE\r\n6JxPp5z6sFkGxzM9HJa0u06CbDDb5PzOxEavnYPunlOyGwmnAtpGOmz5aONK\r\no8Lrx/0NDLF+/LH64XYZ2NxPk3AJ5kEyV6M=\r\n=MB2k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/tokens":"15.0.0-canary.ee40081f4.0","@material/density":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/focus-ring":"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/switch_15.0.0-canary.ee40081f4.0_1666210361943_0.7639678832193402","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/switch","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b70365f723874b8d3603cbe85c66301a59794a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.98f1b54e2.0.tgz","fileCount":58,"integrity":"sha512-NAsf10MWqoh/d7DZM36Fyy5lwksrpCLrLkAsoiET8rj++XlJLiiI221mmlDj0Xj90SBbm0I1xg8lnPxlkrLPAA==","signatures":[{"sig":"MEYCIQCXzYTlPggAoqG2jm7Da9t8TeY+ZFtQiq18MQ8D1yb5WgIhAKDasg+nuofJbt37p2iphKz5nxkhuyD1arhgL3oiNTa9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdJaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYmg//cj3obVT5VPWjHMu4ioxceqA4IVRnoQUFHEQBIYWwkFnqOPUz\r\n5X/oGTktlWXzaey23BnzrlHoTdDtZeEEVJ+naSxQLNFuGCZ/M5e/oElJl/gK\r\nj1KhHxenb1Nmtt0+6HaUWB0WAF5moRL6wSlE3laLu+6kuJ7CfUeCZH7/NTka\r\nkjqvMhTYMvoEfMh0jRrxHtgXqXF/nt1eo0BRy7JbGrFN1Lqtn58aG8/fp1oB\r\ne9dRe+FB8aU3KaXXJl3G8VXMj05PeQ1m2fS0+iZglt+f6T7g2kabrvPz+pI1\r\n4JO4UxQBOfZ7Wm7wU3kxr/052jWm3i81akCV2TXParoKamwozoiY3sWCmCPN\r\noUgANiVHGpzf6W8NTFhTbzb6hcbVW1tjQkRQ2DoqQvlh8MvqcrloBHHiDncY\r\np9B04krqT1NddJ69AZ6i40tpk/E2FtbLG4yUJ6BwnT6oRs78mM97k3xdeNE5\r\nHSyn1eCOEws36B2JnQz1/nag2LDUUurP0/MZjFs2xCc15Frgwg58P3FjCVB4\r\nuA78uHsBltOAz3dMlrnvUJ1MhLHmYXIvMQ3SbY7s2WEa8fu+7EEwum4kpJts\r\nC+UWJiV+5kOxqpYbumdiakf4gHK0baU4OazgLeuneiZXsWVeUAsWpueAR33s\r\nYnvmUhgkqvckNRGC9Wa6sH7dvPYSXzddXGU=\r\n=m1ns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/tokens":"15.0.0-canary.98f1b54e2.0","@material/density":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/focus-ring":"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/switch_15.0.0-canary.98f1b54e2.0_1666306650451_0.08717381337881669","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/switch","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"149acc66011e209d13fdc4c80c20f0db76fc1f97","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":58,"integrity":"sha512-nIjv1lFDlNbsZGorBpaK97Q9Rv/PZyCcOuc6oeM9f1jRBpXvieKOqvmoLr29auoERbSHmcjBaenaNTZn9x/wKg==","signatures":[{"sig":"MEUCICiOc7Olm3+8Zj9U3Pe8hEwaIQ1DP93aLtdiO8scUoghAiEA+2glKIDChStjCxy2i4C0QRHTapPANoAO3PZKKBJ3LOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtGbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdOA/9Gp54j57ti9LcK4QR74+T4sztYvmC2Gkkph8GFZ7QsH93LQVc\r\n07A0LVl2Ia5EbrPzfr4wAPo3OBHKoz3CO3mo925wVVBIB2Uzwu+DvLmA7fPQ\r\nXlJ+l3cEZvJCm28JslMuGaRK7IzKFc7YXEwWJLpAc7k1SDFNzu+pW5tfJUtv\r\npX6QCom/f9bZfChDcyCIz1Zens8Ez+ukA4bhGgrCyIMnKfDaWPR2GoZg8C3s\r\noEoX0UDGdfRrwOFzI2ZUJo+QQM9vizHwNbWS2rqf8yNnqqazWPU6WR6h0ZKY\r\n1WSNlOyhKUcFlD+YAfc4pgoRchJEWsh6vSXIJwdBgxTCMEGaT1kiyYLxP8g8\r\n0JxGPR8fYh8w3Sh+f22qdXrBfLVKcvfUV9PwUwvsD+hOrfVZWeTfBm3Yzpm1\r\nEel3yRjTsrLLtdfz4Dbg4Hr5NY50UiBmilETV3u6Rp8TAYnd2FQGZBCu6OYS\r\nUhAiyRYL1CD5WZvwUk2MJaOSIANUL3GIxLbbgo4Pz727z5wnocPAJa4mtbKi\r\nr0pGz7EqYb2DCPZb36OLA8ZLxZ6aJQyvv1K6jzbs5vlBnTzHBDJs0RqjVPa6\r\nGgNrLXnUiJ1ui1cbR3RCDXEn1kp2KaqsnQEbqCcwiAOD/K5sefKQxl3TwrDZ\r\ny4pMaPDCMOrwqXJ7bxt9OrhZgjrzCNHwwqw=\r\n=dCIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/tokens":"15.0.0-canary.e74b7ba7e.0","@material/density":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/focus-ring":"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/switch_15.0.0-canary.e74b7ba7e.0_1666371995214_0.2820395104007538","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/switch","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c77cb98de273a4b83525022f809759f609bc9839","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ab55c07d2.0.tgz","fileCount":58,"integrity":"sha512-ah+j2AvkKy9aQyAjF3YAwpK8f71FUEM1xH71Md9a+hbQd4xGJiltZNMBwfFM+vmyOVVYrz4gyjXlWmBY9jgnaA==","signatures":[{"sig":"MEUCIQC3zL+TRJGO6PRwqC+DgBEqz2VitSS6tAprurHrsylMJAIgDLSjgJ2kpfTzf8nVktJ8VTm9pRAcF6STokmPy8bZDBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDRNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+og/+KUQs2C1O6YUvCsjMLcpd2eKYKYC4Y/NqeMIrkhoG6U8AQj1M\r\n3/YyIWYSf+43VFIa8fKZvlEUui6/kHpBWGQ4Wb/WYdeASdneoLixDq29thwB\r\n1I9k8GlEft78mWauD3B+lnvu6hqsTm5hM/3nSSs8Fqq6SmyNsupyDNEqo7/i\r\nQG1IqkLKG0DWMizxYr0vOytVtwk0U8QbBkdxsG3aVPBtFJYOau+xvf+pq/5n\r\nbcV31tdINcgJQ5wECT+XY5qOfVLtG2dslaTSp5mAKeO5+dC2gpdSSK6wNaX9\r\ntHk9D5eq6i0fZeHyycZWXwAiXLR6kpOisvB7WXn36Vttc1f5LlhO2b+JQqYC\r\n4nj+YutmVB3xubSQzyNcUb/FVJRxclHo+qmgQ2CCr+8TPpOAKwMC/ilGKaip\r\nkaq+lugP1YohQevWcjaNvfGre08RKG9gV4IJcJD+TAt6FOaO8pYBkdzm3EK7\r\nf9boPnENWkHPrKvJ70KFACKNbaYlALdgirEkEs0BC2rv6g2UW8LxanKnY+m4\r\nZ8aqIZ38Por/fOOeT6Y8g3sy+vTQx9eeFJQipTLpdnK2tXB3plpfQlm5LbgH\r\njivkOcbNnrNfOTBNO+24ax+vXNgF02GTn+6D2QJAg/4wcxZFLuP0mYQCxWW7\r\nv7UsR6QHv2tO7rIQi+BCjRABq9xBJCaqjIA=\r\n=Xngn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/tokens":"15.0.0-canary.ab55c07d2.0","@material/density":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/focus-ring":"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/switch_15.0.0-canary.ab55c07d2.0_1666462796993_0.49378688785052116","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/switch","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.fc539db34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38953c6a59316d715e078ff801b7b5b92f1b5748","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.fc539db34.0.tgz","fileCount":58,"integrity":"sha512-rVfl3ryBhUat82ZUtLBCx/uEk5pILJx9uVVftNp5lQTdSJTUObFf6Lp3CD2BkOj9uTwWp/TlbMLBNacUdZ0wqg==","signatures":[{"sig":"MEYCIQCRZg4l2PfvdNg7az0yd6O3aIwJDncnBPgDrC1Jes32wwIhAOJC229RXUDlT1EC5fyNb+BdH+n8BQc+atII4+XdohS7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ4Q/+Jo31V+mjoPQSE+OmRKxSUGF/b866Unmh5TuYN5xBPcbdtn74\r\nri4WelbkUsVSJN7z/lQ2ix1NYUimB8zbdOtP5lG4Stg7+i+/1t85MJpIlic6\r\na5QSn4YUV/2Qa8QBkLNmKldo8k4Jf0Utx80sY/XtfolkdqjGOYHCB+Tib/V0\r\nTrzxrAV6qJXlNqbHeXC7IsS9vIPKTHaoJ67JpfBU1Evmn1aIlLH5fRFj5NHO\r\nDfvhB0NPgmNKnQtIa5IeU3i89+bwVpnfuuSRVVxCxKQ9TBcFtJIJGIcXv77i\r\nMTAEd6CZMGTo5qzWzdIt2oiviiBg2j5EFfH7S+5OqCyih0zJ+W2ktYN7Xyr3\r\nhB0DcoC1sdqijauT0CT6PP7+fhWMRpZXsnmfLjWNBNPvVkeSMh7661zJlMwx\r\nIiU15YV2nk55QPXg5++ewRyL743/f8AYdEwarv529DVkldnbU6DYd+Z9Phli\r\nigjugByaMiygMpUxbHLGa4UMnggOu3zGSfnLeF6mbLTdiEclL7/i3rPov8eY\r\ntlGAGQKW/aZJqKOdV8nnqgy6FxM+RvXXuHJwxFPlk3DCzzu7J1YFxu+bXTni\r\nnGOqUhzBiXeIP0/CJGhu2QaFe/jP1hyKFbDqCCqjej4OmY4WgRA7jxNpvGlE\r\nI1Jm1doe50A6QztbmP+OXXfH0Ng3kMQXlFs=\r\n=dKx/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/tokens":"15.0.0-canary.fc539db34.0","@material/density":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/focus-ring":"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/switch_15.0.0-canary.fc539db34.0_1666637995804_0.013292618591274064","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/switch","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e6db6eb3b581d6a0a68925bfc4945429e261497","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e340b04c5.0.tgz","fileCount":58,"integrity":"sha512-knO//7bwzHYueg32cAi/pty7/Ug4cfZojity8H2ylU3oMcxnSY30HzI1a1vxR/NltEbjtAuwBYB15O7SPDrRQQ==","signatures":[{"sig":"MEYCIQDj8lusQDOnj3kU/1Q2f5rPQ3piwQ8SKw63atccb+DREwIhAMN0wQ7ko7Y6rr7gHWpE8iBj41xssqvpNEWheOnQ9eNa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt1g/9HMF67SYXjgr08PH3AMSEnzAHCxB6tVMi+VT9hqoigsfm3uZF\r\nJFvxa/ZWDbB/tVe3AqyOSd3G9Gx8EdHVw2pX2oN8oY0IQ6V/W6XxKjU/yEyU\r\n5saY8FgJK9Qr3JZmbK42abNUfO21JSbwRGNIXnGpxs0sEt7g//tuwCm8I9fC\r\nEugBMrmjL9EvCZc3yWcx3hBVwiV0f2StZskcYi1my4Xymkf1YWOKai+usLnO\r\nfsaUBGZDMgo1irk5P4PW+Fz+gYl3JiOqVxL0mevn1KUoI7XElH5CWPjFVc6z\r\nxibB6PQC+5167hh/ESSDIcZ0DXwWSYN39iQyeuUSKhyCqB/W3epArqSDzJ1F\r\nyWWxRrt//quVQSKzj+b16nOPaPUckmSYylLZ33V0M2O25BG5OwmQuQHfI5hm\r\nTrvH+yAmtqujOBLg4W9lEwoqJ6pUbw76UzIiG69gMepiD6Hr4vo1aVAF1z1h\r\nfOfhYER1KcXsam0gqc61OuTTSc4vJHEGeWvStGSGp8FN1nHAwG/Qa7lNBhNF\r\nr/JDcXWEY9/zKF2NXw2zM30b27j+HVmjP9O124r+p+VzZWYXOvIYfrFVRB11\r\nBC7oDXB0vhW91an9auj27CckvDnKY9UEiiuEiozJMfDKDzuo36C7M9ydOT5y\r\n4LexrHej65HZ27M4DYN3HtL1NIJ0GJ5629g=\r\n=ubZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/tokens":"15.0.0-canary.e340b04c5.0","@material/density":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/focus-ring":"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/switch_15.0.0-canary.e340b04c5.0_1666741549547_0.31892999328266347","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/switch","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4755698db4da3aa5a7b1e3d545f48ace9350f493","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":58,"integrity":"sha512-xYHbSQyJmyDUM0W6QPajLKBMXpQhijwNt4EH/yS5UiZTt4nB5XHyL2lflVL+/tHV/7BglSetEVlG8x+D3406hQ==","signatures":[{"sig":"MEUCIQD0PuWhL9xVSx2r6MTEvhubHcVvgHg5KzvH42rZx8B7qQIgbj9wdlUDggXnR6B+UHr7GTKuBwwjXaI93tHNNOF6PaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7JA//b30vZnOttN0tUIDFT/zd2JVNQR9IPM2A2V2WdQNnfQgRBbAd\r\nxg3peMydeD/vGKVOB5DqCX0hVdMC4XsLsLSXT28t1v4w0XtukG6cEkRYr6NJ\r\nkhrZ8lxdwaMW6/3XUwih0agW5lJihhtPAuxpcFLtBagUDIsW8LtlXojh4ouH\r\ng8653Y0JcXE7ePB/0VIyI86h9wOC/EJdoVeijoBNlDSn72lx/2N5HvusBrHc\r\ncASWZGxrfl+QECZcV6vNW17T4R0kP9B71v8IfiQjE+a9aTbETALg6eQhdUXd\r\nqsTLzaEiVNyWv8e0YtTh8TXvwcTAh3+Y12+63KyQKxUmwoN/xkbxgusmgRe4\r\nwhbVnI+3LbWaZ6JIkNEFrn8OSHxcNNPHPNq2gcBUewr5j4LcwjWC4vox82GH\r\nirT7c2E/oydGYXwOXhZEVCmYy/7UUJkAeOI7I0DxLqV4NaM8z6LXBJ4L5Psj\r\nBrYIu4PW3quIiT4ndapCJyn7QPT9oDJUHvc2v9wzHepNlTP2ocd5w9CqZyLE\r\nxyQO/axcWCvfHIwr7LEjs8P+f1w1NLTACUO4wvUM5KeLtoU78romUO2xfxTF\r\ng5kB27ZpN9Ko3hQorLWPaImj8cPFH3OBPtf5IQwYtSYoYRKhlOG0fW6Mryn2\r\n8G+vUI1DB2y8F/SZrsErlwXtlpYdYu434qo=\r\n=xXZG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/tokens":"15.0.0-canary.2c1a8f8fd.0","@material/density":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/focus-ring":"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/switch_15.0.0-canary.2c1a8f8fd.0_1666805485886_0.7844955398267386","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/switch","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7680ce935d1a436ed8316d5f33be487e243ddc87","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ecfee946f.0.tgz","fileCount":58,"integrity":"sha512-ddFG+4Un+AYkQVRP62zhxcc9wd1mZIxGe/vzOzAyZYpRuZQ60cqTQItOYpysYqc9LG4QG470DJemtNFGspiypA==","signatures":[{"sig":"MEUCIQDnE82CBjXxbRC+yopi+YXr/bxX8jnSFl2WqxJC9zFiTQIgXB2Nc56Rh/9wSCfykf0sm0Y2kRz1WULG6Z2T1F2nQyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZWLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPqw//d1hbvLzMYZAZg4Cv7kq68tM6nVx6MkBXdl7o7B937/ru+h0i\r\nN+ChpGqMyG/OrRFq8OeqBv9byvM7GBWp52hJT0wk3+6jMxodCV06zm+4CbGh\r\niHrD39FgqYirTXbbQI5n5tPMvFiN0mdiPLTHDe5fGKa3AF520Ovq22IRwtJQ\r\nlqFwRAFwHzGhP+xaqctL/rSg301fyinHOeZ3GZJny6AIKjI7Kjh9TGxMHP0x\r\nqI70Skczfo9z3V0cS/JFazDuejNiQeoSBAEmXa3JDZ4HG7gFQ8/KrY2WDnV0\r\n1/DU8zmNyXT6EooU2ee6/6P/g0a14h62rpCfpM9PFLP/QmnLqFluVM9uPr0p\r\nfllRzjJyuu6w32HqYszArUEn981NDdBDJ4IEcLx9v4TlH08XmZAVFoGgKX5t\r\nyc24s2WTNAviHocfOj/nveNwEAyrojShfgJLKXPZ+W925ikPvS10jp9/grH+\r\nGWPN2uTTsBkL/SzF1cC3Cysyw++C3NOk4qgAU/5KLn8tCnjaeG8mCOMfNfRV\r\nv7KrALsa2LH2zmuj+6lDzbXaaw0Q8n01KsXozB0R3t7IhOpJJ/pHXBLO/k+r\r\nPV2j5DKL+Hv2lsQPn4czdHd+PNvhqbjbz9c9zcGZ24Xn3d1JsvnNnOFTG5Sq\r\n0yPJn8RVQbh3Dz+IA9ow+YmBNtzTNr6NCjg=\r\n=CcjP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/tokens":"15.0.0-canary.ecfee946f.0","@material/density":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/focus-ring":"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/switch_15.0.0-canary.ecfee946f.0_1666815371050_0.18215927349225614","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/switch","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8130ce760b7bfc2bb94e1016f6c0a2e556f50b6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":58,"integrity":"sha512-q2/Ugo2g1BkrmUSzHwRFsPiUKiL8+lKimCgtupqeRBFR7dMJ9+eGMjVTkadzixlrUro9nrh7VT/gNNFFVvuxZg==","signatures":[{"sig":"MEQCIFfsrIGHYrM+/PeJN320ugSWWSiA39K4P5R7MvGab9MYAiBIIi+B01R9u+U3ra4QBv2+DMuRn0/YD3TYmnw0yuwJwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAbbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpe1Q/9HAN6rLnfqb30MyP5otHQir3HuNa15BciRTV7c7ZXmKvGJP8f\r\nLn4dgQiokAGGpi4Q9hOO89+JWkTGN015p3faPtzijCqBXuDoq3Iwv7D95cDh\r\nVo78ZPiZ+YS1/C35/RwCBmiaOCKh9tHwZCyKszL8Q1hg4DvhtCP8qzq34c+O\r\nPlxZ+i1Vz1nvRk90RYP6JeSCGOxY3g0SCDrx1IPk5so2lv9uQTg1TmHY66gR\r\n74KVu0uhGD8Adw2OtWJUtxB8M0s7Fw8vHq556UWsmRjyT+BiRTFKr5m/oBT/\r\nLW3Jg0lttUBLoqod9nAhxccEXzMFq3C9wS97R3qfE0KzbpYbSOwNkTgP7AKE\r\nbUtOR81oGyvWMNzgC3WfkBuYWkVPLJeQ2aOrpqi26SknroiuMufQJyYjN8ds\r\n+ZwzQQE9Xn3r+/AlPK9it/K20ghcYq87vO2OU6g1mvQ5CXeCNlbalbkOZwVz\r\n1fY7YJYbp3GJL5EiVkJ//hIgPJa8DSn/UTIUAPDoP81iSmS7ESRaf6J+bGYm\r\nqNNZC95ZZpmReecSH2OjLO/ytjFCZ0GMcMqYzvYzpuMLfFZ9uIr1Izl9rv6/\r\nxBRWJK0uKWhh+T2+u5NpgNnNqCJzfUzBJog3NOnLYPcklhIUFMnyDEot0bI3\r\nWgvHU36RLcIWau+r8Jlsasy8raBG7HI+qbM=\r\n=CP+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/tokens":"15.0.0-canary.73ca9dbb0.0","@material/density":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/focus-ring":"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/switch_15.0.0-canary.73ca9dbb0.0_1667237594850_0.3568046371200013","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/switch","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a77af9d99e72bd1386a20ebd532133905267b33","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.357f2e5f1.0.tgz","fileCount":58,"integrity":"sha512-stsydAnFz+S/tnvRW4n7bgNIZSlscKgGa23eTGH17sUlPTLgeTMe0r+99ANnXg36ICQDqcCD647093Htd6s3Dg==","signatures":[{"sig":"MEUCIQCoMgFLG3RMY5DqceNT5U60htPyX1vsyZJobOktkwMpmwIgYiNPsc9y3Bf/IhSHmMNocKPLrMgjSh/Nr182SucY0TM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBjrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/5xAAmSQnYBC9hEpEIZhfoLXaugz5NJ7uUT5qDA3nZWcUDFOgtpEh\r\nw+vXxfYzYam6+zlmovKT7XA61ADmMaMeeq4tPob66EqIACHlt2IFWfwk49tY\r\nxgrxrbpjYrky6rfwn4d8uk6QYbYozVhPMaybBp+r7+JuzLXDbE4e4GMPpc1C\r\nE+ypjcqR9Vp18Jm5liQCNuTogHJR3SZPKCprl8+nqeJY5QmlR03Xiusp28Zi\r\nuqKWafU8nL16d5fDc15qdXpivKa/TL34GxAbw1oKbwK+km4joY01PVfWqwoT\r\ny4kuVeaBgct8goW38x5O5yusyR3LpdNVtf6xpNq3kJ1IZTGN4VAJ6s2p7Twl\r\n64OEPLoR6AisCwMCkuITQrLCMhn/90WWqSVsXvADT2sbVBQnhW7iZDe3UZ2+\r\nyasYffXfZDtXoOl43H4RSCGPn1iZPuQavg7I6TseTjb5OjbvpQ4Ntus4OVmH\r\nHHte1m0eRClpNZ3g4b8uKp4SavFNwBBlqBT6UoXBLF6G4zjOzs8lTaq1dAA0\r\nTsv7OnF/aoylOYnZIe07JmBLiPKxY1Zm/EaAcq0IQeMKZ+LGApbIm/VJf9tK\r\ni7BN2YyiAmmhOdGZAgij6RgiuoZc8m7qNm8ovmedjvLg3YwzGC4XGx6s/anP\r\nfnmysstKFeaKR/GUA4+KsY4u9KhJKodMd04=\r\n=bXYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/tokens":"15.0.0-canary.357f2e5f1.0","@material/density":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/focus-ring":"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/switch_15.0.0-canary.357f2e5f1.0_1667242219494_0.9647539255092741","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/switch","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e01c6cd67baffe9cf22a8b1b5edb88430c0f334f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.eb103d4b5.0.tgz","fileCount":58,"integrity":"sha512-H2njAK+0Te+10t3qIW7mh5YB+PlWZ9+7epluBuna/6Gj/MCIsp99iInPTt3DiSK+P6Z9l7Ed0TFgo/Ku5zX3hw==","signatures":[{"sig":"MEYCIQCoCxmRT/wn7lCg05h6dwDcfqyJgshDPW8Q29VxTa5hOQIhAIA5e+Sfah6BUjG3aeAfwBlhQDMzvemy5fqBB1+SJ3Ak","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCiZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRTg/8DlLDmHDEtzbdC6DF7dWC56fBpuXRreRqc2CdjRngfK+GT7pe\r\nJh9e0H8VvMoDzyXXGyu0rjLTVL8THOmdqvxGQgtNJkD6uasAkydw9lb6nPjY\r\ncn9sdIBostsidYh/W1tA764f9ck++xGGQilo8ToUE7WkGe7cTb05NGXkrNtI\r\n2T6p3pqHBOPPxQO54jzgMFchpYvO9GkbfxTl71Gvq1V/d/qN8NdREhn5BKwU\r\nLZXTxypIcxVAifBbHk4ZNzATEGTfHnoapc8thHSU73z9EjjRM5aTOFkvsCRr\r\n9NACVO6EsXBscwE+C8V2FboRI8iX8Ucemykej2xm/6rdapSTW0FcEf6QtN22\r\niWdESqC5iellJvznDlq10XJ3Qa9GwcsRYSZquQ4qzfIuppLcE/PfBn5tmnf5\r\ns3CnIOtl+IIRzJlnlnxLfzQQXjsKgBmkOwDUrwT3K3ef9qrGuRYh8hkjW7v+\r\nO0SAgy/9/t9PxN+4STwDijS7NpOcvLZByYuMwb8SgkkVMU0duVeR9h9ZNlPC\r\ns+gp/EweTY4MjXDTkpfThT/73sBOTV0+gb4i9RZwVDN3F8+TD41gMH63qaeR\r\n9VdxyMYWSpzCBkn2dq4MckFR8xyBoNkRZ7ziiXnLZl3EyWI46EtXMM2TQx1Z\r\nsvWt9uhCcfsCsGG6rusJf2CDPo1A2kssuzo=\r\n=Ee2/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/tokens":"15.0.0-canary.eb103d4b5.0","@material/density":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/focus-ring":"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/switch_15.0.0-canary.eb103d4b5.0_1667246233656_0.45138665897966956","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/switch","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.af5f01223.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a75ee5e4a943f244377c6c1e0a45e4983962d746","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.af5f01223.0.tgz","fileCount":58,"integrity":"sha512-9a5e7CVaSo3NeOVhuCcBjkYW/qw4xQzR2TIHNDy93DnmAkCi08FDAcoEqa8o07fXZ4Kq177UAznW9Qye6HyEWQ==","signatures":[{"sig":"MEYCIQC4SzKDMqYSIIsMnADH7dKS6dA9JDoOuvXOywB9r2t6+wIhAJhZU3bRxD7QHLhnWjXNJCDj/i8s4M2pw45FjIfmtCJj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWd0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Sg//bG51Ln8yVqFo8Nbtzy5GdlT8o9ei3euKIH4mmFpEjGDE9gub\r\nST1zcG/pdVWBIUZmvxeaU9layN8Pi7ENscP4nHaax2jjvaB6MJ5wImrlEblf\r\nGFdOQx3YMnVRo9M1Hdq4tbj17lMVZ/U/TvOY+qPWEs7MEaRGF4WQpcTfm3b2\r\nwyY/vHSRe8cUlNdNBQkb5MGloKqhNO/8v+IFyF98pmyf8teOwCPL5aue5vd3\r\nMI7OgWAY4rwP6WSvoVV2WzeaXLRsME84ZK7KBC2hyOUPdJGRkUTaz5jbZyM9\r\npuCWh1TyzBoG8sOJkmOuz5qulVvPwYKRJ4u1hKV+rnCnac+1XTbya2rtPXj8\r\nxzoTTHuvIwEyPYYAbSvHr7DAC2qRYGN115OSCbftqMr2orNNJXF8Y+Vf1nWp\r\nfWjtkKzn6zFwb0b+/8QCT/ameHwA5LW5Z5bJ/lL6/kx0f27WtT1bruW3qDz9\r\nOw0dkdt7JhoApJGYojMeutgqs+sxJC/Ywd6auhoKqfPas1bNfRGyyuTKnQtg\r\nhE+rcisTMyR4T/HfsHBodJ8cicVAKbE1fTuZU/eFY5Ot2L/kO0eGgfEtrdc3\r\nO2cI8cBZ0RcLFu3um6ouzcKmiqXPVmCFayGLz5E6nCdcqtAsZb3L+RG0uCih\r\nGvlNBIDl0BMJAPZAss18qk68yXFGFIv0xyY=\r\n=SnLt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/tokens":"15.0.0-canary.af5f01223.0","@material/density":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/focus-ring":"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/switch_15.0.0-canary.af5f01223.0_1667327859974_0.45285224226028964","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/switch","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.58733ef41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a0042a69c76fd540519dca4a335fc4bf2fcfbf5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.58733ef41.0.tgz","fileCount":58,"integrity":"sha512-YDWBYiCAIDBF3aFgUwc6KlEYzBg8wIOhhPhzeWti7TfxwPx135T7hmvM2WO3wjpj/lVaVidhvSNczWN5+3czYg==","signatures":[{"sig":"MEYCIQDyCGqBh/UGnL9ohdBTWMwjZ5ewzMG/fWYH9NmikbSuGwIhAMRPPJjSBMqdLYEEECdt3VfYGjbVS+re668ZSIuIcobt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrLUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1YA//VLBYMt32TBnNcXE7xkVpQIS9JU/rNmFzroFqzNmm+/rAQNuo\r\nv7Hps18j0D7gDdokI2nK1d3hfLRkpiwacHHfSVFWhVDXCgIGIQS6g10EC52O\r\nUzbxUO2WEW06XG8Tq3PFIfCOJk27xKrbd5osmIlNAAiMOSUvFnNaVhPbrnND\r\nQyE+OnfG9FidsVsu+9V1ZyGZ1OmmHES383Cqgao9+osOof1xrhtblqlRm28r\r\n1H5UdrxGlo1GtdTkGg4VYfhwFTP7vUsvkf/ofePeTQ6csrcBF0xkiQhXuItj\r\nDIggaq1p5b30BzyKP62Vg+8P1vvTaWA7ok0M6vhRaEDnyvCUEk4FTBJLtMXM\r\nRKcyxhCeoPkAMCO8tOAi+gZHSYwo/M+wIWpxS7bMb+cVNKKOmDeNHvy+2wXj\r\nZf5+tG1bzGvWVHwfYxOcvbDmFkdAjQq3+NgFvs9+9RoWbbG092sibGFn04cT\r\nCYPWs7xvf0IfSmZdcNfkBWRUQeiEqqs6JbBCUIFGUinugcVBWJmRSL6ouAFG\r\n8L1hqum8OK0utDv3lemHtCMDk0Niy5E540sQ9emdmdMLIiDubKLhSFG+IsBM\r\nqL6Hwa889FCTpCtwuoJXCWB4GUAe35KV7mfJ3Vu0kLd5K7WhXzNqEXLoSfxa\r\nMFC1+tBYfe7kd3ImvzuZ06B6WJNPR7h0Un0=\r\n=NU/7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/tokens":"15.0.0-canary.58733ef41.0","@material/density":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/focus-ring":"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/switch_15.0.0-canary.58733ef41.0_1667412692413_0.4748170152306157","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/switch","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.909b48215.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c28e1a42011eb8d2e8cab4b3ded8f12833cdc0f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.909b48215.0.tgz","fileCount":58,"integrity":"sha512-LpVykSzVpNzPNi+xnEjrcRWCfrbzYv2VngqlVMyOzCdioXXQF9cdfiRr7TB0DMkn8E620z2phQG6Sa/f5O77tg==","signatures":[{"sig":"MEQCIEmTM2fC9HvuqDpQoQVcBH03sQVHg7hhrgzICr1wKtbtAiA/NOLaBiF/k4L7QRo8hI3Ee3wpwkfbUqwYisandWHxaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz7MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8axAAk5HvCw3eoP0p1cLxB/Rja+e0E+0+D3LC+6ymkblsFuSukoMm\r\nj72jzUMEUJ41UKTyGQEdDGqN44ziYZE6s/H7ntqOdRHoA+baJYAgm+it7m2+\r\nGkEpyXcUIwc2eSquVgwKJA+ay+eEmXYUSV0btzcdfUIO5p8aSFqF0TQlGXV4\r\nCQq08nSWRLe9NxCixgU/GzjAdrALKKglnb7ursFqOQzd3BdKUgwRjeDHfkgu\r\n1yL1NRZ7c6N9IqMOY/Ws0H8YZJNkLM7/NYQLZgWgcnT1lGUkyEEZnpwRR2Aq\r\nsXOajy4xgQsBESYo3y/jZ1GzbVq1cfOXfHyGxnP8V9D5hFnXd7C1dPFuRGA0\r\nvjnRK1iv9B/ZiJAKgriUUiPBJjUEdwjOQhCm5/DZJkjQg3HZYL487QZ6d1Yt\r\n5a9oSX6gYJO9QLvfKFlHfZx3NgqHdNHlWFfhkzADBFvRC783soGydau/oyz2\r\n2m6PesPJsLncn8qEdkebnUYViS+kNGIsjw8jq+qygYTC3M44rImZ8rqOr+mx\r\nE+PkY3Ii2T/HJcwg7Lk+KF5cmcFjjz7YYw7Vffk0onkmnJcHCDgkva3iDMkE\r\nrXjlZWb21E+3/b6Sy/aI5M9+iEkJ8KXvunpip3SKv5OPM1omhRmURZxIfMMv\r\n5E+Ey5ZAzC7lBEwXuy0Ctb+CfOG+f17stA0=\r\n=4klk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/tokens":"15.0.0-canary.909b48215.0","@material/density":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/focus-ring":"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/switch_15.0.0-canary.909b48215.0_1667448524047_0.4200610151456996","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/switch","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fb14cc13e2cb34d8f8bb196065f55a16a123f6e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7f17127d5.0.tgz","fileCount":58,"integrity":"sha512-ctTKsARN2hsSF8opew+arX7c+6QEWw21XdWvvy+nD0ggHQVYfAIZc+x7LL/4RWeU7Y7cTjpFBo27xvOWzqXHMA==","signatures":[{"sig":"MEUCIQC5VlvpmPh5xrnJtjBKjFh5sHf6LzXU6DGe3q9mwjBHAgIgY7X5K1FBmjz09eDYSG+31IohxNw8OSnIjdcepa0tEuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAZOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofPg//duFsL/v1DYEmrdQHWXVrDsrhwZcJgq/rpyLxA8GsGyE3a0bn\r\nKr4ffQkNs1E5bIaNDbRTL3GsiZ5oWWpnByf6/CtMaDlWrb74OdURIINtAuN2\r\nRh/f76w5v4njTp/kbTvx1wWXnAIQDXOXZg+30Sbo40kCfU8cdl06N3Kfz+tA\r\nlCh+iFhM9MgnagYcacuupFPMgbFh2GAgiuPpUqxkI6AqF1LobamrTHw7JOF7\r\nCGXsvbef6V3mFeCqrNOm0qJJoJUWrqwEmZUiExicaeMvuzQzxFax8z4nEdvM\r\nOToSnB7yo7NmT8LEbK/+6WshFLBe/RYqfJwhgmds08mXXCo8kSmk2KLVYXAk\r\nmyLLe4TgU3/zjEFFgqSt44gTZRNaf4upzRKBFXmMWPTLyWO9m5kRtX2aEOg7\r\nb5W7MtyDVI7wT3gnVrHF25CmvvoVXXoUoBKPewZpuXISonVFWAAFYeFAlvSM\r\nmYgSnGzMpR2i6A80FBetDd/Jyo2MlMmdmYoyDroFfTtGxg/xT02kuyX5iNwT\r\najgrfCf5O3Z7AbdcaCC/Rc5ozJ6josROcW8fSqsAjMddu7e+/mO7L9p2NKf3\r\nIBIx8s91DOAq3FdfG8+9hStayXw5gHe/hwUrERGF00sFb8mNltzoSIG8l02D\r\nSHnEmrujHAvZIdmmaaGxrLTKkjzgvUO4TD4=\r\n=fg/z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/tokens":"15.0.0-canary.7f17127d5.0","@material/density":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/focus-ring":"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/switch_15.0.0-canary.7f17127d5.0_1667499598749_0.45570303123395983","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/switch","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7c5cf554c101f394c7b7555b8ba63588b5b3c03","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.da95e2a05.0.tgz","fileCount":58,"integrity":"sha512-WhgHdaLc7pWJoiC98VsaefZ5vkM8JHWBP9dBphFm6czuEljXhPBv3akK7nN+2a6r++SvEIZh/Am+caFF9GV7rQ==","signatures":[{"sig":"MEUCIQCN8CubuOIJ7u7DwmGBqoGG2llvJ42zxm8DoMQpugh6pwIgBhjRWYsoRjyiwUD6K7sZGLwuCVlroyhUEr2/emNl5Lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUUIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5VhAAnUC8TTTeE5t+rn2V+HMUGraLH+zYvQfRgSvZlnEayAmlCLYu\r\nFpdByLOSOBzBWS3Lq0tKpxscq6XGHUa9rNGHO51TS3puHDuB62OHuyeQ7u/X\r\np9YFlfLhU45WsiDyRzrf3+mkP7SkRFmjH6iTfwoeftWJ1Q6Yn9rfmlXJAA44\r\nPOjytPVSSBVH7C1C3djiU0nwT0uEKd2SWYsxuGy5TKwX+3bqhAbI1qP24u0D\r\n5d9SeKDfeuq5C2pZ5HR1D/Oe8uZ9YeqnIWD6AvxC6WPe0gng1KWohat/5AxZ\r\nLwBoDeWjnO+9wRp3Xo06fR2SfNKIGv48+dDBaGufNHMgM01sxdSrXfTBsNQM\r\n/tWB81oTiCUNPmUrWxzxQvBc6iOi5XemTl80vCNpTDoxngQQ8Pyx4MFSsk96\r\n6ovvhF0TVZrmd1qROsAxjLf16ElUM0AZkt2DOtXR40+CEDLs6RPHzWNUS1ni\r\npyU1HjjXUQro0tqU12OwLila8kWSvURdWc32DKF9FoU6L72oAvmLQNeSyq0e\r\nFgwJSqaIqjoemNtDguLlDrMMiE6o2bnVqVgIAEytSwrOKW4oapY6q+zd+GTV\r\nCg8y66KeIndcrreRq5pzMhOmr9XLBMvywLJjV8a4QmcozbvkjfB90RRfnFdI\r\nxnOJ5kiW8lYTreE7mFPAwLpljvbwaEvXXZ0=\r\n=N5HK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/tokens":"15.0.0-canary.da95e2a05.0","@material/density":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/focus-ring":"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/switch_15.0.0-canary.da95e2a05.0_1667581192374_0.27969108938166887","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/switch","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4832e2750.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e96b8d9074ad640e48a7e601a164b1ab8587a78","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4832e2750.0.tgz","fileCount":58,"integrity":"sha512-QENcS/zYU5gp4uiJUCmH4eigor1GnPQI+ey90ZmfwktaOOWbnLb7wxD98d3XHJAKUJVFDnZMKA3Mq3E043/94w==","signatures":[{"sig":"MEUCIQCavwAA/8Cxs+3l1VuQWv/l9zNYlX3TnMc6H9HI7hHhOwIgU55RRXIJ575QeO7GkK0lIPim7ZEKlDR3S6hNl+ce0xo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXzNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl1w//T9tL9hjAgwCqoK5yfeJI3lV1YEY6Av+qC4sX3WRC3fDpJkMd\r\nEnKAcZRsMopGjeFqVe6jwqaKoXop1yqvPsRuOOQORy3E8S7SLgFJnu1nn48/\r\nSB26VYF3iHU7yKsHZ31pxaircqnzn62bQxGwgeeH0lxqQi6IRHuq3bNa6M2/\r\nBPmmksKWo9nEsVPq06wlphg641eDd01zlBmG8d4Od2wF7hkTjo5fKLzJcUaV\r\nY4y4IBKtYLv8yevjmktcZ/3uNiJJSZui7Gbz/cNHbjIFpzn8F3+/NdUxtBRQ\r\n1T2TWqEkYXA9u14EyiPg64Tp/nFJGZ5/4fbF9StP5eR3yuTWo8wzBfPt0sBo\r\n2zSFx+7mjiT3iJ6gNA0N+rEuyo1vZZ11QP40SloPIAIr5+xMla6z6ULKJt03\r\nRc1zUXMuoO5OYavg/tFU9qfF2qSgTDrFEitURt7rcc/Y5vY6SLppP5TOsDz/\r\nkX3aOqFpMFh7xTxq5nHtGlS5kv66bnxO18ydCbXeEUG1mzVJ6eU/32pAydvs\r\nSYgSAcP4k+Gaf0MeAE7j4TuzN00YoMcBfjmXj09hRxZiawppPz/ZbDYYN3ue\r\n1EUEnXNzfF3wjPB0t9m908nGr95yfEdArFceduxhVbHPDQ/+AyHgAnQFoy1i\r\nYc7K+LBWB+hLTZa0+KDP4q8utfC602DeSg4=\r\n=ZnLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/tokens":"15.0.0-canary.4832e2750.0","@material/density":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/focus-ring":"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/switch_15.0.0-canary.4832e2750.0_1667595469355_0.12040636061656573","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/switch","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.215506426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee762a31bba3cad552702ae4de036f5a1002227c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.215506426.0.tgz","fileCount":58,"integrity":"sha512-aB41S+EXfGo72MwtrAXoz8pBdEhuTJPOC4WMzi4Qav7PWOItwhidHqLW/KhP5TMXaMecjquz+sNt/MRioZ/DJA==","signatures":[{"sig":"MEQCIGWdoFpkABCofdfxU/sPqyO6+tH9PQxorSrVXRxDa1HgAiALtpukF6EUzgb8UJ3P6m1twSXm5Bu0w9J8JytkQ8uQMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbcnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoh4w/8CovlA01lgbNOoZElPQHgn020zjJN9e3VlZmD3LYjiHcay3T/\r\nu456p3nC7eC9NKD+DJjEAhpDiUw2zzjxyE3dn9VwuxPxrRad9nnl3zXpNsF+\r\nX3AvH0OMPSu0HUOC3tfNQCHwrJhzonlHQZS3S/PAeVLvRlfCTA1mGSI5UdsQ\r\n2LuCSj/uW+KOPosSRcQfnsCUe8MTb1HSqYCd6zhR01WM/2FKp0bVEZI+CxN8\r\nKwHZW1kTJyh7f13BpDOUtmUd57U4zfPEXOI5bSkC4ahXEqcRFd6wxW53jjT8\r\n+L+II0amTA/62l/hCF9qVRjoREOCnOJKqEAFvmX4Waoe8yifzbfbbEp6NYU4\r\n9S9sVOh1e7/laHNCPfsHOWvQXTedlCxMv5gkc8le6kzX7JLmKGN7ynJcml2S\r\nmTvs5qsS19tw5SrXb/15epuHzaEVByL7rzd2SdrVZigZHuTaMA6PG7BRKcmM\r\nhngZnwbAqm9Gfw42ZAOMoGCuWVy4IXU2pqmZA1UbzeCPcBPHg629Hzq3g3DB\r\n6p9glbGfEL2AfBqYPaPiE0qVB/wd00CGIft3rYiIICTnXAVMq7f4gGsOwM0y\r\npj2Fp/WDsamIi0hmm7hdllkfEJ+ewzcPjKbzVZIt/uPzT+mVK3ce3Qd8GOe7\r\nBpPMmrJesyj4qk7IXjxTUXz8tfYvOfX9Ld4=\r\n=JDDa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/tokens":"15.0.0-canary.215506426.0","@material/density":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/focus-ring":"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/switch_15.0.0-canary.215506426.0_1667610407076_0.3725444620956222","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/switch","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4cf917476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1a739a3289d346eef81ce6ec6d26490d2c09315","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4cf917476.0.tgz","fileCount":58,"integrity":"sha512-pnDQgTc//ik+Pz+C+9RmscmbEZh76DC6egPH3Gifcjdyp5Z9OKtaj8SC0wuNMdch97gQvaIMp18CUiEUI+XJIw==","signatures":[{"sig":"MEUCICkEfK7UBYMIbui2GsO41cCBAI5vAiGS0kGGKLyjA4/2AiEA8PQjObUXPq+pdrzHG1pCF7cZU/yWWdGqA6aWHpf5gQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqXEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql/w/+O7h4+54K1vT81JlXTXokLd0zpBceCqxCIJDk8szdaVRdWeTG\r\n1PnJHltFdso1/HdzGpNBPejinOlOcS3yA2cAppGgzNe27LizXF7M1JckjcbR\r\nc2KJPsIl21lc+l9Hnw76jD/vT0bEu8pwiLC5V9y+dupcidFu2Gz1PSJdW0lw\r\n3OAxm5gWUe9nwr5pTIXVpLJlnVq08h0tEirhOBzmy4nfyGgbR8ksP0CCd38T\r\nk2Kb4yXLfYIBezN0uWjAkrM6SwGJGij4F1I5nnHYEs+hg38FS7TFw72aaTCh\r\nfWJ2WusfCJjj9XKtBUYG7srxkA2jt6/R6kup/RHsdDQN364Re4C+yDhHX545\r\nZs51BMb++Evx/TaY0jugoVwFMJtI9iUhPi8onFyfWEn3lcNEkqa2v7PnisP6\r\nbbr6DQhCAB74Y2Dvk701QAausQwiNgXeHv5Et665ws/PIIKzq3LAZ6TxCZRF\r\nP+kpyycwLeHjejP7CXYVJLPYQc6KE5YvOD7DJruFKIkZa3v5WbT4HNJG0baD\r\nVQg3gW+8fOjGgc7HibjQ4mnJXyI+xzcIBIi/wagNlGlDb+5f62UIZijz2NAV\r\nnBe8QbjiUNmdLMuIUrjYJbK0rDsPBruBHbhmXhvdv+OFharK/wSI4yWvNVos\r\nDspyz+1KfDIbVoxvkGPM/+IPPiAmOCKaVHg=\r\n=N8jd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/tokens":"15.0.0-canary.4cf917476.0","@material/density":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/focus-ring":"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/switch_15.0.0-canary.4cf917476.0_1667671492357_0.6040303766013275","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/switch","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf964d9d9c1a6068043e96a60d9aeeaf9b004dc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.eef14bd32.0.tgz","fileCount":58,"integrity":"sha512-vpTABOvmPjUK1nZbiRT6eUcGlHaEJXwjMms0CTMJksfQoIYBa6ZeGuuSCLdFqAME+rmr76TyKYrpH2FuMiJa6w==","signatures":[{"sig":"MEYCIQDklD7w6XHRWBskl8qFCDQ8NTMEyIvwVM/gw1NWgkJ8IgIhAI0GVgKd18y+eDIbab8Fk2u/Cd9W1viy07K8WkF0+oYx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+4BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6wg/+JWxylRWc9CTQK1mHhPCim0yMhKZarqMl2wrylZY3YKDWf+VV\r\nXTBJ8f6NOJD15N+r5RIr3bsxi2BA90neMWhITC8srDga8+iWoW4FBpSITUkQ\r\n7KmPZZkDEKrX4Jjs8aH2hEBajpMsvD07PxOZCxyMJzSnGJ/JBpFu7hMBoFzh\r\n+rBVJyyRHM1WXK4+WP9QRzzEXnRG9ulUBvoJHtMUAagozQ8+juG/1wvpX13u\r\nTtmS7NgrUDu0qlKORRX68WHzYdTplwB8YiVEnMOOQL9a1IBlHMlEwq3e7639\r\nygSxhLHApYIWKMcZ7JG72Gnro00Bhzu8CgxtPO1Hr2uwoNl+oA0SJXQlTspk\r\nl543KjhCEzUKMN+35PgX49Fj3P9rKtZNuQKNlxsRCqHs7RCcl0gI872so4Qk\r\n9jwmwJeWYM7tKG4+4HVuvX69BeBBjLJcJSYv5iuRA1bNvP87zbtGBavqGdr9\r\nEBgYvYF33xyF7R/fE6NQZzw7GdvY0jjW2oICcpW4oCoGGE7QdH16F/xe0bDH\r\nRsEWQ447XfSUN07tvpwyv9oqnV/JC3Q9DlgLaI/RgjKDEtts2TPlsXKzJHif\r\nadHHcB7UCjLoIisDj8JJVrB753klwApvSObpDi28CFFrk6oMjm89I7zhK1fn\r\ndspquODmJllCh496PM9HXX1xw0yWNFY55Xo=\r\n=+iPG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/tokens":"15.0.0-canary.eef14bd32.0","@material/density":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/focus-ring":"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/switch_15.0.0-canary.eef14bd32.0_1667755521257_0.6596332651931014","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/switch","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f034ee33b116071b3d163a65d367b28431d0485","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6faa29fe9.0.tgz","fileCount":58,"integrity":"sha512-oe+kj73SHQZWgEXuLK1scmf2ti9f8G0Cuitl+AZHJB1jrjO5bVKykFbU8w8kCPFK6VBW6tV8tCTMH9cofY7lYg==","signatures":[{"sig":"MEYCIQCLF3Qa4JgOM0txIbaK0cTaew+xdZHhGvSXPn/gFX5BcgIhAM6n55VSy0ExK61CjzQAMIV6LyHF6zUL7hO+uaSbC0V1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHgEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmkQ//f+uiWjhISlbaOItySIqEhvOlEdJDRTYAKCAUGbvdp4gJmOqz\r\nJjysDTcYuWr0QC3GCK5MAP4RbmOCTSW8OgzjnhihRVYTRqP4dXRuGvNwLars\r\nzC2ayEc9CzraRTuwVLug8AQGBS+Di8WAFYq/aZNCmoS2kxKrQExkqkhhHntb\r\nU9q7kmHPVGvAE5DvDzzuhUAVMIOSqSPvO3pYwUES/PQf1O9Uf1AI38XNrtQe\r\nFHiuGidzzkBa/bdILLQhAUgZbTWiJeZOdlWFCtLcBj9XF8ScvaT3yfLWG8B6\r\nZWtmH6RNmMcZmzVStWruewzcpWNgL7xHKyUX7Jvcyog28RmEXJTrFBhGOwU+\r\nyT4/39XCVhZ0L4yIVPM8rZb+IN6SVgvnLZx+3Amd4fbDk9OF5aOWLoovvxS7\r\n2Ob3azP9FfuWecOELoKPoR8qRiVkOijEqCCdQ66cVF0GehcByOkGR+wKzNz/\r\nVzVqc/svKZku5FRy3TV52JLQdDbRV7M6ZjkKhxbPA7Jeij/uec0fwdWQTPx5\r\n50LFnwS9Bexn6mexASxUujyl/FuGHBCPPH9xmq4tCHYd6aFfXhSd7qxhDwG/\r\nJ4WOHrMdWt1jWHbKu51xleUThZuzuoSxUSY118LiIEBUQHuT/KL6F5TBojJO\r\nRDDKJJw9Smxcm2t+D1/jB734cHLW+OBW1Bk=\r\n=U4Ro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/tokens":"15.0.0-canary.6faa29fe9.0","@material/density":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/focus-ring":"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/switch_15.0.0-canary.6faa29fe9.0_1667790851828_0.5402055788284885","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/switch","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.9af09b967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"799376fb11e3c8a2ce1a25275dd224498202acc1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.9af09b967.0.tgz","fileCount":58,"integrity":"sha512-kQ6UjV5XwJPJ3ECQabBTi6PS5SHxZt++2g62UCWTm79f57So/yA7UCPV6qO4Vr2JWP2gswQImsn7nGXnxv+Dgg==","signatures":[{"sig":"MEYCIQCBnUK6S2iP+hJicPLn+QlrndITOa+T21z9iK+O5ye/yQIhAK4gGfJmpjgyL2Xu9NrXnmpCSxu23x+DwVdSGe6LxLiV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU5ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP0g//Wrz/lh4L7w/Bao+lmSTR9fRRcmZ0eKqtZLn9TzSTSVA6GK6O\r\nhAvmZ0hE/f4ZxFUXrB+mj0FnTD83qmwzJEEGdEAummVf1gqXNIighB24YceE\r\nbJpk03DC9JjtRqbSQnnbHULWqH29j0v+JxtQXOvJJhLtg3/V3bt0jDgf4t0v\r\nUe8JvIG1A7Ua0w8l+VGkh2lzGkHA5Cc0Hzn47o4V7cJ14pJvprq8Cy+W/33X\r\nQhCZKYzNpnHbJN7fTbq8IPxzpz9f1S4MR3UGC2dGg3vGeUTizb10FEWIbtAX\r\nVlmcHgwWuB9xtXVUUeCLZbqIiEPg4pSh3LdNXgYWfPwHrwmlklE10zcKEK8O\r\nnmcMnx6Uxy8LFT2qvkVpMYM5aIJxwvKiI2dL3nUKFVfAni/hRYL+CIaXH9pp\r\nLwoNOxAcnA+/4rGotem42oEB795p6J7DCJyY7xss3CWngTnWwGlc+wzaDQpy\r\nr2urnpCbkZ+IzdPNXbNUjonGg9VEtWLlaZfJgU3ObYCeGQGQ4+3jIERv836c\r\nyEXfEOO5vXO3j2XkY833EeMM7iJC/6J9s747f5v+fok17yowF+rbrdMh7Opz\r\nEDdpMRkQtNuzFhPJPMOY67xJo3YqlFz+kB6RaMU0C+xTNnmRnvB9xRVtZEcE\r\nQMcui32II9teBJwStV//r8xOAHaHFHDNOgI=\r\n=rDZ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/tokens":"15.0.0-canary.9af09b967.0","@material/density":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/focus-ring":"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/switch_15.0.0-canary.9af09b967.0_1667845720948_0.20822354479448735","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/switch","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"803ba380b383208317c9561b769c4b74b54ffb8e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0f54fbb93.0.tgz","fileCount":58,"integrity":"sha512-n0I5TTqU3n1caecAUeQCWDOZOexMH8WUF/tBGuHPYGrq9XtN7Y1C4vgfTssjHFGsWdh5dzP9wS4Gqh4b41YGJg==","signatures":[{"sig":"MEUCIQDlsXK7c4/I5Znqsciq/pZ3GiYEb5KTuPGIFvrzsBgaKgIgbrr8CMqQIw4VcwT97QeHN3GbEH6WkH1yr/CgO9sOHFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatDAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5iQ//RxLXc4QhnNBIDtVnYulspdWmEUMSDCLkcWwDt8NeIPGb8jm2\r\nZjiRM5uqWLDIwjjj0w3DJ/HglO9OWdVgnIvswb8tKf+mtiAF/TEo4g97byIV\r\ncQzHLYy91/1qkMFbRhtT6Gl7vo/5TkAGmXZA58CGgvPTmOzYwsH6Y+gkc7W+\r\nzvwfMccY3Gs3nFJO2S+gOw1t1goQdh/JWONuZCp+u6I+/z5RKRNWJZ7EaXP9\r\n/bQELBmkxlYFHLA24WN/6ajeNJnbOyo6NK2+mLAaYxJeXKGxK7asCecxfU1w\r\nqPEYW9bcKeoPl2/NA2ppV7YFnukykpsOGpc2soJa3Au0XKnz0fnVh+itXCnn\r\ne0osTpQL0rcWqw3zhQIid0rDCYTaXVkFMbIugSds/UEsrPdOmWYiCtqU4ET/\r\n/bZVtPhQXf7qQCyC+W1WxGHhQeIpJPeSqMEl2sUc1Dk8HS2sNtaXIh9Ac3Th\r\n6rC/k9guxCzTDofYH4OLXhkgf6SDCdj/3LtPnqf/kXJhZU/07gG30inRnztJ\r\nk7s+haK6TD8eku9K5QidVUFpkNYwNvXYYZKcuopLMPCR92+SlZf+iv1eooaN\r\nMwyfZVYKEAYV3I0Ug/zhxLrsvgFAdjpXJbReMf98jGxM+P/AF5qxHE4463/x\r\n2ewjkL0VkS1+X0Yy3xTW76fOm4SeRzABf58=\r\n=oDtG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/tokens":"15.0.0-canary.0f54fbb93.0","@material/density":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/focus-ring":"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/switch_15.0.0-canary.0f54fbb93.0_1667944640204_0.3743218546677447","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/switch","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7aeb4e57d8d4e0332cb63f84ee09dcc4434deec","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":58,"integrity":"sha512-xEaJINUgAGW/Vtqc5tpbWcz/6mbIL7RhN5K3cT30QrFB2P29PpZdFJ5cN9lfWA2X9F1dFlmughdS8c3Zp9A6Hw==","signatures":[{"sig":"MEUCIGzD3Mn1rzSuOXytDanoIUQMLkzjXDyIMMZCc+0NNNIyAiEAmFMjizaB6s2rgsa3gxEy6YZ5vTGp1eQxyLLfipgGWF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayooACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4uQ/+L6A3KkeBhNO2q9n4nLNLQkrq5hA62ykY+56GECwDQ87eKYOC\r\nPZI+HR/wyHB0a8+VBBrglnV7G1VdKNw3b7GhJIH+PLcVvbfzMhn2BGKjNFcg\r\nqJZdb9vQ0w9jf3Mb+XiyjdWidDgfiIRaQFk72osYHAOY96hL9Dkb4OkVajV3\r\ndQUGe8kQLX8UMBmL0qwQwK3ZGmCs9DQu+hf+24LJHKnOS9Urf2EwKyzx9D/j\r\nPtpdxVQ8EbDX6ZQIcC010s20tUxD0bOX05bT/9cKgthvtVkEbezXHGcM1yRM\r\nAXi9pD5PgS79VKF7z71uaOUZobDnrXoEP+1t4Vtg2z/5C+VYhBqSNN8XA6eH\r\nFc6E3UT+vePwWwIbx40aKujawrAfsQtcgEln3qkMbDYZGz6T4ivAtnldT1iD\r\n8XtlE9YkVdQZkS9E2/CrDvt5m3Oiw38oGKUfDvLbFGtzHzJKvxEpxD0RaKfz\r\nzWOlCM5uMQG1dQOrHet8hn7yUs5+ePB3QChzUmkjdZRr14NXSui4bkp2zpMj\r\n/eGGSeH2rIyVrccGoMJ+Fr6WPddN2upcdDE/FXFd2oTQUZFxFjCdNR+c3koq\r\n9bjIKJZfd6EOIEhwsDJWVKRQkZGw9j0VeKJk7I0iZgEDGpDxgYiHBOGveXCH\r\n9RC3SOGx+TpkY0E0hFUiynZyXl74yCSD1tI=\r\n=sq0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/tokens":"15.0.0-canary.a8d47f9fe.0","@material/density":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/focus-ring":"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/switch_15.0.0-canary.a8d47f9fe.0_1667967528082_0.36575427527200355","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/switch","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df86233e1551ac8b26d179ab9c0296675dc4970d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.66a1e75e6.0.tgz","fileCount":58,"integrity":"sha512-ACFrRuPUty266zdOo6C62MbcW0h98HWRGT2X1Kq6QDoCmDrfDB7d4eW9qy5EmYnMPi8igo43FWvBFFru/QeaaA==","signatures":[{"sig":"MEQCIECDYAtU+/x6HAMuptN9YIlwvQm0bbwGdGfUtBkTCMl3AiB4jp/RES62kUuM0q1bI7e0Yy5caQIdCx618vRWbAD7jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3SVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGKA/+K4jps6W7QBHZSexH2s9DJzWQtSQUwQnO29LvPmMjvVV5gaGW\r\n0Ytbez0/VFZqjRdD0jpRCMgGkgC/f5hU3NEsQpAaN5GpRd9djSYUaJwSOoNx\r\nYS2mOKQ+Q7xKsizn1ig/R0f/xFwjx3xgpf/bXb24B1caGcCvtDbxJZ4RPHA0\r\nMDp0P7cuVHeMKC9vsfZOHh67aUSuDZJkBu5cqMrAUKjxXykwhy6sxCDltT4f\r\nstnWow/JCv4TXTOUm6pGx4sUbjVb1Tsp2eY8s0ZrY4YJFSlzfdOBlf2ZpJOX\r\nYbkEcdhiAZYp/oCEF1BSM806e7FJt0fPR5LH7RIwi1UI03FuP7PHqKywhf8U\r\nB3IErEyNlk9LlGsmRf+txscvP8cMqwuiGCu3s3XI3h1g6fi902CO/xB2+fkk\r\nVvEC0kdAHHGkaF+WRN2GYMg+NgcdxbaL6Zn1VGTrIzJuoLH/cMR6Jw8c9Ujq\r\n9IY3bOfJWebVlQoGo6LFdHHqeCRYnhJrMKnGkP/SnA6peMiyFM+5Bw28ngtO\r\nZtKvOg1m1IAvSXtleZRfHCYhT2a87dSG903mEcT9LNdh8AWTp6dOCjhQid+C\r\n+ofu/xd5yLpzaP1OWQvT2ckAG9I/L1YP/z1qsvNFBBiLUlSOi5TR4W67odOd\r\nGrjD43/HdRoKvy52reQcr8oDwGJ3XnN83Vc=\r\n=4Gxi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/tokens":"15.0.0-canary.66a1e75e6.0","@material/density":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/focus-ring":"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/switch_15.0.0-canary.66a1e75e6.0_1667986581008_0.4640846682528472","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/switch","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f7cc763d09d546769ba04318901f24d1e9972bd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":58,"integrity":"sha512-PK9YYZaQyEYEQe5I617MK2uVRALhuA7tUQ3PbMySi6fSC0HEsGzHZpvfVvUbz64qfsnb89B7ZBXt6c5dWIsfzw==","signatures":[{"sig":"MEQCIH51+Odg4OKqRqWB6PYLGqUCijpC/vx1/QNv0uoTO4c+AiBcEJQg4Q2b1wlk+DsHYcc/kdAO8l2UqdBV2XU3ZJWskg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5TbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoyeg//U62Ym1MsDqI4NOuC7VSBJYhoiCpPhmRwQwK4SOmCIdajbEWh\r\nPeNB49FegudX3/qlO7vZYbBIP+9gN/LCHu7OjbF42F4qM7awYKEUwCFBTiOl\r\n5AnOfL1zbNvnlZC4eg5ya7qJaVenAW6XVe2wOmVEqazyBaBwM6AFgaFP0HTR\r\nxq4apumNiJ4FAZy4V5c1Gj4p8XR9AV7nHxu80kximRJEEj5Itq5ankSF1I/q\r\n7xWtU1H580bO34DLf/1EOtzwe/lDjk/deA7d9n9cmksa3opbSvKQdeAQJTpp\r\nlFSlEq1THzv69ACnB/10KQKHvpyg2oXNmCj5cjniDgKNSJHSvqnjAIKwPmtT\r\nfZq/J+HbB6RihyNui6l0xSsFRuCnrZG3ir1j4dKCSePpJ5JPT+sV3rUO4DO8\r\nrX9Yd7hDb70tSjmyeuzSWNGlcQ8uGjyhfiofQ37gZL8IpYdSG9ndec9L80Kz\r\nhoTtRC5AXX6fDisUslxpjX6Hexfp9ub4pxCK1Fl0HOkiK5t8Ii0nA+3/q9gu\r\nTwvLgWMAI0W22A+3qLw39utCpZKxjzVoO9dtI6CK6+jYJ+COrh8OXvrvWWH4\r\nMxb2ku5LM82nYxuYJZpgbP/fKWXKQH3OdX/LqR9NC2h6D0KJhqyJRqiBUU4H\r\nRzu1yvXH/xolu2KjzPdbfbP4tRtX0yBxm+g=\r\n=ICSG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/tokens":"15.0.0-canary.5e5c2afc0.0","@material/density":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/focus-ring":"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/switch_15.0.0-canary.5e5c2afc0.0_1667994843656_0.9196851885620971","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/switch","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"857a90545efddb8712736bb9d231eb2ee7c014c1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.3e3f43359.0.tgz","fileCount":58,"integrity":"sha512-lsud9HqQS8R9e8XmTrda32/6eso89BoYX9CJ4PA8CEdYsKNN/ef5HviDI9Y4bQR2tm5kHEaXZqcBYCU/uFsbvg==","signatures":[{"sig":"MEQCIH+5EUAbkTnrV9jGE5KsK6D79LPMR7Xlz9g862Ze3m3CAiBOPp9KSVUOfXJ5K393IYxbDYrYlo4Lrw0UzgtpaOGUuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAedACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf6A/8CfuTsxYTY0+HdGEGBlMLBqzVP3nYmtC8I9DaqZ7ISj/PD6s9\r\nnclQIeR39x6Aq3k2t/JtfQbwveg0l1fZozri3FGLpAWaWe63bDZ8z8lKOxgz\r\nJvL+vmuz4NlAfHsrlXuEfd1aOaH5NlWTSFVgUU8UcE6WO6AdnzE8i/G2ZvYO\r\nJAf5sgxL3SBrNlrVDLdXLe4vUVodS5v0OhrHMUoabySKVh3t5k6YZ+pxjbZT\r\nNdw/+wPX1lSHudMvOvhm0QIP+w06tyseIgt+NfS1LK00Iskx7X1tzkdSZWu7\r\neCQb3eUFBNyM575Be4fjpJs3cEkuSFfC5v+Y0ShPT7LLFU3iguuUdpY2Ldkk\r\nhOQG5Rr1gXj1IJZFMASfUvjAGQzC9kmjDDOtI8b8+Gq5FxTZaBozalUcBgHz\r\n6wfXZ00b1Ut7IJ+PzzeBjU6knlfPzg+5//s0oyE06+SDrGQCsmbb3sMqmZFl\r\nAEEfG2jDQe51nx9pQ5twnV33ZTQInI8wIvRUQllb/YdSXHn1LvlC3Xu4wuGe\r\nuFyfbIu56a/9JLfTnVLzDKdgx3H5diWSGvqZYw6Y2bKJbYveagpy7Qwj3caU\r\nTONOvhCgiQBa/8gdbCv/LngdDua3vm7ZZfIZgiE6J7IDggMlFnnXwYIAlhu+\r\nzrw8iNIEmaiAlws8lLo2a+GHZiBmiOOPP1I=\r\n=KJKE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/tokens":"15.0.0-canary.3e3f43359.0","@material/density":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/focus-ring":"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/switch_15.0.0-canary.3e3f43359.0_1668024220902_0.6587142891386533","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/switch","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dabe1c6f7630e78ba7f28d99b8ff4bdac516f3e7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.3f667fac6.0.tgz","fileCount":58,"integrity":"sha512-HAWLAzHcr2aZ+81pSQwYPe5cb25umnyjKbu8MHOZYj94zwEPZGyMUPV8orwlH+YtAv2VMbleB3MAnZu+yHvNLQ==","signatures":[{"sig":"MEQCID0d1M7DIigTwQccu9C+igyRZN1IfE/+8TKq/p+F8dzxAiAJxAEBopNNP6TPw3TndgmJ+NzIFR/JrcuQWf8KXVB5tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCR/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmogww//QXkUF5l1KVtTvs5nv/lu2elwMi9EdFZyFG1L4awW/+paZYkX\r\nQznBRNaf1Jp+jh4YNaHgzDqnfY5IU/K46vhl5UntTeJBHyMhNLyfDHQkpvGd\r\nYJ2CAWf1sglX+tiz6E/MmXka8I672tXwOiakG2iMrtVFF6r3grssYvpFLEyz\r\nVhUc34Io4dMNRGgBbeljO1EBho/O/f+6dYmPIx/whP9AECzkIbnRgxasBpDp\r\nilcLcuHycH7xoQrVQoIrVqU9j9OJGlWsPRCbE+EV2zzayzte8du/Vlt1ppyC\r\nu7ylNinaMHeL91+kN6tGUgRHmuCLKY+c/0yfrYKtDmGe8BDIyqJwBZp2nqPw\r\nNN+/XjrOLqgM44sADpIbI0TmD6wlmeuZWIvWSHhxw8H5dvQ+papKZm13qh9y\r\n1tcah8eOttbqJ3wWVydPHvl/2yWt4SVahYwvr8dsf11ECBRZDfTNgy5DO/36\r\n1vDZn+AlMQkuRslt8gJMtwRLEzcyKyeTWzdjte5k9kFYyx+SMVRdsQYS/vLi\r\nfooQ/V0pxzNjEg6xCM6W0kJ3bWvXsnhwZd7rPs2hey4MJ/D1cVPNPKZKRcGS\r\n/gi59Qx0Mrbw1TtYrKanE1uLRSvD4RN0mJ+ZuqPe29rceUGsaxhvAv1jSGCk\r\nfLRpozj04DaV0YIH27BnDyCY3sDqYzCdPEk=\r\n=G+Mh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/tokens":"15.0.0-canary.3f667fac6.0","@material/density":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/focus-ring":"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/switch_15.0.0-canary.3f667fac6.0_1668031614924_0.38871771589759363","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/switch","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d848b96102a5e2a67b3fa779d823cb444efe4cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.faa28c1c5.0.tgz","fileCount":58,"integrity":"sha512-gIL95NsQ9ZFW4xcO6ZvBKizV4sscGJ2VK62L0qp+TYwk8Phn43iLDzeRGjc0zd7NGmDzRywmYqvSupAWvIQlmA==","signatures":[{"sig":"MEUCIFbOqrQMFzNQckeGVycdsy+xy40maYvcdOuPSigEuE8RAiEAvyqRuHwgtevcoKHuvoZu8601lwfa93DlETJFC/UJ774=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqtvg/8DNdmdn/bfeywg1W41riDJM5bNmPDfIE9LuJZzcWPo1O6hqtC\r\nlwFkulV91kJCGbRyckyfxbxLgaSiSALWZNYj6wGFgw++RhX+CuR5fONsUIOF\r\nnlQ9WTsUFlUe6Hn7Y7kulKMZl/lj88yZpQfBHApu70tvpwzfFHhCzLgA5auC\r\n9/E34yphBgLvdw0iCYYZuBBVpDtsHzrs8F5r820+io2pFcFwVljld+BUi5g5\r\n9TweqH4LsiAzHXSUga+u2ixI6hk4befqw2PTLlgA1pAq0O/h1Q7FvqEKee1Y\r\nlOSx2qHsNdpBbQP/boz1BcGHEaLYcln43Z0XF6chIe5fGRc40jPdKfB8SkJQ\r\nH5REth+IQYCo8K0wPOgIZgi/tU9ah8LUyDwaObNtrQhvOVtvOrndNov//gnG\r\nBm5vCBuZ9qqclCziriZrAC/6D8dbpkU5MLGmgNftfQm994con+z+EJYxMDzL\r\n5VBqEmGf5AG6Sw1LIJii91KmUpjjZ1oEBqj8a+FgwxNxWxgAJXuhVd9dmDt/\r\nGhLmmmN2jBzQxyMqbfoBxi4CByEdDhvzOuUB2o6J923L+EcBENLyxqRYMZP+\r\nfIeR4c3FbDHtov3IBa+FfNTc/Y7ezTlPpx5vZIRRkkexD1P7LPNx5urObxiW\r\nGmR10TyNBX9/3iVj2up1ubP9cNu9tKhhXrk=\r\n=QgNl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/tokens":"15.0.0-canary.faa28c1c5.0","@material/density":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/focus-ring":"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/switch_15.0.0-canary.faa28c1c5.0_1668184599689_0.1993083758529468","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/switch","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a868c7866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"401d0e4cb191979b6431f31c2bfd0720f4f17c48","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a868c7866.0.tgz","fileCount":58,"integrity":"sha512-mh/4KfBIWT0CdrWR2EqP86baidl9ZV0O62k2RRM8ncpx5iX90GgBkl0fgxq7l9rdK7A3zpTdYSkE5ylbgVQryA==","signatures":[{"sig":"MEYCIQC+DNOcncqOeVRJm9OSlKAyOXd0+YMA1HvA507QFFeNAgIhAKCH/FBqRh+dJXmLcaq3RlFf/DbIiILPJ1D95ho/Uv+Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbno+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUuw/8COEZg3/p1XGsNL9nMTuqwY/TkiemfkkgWPyZuiaTUzyM0avw\r\nrjuZq+zubbT+k+nBSFORu5IuUPmKKwGviPMvVDfphei4vapMr47IDrB3xJrh\r\nU317RjnSIz0/xWxa+MTpNeqfh9TyUVTZjcvvx8iTATMXZORcQRgYFre6cfeC\r\n/nhBImcPIhH29FXX4aBrz0JdJ2f3CwzTZauCpdgh5sDqoAccVZNVpvKcAQY6\r\nW8kWg0Ai+k6I2Yn4tDnmGy53hCRKE/mjr6Ks1uNpiAj/IqSmeUV4GYEljXdv\r\nzzSV8YFl2p+HIvhCCY/lsbCEmuYB5mzW6Kk1NVAdOzQQCYL8OfStlb1n0ilQ\r\nQls75hxaS4AF9Ppzr9Ihov1FdWsRFC+qz5Uu/ZMbGiifTanjEyAV6HiB+Qup\r\nM7JWvnN7n6019ZFsQhXv9GECH+jPKhbzSbIeK7okeQxxrsV5S6Ro3WaaPoxQ\r\nP0SgV30+1bbX/PEO1byeH5uYXC5vGOvIymtD0reOv9b/C6nX7w1eZiNdt6nS\r\nwzsLOoOJnuuehgedK+1k59F4h5kh+uF1phxMeFbJl8tNDwQEmM2rVlfupABs\r\n921FJExNOj5TIdyTUtL+QIyANP1ajUjSkNt1vLy2M7cCZcKRUjgkS9y5zFfF\r\npnRxIZcvWb0rVITQzL7gIDWKAvFqPvw+enY=\r\n=AzMl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/tokens":"15.0.0-canary.a868c7866.0","@material/density":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/focus-ring":"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/switch_15.0.0-canary.a868c7866.0_1668184638449_0.6857050496880834","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/switch","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"401ef46e9cba6675b85bcad86505a2b1d918c924","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.602fe8efa.0.tgz","fileCount":58,"integrity":"sha512-uv/i42ThC7RLbiUdggInIb49dU3u6ykRJdBTSoJVvrMymx0IpO6EUhKx9zrySh282EZVn9jAOg/0nrHvEuhqmA==","signatures":[{"sig":"MEQCIFQX5AoVSyXTx8AOiLgxQREs+dSzqbn7/UGsp6aFl49CAiB/JTPbjevsXiJbPE35tZNKGE6+5QwfJmw1Nl5hgNkPuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboKGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCdA//RbqmXCWb8SEQKb3TPaxKMEbrrHyqXfe0SC52FPLm7rd7t9eW\r\nGcMp3I/XDCuELiWaMEyZMe/2+gBnnfAzM406K97Lr2KaPxvnDlZpYJG4U5f/\r\n+hqBpQlm/EALnekHqWW3bX/sjXWedEI5R4EvTkdECaGZ6cbwux2nRGnE2CEg\r\ndOgUZqX/ZoyFXaPSMZ4v5RCsu4IERGVLK0Q/iEuCSIYg++sZo90q4gqkDoSI\r\nD8XqUwCmy9Vf+Id2z/YuZOfloI/8Q7YJc+u+tgVel+hPdvDNXqarG7dHFnhs\r\noXqr5Q/+fXap4lulJ7nq/Dp+NuoFRyC+w5rKZFpSrZ5Sj9/rdn8ap7W23MiE\r\ncYyH6F6X9QmiSgMDdjldO8fN5t0DH4qkcwVrTfs/zqagmcoooAaSFdX+NCKL\r\nLVSd/DUX7wrdBh8L5M3ug6NoFfA2gf/TODmKUv7c0VQp8Mc1HZNpfvz0OA/0\r\nhft9IpyQy2aVwCeMdnDuL0gz96GHiPSCX26lm5B+k4RPSgh53fgFPxY6mQl/\r\nVEVqVaEXV3nGFSFaAy77z3OKIdIAq8cw0AWI2NmgJCW6Oy1uTyVGDBXgbtNg\r\n63L6BLatA+0XpMkT4bTFQgI/GCILkCUQW14NINopHEbNQhZkpCzLBnYZESmN\r\ne00yxDELjHgNVt5k/VEmo4DPCHtUobddZeY=\r\n=DB+a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/tokens":"15.0.0-canary.602fe8efa.0","@material/density":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/focus-ring":"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/switch_15.0.0-canary.602fe8efa.0_1668186757664_0.46875901067816694","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/switch","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.558c2be62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cded0ab1b45b3a4ca73ebd8fb231d0990869ef5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.558c2be62.0.tgz","fileCount":58,"integrity":"sha512-OeHcz9Owjyok/Otw3T31YW6giDiENshgMHlwDEYTaSMA1F+tVGTRD6iFB1ZzbrdZnMV6hZDnQouUYVUrL+1QmA==","signatures":[{"sig":"MEUCIQCrpRYNwP4aqnLX4pgiphzd8de6rBxEPlucIjbK5tNRDAIgKrF42tcP22T3r4RdFwJmdT/xlRveyKY/nAiGXv9sM+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLhhAAgwg3oIGcL9md1bJslRYdCaQt6xptdyRx/IjEdIZgB6H5vb93\r\nmVFV3GGnMGgs2J8f4ooMEWIdIsLGgh6JHsX/1WrI5u8p2Xhb9kn3t5BriO/R\r\n7AcLU5rWPmCbyhIS4+thFIwf/VNW46Ic2XTSB8urjQAh+KJ3uVQG2MkfLbOP\r\niixR4OqKHad59gR3KJtnPjRTTzDJrtnO5OqUvCWnxnEnJJJuari5ocR6WKag\r\n5ThCVdkUiV90ZeegEtCyKJEkZJjwbmkKleyUZG1WFAkWsukhnddLmaKKm9fu\r\nTU97bdW2p5Enj3icqsdXh1+vJjtwBfGmjkPKkEC3gZ8aYROvR12PchF+zwyF\r\neA5kKq9C/KVtflag40ymgzmc3btue+GAHcaAKX7QZDF4wzd/Ik/klg+bU+vm\r\nq4XS/Uh8uRIs7H5PXeE4lk0Rh2TF+MliMd2vCy/uAEhfX8FHdtkEt2pn3S1T\r\n8S26BpUe4RyWbXxfAYIleOSQnzVErJJrPNS2cdixTSaQp59uRQgDb8dxQZ2s\r\nTh1Y1axIGMy3P7RutZKtpXX65dRFwZEqpSD9iTvvDZ9jabn3amW6E+eVlULv\r\nyzTBRynmXuOMfH5NMmIwLjkluezKfVEdpt6lHuI/0vFQcMZqWrnoJUSUVHa4\r\nQU6fPNRFDogLZQWtiPU0Iqden5U7CHEMF+A=\r\n=jPa1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/tokens":"15.0.0-canary.558c2be62.0","@material/density":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/focus-ring":"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/switch_15.0.0-canary.558c2be62.0_1668206763060_0.9629394692645437","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/switch","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"402da387ef74aa61e5a5b7cb76b89f5639c83eaa","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":58,"integrity":"sha512-eKMer6xUyMywJi9YdYS5Fc9LXjJyga/mtfLwjfcHxPO+RwogNAxfp+VU8NsQQnJuT0NMnLhJZXAsciam0Lv66w==","signatures":[{"sig":"MEUCIDr7tGASriCbeL/grzIHw2c5J3Ieva5KNSPiPZWspXj/AiEAu/IHI8Vpu+T/0DVOxtU6tK5S/2YTAou6Vc9GjCg0x/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmXcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA+A/+JUHo0jicmiT6fTQxeP7dTgqt4iV1+jz+a9jKV6tH+53zxYNy\r\n3+/PimaHXhE6oK1kq1zk4PtD14W3zuc7IhneXhfityTfopW0mjjczGm/6ToS\r\nCyN5hNDFLoT6SRhr24KCHNHCw+t8qgIh2v11GybJqhwFyhSaMzDS1WwdXD7f\r\nf03ixdkcwnQE9poySUr7svxzvkb1YZ3s61nSVfRXNXx/ujy40Aa0HGzA4w6r\r\nORhj5eoB+RkOTA8hQUXkNz9ZV0DcXtB8WY3E5v1Ho8SRQvm7L/I6kwUYu/x3\r\nGtcNC1y1aGa8VgSe8m3jSRbBPKIhlQQh20Xy408VdAvWV4Qga0r/gO/NwXcx\r\nnNX4JL/DhxJtsf72+ZFBA93DIQg+suvxuLa9wU/TrBXfA/GtWgTQMY9P4Jjq\r\nn8r3YudaQ72JKTcPe39Y9wHem+LLBXu+vLTfRGg79aTdruQ5PEqN730DUKOD\r\nxJsZrE1M/BvERhOYUJM3v5lR1c0cNky9vfFNSbCZHck0u/YPjDLQpNzJ6CgY\r\n+8LrcKqTdlmrKO1jv4izH289ZajZy/Ll50rdxdRUeNJpiAgV9ImO2cUVc5KP\r\n/D4IMoYgq502aElUndQJCXwRPN/taZhJ1af+vo4YDcn4aTFmAglptzWMVCWm\r\nyciZVgkLcbJpFlUH6zzWTyckROh47Xr1GE4=\r\n=ZlMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/tokens":"15.0.0-canary.b5c13a7a8.0","@material/density":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/focus-ring":"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/switch_15.0.0-canary.b5c13a7a8.0_1668441563788_0.6574777619128496","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/switch","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e620f133f76be2af49c544a9fb2cb64aa9a8c490","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a6e1c0702.0.tgz","fileCount":58,"integrity":"sha512-8J9Mb37pTvomnIpaRCIZP7QGF3PHfkI4CLIZtwVUVXiYxPf6Hc6DCVs/goaUlWilttoTMfYzJ7EcVkdIY1Zwjg==","signatures":[{"sig":"MEUCIQCihU970GyabuTHVnvE7BfpzjLhiyn44MDHRHGKcyNnHAIgG+l2BxWd4iAF7EVxQy54ZM92ZDVHZepSU11PaHGfyCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnqXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrpmw//Yy7/oOl1A145oiZ6aGf14tBx/Ty20rkXirb2bxQU1n+vRcGy\r\nsPur1eObPTDIqa+FX5rHoEjN0KiiWY+OnriRKvptTCOnyRLn3LNUauIAvyqe\r\nPsslXdl44Fp8e157+iGQyoc7VYtq2aTYpiYreFJm588LKLflW0Dwf8CUZjmk\r\nlJW5/Tl3s9FVsYLuUHHf0pcE0jotxnNY036c7DuiiYfUcv+eIty4fQgdnZr0\r\nn6IXKjZ8q8E+zdAxDJxbbnYhe9fcnRIvTuLlOmHhN0D2JTX5TRtpYmMJd9zm\r\nvDO2q0yr9L+wuTyoicbv3bZ24D1USgYZMnSVRkbK/a2hw0Qt1KTf57W/gWGt\r\nFUb1csZ2kTV4mvc7cMCrnxHM/G4VnC2HZZJ10vUGGYy3p427v84jXiAVGmUV\r\nnuB4dfbzKtIkQI/82VAzYcdB4+8G5UYiAr1gJYZdI7qIgEmGEEcd+m7/Dexl\r\ntNnufGzQwAW/CXEfuFZpk2zSs8vG6zdHcqaBtSekAdXpL4/5QkojZxYVmYQf\r\nwWoLvhj+2kHWPz4+T9dogi+0bGE/1XsPKgX9K1LDpHewJmIw3badnl9r5R+1\r\nbtVgkP8NVGumZtVuDRW86bNOvaiTtO/1aNgyOfTlCvDw0XOzOO/1+rPzlmTT\r\nkyUjam4EC+Dvu9FuozQ3zF/k47UycBJHoug=\r\n=ZNk2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/tokens":"15.0.0-canary.a6e1c0702.0","@material/density":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/focus-ring":"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/switch_15.0.0-canary.a6e1c0702.0_1668446871063_0.7496432925396777","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/switch","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2660d223204430e01e847a3d83b0603bd6595252","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b6f8a06de.0.tgz","fileCount":58,"integrity":"sha512-gDmsM9hULDsB+l/d86X2YODltRkWNpPRRjoC6gqZ9lqAgPSKxSUxwPe7WT3aKKXP8w2nrxb1lNCLta9Ax3vFjw==","signatures":[{"sig":"MEUCIGmmQUtaLcVM92WX4IYRobQFn9LwLr059VEtfPXYPwy+AiEAlYnKlo3sh1Pnu7SF04tzb1eyLGYK7Xl9c6rgWcr1C0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1vsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtCw/+Kpr+3phlYKR0NXM9v6MEw99VD2ac0Ya8FXvN9bvimHzhtzZz\r\n08/fOSnsSJTmeBmxqDpWzl0bd6zfQ/LHe6EPbfYBcPzMuRzRwGbx3A/Vvv19\r\nnQ8AQMxPYvzTP4EwRh6VylbvGoCJlbHh0doJuJ87INX7OIdTszmKteOnmJxk\r\n8af+q0XCwHRbaOqbfbeKf/1WXTW/4GeGUWNvJgRicH7gIXxH2lmMSXy+U54h\r\n5nlGUAD7wj0QPpkRuDgafnLztJ72f+G996kBcpZ9T5SJvPiyaeoekvIud4Mo\r\nW/JzcRalOGpBc+Z0cBw1c3jnM8QkmyAC09IlBgiEYy+YKhm8I0TQEgc1v4S6\r\nw4yxDwNqNVxgrk2sEZSWVuA32guWLcr60N4fixcxZXmn9Av24Ls2jYfz93/3\r\nZH6+9C0/kEMR43WPqULT1fwX7X8vXjI9HrSPB3Sx/0mIOavlv8rSSuxW8Uv9\r\n32pI4YCiYBkNasCIHVGQtn24fjaBiyoyAbjpTe2c7y9uKt77a9FjooPfUxjw\r\njvhv/yhNQ2UeKldgT9/ZBYVclnoe6mjEKnDkKBwHM/dzLDA4Kur5MygM3Bfp\r\ngAOksuWwnzR5TfL6SqBzyNPo5pBTR5eYwcKfy7nVEk9372wj3zCACGoCPrpr\r\nQW18ZvlHUglkUvBvabKePMw7jcomjkP8BCo=\r\n=cMjf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/tokens":"15.0.0-canary.b6f8a06de.0","@material/density":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/focus-ring":"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/switch_15.0.0-canary.b6f8a06de.0_1668504556413_0.14893075988812576","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/switch","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7db248ae2919805a3f8a79463d96fc7bd6bdc3e3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0163f3ba5.0.tgz","fileCount":58,"integrity":"sha512-9ISUYYdxjExn/JM+osBnodECvOGv7cNULysXOJ0gpy34g3B74vOfQYZNamI4WZiQjyjDhAWnPBsZyf+zOauwjA==","signatures":[{"sig":"MEUCIHCtAXBAfs+vtPibm7r/ED0rnnJIOp7jsA5fJXSmlBXeAiEAgumch5c4l+Y1s6h+qKsrQvWljAAQe9kqOyk0R4X7sMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9RWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5PA/8CWpe2QzBIK7XM/z2Nv5cSSVb5+pjsFaXveqS+CHlaAlbwGHN\r\ncdjJVbrWLAUGlBe17BNZw1y7zVkCr/725I0nglaM5uuDjfMgHPUOhjiM2jtC\r\nLFu5pebySMyeAdnOF99vb31J1UYZXxCITqz8ZA6c/dSJAwW8Bamg7L0nNZbI\r\ntwznK6Uk20E+lRUkohjD2qdePuOJgyOhSrexSvxnvmAUpP6NFm/Pa/q5nb9/\r\nzuVaed+q1i0hCyoO5F5AtxekQp8cVcN6G5Yl3i/4/48nBgp+1soSZfJbF/gN\r\nEUsOlLDhUa7zmfl0cur+yAGxOdiFr27z1Ir0Q6UXTQXHfjo1Wz11ZLk6ZYBA\r\nHJ+tVmGM8hxo/HdKsPAuaNddQrh314aLNJXEnSSHlmpXs0WdvkiAKuYeQgnB\r\npPYggvFfbunCqIH1k/21Vb2ldkOqaU+p3DQU17LEBRgNNsEhX878PecOIhll\r\nMumUX3dOiOHVVbOi6MGBuJQCSmpJhFbd8EzRthBiyoaLw13zt2KVk+9jxwkJ\r\n3eA1yLWcXflOfJokYEZImLi4w93cP/End+KauMt1HHmiwD/woAZyf4wKT6N6\r\nw9tXvFqXJNTTPMR1Q0eZBqbUvt8clrH+glvfC2frZs2qnnRyuRwzIm+mbosK\r\ngeRVLMeVjxFZIVSu3WILi1toKrgJZ9N9A4Y=\r\n=LBbG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/tokens":"15.0.0-canary.0163f3ba5.0","@material/density":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/focus-ring":"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/switch_15.0.0-canary.0163f3ba5.0_1668535381783_0.8146597890877272","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/switch","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cc6016b3a058b19f0b9429bc01b9f2b7848dcd7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.66c5cbb94.0.tgz","fileCount":58,"integrity":"sha512-bp0I4yD0r6lk3r2bU7gT3En1mZPysRs9QmvK19YBQUWi/CyxOY5mh81xIecJkmqczR7RpvypTdeyQMeIfZqEpA==","signatures":[{"sig":"MEYCIQDxvEEK6c+zlQeRc3ZInAk0MBtmidmxivSxZx2iwbE9LwIhAK81LE8bb/22XWS7KYeeDmjgFWAsALWgidm0N8UsonDp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+j2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLFg//YEnp16s6zuAkWtdb75Cvh8Fc99SG65E43fCqlD/pRdLdlOV0\r\nBSkx1I8kBKndX9iY3xXkzoifLWXNGkFrvXUBeq4XvI6N9oApj1aSjvNMF6Je\r\nbF4zPmlMpXEIbOZiPGKkuHNXoO6BFcrCcmUAeDU0UralFqcOD1rDcZg9Z8Rf\r\nQW3ozJlpPQw+G+v71a/I2Oy8FFKLwyZQCmXssqAVK44d4gMGb4tEsOLvQtY5\r\nppxWbqPx8XHggl43MbCJLPbnpO0jSb6dvEhHgIxLMsPaRH77apam13wh6ML0\r\nsUcSx8YNlrLoxXL2Lg25DWxz4crBX2pOdus0tbaPwF3K9mssTjeSEyUSXnSA\r\nXA6H36yxQ2i1At5zfB9J9HVv+s2LDbWcIvqHQn4iUPHrotQ41SpdITUQXJGI\r\nMHiaohEt6QKAAjQW5nCTgmjPsqIvQAGzD+xCOZOw7HTyO4WRD5t36vJmkgaZ\r\nMHe+LF9HAobX9Im8TOChizB1nYYwHLHS2aAwBn1scTBdizl2trC5QHuag5sB\r\nlygPz5C6zIFqkcdoJmbToaPz8iziuMqmTDIy0q1NdWiwArDpimpaUvAwKGRM\r\n4oq0ffu9m5ZFWbb1T3cIbxiIBfDPcT6MdNmJeOR9hznHZYI7Pn6eAIwTdVQs\r\nDxIzj3EfAhtY3MhvWEMfddvqTcyDwr1xEvA=\r\n=xJ+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/tokens":"15.0.0-canary.66c5cbb94.0","@material/density":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/focus-ring":"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/switch_15.0.0-canary.66c5cbb94.0_1668540662502_0.27078250572798424","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/switch","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b01136063.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4104b99581ccb8599e7706d7823e82e89117d3c1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b01136063.0.tgz","fileCount":58,"integrity":"sha512-OOBgl/qpVQ6uPFM4NyXTYIoRzWGsQJGgu2UnSGLaf6lo292hdV5xTCV2zAL9WLo5sT6BBEepaUNDWAzoQPSXqQ==","signatures":[{"sig":"MEYCIQDWSJlKfvrKcv3eD6CPM71PyWRGaskRPOmaTBgI7a38fAIhAOXFId9P6MOQAUA1pHyX3kzDPlTm4TchXah519OT295K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCvrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlkg/+PWz3kyfkzl6HAFkkCqyfgYHCE8XT5Xdo1kR3g8a8HURGbeX1\r\nKDS7VB0i8+mvszdCATu2yUwjdCTBjg9UKNM4/tv8YcI25YC+qHJYQ08arUrA\r\n5nyzKxSeynsqqKElScg47rK1wirPwn4PQCFc1jlbpehc41UCLvON9Iqy/3A/\r\nilX+Ma1yyCbQRokgXZbHSO34T8E1FoYXBrOPk588ok4Wc7gcWfpAbhcjKIQU\r\nwBXjDzYXs81GKdGhDpsCMPrd0Vtonm5uyigNHeVxH2SBDBLsV/AjiRFf2VIf\r\ngtnNqo4EQvYjhLYbwX9FsjnFpert93nLFeRevqT8UL7odmmAifD3FqDCbUVZ\r\neXxyl+sA7OUPuERc8oPc3utDbu/ZZP/xtxD09KgdFo4sH1nMVGvxqt8N/2Vo\r\n3+zr85V0c3/jJgikFRZVQ3iJuv1d05u6p2kYASUWcky61IwtJ8Gdv1oGza3q\r\ntWRd3HsVgpP0p3jVJ2f7gm6zqWTOmf7RFPEjcmZPG7SAS5oeo22rWQl/tch2\r\n9y4JoDVQx7ZyEVT3Xir+gJSxf3yW93vUSuDqm8QWlYIenOgPyeRLRhP9R/FI\r\ngRBXN2U0s6ulu//8bjYniC5q7QHIn8/z76ZbqwJKRU2cWW0kqaL6Mb+SNIPv\r\nY+o2/PwKL0BgIZI2tWAp+CQX7HUNRFYif4o=\r\n=mJP+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/tokens":"15.0.0-canary.b01136063.0","@material/density":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/focus-ring":"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/switch_15.0.0-canary.b01136063.0_1668557803236_0.3635184614132274","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/switch","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"809a9e925b5c79e8399a74b765fcc0ba8cf5afb2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.01da0cabb.0.tgz","fileCount":58,"integrity":"sha512-z1B3ZTfaVWXQxogTnIIAi8wa3SBz63lDh8RvO1Wzalxms6evzqYKR6gtQe5t3MgnItpMoMpHJbSVDg6lVKSbEw==","signatures":[{"sig":"MEUCIAFqNrN7G/JWEcYVG1mCue/xd5Yq0Zq9EHjUmmxP+UVzAiEAq1oIAiwu7M4CWM3L1jGly0DgWYrlUUaNBT6s8X4BMP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFRA/+OvbfY9heusIMCTt6Wkia9O3s7K8PYPO8y/YqZVv9ZNRsywo1\r\nUS51avG4y4bHV6ksRr+/Ga5u9/GW7ZuaOOPyHn+ICpfgJJaZvwET4zM5uxtC\r\n9l+Erbo/lgKoaiKS9YABk23qmKGjCsm0NnIekwAn5kjeKa2uZJhKJRYZJBHU\r\nf7RAtzNbnCwQaYKNqk9KnBx5lMRIBxbb6Ue00zmqHXhEhHXY8WitPlanq2JG\r\n35euWDMEBUDPuoM/ezYRNKJIyjD+CJIkcneWHIGx+4JZdO8yz2+FYAhAOSUl\r\nFovarDGsnol5EslojD5hUc2jJ1iibB06LnEuC87ISn/+Brm2p4MSO/aw53U3\r\nyrBifzEkZzLp8t3gtIJe/d9APc6JPRMJKe2V9BhGAcQeEai0alca4sLKeIZM\r\nN0rIiD3WmvacvQg7/1s0XHwR6aADbT4vHkXmw8JZMH17nkIGxVlPdajonyS0\r\nDXAKXM6Xn7/orJ8MH1sfmSsAm4c1rm4wcODrHtdJQi9FEG2XunlwY/E9XW6J\r\nq3CZLnMSSx1lcwpUL/6VeAHfqnB+OSSTCnMszbtMfgzkpgbzzXUqVAwa9OAZ\r\nPEwglqgUGXInId1WdJLnCxMGWafRuiOt+IoGz+KzqpHue1QaDHXUrbEVr8SY\r\n0dvVHIzmycZXhIWlFLHazSLrzIYyPGXtaCE=\r\n=O4BA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/tokens":"15.0.0-canary.01da0cabb.0","@material/density":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/focus-ring":"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/switch_15.0.0-canary.01da0cabb.0_1668590047800_0.43770982356270616","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/switch","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4ac393164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72013277f7255d26723819cbe3c46e3f4cf4f5bb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4ac393164.0.tgz","fileCount":58,"integrity":"sha512-rfXf++bWAi3en3q4nkNq80AxtX6Z5wvo0TPAzrcIoWY8yWcuYP9ebkxop5We0DuUgB4jgaNDHJDdg0SRQ1XW0Q==","signatures":[{"sig":"MEUCIQCiYWMkPhvU5Bx86TWBPQM26xYumXf2UWFcsACKt5qh6gIgOreYj6PbFwTP+nrX2ElV+/w153GW17ajNNjnsOtuH6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQzYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Xg//QykS0kGHNEBF1XniNQ7GYL7V0mFgZOj344a348UZNM39B1b9\r\nMNmPM/rTMHJWurhxIfE80W7k+DQjYciqzySi1dEFn3O4huPQ/4jaYtUHJ6aZ\r\njTfnUd5Mp39UoO/ui5kmYThFnslW6w93VEnpuAq8kz9U5YjZNLbIraOzcujq\r\ngtj8fNkeSXly50196JSsYO8/EokbT/GgW72jMU8bjcqztmv72HDk1vOO9z1z\r\nOdwYZomHXICoQ3/TfnP2vZReWsV5JKFI+C84bOOuKMfkPrnZ4CZA3wt5nDUX\r\n5wZoBYJVnb5k8ZN4Bk2/vWOAbe2OxCxyfVuhMpZlJz6eRjP3X6tQlP+SWX99\r\n6Po9mTnNI2yiy6Rv0gKJAJhhc+e+88SZb09ipPA7i0tEkFIa4zhW8EsKjecU\r\nqWlMykDQaOJzoXbCYZUwR8KOS3VnX8gVJTw8pkBJX5rEWVb9Erq7abWNIdcp\r\nC0jWpgwCvOuOxOQMEE7l4s83O99Jco9sijy/5Vdf/Jwgjo2jB8UgF2HR4jIn\r\niqRWJFOhue+OwXDcogIqnRXnEW5eOMqXyYRsZ8kqHFdm4MgS2IjQNYklUJaa\r\nyUimq9sw+1vh1cR+q4HxyqGBdUZ5gJdccX8HYPLcaX2yyS6SVmcnDy4a5ZVm\r\nZMCJiBc17iwP7TaSuyBgL7PJQoY7EiNSmrw=\r\n=YsBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/tokens":"15.0.0-canary.4ac393164.0","@material/density":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/focus-ring":"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/switch_15.0.0-canary.4ac393164.0_1668615384483_0.7832575958908148","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/switch","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6048fb563.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5b47b4943797bf717ccedf6496bd693b2a6935f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6048fb563.0.tgz","fileCount":58,"integrity":"sha512-X2jOGV8teEegLZXqoo8r4BIdg5sdl68B5aWWC9Nl/siU4QVJunrOMBBV4K+Y8tWNOz4ZW31cMJztMwxppS2SGw==","signatures":[{"sig":"MEUCIQCfcB1DdgXaoLbggCA8Z+7Ame5nDP/+KarWI52x09w8bwIgBn0zI0AvOhUKpqWgZ0l2TMWWcHfdFGQHe1mAI+Odu6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ1PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqlQ/9EsFSUG0d9oSLUI/fdYBsW7O8wLgYmsm0hEaFzHiyQq1NXJZF\r\niKITPPUjRtkcM4zm3p1PU9zaAJWuaCGt66Bn171P+Ui2fdOklowTlW71xYik\r\npNz8eqRuGycqJ/lJJuSsJNEr9PDcEn7iAb1bM+14wvDwT+2S21EYYW3mwxtC\r\nyxqOKkVvf2qvHtCkYthvAix2weXyBrKy3HfZ9dczwq9Knue2NsrhgVV7ApLZ\r\n/tOo7P5pgPsfMWBaHxLXJM3LNaa6d7U8xv5sRnvcHwasDOCY7PADcNjd/IW1\r\nWF5jWUy1VqZVlGcz9mMzHL1rfF170RcNrrnVy5iu2lEuLYqC0h+3SGNCV9BC\r\no4bq034dv8QkGcQLfhF24Dwc+TZIEuueNdE37JcU6/iZp2Xxbd5KDzlBszqc\r\n5Qq8hOqYvh5q3ET1kduxBzE/mmabeVUVahqD5BERjoYRkKhOIBk/YOmxTD3Y\r\n+58IDw4FAMEmG4x03/weKpv2yOkcpcM709ggXI8VCIXhh4nX1iMOfm8OCH6d\r\n+bvmNE2AvQ7z6xo75WX4NY8thYAhi5vzrHGskSMdgTEksgAGErszQDAQhrQC\r\n7tMUBdRNLjhRvMCcN8RL8q9YElucMO9IiOpH6RNatqrdzRJ02dDMlxgqWISK\r\nz05rj2R+KV78jSN1M4ORT65s0vB5/XTsUug=\r\n=cT8Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/tokens":"15.0.0-canary.6048fb563.0","@material/density":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/focus-ring":"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/switch_15.0.0-canary.6048fb563.0_1668615503089_0.3460228615559535","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/switch","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"773d38537d82574ec5b85a36c4921d5804748ba0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f7f56fff7.0.tgz","fileCount":58,"integrity":"sha512-frXZbrVB5kPHQCW0FAE0Q1eghqxExO83z1D9xal+1c9Ssl3ODeK7UweQosfKPmy5NxmVtxRMYKJWaED1lsd4eA==","signatures":[{"sig":"MEUCIQCGloV8dpCon+u6XAOKJQ+dMhlo78sUE6C5jw3EqsWFsAIgA9dOfkr4Qgvp0Peuj6m8EwF1tRTe1EhdcwlfnAmnmZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUCBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi0hAAgUFLZyYhumWM34p6ei5PUYRYXrMbRNZCewUyhC3fY25yx7W4\r\nd8sJa8XjjGMibdOME/R2iFoKqHFWWahUU9elZhNxKjc9hCcvMdVbizX82pXz\r\nF5Aflq27n1QpkYmlO3Pt9/z13dvG2zdq/SjC8C95xsqhYqYXyj4HiunfMSrq\r\nECNadLIWxdieqIybtKEd1M1msGQ6W0TvKHKVts57nD18qrCMJw1XcXw+uDXw\r\nDWLkoRiuga6EjzNNx7a279XJmH38N0qkjqN5CEgKWN4Lz6jqf7FKeVmEDnRp\r\n5W7kXUJOLDWS2ZfLolGqef7iW/mViCVnzBGUas9ox4yyjv9NYLuy5JTVWh1B\r\nTr4DvQfCty7jdmeFkRyDocLQFd7oGaiKDjxLd3cqXDT0t/1+UiTLscSrkqSK\r\n7XZmxjxi0M/r3i7wBOGH2jfuiJ+MWM5HcCwT67pSaqEJcEOFTW6RyeO6GaIy\r\nisWvMaSo3/eeDBfREu6FGb3LQOZE6ek8zKYxpVpkUycWXtfI8k/Ci6WpXwPT\r\n8DXGAtg+nxRAJhlQK/Cp6LeVel3N/NU9d1zd7cOi1bu/yuzoFkLEtVNxenyE\r\nET+qTdwJPxnn4RMGS5gP9+I8jQe1nHu+yNa/tiQuuW/2+L9msH/b3wOzpyXe\r\nm+dEi4jeHjuQHJdUISJ520VDrp+4z0lXEMg=\r\n=s+dT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/tokens":"15.0.0-canary.f7f56fff7.0","@material/density":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/focus-ring":"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/switch_15.0.0-canary.f7f56fff7.0_1668628608808_0.7514371930347847","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/switch","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e775f87ee37d4eea7e91e2595c5e399345365fc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7c73f6134.0.tgz","fileCount":58,"integrity":"sha512-rIu1utePt38qaSmEjSThavZsVLhfVYGYmfyDYfVnn1iNJ4CH+OzfjxzXpHTBV8ezoWNggtfMjlczrUjel7siug==","signatures":[{"sig":"MEUCIQCllnhNz2AwsLirbufjIYThyfZIv8Y9IAyUQNb3oSds7gIgWoOM34+t5ZPaehPYhCkbs835CA9RrnnZUyxzxMwq+A4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUGJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1JxAAhSZK0B6kNEjJB4EWggqnAYM387ALsyU0f/fBpN85VWzGkUHz\r\n3W6FnLRac8b/gRDhyVFokn8vJOXPIJw5Kmq6fg9lMMQ5ZdzNuy75xCRXSDO9\r\nzkUG5x5ve+Jow3tSnLX4mq7a9MbbBQ32B01r+h/uwFG3bJ3bRu7/GF2AWYd6\r\na1R6R9cjWZegPeMaI0o8VBOhYmIVKTUaDND0RASFTArcOyXhN0dBnZmRTCxM\r\nIjEpoyHqwRe8/KfS2WK7v1IXdbAs0L5GKCyNLRRuPSzMMp/AIq4Gpb1IluJX\r\nE87TSy0PkP4/qsFduwKcytO1AtfWeLQGj4+sSAcX5YSlMxELe7LiGwRYDfCp\r\nWlPeSnHVwsW6WeUUr9D50C5ujJD4HYiAIQ6FN8rHAI1RBlajmeizi37iiGKu\r\n9mLA4wm6HVMPmtnTLELSO1XHHh2oO2DPGbJpjf5nW2sMIgkdaClverRQ/R2x\r\nfS6SWdBNJQd4jlbagDKnYsB4LHxVPALUIjRN7Rm6TU70GLj89F29+6EWBy2z\r\nejzK1qTW9AplOdaeESgR1eGBfkc3sNk7HuQcuu0hfhZq7D5HNGLwP8nIuqjz\r\nHuZL+dQ3tZ69a0hmO09vM0qSK5YhOdi2zqNGbx7Px0Jvzoosus0QeJVHpOQ0\r\neVD1sq0r72A3USlBmWSly1cPGi0PwIXs1aE=\r\n=Irs5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/tokens":"15.0.0-canary.7c73f6134.0","@material/density":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/focus-ring":"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/switch_15.0.0-canary.7c73f6134.0_1668628873272_0.5131538364858645","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/switch","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f1e037150.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9af0f7d7a255eab5cd01236b906edd1052f5fe17","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f1e037150.0.tgz","fileCount":58,"integrity":"sha512-7vnbZZKPA9pG9S6te0ui1lStKstgktVG0bAF+RQBPj3G11NzqiD4ckQdclZjlzgcLlzQrcuNrBmAqTaoUjel+w==","signatures":[{"sig":"MEYCIQC6irVBMVt6NlMmjhE9oPevHVL5CdzSE1wXR+qkmIX1/QIhANbX8jLc28b/rpjk/EmNgIZ6XhCbht6nIuhYpMb0sS4c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxNQ//dyECb/bydBNRdB3E+EmexND7BRZwV0nPs4X0OOIaA8kKJUE/\r\n2XNvuhNWSwGsj1YvLqiG6GHpf5gDqZSTXh5ofqbaZn38yj6gVAnlXkEN5Zgy\r\nZwqpaEn7+y9Muixx+9nTQkxbUMeeD/NVMbDUWv+Xl5Dt7pABZTIN1cdhxDj4\r\nLk7LyQeLOPWyQzmhh+nBk3iKr99HveBlnm7OkgPJATJX3yZP7LNKnWuRS1gH\r\n4CIsnRnlDlhTbAaYs22iOyvHwYRI5ls+Ny4SwODj7zjkUVJxb9WV4qosqEhW\r\nWEmUngztMaXBH6mc9kZL1D3TX59Tgj6vyoG7WDV8PKAKKQazwtAr8YMCY291\r\npmpdAjOtOrparD/DLkbpL04gjXXFhYZBbtADtwlT5/7PVsLwZEH/JnO9Ud6K\r\nQ3d8HXowAK/SVMhC9Z/pgiBj1UtgS9esORje52NDO085+O8lRmb0H6YWRwtZ\r\njmPhyB9mJgg9uLBMy93+7h4ZiEd7pTu9OOmtn21OuOHkCkC2ishLPItKZ7lF\r\ncXNumlz3Sis4ibolnGqYoLwT0/iHyFGJwTxqIE7Q25ljiYZr4nWe3+PfB48I\r\nUCFXb+ZFddUJrad6wg72QsYnUdxpKJdn5hEsRNr6POLk8U0JwNRMF0I1pttX\r\nE1MGbGNSEVlJ25ptdifiXGD/Y+EfIuvbJPk=\r\n=Er4l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/tokens":"15.0.0-canary.f1e037150.0","@material/density":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/focus-ring":"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/switch_15.0.0-canary.f1e037150.0_1668629168597_0.35420042979655286","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/switch","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.40b18d043.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fe49302ed508a5b082ffa33da53c637452c421f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.40b18d043.0.tgz","fileCount":58,"integrity":"sha512-nWz/KVYDk/mg0ZXI8naLblHcQxwc5VoDrdpohTQTEluoe7PANFN0Syvr0QnCOF3TJxyJrOTdLr5bUjVsUbt1mA==","signatures":[{"sig":"MEUCIDHrahvOxTXvaBP1OGExhCUtwLYOYdn3SIGUfv/zqTaJAiEA8yxbap2VF+BjJyE8bBrkGVqH3gONE9agGIIyCdNNPIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWteACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYow//X+XRdIf9oAqgq2a4QZS1OT66aS+grFOeOwcwpB1FrDFkut+Y\r\nQNcANpmgX/XQsGKgaLn5fevxhKxo9U7BvZASwsZ7NuzH5xfuU6pdh1VniEfE\r\nsr1W61/jhcfd7d1NoPAPHd/qtVz79sAzwr4TUKSrs4g/O6DzMd6AgDrMeKkW\r\nvhSnLSD5WI5OrF0rL4Tp9aCdASchaAfOqXmmpMJmjxgiwy4/OY+JLyt92sRh\r\n/rn4qMCSCzL+EQ6WGUPr2rqXhk5aC3xYW3JbleizvwlutVvr6xOdb4SuMz60\r\nzy2u/vsccT/lKOiPXaTcqr/NQYNf+FMoWTbRY+XAl/UM8V2ssTvHmmI8pKNN\r\nVV2FXhjku1yCo++pbYSJZKL3w8X27dtx7jOP7dnDu/v1T/uYaFW0/yuNWd0v\r\nGlw4Ca3j0kVTvJlxbG4B3sZxHvpOlTlG25rAY7vMWhvVm53donL7QLDRK5+d\r\nb89mH66EBDDX0pxJQZW1oVn4YO5MtMK/52UunOFLWK+Z+5k9TLguNJWuYxXc\r\nAO208pl+K4R68z+rgFolCudWR66c4sOtX3BGUp+SuTghw+2iUOfJ900hWdem\r\nARwZXA1t9YoO/KfVqwEvmdlJUFrBAESXSzKrevy88Ka+tW+4o13+hxTUQz1r\r\nASzkKWwbFqkoZMBtM3ZjIhgF/546rGvQdH0=\r\n=42qv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/tokens":"15.0.0-canary.40b18d043.0","@material/density":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/focus-ring":"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/switch_15.0.0-canary.40b18d043.0_1668639582284_0.45272204063041777","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/switch","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"284657014ebea41aaa1c8e6c803ad1dff0af0013","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.86bde5c06.0.tgz","fileCount":58,"integrity":"sha512-CxyYNKZKHfLQ5UhBXarp/VV9ptfkRXUK0C1N9JzeOmGlfhmsrKrEUm0iy9sf1kRDbGVXqo/fmZByDFCk67tKVA==","signatures":[{"sig":"MEUCIAsSfaDILmDxnU9NfD+s9y1wyaM5fyZOW1UihXEOo6hSAiEAk3o5tDzSVbKGWpmWWGV0IVPYBQ9MgsN37hgQ25NhVnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW24ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpwdg//RfWZI1bCynMvNGHfI+f6oOUSJRxB8LYSA42uIkEaw2g0tSuO\r\nTAvf0+ORL0niOIb5yottGniylVPaUp9cb1DvByNnHX3/x9BvKKdZjq4Xw50w\r\nyl2gvfYrv045Oz6fMv0sjMrHUuc0/BYnDPm6+bdbCq88q0DRMC7WzzMItHk+\r\nO4OM3QJZ9qvgjkH8gtwuaXacL28pNiXfSOir0r9Y2gAgGT9rd+9eKtP64ntL\r\nGBHDU5XOYhASsaZ8rM8Jb/qXWQiAK1A8iOEQTLsP1zojGA0ZhjwdADRvcBHP\r\nyzMdJb9lyIUUSWMns7QV6Wf9RKvMmvu7wOZy7j+UteSOu11kUWvqtmXlNsIR\r\nLpHEFG2P6QNZj3JKanpdCV2Igty7Grak5fnZ4a6Zg05d/awPMezyZW3cOWvk\r\nq2JFn/qlJdJVN5myVDYXplk6NoO2jdihSql0/Jiuyo+S9Th8SY6bsDezeCPP\r\nD3ta8mc7urWIUhuSeW8LDCBXi0XCdb+ytvrP0id5jpKf7lgdVPd5UnJJtnxS\r\n1ZhoM7umhvwMXYBQojv/6vgIicqyWaAWU5MDp8AI/rFWKB1xNAZ4TvldkfZK\r\nxzC80HjlSXn43wfaAam2UVuEFLP4MR4IQDrBcyZ6NREFA4RWKnLGw0UfT2Em\r\nPTrwRvGBpCz4eFZPTXb8U8XL45nT24lv/Uc=\r\n=RduQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/tokens":"15.0.0-canary.86bde5c06.0","@material/density":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/focus-ring":"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/switch_15.0.0-canary.86bde5c06.0_1668640184302_0.8326257947851501","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/switch","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.bb7751002.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"996511ad1f2374b8938ec4685949a5d091962c9c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.bb7751002.0.tgz","fileCount":58,"integrity":"sha512-gimtef/ruZI4IrtiUJxVP8HbaRiaEbv9tQob/6wdzM6FiVNzkVF//I4dKmqMnFx7Cu3E13aKbGoemj0D10SDJQ==","signatures":[{"sig":"MEUCIF9DeCyKiwktgSW0gSXAbmrcQWsbWheoXVgM+MwcPL93AiEA+s6/ffmR+RCQidTmi9xsZdYbfPjtHCzl00PaKFKWG3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXm+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFwQ/+P+Vx4cxPRaqxw4UmSBghoXIBcWoVHyR4gVmydm6LYtBRpviF\r\nan5QOxxyH+m07QOeUDx8F8KYiAV96JzGoDLvAdrAu1Io9Eu8mUQ6eBROKG6q\r\nXwcUKqV5I2T6E3/SUaJoOSvJICkmuh7VlpdQpUkHTRCzVDJ9F1O2oisv1LI9\r\nNr4JB44oc/AM50lS/N/h3cjC1cxoI7qe2e/4WEcq7J/aXhw0OlkMa73qNe93\r\nEt0J8CmzQdekJciHHFTPVEY6l3ppQYIvk9CaLIM53P11PnLxLWg9ZIqVv7kq\r\nldaMGw4S5dFWrYsuzl4FGjVOMErF+CWIuWspqlhCqj3vzNasPHkYS4KZgnt6\r\nKvgtgSleuQaLtkb+fo2ApVw+OHgc8qoHxM15W1Hr1A/WcHQTvUKraWKEzGBY\r\nHJE9Kt8nBT0/5o2pUmEGq2I9dYauoQ2hWzGlcSUlBNNzIRLKN9N31ompgMvP\r\ng/bgi/5TWGrI7ICNnYh9/GHo8dnZzd5LddMUN4XGj2YqCdC4/IChMrcZKSNb\r\nnbzC/zY4I0cxMDeMEccG1BnMwSsj0fAShx5yswziwkEU9ozX8KRHZBvGXK/v\r\nhN2Hg+PdWuuAFfCsFvB0QhKNvba4em/IWWmsw/SFlDalSNViMUTk51xXvbrx\r\naTVZ/2u8PoZ77dV+oX9eDRFbDoFIhSdW41I=\r\n=a7M7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/tokens":"15.0.0-canary.bb7751002.0","@material/density":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/focus-ring":"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/switch_15.0.0-canary.bb7751002.0_1668643262224_0.15696963445388312","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/switch","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37bc421d07e4aa8b457b4f2b1d5c0e42006fd835","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.63aca9af6.0.tgz","fileCount":58,"integrity":"sha512-GDzBd41mKf7llsun20gBnawty4BbZZoXTx/1/eU9paYesBewiEFCJuoKtvizwLCNivXaURWq3YD1bvOeXId7zw==","signatures":[{"sig":"MEUCIQCeTa3oJg5w6vQIADKFhjeDH6m9xZMZNf2V04LNqA5nmQIgSMT2QyOET4NSMNt3rbT3x7G/S/4ShSWhX8AXwe+WzV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoVEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbuQ/+KYxhvc/fkc9es/A1zyQ1eJg3b5OI0vjcYvABOIkadHtfODGe\r\n+13ddgYiaK8epY11wYghgOHTxg6ePHJvKGymbWJEjNxC7rp5FwA483X9K9+5\r\n4gPqJaO25Sz5BvsH5asuZf9jNENyTTh4mcDd5tjTCE3c1uLZJ0dWHMHUBsen\r\n8ZeBegLSy+eoGygkuNABFThs7abByJFg+LesXy4KgSITUfT+BKWzoR4PCpj6\r\nKZVVhqGKhK+E++N3uylWTyv6xn+vS5JWOwgCPy7iC+571lGgv8QO1CpIovHp\r\nUMKalvIxNPHrBoR8oiE8JLBrLy99iCmSXiMFttWW5GesM7ksXAsIaWhiLp42\r\nYDEIFKWK5R0rb7qSt+oR+bDY2lq9St8bdH7wXsMvI1XRxQcLv534WaZL8Tsx\r\nxCqMT+JgkhDcay9EuTwmv+PxC16Z1tLEt2MnIZZ9Dv0yKYwsxU/9ljYDc7EA\r\n91coAiQNuF3Pw/+74SN4CrvigV7tNb/VyfT4uhPcMP9nMGFV+/il4mNUeYRv\r\nFK+sA32naSKI8MGkmFCdpDr1Fk1y2BRgfUc0fXgTUFiUxgEZevKrslThXxF6\r\noS8iCsUs5vyKTOquIMuMpgkaYljAVAh5OjeOStsnTDHf5Oee4yy6tZD+ptzX\r\nGDmDd1IEr+Ib96Ozg0+d4fojubfVOcOtVwQ=\r\n=V6C2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/tokens":"15.0.0-canary.63aca9af6.0","@material/density":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/focus-ring":"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/switch_15.0.0-canary.63aca9af6.0_1668711748680_0.547167367250678","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/switch","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21002e6add09b39e213152f1bda46dfb444f0fbb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.56482dc2e.0.tgz","fileCount":58,"integrity":"sha512-D4vSw5iZOX6nKidRrV6uXjRBphS0vQhVAPEqLcYPwqNGfV8XBbZKh88DUWfbX/tiocnr/MshIliww2RbeCc+TA==","signatures":[{"sig":"MEYCIQCqSOW5lSE2+Lg+oJYh8qecuxjbqETtYCm1RM83/cy4BQIhAM8l+Vri2XLHcTiplafzW1Eb0sTHpqBfwD91gC0mkdjU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq38ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnWg/+PK2kcJ7ra4n0sOMJzsN90vF77qFiNIoO7wyM5Sf2D67QLVOi\r\noi9v9AVf9VU5WvJD1I/4fdwwvmXhSPBHYE9wL7osS0ST+mxZGiMnwbfBcCma\r\nW/qrK6KGwbDvyxSoLLc3UbHxLpZ4jlD5HIQekNNdNoR5JDh5H5pBuqawhOQi\r\nptKdfWfIwqeXVPooTsMwOy4Mg5XiaFsgd0rAg2uA6g9OKW0n5NR8URkIvIju\r\nCqHH2aZvtxrX+Wffec/2XEmnwKBurS0tRtKRCj8pCZcRBnohIpds/yaBdGgR\r\n98eGCxD3d2zjvFRKKyC7TLF/HNycYZ9HtdmdLIEKUvI7v7lhNCmQeSQW4jLu\r\nvZoxQjHfR7tDwIBydhvA/LNuwfYatd9Kc+yVQeFtAtp4QWtP5qZ1bveMgbsW\r\nd2YhlLK6CviXkkxDd/0B+/0hBDfdNSdGJJp/VEPXB2AbXyCdyKAWUGzVFfab\r\nAvNfz+LRmNmIA1NvSCPpKfZdxSdvngLH6ijsb0lK225X2zD3qS5VpslSC1np\r\nUPwG/MLY40OArZKuH6h/Y/SBeOs6EgDIVt18v3uWHvdXPju8qqfv6OQuO8Tu\r\nj6RQNiPAfXIQf7E4VC5a6FSDq9NKy5jTCfumOXWHufEwxvfuuc8qn//dFOs7\r\n8M7FaHZ86MSoPx42Dc3Qit5u3QLdBsnw7NU=\r\n=gnd1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/tokens":"15.0.0-canary.56482dc2e.0","@material/density":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/focus-ring":"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/switch_15.0.0-canary.56482dc2e.0_1668722171979_0.8684487536376639","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/switch","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.953e689f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15c7fa64626ba87e8f9efb8528e2ed24e4c2333e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.953e689f3.0.tgz","fileCount":58,"integrity":"sha512-oTcyntyuAy0SDIHKROmYvnPgLLSpKYOkWGvdFRxyI7D/e/Ix8Ej/Pw8wuH8Kovi5dBzynDdPfU9nYHna4NnfBw==","signatures":[{"sig":"MEUCICpCaShJiRwlUl6JBgtyyHDBJbOwlTtHdx2JTd4xGKWSAiEA0T9ZgDaLeXvgc+v8C/fPIqcqSy08gQaEejF4fwI3gyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrAtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1yg//akUu4M1qAl34fgPE2cXFDQXZxDBq/TeI8UO0Q3lvXBPAqb2t\r\nRUIeWaJIbRSf5b7bsnQh7fgr9BLutDwym3J+u7YsJoccBEmcy9yZPvpQw38N\r\nm4GzJBY+vXTIlYOoY7nmus7RwOj1Tx1bGNeGLJYTHYZq8oFjI0oei4eWL8KX\r\nDGhoYeh6jTXIfUsUxF/hxQOhFNkqXtEAyuCs452+FoJsM/71SOxG4PjpVrMb\r\naZojME4q3995xjjj0yUtkup981teZwQr8kOzRnd1e1ZNLoJkKavXxNNcxjlI\r\nP/4IaVXIwfxJd0KvcJC6tLrl3kC83cz3aISRR7Y00j2wqWU1FCYAhRG5IiMo\r\nCAaCU5Vbt+OMPLdnVIg8NIb0EHyfWD+jW9tAe87oIqetGx9ZtLrbXYHPwiQe\r\nB28lnBVjrlHahG5M514DViB8NMhjZG9K/qW5EWsTvuZu2TrvtSIyULwOy9tZ\r\nLmjI8lKEjK6PYGYk8djTlsVGxMWQ022BkUn+Gy0VZK5jZvffsTMOhp+Nm7nN\r\ng63eRZ524SJYjJGiM+Ikr3uZUWuZvPnvvecVq5eJW1s2pUYZBm5DNJaAv0A9\r\n9BDthTYpH6Fw8yIemkriL6vS9+BbSlomw8C4YvcwWmjdKD4rfCkMIHQuMBRf\r\ncPc+XCckpSQR+cpVIJQ+IXJTgXlOAF8Dqi0=\r\n=G5jf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/tokens":"15.0.0-canary.953e689f3.0","@material/density":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/focus-ring":"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/switch_15.0.0-canary.953e689f3.0_1668722732847_0.0477327177708291","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/switch","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b5606a793.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cd087ef25d74c8e83beb632c29fc68c47fd4a1d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b5606a793.0.tgz","fileCount":58,"integrity":"sha512-7aQiEVOsQ4e+Nhb8lwaCKKMwLuMV3Y6Cy3iyvIcPrQoyvXgxiiaMqeM0TWIyasM+jSlP3kdJ72SPWBXiTvA+9A==","signatures":[{"sig":"MEQCIFf1FOiR1GmGv1RcU795ERXLHBLzO02Sd7Y3Nedz3+OwAiB9k72Jxg1H7xfRqQoeIm3ZJCshYHR+Z/ID8Q22upfaMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1zGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzZQ/5AVC6ZjVDGryDeQkZrZayoHe2BPvWbDN0ws+tusrbjX6zJV2e\r\nselZIXREOt48cKdJwdmcC8Xt91Pdm42qEfCB3wa9NtDXKDeOiTixVOCqGopF\r\nXSuqQ14ar88nlMd4XCEKtSfy+/cUS0YQ/5CBpOVVZs7LdVtCyCmEuSN/hJGe\r\nFHsfv1vNfNKR/IP+TCfcSfItJWm+0rEQwhLHv+6tjUVEFFK9iR7ZhBAgg+3h\r\nt8aFuXrrMFVH7C5hzhO+pXIBQw8l67Uir23HmQmBu+wv7xCKBcMPKSbTAbKr\r\nljRaKZCvAMODMBfIdGYpV9OofVa9mABPJD33jhbmGYHYvLWcPVNl25w6hSHK\r\nPzPB41KMVBwuo8wqeiwciiHGv3pK/pOiezhqyX8ZvHGeoru/0ktmMzLs0spJ\r\nDHYNcf8ucAUiO62XBUEgrI5dXT8Gvta5YrjTogQBetlAe1abbtK9R7c79a1e\r\nOENM5WI26V5Rw2ziaDE1/3gKbPOAnOyC0zWSMw0Xu2D0/SPlrfydQZefDjwN\r\nWInnnlayeDNO0jkqKKp6DPVkMO+Nr/SZKTIN/UeGp96w7UTWvCN1rrQIttIN\r\nrxRaGJsogNyZjHAuAFyGJpod9TEm++3zCFPdlNt9pwMOB0xkPnmGAw2nnhPu\r\ngjKmlwLDuJlKK5R/I40cbZGogDE/rRZiw64=\r\n=dEK6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/tokens":"15.0.0-canary.b5606a793.0","@material/density":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/focus-ring":"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/switch_15.0.0-canary.b5606a793.0_1668766918346_0.9091966949582406","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/switch","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8c5675942.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8162ea5f175f287d665bb92ec9c22029ff982f81","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8c5675942.0.tgz","fileCount":58,"integrity":"sha512-vBNycQPU1k9qy+aCWiaKzje8t0S1zLkR9nDoe7fA+RYYEq+bquCzOPyCEIZ9zg/d/LYDRvu4peZTqQOj2jYhvg==","signatures":[{"sig":"MEUCIQDW6vhNpDmTuoC5gKQLOfnrINb5zZSs2ruG5dbSGprmsgIgGVeBDtMCwVCfURohkF6NExxiLP2X6gGTaj1XN5z6Me0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6H3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLcRAAhVa7JlKJHKChVsVpI2O+M7Jd5Pox122iOo59MUDTlB+3H9Wl\r\n4hXOGTBpZomozLAIyEU/dfZXPjo2jLsTqESM4ws7vSBWIHD4IkwL5ID8YixN\r\n0tzWfeShuGDbWt2mFQ/ucYPzAY6vPmoV9nVoHBZj74zRzyMOHcFOY27Hk7uY\r\nrtMnKIm8QPYxVr6EKwHywiFUAxE8y4YEovvSSzJNIVCC5wnaXImb5uuGlma5\r\nMQwFKoc46rCpEHNYN+UKBlEmFcJmZELl+N/ZPESelGqo2Jw966Bhjn+x8Htn\r\nLwSGqCwczhIZE5voz1elxy9mwsdBQFfAt1eD5TVQ1pCnpjKzM3AkMh1+1LHM\r\nRocfN1OuxQDBeNemXcywfXnNMMA5azToqgJl4NLkYnjaRMmJbArr4ZDydGKh\r\no85EZqY7VZ3ak0vx+Dnti5zjdGAxn7DfZ/Swkh4hz4c/c0WVRdtp4J9p4PuG\r\nyGCLFY/3tMlvOAyU7MBjiz4sPMYWF4butWUNVzBzU1AdzhjDe+tQJZt3VrSo\r\ntZ0ykcolROiA6d4tvqhiHzphZDlpwF0+6pg0tkTqfA5sahfnlKIPpD1l1sku\r\nuKnAP2a5m297Mp2XLkK6zSTK2TvBqa0fhfG8R3RkirbWSBy4+ZoqrESiBrNv\r\nMo+fcLfvoN7VPBUQV/CZe61A0LCLwNvekiQ=\r\n=jz8c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/tokens":"15.0.0-canary.8c5675942.0","@material/density":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/focus-ring":"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/switch_15.0.0-canary.8c5675942.0_1668784631181_0.5493362799138028","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/switch","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88b0da47d6d4ea65a4a97e6c2e9d10dcabea8e83","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.697fbdebd.0.tgz","fileCount":58,"integrity":"sha512-bng94fymx585jRaULXJgHeeB1aPyA88FoMs6EMCSi8Ia9sTan95S27PbGi0iN/IizDWcXbYdmJa8Q/aVu7Be5g==","signatures":[{"sig":"MEYCIQDDq+KDhgYOirtowcl6aNLM9Uz4MCAqIHmDUOYInrvcugIhAKT3RsUGGE8Z/IrNPo1E6oeOuk6pVl7Bb235xNXES8ta","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7p3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmLQ/9GDd1E9RMxR9fQDNnP/EIk/yippSD7rM8iroBT3abhffDcv+T\r\nPwtA1vrcfFG5j161BBdCCyUNDiZp69/m/q2D8PEVzTUFzKjUnZSiv0yv1LOA\r\nIw7LQrroVT+FaQ8wkMCqRkiFVMmAHk6nrV4SsjVy5FLQPc9uo8KrGIUi73SH\r\nAP17fQ+xK9/AJUfQe7E5crMra+GQryms7LuUJKcAVT/Wp/JFKpZxk5yONpoI\r\n5NptEcTgxVbt3XFMsyq0SgtYcWmAj2nRKLrNrLtByxhU3BYYfRwH1xvARZJs\r\nZrmJYBlw1fFMLyFdlPen3wEwt5muvU1I5rMPmE7Ob/jnThSZjoQ3kR+hTR2z\r\nnOGuZi8zMLrckkiTNtA6yCagtnWk9Fa6gfWPVzwJCdtzG87fo0bB9fSoqkaT\r\nRP0N5rfMeDXaSvbKlfuVbDg1JzoKjcuVisb8BcCK/9Bq4IJy+nPqHRLz/SxJ\r\nhvvG++SHSRfqu/3BTRWOyoM2hwY/kqvJSaMWprxJj0snNVhq4Y4NGoAbo2Wh\r\n8XQbkIOij9tP0hknTTkvcRkYajNkln//iLg+JiT15ozvbNhdZOTkC0VHoZtz\r\nHC3Wa7Mh+YfRoiXiyCf0D2kiASRRAKA5h97q0qKNmv0dM/TBmCJN0957toRR\r\nsUlm0u2H2N8IjjL2wRqLUYobI1XGns8LdfQ=\r\n=PlWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/tokens":"15.0.0-canary.697fbdebd.0","@material/density":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/focus-ring":"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/switch_15.0.0-canary.697fbdebd.0_1668790903519_0.6227184717781711","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/switch","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d58410453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ca108dc652201b679c907a1240138d7f54a0853","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d58410453.0.tgz","fileCount":58,"integrity":"sha512-AJBPINLP2VFy/stsIp5vhCy/Itwbl2FyyGvO+SvEvwnc62cnMLZ6km+0GwRFcPo0i1uraxM4dhFuRBNIHvdpMg==","signatures":[{"sig":"MEQCIEit3qWXXptXS48w2SLb9hAAA4fICSY0xWJ8lFcj2n1yAiAOJ5pHY1LWAD6OrGoXy7sNx6MR2FdlSSY0qQbJou5k4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9xEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXoxAAjdlslhrHoD8KTC7dMDYy89/PhT6+Jh722DDIvW6py4CVSWa2\r\ng5UWmwJGRo17S8DMawOrvfIYjWzVtviIRLfAljhNCmHUscP6irtOLOc9ujhd\r\nWRG3+lO2hU2xG2+0kbgDSIW6dkOQIso31CvCjPYHuNAd2SRxdCr6ChH6XGeu\r\nYR16I/NObZLPwchdc6lmXQRcDKBLwGvp6xD7EHoaaswfzjIsnoAcL3BcoXxi\r\nIoGjPqYZdIdIkuaqOR9YzN1u3rBSU87OIZniWC43UEjuUnfLx+zVYuVVKOkn\r\nU1OIHjDO/AXXGeo0sYwXTEvf+XjgIo1IlUkxVoQ/kWz2ti4IjnnwHhRo0NvV\r\n85TgzKiUWmjdOyjpo3WETtIFIjJZhLcq0GN3GaWdcAlKujofV6Yp0OJxICn4\r\nExbFyvAuup/ib+9lBmndnOFTD1C9ySP0PGN2Alm3PK6o+18nDciWbHNmBqoQ\r\ngyF89R++hWUwL8ONyob5s5ic9xlh9lWtpNb/xJA7zhkuu2FiwXDxAH+wvRKJ\r\nhHs5U3NJBQqb/BnawuuLLTj8JdQXT1YdmArYwySuOelrpgT+/PBekeSf3ut3\r\nj6cfAPB5q2s4QHflUlA0HU4KEJ7j4qB74Dtoz0kTEZHoWK81JSI4GtSVus7N\r\njMhf8dzk4q/kuK5bsK+26SFHZVv850JmfSA=\r\n=opuH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/tokens":"15.0.0-canary.d58410453.0","@material/density":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/focus-ring":"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/switch_15.0.0-canary.d58410453.0_1668799556692_0.5972502684770897","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/switch","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e5bc8fb5ba0ca8fb57469a21f05ee0d23b9fa9c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7971d6ad5.0.tgz","fileCount":58,"integrity":"sha512-WBsTIq0NwccMAbt9YFcU1vhcmFOVpNDeZ9gNMJypk19ZiqDcZBZNDx0JmceRqTYrCxndqVwfD25qK0jFVplK9g==","signatures":[{"sig":"MEUCIQDuywyuKN0u2vXJz6/k78TX6+a4iebTEdf82+G7KrEdhAIgRhYyVcu9FEpHLBqxHTU8ZnZk6Wn3vqNrweijn3zA82E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJfLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbKQ/+LRRPK9K2WLFqdUMtXG4Ez9JfZoG69i+8Mb0b1rdq1u2P8Z6d\r\no9/Ig4jkpmom/H9uu2aOFOU8Ci8LVUGkAbbzJA6egqWLr5P3EuzSnklPf/HP\r\n61z7yELiD/7qjQ+tzUnBjz7uM4wjZGvzutdFTRM9qU6aFxWab1XmsaSyoSsL\r\n8SCdymWtFZVdjIWdbs6j56zRHiOALWYqIRtj856+WRgzg99CCwuNAR2wAsd6\r\nLXt2y2H/eHNE5HARZF/fLazpP78lTs+WarafERsvDujmjlvQ6NTDEBqaotHr\r\nvscxHC9xH2VOzwfnI2jpPLQ4DGVq0e+bL4HHU+yIRqgKkBF+wYaDIo0ElFfZ\r\nK981zFVB/OoeftlXuG+TGTpeteD0LDJg5+/KyIDoagwhg+Vd1gVlWsl3DNa/\r\n+yQ5gMrZq5o8cqvJEI37Gd4mtL/J4HxyOXXEPlfxudDrKakvRHOpbyhKaHtX\r\njb23/sU41+jniumR5KcYGh5AMdlnDgWBDs0ae141u4THh3BCAAEWvKiysTfq\r\nfjA7eEkToZkqJPszYr3TyNWJDkE6Pk5SqajrBYkeSgBy6QuhG9kWWQdeE4OU\r\nQzXKmitgmsNdenTrVOT+7iTLTfYLIG01ii2YIyTOK4j/KhX4UTtNFPZqECt7\r\ntsU6FOWAGe6xImTho9OWDnDmnM1+i9vOhwc=\r\n=wWOi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/tokens":"15.0.0-canary.7971d6ad5.0","@material/density":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/focus-ring":"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/switch_15.0.0-canary.7971d6ad5.0_1668847562885_0.10523387380756866","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/switch","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5f0b6858bfb46bfbee6bbcf1786a0ea7ea36823","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":58,"integrity":"sha512-h7LVd6cF6/egkvUVmUg+ugoV+i7tyrflXNqnV3eQMXEG1W8JICcmIfZxgJTXQDjsSRAkgnAyrnOH2UL2BgRRsQ==","signatures":[{"sig":"MEUCIQCbYqTFEVWVCmkd2d1OY5HbcOvzZx3eeMrVgoR01BeuEQIgSS6WkfryTGaMtR/QIX24PKlmRJZu9sh9X2ru6ul5pqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1j1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqaew/9HwC6yEmJM6CXWbSIdqXJJ8k35MCEeA207+FeonDPWEh5ZIpx\r\ndxffHv9+mW9XN/VgvH1ZXYrZewb8yZppyHusysGoLaXcq/ZtiDrv/CT1x6LK\r\nm/IbeewREmCoYpubsOMLMO0b2S9asWJqMWt4CJc+EoIhz/KoebcOI6e2fokT\r\nQT0PEhBu2L8NbPT7DUyQrzq2lBr/gbhC+oFMrSm3dLI4kpq/YSVt4NE42K1b\r\nGWjdfpmbpsc0JMyhOE5Qt4F3NP9j1BgGgtdbvx3J9SNxfLiyZuf0SLVgqOYt\r\n89IVBDqJw0iUtu+OS542gkxg2Q1r7tTb5bRZWnQWE7C9LpYn9p+GRRJBpbGh\r\n2O6i7e4gjT1xM59vQVpcT+iHDyBHLGE6atcEReHRGDTVeGlKj9Wwfna92IpX\r\ncMwpIH6EfjvPjIMF3cU7jWAWjO+9R9hdf0xL3uCpvSRVUXgQRQ0i3/sH+GpH\r\nJvb/KkWvDJOK6ceys8yMzzQOG2FFxLqtt2u0l4eJo0Gl3SnN62KUCl+eJmkX\r\n5V/F/v9WbbPoBo/L6YRxeWL6Rbb6YFj0hwhJAByR4ckA7ETk4C1rnrVelPu2\r\nG0rFgpuBkFmLteAwkz0dB5CeZkH/xlWqftCMaBsPvWFXZILzfa7Y57N64s95\r\nMlSHiAFauM3IIEoRLHm8KtXSlQxQNpsARZ8=\r\n=9qyO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/tokens":"15.0.0-canary.a0ae73b0e.0","@material/density":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/focus-ring":"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/switch_15.0.0-canary.a0ae73b0e.0_1669028085298_0.9705889930019314","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/switch","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.96f472604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5f8e84115d44dedecb3073f38aa2b752cbe6b4e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.96f472604.0.tgz","fileCount":58,"integrity":"sha512-pGy90wEjCxtYsLxVEQEAUuaSf7XBwBwoM9uSm8Ozp5Ya364SKW8xie+k/cZ7rPzp6bv8/Qf1Z9uO/CBj8gos9Q==","signatures":[{"sig":"MEYCIQCaoZo+uWvR39wGk+ApIKyrUQzOXXiD5oTAN9jHVj7yJAIhAIRLEtxWQfXTiy7vx1S3R0nypuut85t0kAwohokNgcQS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3TSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWURAAhXChbn0Uc/4ZSti0nNWeMxsBS3ahoXQJpL2V/cDbFd6Alvso\r\nKl+wijQ7nZL2/OgXdaHacY5JqZ0xYvthrL/xGPmo+bEzQf9EE9kuvkKSQ+8m\r\nLcVTq314AdBNdLvnrN9N8v6bbUORRMatVaLPD/5XLIbUUPEUt/1W9Oj+BcyH\r\n0RYdDPie13cphlrGLlnibEu6mQK1PZTLZOtJse8Hm0HsuovaDwZ9uOSV0RvZ\r\n+hJcMiYV8wV7teDJ5/dujKRSgSgJY+jVzqJYF2eEV/p9gcQRJOBJ9qflTrrd\r\nAFMc7cC1viYE/OqwNbBOdnkAEZvXIVDg5TupezBClhc7hzprza/jXLY64Ijv\r\n4OvCAJHoeDZ6MYR0hAWakJU95UtK3WuO8DpfBXMMiTpAVSlWVNIpHAM7fxvD\r\nZvVjUqmGDNHr5hccsHTcFYzxZ12XCPWVcthjNLHkVBU/mqPhx/MqRBsevZyr\r\nO2lwwHUoGm+gzXvt2fm7KKObboFl4Om5ZRJaxQ9iGqwvSIg91bbUaY4waUkc\r\nUlPUXtXhqzl8RJk57nkuymP0hznTkB7uDf2ImGj0hk87U6lJ26kwZHhhS2HV\r\ngP77vJu8lJfZDFV01ybNmpL0QDMxt8GWz28o9vH8j9CVVZIwhzBnjfs+sqTS\r\nrnuAeRrT/JTjeckLmtyG3iBgC5U0LQEc9fw=\r\n=R0vT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/tokens":"15.0.0-canary.96f472604.0","@material/density":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/focus-ring":"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/switch_15.0.0-canary.96f472604.0_1669035217752_0.6318342860486641","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/switch","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"748eb4aee6bfdd1870d6888be361d4b1bc7a0b5d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.18b8f31e1.0.tgz","fileCount":58,"integrity":"sha512-Asrih6/+qmJQpOfmx6Xy25AkXsXnYE3z2rrxh+9r8OITkHFGkakp3RW46yjCq2xZ/U83ZqP9+kIXjdNXwvK04w==","signatures":[{"sig":"MEUCIHo4BXIL/eVW/sYRRFMsWkiplVbs/0+6NBCziKdcwJeWAiEAy1mBPkEh14jcGKG3tAsMpFYEJs98povKU+KmAzghNEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6FHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO2g/7BTj3ZsNGM31U+9eMS4A2EsjCV/QwTLETIzC45bflDZOFbu1v\r\nNGbgsHxHGTIbK9ipKd4sv2WGaBjcCRKud7bCGqC+fqFZ0p81qHFPijA5ghuW\r\nJIGiw+qynazYWggbwND5uIFVTeX00qq8uB46oU0QXsLCBHIzquIWoYSbuTkK\r\n762UpNY0+aNIYvuXNkoPcp4ypUhty4qjIOyqAxpX3w4uqmjIBuSFfBaG9npx\r\nFpAkUSCupXT2uwgkuhF2INPbOo1p3TIvWNsf4SIphoa8vJiHsOqgARaP2TqI\r\nQi6Q03JGXxuGMybEoBQS7HwLTMTBoTfKSRdR5m6jlGagfKlRNue6GdJJoSjD\r\nt4uzO1p+aDg91hg2qBaFfD6bSoPpyVy+D5sZL42op6KWvdMzNFp+1CIoaxjf\r\nb4VSX3FxO4J/1KFsSd7aGvwONhofl0GWM+rwupHRI/ACn0gYNsPtXqgQcMWq\r\nOkrdfRIndK8aEGFhTNla2INj64R2YaVunu9qo+3KX1slZeATznPzEKQWlac7\r\nVLa8mcD61/oeo6XIhiLUApzsRpBkifHZmKqiQmCpwhspELUm3MfGW8VvlS6s\r\ntvd6m52ba29QSWUn0AfXukGUR4/9QAdegtI1D2hZIkbXuNjymwFu1SDvRYCc\r\nzbwRJp9ga4EUFY3b0iQ1q+qXkt3dJcXydF4=\r\n=4Ukx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/tokens":"15.0.0-canary.18b8f31e1.0","@material/density":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/focus-ring":"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/switch_15.0.0-canary.18b8f31e1.0_1669046599721_0.17198719806301277","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/switch","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42d90fb68ad7dfaa90e86a1802d3e5291b85f50d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.912f33ce4.0.tgz","fileCount":58,"integrity":"sha512-0pUBXbYDtOylzijgObPGpcuFQjMvdgcI8o39bDSaTHzs/R9UzVdHpHLNrdPmNtm6OWWc0MlbR2drFgramW6GLA==","signatures":[{"sig":"MEYCIQDKelQhLhzsPXGVt+CBJrmb/1ifj88q9ryYvnut5xwzPQIhAJJcsrFZ2JTnxxQRCTVIdVRIlzT1ARPmKnUdvYlsjUeL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmping/9GyIrE6YY7jVCbWvigVQWD/IFEVwXplU9lPhe5fLX6MoPSQud\r\npXjEDEPsSQtteUXYRlzGnoI1+WTmXuh/Ge9TueFPOcYWEdAPHllpyPOb5ZWe\r\n4Ac+KVvGcYzJpdS38n0n3sPmWBRvBRjwEJOyQzQ2Pel+QcKUX8k0EAxf4buH\r\nySA3C4PC6mqQL9l8+YaU0gVuj1mBQt9DrFIsd7kZlqbWbkPdo0qtdgdPw6iY\r\nPCdgb4q1kxLhdgqZHPyAo5m8S9G+KtcVY0EsfV2Ja1+Hazk0QztozU2ASRsS\r\nx4cw/ZRvF/xXQumEVCddAxhJC59FSjqFEDJ5mN0Kib+e1U6M5IyASKoTdDpM\r\nevS5pDrnVJzIZe8ZQ842JhBgrMnI84aOSkFxz1DDp+Dl0MsV/Zk0+a5tPxzf\r\nXNsn0X6hA6eyLII3nZ0ATzZFGJuVcF6YPGJPwfTiMBOUmrqCL28n1SfdVNnh\r\n9R9iiTCp6Y4Vjqmq1dl7nfieKt8nq/ipM0pRiOwoNZWnFPcguUD/u1ciljuM\r\niP0h+u8Rl8I00pl2V+FD4Mw2QQlXYffZzFoqmt51n6/yLlUf7tehehEn8SbD\r\nbRMxfdpf7POHKPLSk8XkndjFErAeMH/mmhNGUQHij73WwJLKu/gr+6KlgHaG\r\ns7v4o5qxr6BnEhqgFeSljMvFdPKRLd4Yg6k=\r\n=cYpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/tokens":"15.0.0-canary.912f33ce4.0","@material/density":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/focus-ring":"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/switch_15.0.0-canary.912f33ce4.0_1669053294206_0.5987993709558674","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/switch","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"591bc06fa96e47310f8d47826de650d32f9f221e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1e1b1c369.0.tgz","fileCount":58,"integrity":"sha512-ZeDgzBXa4Ew/tj9Nsiys5RmodTOVkBshznHtcaBYnDPTvzwGQMb5j/BcyV/xXnuBsT7T6axuNVCam/lvA4RrKQ==","signatures":[{"sig":"MEQCIGmRSBY/+N+GDwY23rkdmu/qDGilM0A8fZu5Vj/zTZSlAiAS4FCH8pZMJHo8DVGhgSJP2o6CmqugBwwZIn34Sfqk2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm4TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6vhAAmjn7Ycn87SZjD4rDYyhA6O6JwFHn7kD/2bAgVOItje9R6lAr\r\neIDiXx1CR/4LfSsW98jzf6SKX0k/J2lEyv9QhkLhYDS5BUU2sUiY5ivw9gp4\r\nBayzNfF7oBC4cJQAES8Ud73gznfsGikYtPE3dZyEafAKAPxoFj9R0+mCP/Rv\r\n9qh52DTLag2rLavSukvcy7pQhJ5Mr0votevqv4F3s67d4I1gy878iYhprEEW\r\nXLno/FbHqtOTJrgoXmwZ7pnHcqWFPqfnL3VcVdok7XFAq/HJcdrbvrsGc/pq\r\nqS4uMfgiLUas4tSPvEuF4/UL7uVoSiyofQ7XWJXvu+TRDeuSi4Qv12setg1a\r\nq0IVWhemABqkpXy++X8AFncazmtA8JNEvC/EMVMBL+uQqFaTk81Z/M0tRZoo\r\nTzV9eKOJuLrD8iyckDCXZDgNdnSE9ntEw00Qg3VScZZP+vTGR+Q1zTKudQha\r\nv6aYQj1CTE9iMZblfMGUfCIt7r1A2ZEEgCy5vlc/9FHVpVYrzKs4+uU+r28t\r\n+fTNfI0VrarzRAeripSumuDrvbFOZBtgb5YS3B4Hj/Q06juezbV8X/iYBlgB\r\nhD1qug7QtrM8jVkouoayvqgJpAxuZLx+iSfiJD5+DcU0jqOJEyv9qXel88Ep\r\nM06K3xTvDrJRVTIxrZK7qI02OTF108I5r60=\r\n=LWJK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/tokens":"15.0.0-canary.1e1b1c369.0","@material/density":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/focus-ring":"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/switch_15.0.0-canary.1e1b1c369.0_1669230099637_0.7772079876025597","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/switch","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d66dd49248bdb7d51ae5be585be6ecddf1f952f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a2ec49244.0.tgz","fileCount":58,"integrity":"sha512-reNy4F3M42eE0NZFFhvVgv+IaMHyCS4qXvyj5qNpuygqLnRLY7n3QAzSnLfCZT5ySCyUBD0u/jkP6AIdqh9QjA==","signatures":[{"sig":"MEYCIQCTgWqqSgQF6r/pYN7zVDudRWg7hr82lK/EyTL0Ehu+ZgIhAI4m4cjIwXcwvYRL+dQ3vJ+wdQabw/Y2nYA9QL73GGvH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnUmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocXA//QZUBAByj4QjnzsnUmelqGliO6XxWNncHadDraphllIotN1wy\r\njkwa2+WWr3Sqz8hVbODZor9JhRr9IU80vsfUTuOyySlLFYVbVxXDZ7sKLBui\r\n3/ut9ncfV1iefTPsGfF9JrvaPbVO+ywr2ICw5Kcn1TMstSOYoiBxHlGgp+3e\r\nS30hqTXXbWgv1QwhYzPTZhBZCGIbjSlYcF42RmCDT9pNHYgDhVPG0Meu0yIj\r\nl5E2Zr/X3QK+8MypkWQ39E9/jB7Vt+E5vtzs+io85EpwuzJb5IoXyb/sCsKj\r\nhnC5vpiwzX1IGDzcsZSfpInNkVX1qcAurwchmq6zt0P0LPyTFMkXv9jZyHFr\r\nY5a4ZdUtBGn8ZmAZNgBzvPcQ2pFbZD9bOQptKE2VERNoPxluXQJy+Y1MPjqH\r\nggV5yEFDRIBzntkg1mB6kdkGChvwGBnIGjUlxN+aP7UXtKl9YUGyz3q0za3n\r\n2MURTloOK7f5KvvUkICWKY78nPzREVVj1OfbPz+4QjvbVgR60zEw2585OMz6\r\nBKg38dfhG8YNB2Dxw6uxddm4rEw4aAf7UAepHMkpMZ0uOR9CCnKAzxLu5Xxp\r\nsa2oQ4k+JOCfHeEz4IAs7p0OXXxLmhZWF5XBvagsbFzWDGDWLBSZQ1b8AkGT\r\nU93VgsKsM8bFdtQVPb+9RxeyG9meHU/vi3o=\r\n=zilH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/tokens":"15.0.0-canary.a2ec49244.0","@material/density":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/focus-ring":"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/switch_15.0.0-canary.a2ec49244.0_1669231910424_0.4991260891472331","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/switch","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2171091bc249ffe9e9958630ce0b1ab84e7e4359","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a7458ba0b.0.tgz","fileCount":58,"integrity":"sha512-/iiKR+tqU5XbKsXSe/lPILBuS+VaRPH2qwLhK8dYUCeYQWbj1wf8/bxt2Gr9X3/uksQMI0LowHo1Eq4tXpf8yg==","signatures":[{"sig":"MEYCIQC3CVXWZV6CtpJy2YjCrajr5zC+JIT5kBLKbdBFHRRE7QIhANyU2iz2Dwa9QNj6fqU49TrYsaVsf5aZM8ZFIYKejEXx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn/SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8wA//VOyXTtksauutfcnzqTWsSoMj/92dExRfyppiSlS+b6UCaTMC\r\nPc4EiJLj6M+5b9PCb/OQ6uf31aVtNw7xoEIuwf8mpkLv6rhWgJPnM2iaR9bK\r\n/5piPso24FUu/Gr+VM9tZdS/QAp187JCMvQeY4D6YT4aCmXJFQEikCw8EZus\r\n4vUr0enetrqRr9sceZGkCDGgzm4dxoeEO6Jf+SLQFwX9qLZrAe/1lFXw7ax1\r\n22wuqJjJrsfRFVNP8OnhBNe3idSQmGLCUMkyFeD9N0KYgN2M08xCQsSFmL87\r\nEMEp5VJ15Roqe3qYXQqEBlDQT+zI375YyjIMPrxHjt7oOIMt7flZdZtovbLY\r\nPkv1xdy4sN+X9ZCgm3VEXmwnYHqv3pSfB+InhtBs4ZszRearBtG8b71WsR8Y\r\nUg9E4qM4TB+EP3xbwgvK4L+YgTOPy+t6Gd9Ndrk1uWlGxy9ELJaO1dmzWl3k\r\n3J4k0fzbe65l6tRbmm7WztUbZ0IQy+xNL7L9Jpes4FZinqCL2Y6niSgtVpYu\r\nijCphnOTuRMFQMA2o44RbmADOtjVto3bYFDPmc7RHy6wG+xjJzOvGZ0cPgVX\r\nd7uf8qEfKQzcmfBshnY2nA0oxAHKr8/aEqL0gz+D2PxLU2m0EhYhj6lLqRT5\r\nKD13DVYtTMbboCyvXCPYtMmA2RXbEi1fErw=\r\n=/Acq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/tokens":"15.0.0-canary.a7458ba0b.0","@material/density":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/focus-ring":"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/switch_15.0.0-canary.a7458ba0b.0_1669234641793_0.684226354503858","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/switch","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b5baae442e696fe1fde43c1e6102a87e6da40b4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7c35e5036.0.tgz","fileCount":58,"integrity":"sha512-ITNuXLvpJV58TpQYDdACrT8yP7nXCV7el5rrSuPFFQBffnOJwawGYoI4voVn9kmy3eLv9gDbUbpcF0N8NJxDIA==","signatures":[{"sig":"MEYCIQCf0zx8DO/cBmWASV+GQaULiCA0g//RItt8rwghNUeKQgIhAI+OWw9dDPedwGeIznn25cx9jNuRtZwz9zQnap4BaogE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxDA/+Mco0EA6OXiL2lqX4uBW0JefSWlzlU/vOmFEzESHe7BKXujfb\r\nXJGAbkipVH6rMPLFJkOhPtxjjB5YajVzu7j5fPoVPs/DY9EWdWw8hl17Logt\r\nCEBkBf7SN+xKx03Uy3vtDCrBXe12pjDAAjF8D/FxUffNABJecRVl/ooADJtw\r\nXNDXLNuxPMMBj+vP1HQb5xwVFWKlsdPIhQhZepD8dXZBETbKLFn8qEFk5xlc\r\ngaKXplmfQLR/r/d+Wyq+GPVdYVKCW6x/KqdebFWnMN4noW5WtCGZ3PCSqgFT\r\nyJMDevLj5g2WUDttaWNknNtZnOk/UPXPWWHF4JnDEYmAP5bM/63F62r5PuXv\r\npQ/ZxLYFaCaAHzGGoWOstP2PZDI8yw2mXfsn9u+SpYwEu9s/efovfD2A/4QX\r\nLl/9VK7HTWoZWR6HUG5ROWr3CajAprsW+5DJjD29nAr93Qx74DNDncqtxL5t\r\nMcZH7nNA0F3kymVBo9tQQ7awOFUyWBTt1BeGU8VlacR/P91uWP3e6C83B9OW\r\nn15ccJOZpkEx7PhXhzDwnCvbhygkozS7bWCoNEYNt5PcgH0abA2GzlyGSlhj\r\n/PQijoQhvcQcsbqgIdcUW/Blujh48cM5Br+2jr2DYKNn+9Szywe4+MC9xxBH\r\nNJOeF1jHTlbGTAa96WR/mwQNnPkPKUxlr5Y=\r\n=r7UA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/tokens":"15.0.0-canary.7c35e5036.0","@material/density":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/focus-ring":"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/switch_15.0.0-canary.7c35e5036.0_1669279219253_0.02506735782055647","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/switch","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f4bdc54ae9369aa92d4a296e6c6f1023442770a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4356e05c5.0.tgz","fileCount":58,"integrity":"sha512-TL11Pd5hq3fJiPnz72FY6bLDI0J1w3SQNt2zvHQagrTF+qWjO4J4mcOrQ7L/STv10h2LbLsIM6m20fIhtIqKuQ==","signatures":[{"sig":"MEYCIQCq5EMAcGoXIKKN3Zs/MggGbSGhNng5ctQ5f6//As2L5gIhAIkkmk+o8FSOk+wFp344Bc78Yngn1nyMRqfUtE584nKT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0AUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfARAAgM874xwAmZyKy9b8CJTyPxqi/P3cp9oPITzEYDOu4gUFjNJR\r\nNRaMuosabGVvpXYxlpfyHZ7+GPrGnJXP1LlXv5nWItbgcXTVgyWFO//iGeSL\r\naWrcMB02LhpugVwjf48OA2US569ik+aFT+VFC7wbKiOPjwjoCTfK+dw+allW\r\noAi3VUKdfO+O1kDXgANe4NzVSPOTnWoZ7yVw83lXP9aU64nacMgrofoM5Nld\r\nOA9mqkdNs23ySbOSTu7vY1+rNtZlt32iRZj+CS+fjHKL6McvtqifS+yBRjoT\r\nzUMAbuvPVJvDXWzOxTFu23OKaGU/AO1sn6rAJqwUnDbeXQKfjN+wKJ+KLmSz\r\nw1kuCrn+ixto6DxAYThEMwInHMm+4VkpcxC+Xy/TN91mwFyjNILfKPhdiMwL\r\nHX3vxVel6WzDd5vdzmLyxH2Li6DwXMtY8R+7FjQK/2NlCUySe4icsRRsNfKE\r\nBi/DF9Cp5JQrLs++4o58k2VD2RAdZBbN/secdKbsNDgTnQswboUd3qTuhCZy\r\nSWWSQ8hq15ZN4qQV6Tmnp5QcInWQXwSB8tlLGKfSOTRCRxtMityhKoYKNbI9\r\np8OPQJPjkEEdr9T6MTFOf2Soqzj/UAJfVsW73HHgaWsm7wUnYhi+lgs6FHAq\r\nv3Ty4czu5Unxifz0PFdG8sw35J5rOVk0VBY=\r\n=NAOw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/tokens":"15.0.0-canary.4356e05c5.0","@material/density":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/focus-ring":"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/switch_15.0.0-canary.4356e05c5.0_1669283860424_0.027403983742793958","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/switch","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc6418396e50cfbf536bbfa5083da44d0a5c202c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cb605f8af.0.tgz","fileCount":58,"integrity":"sha512-TAr8kD4/4WTAHjjYfFNBpv87oZc45Q/8NmmIqVcsaFku8nhUvDLPYqpyqnjsWwA6wi/jTlfE0ge+wlLGn2ZH0Q==","signatures":[{"sig":"MEUCIB4qrpqFECLKsKkT0Noc7XuzUAX4t1t6+fg3Bg7RvaQMAiEA3tHUWvR//YOkX8UoDfG8ZANvhj4gCE5OSmyRQUPeLeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0SQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozJw/+PP+kLnhXfFbTdqr/WkubBzFEUH2EC9UmDXYP3pVqzzaWpgfv\r\nA1JJSZMGQAzMeG/WKKaDhUn6vzJI3v++zR+6nfceITQZVBQDBkRFCLiQq0Jd\r\nzPnFOrKw+SH6x/BnzLr73yvL38uaj2eN+zaC0QaL21UNL1I9/NQaF7IlRn61\r\nrTiVgoXJBhaFQFcD/NMrBtTP7w/PcKZeLJlIK3QTmXe9B6AuhcDxIJ69qhzQ\r\n2ED3eyW6dMvl2H/vdPI5G9Nvjd3c1vvBdK+GrpF0Pf9lOcZKljNjrMlPtHbU\r\nE/dhlqvzA1iP8mFSKVYsKOUaWL7byUkUohM+gZQy29LpgTqELkguHJ2LKt0V\r\nraiRKwp2+13xdnYiQH5zkbNF9pZm5NulK2tYh/e96ML9T8doNN4ccS1xvzuc\r\nXZqctT3Ra5dSronhfA9bLdBVtZEJY/kAA3/FCafpdH2GFuIUtZn+o3dYfh5w\r\nydnW+VlE0Y7vf15kCu8KylW83Zi2alXpr03k7frRrKsh55DJwmeb/I7iBFS6\r\n4JQrJfKFlJgzCTFJAjT3LQj5aR/2iI6Q4HMBYQwEbb/0KxbsUdOdvkIYUGKt\r\nt344oi650D7zkPA8gd8gcPGZq4fz8sDz7McMdXAtCaGlA51unC/18ZWVfmQZ\r\nP9UQ9eT4EPTK/CwZr5EdpACE+1tgjzFJOVU=\r\n=aTVr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/tokens":"15.0.0-canary.cb605f8af.0","@material/density":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/focus-ring":"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/switch_15.0.0-canary.cb605f8af.0_1669285008381_0.9190856241338756","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/switch","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba3f84761916ee093baa37cf047b8d3678525016","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.05fb07f9f.0.tgz","fileCount":58,"integrity":"sha512-dMKgQAEjk7s9uGvOXQJlaWeZCMdGXU9Wab4NIq6eA4dYI5qUTI5eU5QbSz6YufrV1pkzHHTGA+G90gH1BCIP5A==","signatures":[{"sig":"MEQCID9VX8A18JiXagx108Fww75ra5oFIx1NrWtjI+vHc52FAiBJJ8230cLpr7k+MJOmqTUvVKFz8Qmn3OTDe4xk8rVYOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6Z+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZjhAAljSKq3vFEOeOThUZaarsEIq8Pkr0SZCq5NmtKijdyPeI9hcn\r\nscIchbRpcaEXjkOs3XjUgepn2t7VwmV4nW91MIYsfwKWGwogwJzZasKeHXCG\r\nhWx2iU5lpAiujcC2wr+nRDkuWYFqPx6VPADpCjLFqqpPkK/eHcRTRPeJZMeI\r\nVd/vcWgmsMVW3Ypuou6tUpYyuAL8XD2FhXXfWUC4zJh708Mp0qceB57dwuYL\r\nrYx+Qol233tKHrJfzz5nnwDxrkMvcxWXGMxDGqJ+bNd9xnyMmsqB6cdToc4R\r\neGqJBeddyi2dKwcxoLsSRGCHmGXEWAbF+4DPC7Z/asJRXnzTs0IGNdpV3H4M\r\noFhvykNVrnHoqWEzXP4zV2sZYmOwV/FJOHWg6Jm2BOMTbtHlnwafZSPgtRqZ\r\n6pdy/EIpAiWju6iXwGjoNhb74FhEEm8jrxHhABYK5rdrYZged+LAuUF3J29Y\r\nXIRje5FZb4r5DQtbUEf5N6bSW7M+0R5Xgt4FHwE2Gk9ztytHGXapd75otdpT\r\nvBDYtuDSOIl7xwWuvxEWQyq8q0e977/Yr/vtJ+sIV1fdN7rlxwgKKxsyjU94\r\nUHIzv19Pl5okm0Qzm4p09i4eY2uwjrCiz7Nm+02g3fijTzyBJSWGjpkqMy1z\r\n9s8SmMdHbEhlJpz9oF1dQknh8XryoQzs86s=\r\n=Epb7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/tokens":"15.0.0-canary.05fb07f9f.0","@material/density":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/focus-ring":"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/switch_15.0.0-canary.05fb07f9f.0_1669310078097_0.47656987160443687","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/switch","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a911b386b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f8a7e25c39efaacd6e082e11bd1abe78eec2586","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a911b386b.0.tgz","fileCount":58,"integrity":"sha512-Zi0OU0CNao3ZB1vv03eGYAFgyD0bYN/sNNV/zNX/TfIKC660A8Mac7jc1uebK8FnqdrtX11S2Fmvt4O1DkLDTQ==","signatures":[{"sig":"MEUCICd8x0xHK570uemlfHSPhYRKWRX1cZB9s5IUNzcgzsMQAiEAhC1M+HCSa43R54ITrpdBZ4TkGgDV6ZUSvkRQOhw9PA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOZPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ9w/9HoIpMlNHzcIlEHGl/DnR0p6Ox9fbTBL3h34RGdtxV2gOD7Js\r\nSMy1vwuoBKIP7GNN65P19a4yA0ex8rXGugmd7OBqWRmI37pYCU9/01go/NIZ\r\nAKbaU0TlXEL1yOQnNQ8lSLq41V+XtRTKB1aTGi28kfBg/YbU2ty9nj/T/2Km\r\nVeJcOzNGeqwFyFJUVWNEex20MhAEJH73SyCun0SphL/dYPy8rhXDlOZ4h4rf\r\nGMXZhDSwE1bKqtgIf/1XZlTmunm60xgj0feFHNxNS0dQRZnB/ggHNAzxGH7u\r\n/VWBF9xqF/95lmJ4J9ZioCQ+viDnWVm8O0Iu/kHmpgl0aKziqMU6H7SWKukQ\r\noYzPXruwz291usdclAK8NHdl2hPxJaZN89a95PZrYfFovynlZn5xJNWR42VC\r\nQORixrjbkutVw5KWjferbLhmb9uZEKKmFIA7m2SfKLK/qlfHSYrUBWAx4uBR\r\n0nZ/GFlyNrqFOlmTuqA7R6cDmpoqnnE8vrpJGkaIE9aveVKH7Ur2dQ+6HQ0X\r\nR9MG8eeWXAyQVnxRoU0yBY7gP9mMB9m+4aTLbxYEFQ6Oz5h94cC0FK2r+EA0\r\n1ALn0Wn9OmVsDXSwwdnQexZiI+8jG6zHB2TFnFpT0R7iv8slVmZ5Jjuw30z5\r\npzmF0IGjlkuq68AE43hfZNpNY3UIhmhn83U=\r\n=pqCk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/tokens":"15.0.0-canary.a911b386b.0","@material/density":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/focus-ring":"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/switch_15.0.0-canary.a911b386b.0_1669654094870_0.8021936741624134","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/switch","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ae08d31722ccea15950e72cd2931faef35a982a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2aa8050b4.0.tgz","fileCount":58,"integrity":"sha512-gPuKd/LScoOEkZ/pG/nwo24xOZebNGH/ADI0NDywNoMhL8tMnzXSTjR6Zs8ip91HFlNoAAAezEnsCD5+d/CBYA==","signatures":[{"sig":"MEQCIArYb5bV1qxCSsecINTGRzRkHFZiZ9Rs+kKSb+Fao381AiArLgNx+tiedqCV03wCamNcx/d0ib54q/iEYeqPkTL2Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQglACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqejRAAkWgNqxxQKMUW13VIpqRIYCAGSl4DgZJy0E3ZlkqLUWLZwN/E\r\nG5rT024tbNIqZRwl/Pw6jXtaYZu0XfhIYp+RmwtYz5dvRsBJ/d7eLoe0voe1\r\noInU3xU46WOfLm2rR6lwX7E17N1XpzeLLYGufPHXrjDzQEp539bkoVZe4Xv+\r\nK7Nb/m9l5Jqf4mI0uWBFu77FOGt2dhMp1P7iKuP3dpXpUoe3Rp8RKJejV4ga\r\nhEdrfWuqhpYCWZGHbZTlVRe6dJ/2SCGpaG7TIa9bCIfc1+u1aH0Q1HrnHRsY\r\nJuva1ce9+5hJYyOHj2z9zspRLQyp0Rg8dVyyxDyBhFmI53pt2sRjbwIFgVHW\r\n2RQa/Kb+nR9UY7YnOyxmAALFBxsJPmY+NGcfGZOARrC3qcPmZ2LP2SMrKkQn\r\nujrug//hty5zyzh6htpctnYjQsXpeTm9cw5hpRW5UAH10Ux7tXhh0BYLvNhj\r\n0Vrn8qeKu/PcOT5xXTDXeG0SSiz1jBdGgyt6ei1YwvFPqj2jZPsVZXikE29m\r\ndIcCTM+qVO6c5cQOeGoffZVpI9VTU2fHGNvqlb8sazxzHLxEyOG9vA1B/3ro\r\naSrU2n2LpJaOul7eRcC5GGFnOiFaSVrnVmMqiyz3Kzst2w41BScLkAK/7CUI\r\nflENgNBtBjPQO+3aPnHiNpOhTbF17c2rYYY=\r\n=g8U7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/tokens":"15.0.0-canary.2aa8050b4.0","@material/density":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/focus-ring":"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/switch_15.0.0-canary.2aa8050b4.0_1669662757240_0.6044462939866062","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/switch","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.323904a9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c216d28c19529c83fb269ac940973eb9a0fee48b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.323904a9f.0.tgz","fileCount":58,"integrity":"sha512-0PHRTkNR52omKFxXZX3UoX+CgC2eizK+KsocJAgx1Me1WVgtLnSAyAO5km2zlb8bP9Xfa+HhCy6Uo1075JuONQ==","signatures":[{"sig":"MEQCIGOcwaywX7+nbHmfSmxVoNfPgwpm52rg08vX1o7E9OHEAiB9zSnLuMdHTrsekOZ4kqaJmo3i0rlj6q1zAJQnEf/e7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiavACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5ZQ/+Ji971klD5Sb9lcUubT/LXMNkBbiyoqqrHn9KJC1FWw+rehnU\r\nJelrnmUHPHT/9+b0chJIJwR/P0LtG+Tcq209eXQd1qSQaZjezGAmnHAANqE9\r\nQnXs8Mqiw6Ip625GLXvxYsjqukEg4fhn0BN8kvj8tGhrYSy4JUPBJnUcg3Xo\r\nHINV9W+6GL3RpVtxAZdc9xaN4HyIWMa72/KK1KxHMybCx0fT6qQvSLn8u8vr\r\nfStCeIuKecry30IoGbjan6oFNXfcBrl+VKpoF5qNvAlVbcOd1YYMfjAk604A\r\nVovs4QcEN+VAm4cPv3VXd9sNMd4BiadtlifwxIDGpBPaFwsaZm94+0HOB9xt\r\nIcwsZ2z6nrOORUnUBZjUy3O/s8fEjBnSGEL2a6k3Z/f1R+PFL1m++Uhf8NWC\r\nS2UiyFUSYNLAWV1ZhTNn9hCDtGnWDNTyeAtuYw1o3XyxglFS+nR/3r4p49TU\r\npZcCV5grAl0r3c2leg59kQUP9aiQsK55FBuaegiJD3FxGaGd8jxmGnmRk6RM\r\nFi/NIn3Emby0YgUa0ihEyhv9I6m+4K1/1XGg+CJC6j5fJdnsYn6W/4ilmNE3\r\nrKo8C42kyHVM4HpmtLDxvadmu1LG/+Q41g3ZEsEx4oDPY+XEtZH9pt3AbecZ\r\nTDyjdpwAaXeI9NLcita0786U0oMwThXrTpo=\r\n=d7NQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/tokens":"15.0.0-canary.323904a9f.0","@material/density":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/focus-ring":"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/switch_15.0.0-canary.323904a9f.0_1669736111289_0.6562504998325207","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/switch","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.168a629a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6cc762434a7a73cf24cd8cff08cde6e83ab8554","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.168a629a4.0.tgz","fileCount":58,"integrity":"sha512-+BFx4iGw276DuNvf2usWYD+S5hq5MhbjYw401rCDywvlKJ1pU1j30O5RrGekZLAvJl5gM9kdczRn2486YGi7tw==","signatures":[{"sig":"MEUCIB+xNUBY94eqPJooznZDZiu3MC5X+WJtqSQ3TPrlGOaPAiEAoGQ8x9tSwFA84wc0xYPD7iA3tz8xGEnkbKhOYOBqPGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjhBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTfg//Y/qA3YhQU7mSMz3oBLfxB82CLTFGbXDsFCk6E1c21opZwTdk\r\nwoxhPbgUMaEwybNUPfV2Y9dxV5YyIqIL5tHHRGYjt+2LS6LlUoLU4e4+N6Tk\r\nfqd2Et71m/Fld8EhgaUus4mqMa/lpFl9VB8WzOfzDlGbBWV25gwlb9B5BaBe\r\nwaSMT1y3HQ4F+5ULeiGpDNyqGV0T3mcev5AU0ZE6C3bbVCUgJ8Rl8aVBz4dq\r\nzMzQt/7PvdY1F/Eu7s+t+V/C3VhOGkpQYKadbI5dwA9V9E2C+rj7Prr6RdKr\r\nIbE25ZfIbh1tnxBiO7F2K1li+WMuQZ+k4+tkeJULW/JxyFSgDtpyvy31oO1z\r\naQ9CNk2xoVAI6GFa26cb6Ps+fotjPnwE2LSZ+qm3vU6ek+exsgxcUYa+pKVa\r\nWGsgEsy5/Pk3L2DNZZkByEhNMulcCPiys8DlSvuyManxoC6nEbIo1V/Uz/Uv\r\nXRkX7uaEvanFnQ+8DI3nHNrkWLuZcVyS6/K3DxRoKYT6KyxC5d61Fa3VD4Jq\r\nfYxLmhHZ2Mb2gsgGAr0NTteio1DICw/WfX9LuzcwHQXrwpGNMcqj4qQiYhpq\r\ncNOVGspA6K3SLDx/FjzPOxIds689N4yRg3vOnCeT5a3tbcYZG5CS2tHUoexY\r\nULQheN2SpqtBXu5rMytiU8M1xwJIsHx2TdM=\r\n=pOsK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/tokens":"15.0.0-canary.168a629a4.0","@material/density":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/focus-ring":"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/switch_15.0.0-canary.168a629a4.0_1669740609251_0.31853163705010745","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/switch","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.65c411674.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec7ddccb5269b73252ddb596106f3525a8e3bd0e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.65c411674.0.tgz","fileCount":58,"integrity":"sha512-RFfNhvipsGL7YTNQfHdgF4Znsir2WuNTUD2fFBA14AJhkSdLwMnMKlOiUtrPaFZGxLkVojebg9xl+tTmQ6pAKA==","signatures":[{"sig":"MEQCIElXzu8rRJtrHyPLVjOkRn0YfmNMll5eCIqDAfIOKU/xAiBOoQMI2gwXsTFO+BewYvZxa0xTzfs0kSgXmVE7pDnT1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkPXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBoRAAhqvO8RR2BrEyDEeEklchsT21s6KAuMhzU7htIKDEhJY4/R4v\r\nPnHbNTpccYauCOBJPLlpWXuk+kwc5nqgCImsXtNiiFPGiu4bjwVaswDsTdOh\r\nobnzu1GyPpb8XSclFChIYhHzXZB8ITKnbPtLqU5Mu4kjYLLMeu6xWeospHiC\r\n+aKq0Oivbn2L5LsgtBUuruI62qc9IH34guOd+LpEdCCgN8QMu59V04n1/4+d\r\nb/+DPyrl17hWhgupTQ7I6vjiFA3nZ057FAaraLH5dz89rnFZuVezhiICKqFS\r\nPhK2NGPtE2ZiVjtne5NssRd8Tm3Wmml6x4TfSR0qhJ6AWc58YoUmTrzhRl18\r\nUs5pXOgctBOFHK2pDWTAOKzqwNPX7pd5g5JJjJyngUk+/vUjmEolGEeOnFHB\r\npD3K9TW5OvWNDgKX/rDtUIoXubwTN+c0l8rJSVoqpaqMbksgg1+pSdfsPLw5\r\nq3yvTSuS6vfGGgec2D22YM+Ddk3SUrLXMuK/ksP4lcbK1vsklMNRQJMY+Mt0\r\nyX/MyssOq+Ngv0qsCywS4qoa/SMoaB9ct0iPlrL0YAlNMa99kgE5OZ8YKLdr\r\nrdXQJtxkYgIwzCnT6fdBAZJL+vNNbGehlNYrTNrHE9hQRw2uKVkhkLeGsa/p\r\nR9V2w3qsaBvJ5pn374hwEc5g7GV3vVNLyiE=\r\n=y2EX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/tokens":"15.0.0-canary.65c411674.0","@material/density":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/focus-ring":"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/switch_15.0.0-canary.65c411674.0_1669743574751_0.09129770166143558","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/switch","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d67dc8d4363e54adbd10a4d2be937dff4dde36da","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a86d36fd2.0.tgz","fileCount":58,"integrity":"sha512-km3JfOkLvULHayg8yTqIH/GglULuZF2XuykWwYcSTnnJ8IjIdKi6UBTPFH6tBx6KuAAC/RnbAUq1mY1xSEqE1w==","signatures":[{"sig":"MEUCIDmAskMBkVp/NV5/92SjbtSsumYijfyEmvIc1GGBsEUaAiEArGgCwouyJ5Z3cb45GGiKjKN2jAU5iDp0HWTtp9ULEYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrysACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDFg//Z2jqRuTJ/2IXSEH/HwO8Cc6Rcd64L2ln7L7ivkOhiBn9UwJ1\r\n4Iomy28pH0wZEqLfujc7+jm+E5mBc/VSEruBDlanEMAJDLsfLceOIHnO4sJp\r\nSUHEdAZ+19qpJ3165PinSF8SesK3KMuDjPxPsjomnSI7hpMs61wWOuE9bTwk\r\n/tFA/GHBDNLeL+dkDOlXlh0nKweO8DGyif+SZ7tzVoUWLuIutrZqrtPazMEm\r\niGg86IZde/0g77BI8pjiX4ENJXP794EfqtLUx78AOUqKammDZfNzPOGunndI\r\n1J8LuDma3LJYfvZLVb0RXRl2cq1ZcBgoPb3Jhc87UUdjQCclUZtq1tiIt0CV\r\nc6U5OzhDlcD/Z1n/ChI3Vu51vJguUuGLxBgNWl0El9ivlbn2V6ZTzt0jKJno\r\nxbuV62SgV06F7Y5iGZ0tCVIZ5OoZuW/ooN6RKYc3S7bs56Whud6DHLcBUCax\r\niB5ZHhI9J6hj0+TBKxEODZn8YOmNU4nB2a8/jccCugCoaGPSx6oqsln6McGW\r\nQyKftPTkwLYV3AOiEmkAr9GE4r1kkLsP7lQio8ljp4vjUf1bnjX/VfElCtfc\r\nCU6+pUIgTOKXrEGw6J0X+uIV5jxwSdCouS5Q/OTAV8pWPpGVNtBGSb02+B0q\r\nEuoXXMeHWuO0zsNw4CS3DBvlyfZXoGdBYus=\r\n=lL+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/tokens":"15.0.0-canary.a86d36fd2.0","@material/density":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/focus-ring":"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/switch_15.0.0-canary.a86d36fd2.0_1669774507732_0.7942614942536015","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/switch","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4cd8cce8d56333c2b6ea94f9b134066acdb1ffb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.3a1f46c66.0.tgz","fileCount":58,"integrity":"sha512-mdRz22mErLJ2NveLqpT3UcJUgD1KVUfXl4kXoCGmD8gEACpH785FZ4kBU/jXdmPIjl7p1LCLvh1XU+kzvFpAYA==","signatures":[{"sig":"MEUCIDq2RuQ6cCx7kZWD4OHMYGLhEL9uxl8mhGTUxzoP3DZbAiEA+OYXPWx6aQYIEh35fK9I8tkXvQuoUdzxlrcUT7iiT/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0fDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt2A/+PWr3PCJVYA2iJDX78PS7Ho3yCdicvdboSLptXo1bo8v3rf4Q\r\nos15cRFP+UamMmBjTRb1lfuUjWoUxhb+mz/vl0VyOTQ05o9sG7RPlmuRFvm2\r\nC5P2ZRJ5Bp6mvs7tQW2z3EkW1DNeLV7EsbnWQ2t6N8HZ23nva/6Ps7USK56K\r\ngW8BGAz0M8fTfIuWJTGvBncwMRITuLP3Cez6VpsMQvIB+bzrLR/YIBnIBBif\r\ne55tKKwVebE/LEZRIBZoAwED8qONExlcwGYYbtguVirZ61MGrtAVAzCyc1hN\r\nZI84zU6wL09Fcq6jGXVfaaaL1t17MWWsM2SpPQrLWhRzVaMAovx0sbiDrapd\r\nmed9OsvfKece1rG7m6EC1WGueIofTgFGFxU+mPScNeacoh6fXKFqhIHjwi37\r\nredJTviysDcAT6yEDLeeKAFm+h1hb55ank2Cz91mBgDktGKHTcnHMDUvktbs\r\nNWxdrffC8jdmQ1q+KF2YSlWj+puSu0OeIOMMer1BQwEKQC4dBgz44fpPAZs3\r\nvUkHERysYXvnkbWe4yju3wqq6AUB6UInSg8ZY1KyKeduz+tPqYYtJAVToBsh\r\nS2jKlJpmaZfcgB/VsVwYjI+RXVLAi14Gwy0esvBm2alZTG0eZQvIrLT73Moh\r\n5uj4IY3xGY/ZrRgzmEuy+S+58y0k3PVX1ZE=\r\n=WO4w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/tokens":"15.0.0-canary.3a1f46c66.0","@material/density":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/focus-ring":"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/switch_15.0.0-canary.3a1f46c66.0_1669810115563_0.07898713733078577","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/switch","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ea9b53b0ae0043eb9b525c00faf3b19f142eb7c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.32d8a9648.0.tgz","fileCount":58,"integrity":"sha512-EFgVe77rTeX3mIOcmpL9BCrck7i0kXea3qGvZcttErDCz9RlxfQ4xQxu3HyC1Q761Gboeu7Bb4ntMgXpXfZLww==","signatures":[{"sig":"MEYCIQCktGyMSuYTvq2OdwFsT0PtTt0V6Zo494dyZ+m9v2XtKgIhAPTvdXoWzvk0LhKd+LsVjgCtPhf0h93sc8JMPlBQHM3Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOShACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMIA//YUpTz44MpV6brHsrU2mRsxiRGELFj/sv+WMJYSxB4X6wwm4A\r\nzUU6Gi8tejDifCI35rlhCBijj5IpqGRnsDyov7LOOQu2zL90b4rZUN+RQmiC\r\nMtKYYiC7kO/HsxWXwQw+5pd2Gx2HvWV1BinoymfXA8vltannjicSMM8uB07Y\r\nvryBliIWUlWjqYuuX7JXpAC7key2RAgDj7UvL8BmsXo9CE61o83CvxsuwdiD\r\nB2BjzV9hBuW7PKrsGKRwN1HvCu/PnyvjTXwY0uQR7KiH0IiiurTp2b8CPqyz\r\n5EQd3VdQdpDyB+gTzPGaZfx1i0BSnJlPnYBHxVu1ybxCvqaTV4Dt8qytFqTb\r\nc0TqLAYww/7TA8vyJKvDwHEc+Qt+Rymbs8j36MNSn2OuuCsICG/5d/YIqa2I\r\n1zFVJg/4NxLEj0vsnOkk8HXRTjJbKS+ECEvtElTF+kgkplYsChIIhyONsr+B\r\nfaglH6Vrcu8WK32eoQv1fBJO5DVkeja5VliqtD0tZbaAiP/1QtOzPmRPANrO\r\nB1hvuUQEGXcVI4/lNNKrHHdFsiKejjYqw2CupP7tQCaKZlnUwulBcF4NoA2L\r\nV3GkNJJbcJ6MwhpgQoNTd7A+1ugl+mfkEPchlOI59JE2ZiEyVOfP/x/hngqB\r\nUcLhjLNv72KTgZAz1Bzh9sIyjZus/ABGppY=\r\n=Ns/Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/tokens":"15.0.0-canary.32d8a9648.0","@material/density":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/focus-ring":"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/switch_15.0.0-canary.32d8a9648.0_1669915809424_0.8906000796430413","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/switch","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.03618ab70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"467e82b950ba9509298c677033f8f119d5932022","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.03618ab70.0.tgz","fileCount":58,"integrity":"sha512-IYO95r7YhKdARuVY7CSZ10Ggpu98JfQGwB1wntaPjijDaSb4w8tqRL+4JzvcIstKkxZrK19WlwB3n2+QAH8CIw==","signatures":[{"sig":"MEQCIAhiLoBHUoTj4Hoi3NA9gV+xcJXumYvc+aa+wqcoGWZuAiAII4x5cXVjN9RCDn2F+lX3PX71O/c/7GGM8Z/8dLamVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRS4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVTw/9EypYh0G1cEOqatxVM9EaTV21yB8kqfOuu0Be/CaFrFRevq9y\r\nq1rlT+6XWlSFgANZ8pjOq4EkWwT5oCYEG8wAwq3GXnVztAELwYZV0Orfb5Pz\r\nUoSrKh6IoS1qAMc6EedtWOk/w3OjMy6a0JUM+ZxqqSA9o6vi3COvAkTBJEHD\r\nCayzCA/LxB9f8Rl6EHX4zaOlOIWChu8TnqZrtsyh7h+NeJt0NjhYx91i/AGx\r\np1VnnwfKFllsoDEEpT83XII1xp+7i/59YUIRsIwphJVgsYjRukfJPvxj2LjG\r\nWDbflU24dAbfUR2ppc7UQYClrU0hdYgrK6fIvh7j7GcBSRfQjdZR00TIxE4p\r\ntXP/EsqJOsBBjhUES40GsNDonFd8lyWIhwT/k6NqWZrhMP5U5HE071v2Z8zx\r\na67RyoxblPVYp8ocddGd2QiXBzc5vCweM+wV7vnJ2gXnh6RnlyF2KZvHkP1x\r\n2tt18ITLi2QFT+ZYzRQqFNAcAtiHpXHg/a2byMz298K/FRs14aYsut57JekS\r\nzveIwa7BgRdra02ohhq2a0dXMVfpCUTE2BJYZldY36SKLriNdOVazcaT6YPx\r\nGNyl+0SaKz14sD4p75CKysVO0B7o8nwc6gscGCAKZb9rxl0/6t16hPb8jj64\r\nf4yrhLsJ7r4bwRdJgxayn0o9zA4n5VlX+Kg=\r\n=uDEr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/tokens":"15.0.0-canary.03618ab70.0","@material/density":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/focus-ring":"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/switch_15.0.0-canary.03618ab70.0_1669928120088_0.6219515184169064","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/switch","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.68aaed940.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ef83f26c3d6efd4de31dd16c4c255f0635b4870","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.68aaed940.0.tgz","fileCount":58,"integrity":"sha512-2rqLfSM5z53kRAQVMrULJzl/P7pqDuUdrhdMzrWqzo0gMuZGb932RsALp6cabSchXZIDUj4ydhgCnoMzAtPxaQ==","signatures":[{"sig":"MEUCIQD4Xz+/M/YwknNWgWoOCe+cqI34lFeAY75EcGAKHOSE0gIgbG+V7RqQ/ePzTQkDUmXv4ajQFs3JtqvKWnS8Pg9q5Ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRu2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyEg/9H7M5p7q83vTyz8PB1oxTJ08urLTiHAxng8lrrRu92yFPBiIx\r\nztGtjSTIEKfBWbAqArBKIcCoagNDCsBCWQaVoTuNlUDn/zor+ZP+aOdKlYqL\r\n6Fyh+zqUw2NVZJi73dT+nmq/TZ0f5EfPqe9icJ6VkVwy6/rZ5q8LqCBdHmI+\r\nilXo5J0qlxQNvtdHVN+Z2b39I2VgxjTsiEuGS2Jz1oCQnofAv7MgzrTBgCp4\r\nJOaz2QnX/PenhMPMV6M2xQwkDYc9g3VlvjIwHBMxk1i37g2XGOWJTrVunJvH\r\nzozoXd29oqehja3LBoSJudAbwDeAok6zxfa/ZUKqRyshpV6ccGYawqMIaxU+\r\nGMMSvpk/x7tiGt/VG9DUIUkfpo+ujWYp3OQRpXLdaWG6EuafMfMnrrr/GZ4K\r\nrHUdd+oJh2nBgxgLp/ZS4adx/bMQuqvlu+lzVUyi/nISZMDZkVGo4tA2WW5n\r\nnHMk9PNyXjABOnR28qFyaii872N6nLDfuBhTYVidv7ZpBWjM0EA5ZPjfjISu\r\nyVebiCwc2LUAE4MO97HEmNLMcqPOKhTCWHcLzTZ2p8+qq04+aU3aP9dLdAFu\r\nRLcz+Cma7MpUWdo5XcU7OMlgVBthQEGdAZMLfvboOlN2E6f4hhsXnN+exiTu\r\nz+l+7uQ40cdiWh1iRx/Xa6SGONJVd9A4Jm0=\r\n=kvk8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/tokens":"15.0.0-canary.68aaed940.0","@material/density":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/focus-ring":"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/switch_15.0.0-canary.68aaed940.0_1669929910154_0.10958768725156354","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/switch","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c767c582c0871269641636989353c195f0a31b4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":58,"integrity":"sha512-g1RVuQLPBzhTx0DbdtHtdBNjShf6HKWiK1kUZYAkUpBgNUCIOD69ye4FWAerMPDY3hkU+ylkcxPl37Qh3NpLbA==","signatures":[{"sig":"MEQCIB8s5NDVGpC66wZp5ne2f/a4KAZRrroPTgEOEopP8o8XAiAbonnm2Peq8hd8P8zauZfREt/QHA4z+jGByLtwTolUmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib88ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCjg/+KZztjTFrTzz9C8o9txMzIpfKewA0rRjGEes2JqiYdntiJ0St\r\ndU9v0QNeR0ffncpGiVHOgt7XCgrIswujjEVOvWRd53pFXyNYPNc48b+35fDB\r\nI8xNVC5uskmWuq1niX7CGDQEywH5g4XhAMl3pRpcDtLDBt59Hrc6RvbWvE20\r\nDnXkqYhgt9Tb74a3JVS0gGhnyZ5n6EivDUTH51Sqq+e8vUwOr+JB9uOz1I1o\r\nYezkxOf/E8ncMyD/TNLdtGrM6mVo8O0qZcgbbyrtxjZLIHiXFEPgm1j42wGT\r\nra75KT15DRCimWY0MplX+z/zDu+brQz8y8msgSj1SJoIxUh8pm9tsppUkzEi\r\nhkn9jUQ7x+CHDB52fEvwc+mFlvUsHKmQXU87d9VD7pNGpV9CsmXepO+HhRop\r\n5xeGKGCFL1lSgyvLmImA5CPLzxWOnC82wUi+lgseZdT8GmmXJDmVo9JYnxX8\r\n5pc/eX18AHzX5Hx+C0i933Z2GyEFl6P3c+W6ANkpAJbZUPVW0kxu7et4bRr9\r\nWtNAmf6FbPZMXs1KJjoCLLoffy42nKW7mOy/qnTdjaSuq7Ce34JC7xbjWgoe\r\nK2ww35pdWumOanLt+HdI39CmishtI38IfswXRQyIKP3CMPVfUinqt9yfJxrA\r\nDu9+08WbXuLCtB9ahgEJCxtJzZ3Ziez5UYY=\r\n=r14q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/tokens":"15.0.0-canary.f0a0bbc75.0","@material/density":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/focus-ring":"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/switch_15.0.0-canary.f0a0bbc75.0_1669971772166_0.5931759206990757","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/switch","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2e0f057533788189c4a8536775a3f0dc49e116","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.dd99c8764.0.tgz","fileCount":58,"integrity":"sha512-zC3D++ydcu5sTAhgK46PznFZrJvNfycvPY6pjGyB0lUNXs8QX8fPFjw7TgaIdnljGfqmUAF+F0zfGV5bQHY00w==","signatures":[{"sig":"MEQCIAkrOGw+e0wQMJ3qGWDbqrlq1omKqtKivnVR3rS6m5ngAiAKPhpHcvWCqIKGq5040+Oe+zBMW+Pmta11CR1xQT4hUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigVXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeSw//evirM5GosOujPkJNoBFA+EuYwd2xSwjjhsNSTNg9dxZeDoLP\r\n3DF+0EHXSyOU1LbZFtQHYjZzVxD4CN4BShFtjUld6HnUREkponPl0sCkHH7+\r\nHq3cY9Yih5Jk3sl22ddJfGmWjVvNB09krPp0n+RBnZZJ18VkfCjL7js2HNgi\r\nYw/F05ijisidvMWNVfo1Qi5nqhP/GlHdsUQwDFeeEpW0lxdT+3klcuBxMV4f\r\n25UIfH9gMLv+qlumKUphuBplrDbKeYXOm4YJj/EIAPBXZbGfObzqxu8LEM7U\r\nAd1ShHi5IkHHmjfvCa9HU0LUAIAqWAGGFivATsQSdqcIIsPhljA0ju/dsE4Z\r\ndgguz2NkVzozWopHkHKtgtdBSMWLllAwdQhhLdeMBHxvGzP2RBm9ar6LK0aR\r\nPzwP1geQwUNY3aWja83ue1OXq55dh+uamUSLe/5QZIWZBEiy0nUTaJEp8oo2\r\nrt3OiAkR7UjEYsebiKLu0NgQUbRJXJWOuDO7MsC+nMOAkoK7NzDzYPH7iIw7\r\nDpG1d8GZwLoJ6wpZVj06JpRTble2493OvwSP19j56JcOZx+OXzOu7p6zZtCE\r\nxX58vRaHmx5vWfiv0MF0BYR6v2CTQdnCEd2TaZmPwHifBkUFDANxmn31/mPZ\r\nd7FEPMHg756VaimGTNoEhG1rdQ66VUbO/aU=\r\n=O5Ew\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/tokens":"15.0.0-canary.dd99c8764.0","@material/density":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/focus-ring":"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/switch_15.0.0-canary.dd99c8764.0_1669989718918_0.4698410788587981","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/switch","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b866b5a8dd51c18f254f52eae0d7fa8d6b8203c4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.fabdcca3a.0.tgz","fileCount":58,"integrity":"sha512-uo6KEJT2P+d5+wJEPb0abKvsvoYpZILtFt77YCsjmwGB8LSF4eEzTDAscHH/YP+ladkmVBbs+wyiSEAQlt9PVg==","signatures":[{"sig":"MEYCIQCWr1ZDpuGgD2jb3OkZSKqUkf4FoDd95DofLAozjDEhdAIhANaVmg4I9kZNzXuejAKkMpYHcn5p/QLdDumMXPQqjvgu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihTIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTzxAAoYAh+yFENBFleZMFfso/DoeQQn+p0dEsMTxVeiVa65svTT7A\r\npxTy4CU1arn/nFyHnUhECsixe7IRdfq0dUSwNBuV94qYyWTu/3se/oXUfqv/\r\nXF7NcmKlOuy8WGlnn6jI650/YjjF7C+H7FUzF7M91Ky0n8HTxrQnLdp01t9q\r\nDDmvOR6U6d6WaFyG8D94GXLc+YAvKv4/1ChtyGWy6dNlgpBDxo3Gy1et3tiz\r\ntNVWWBrKRxUGDjh/mCQsAimV+FNICFA7/spvDvL92cwiS4gAUyLuA1e80Kht\r\nwJ1noUxeEPxAYvHxuQFWL6S5JbqGgOYOwDy2IJhRsgFvekBwVMxjXxgfhkUl\r\nYSsY1/f+HWLi1ElOy3FtKd0+LrfEuR147mj71FEbljP0WTL6VnkvGba23iFW\r\nhOYsKovOH+6kxQdWem/bLgSkbxamLIWtn7FsKLqxWnPi/7Eo7ln8aRRaHOsP\r\ne9z21dWu3WvSR/UuVH5Y1WbpHd5k81zokmYfixdo7MxRWl8atf+yQFfqgPtv\r\nNgA7x/J3lJvjpMva0wnARhkBzv+8ziisdg+t+2k50n2Zjf05pYSID1QY/qdb\r\n0qzzpYZAIrERu+v00QGRW5AIqxAGF3Fo63vLhu8cKLTNTAHvDeHjt4vocxYD\r\nkOHKSUdPR3cP3KF0LJDRq2M0UYkFXtYE2vY=\r\n=Kn1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/tokens":"15.0.0-canary.fabdcca3a.0","@material/density":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/focus-ring":"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/switch_15.0.0-canary.fabdcca3a.0_1669993672048_0.613670308538905","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/switch","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b24a1dc77857f986404b50545e5b007bcd417bb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2d26722d2.0.tgz","fileCount":58,"integrity":"sha512-yl++Xj3avIuVMmbyxUN3Y4DxgwS6HkFMf+Pm/ZVSVbF7dU5XmnOZTe0PvpOIGYRZtm/VMoW8AU/S4EYgE7DbDw==","signatures":[{"sig":"MEUCIAsC4cmDASpIlhiZA4CTgZMZl7Hq/kUDI3zt2D9y183pAiEA+E6P6rs81KuUvLeH8AoR1t5iYtTaB4CYGZCMn4D74Pg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiid0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNdw/9E+LeHGtQWSRGxSv/DgQ/8uU46w1b0Yo71RF2G0ZrBeQTaL2q\r\n0UYqO4IXpoTgLEwlQ8zfbl9x0mEQNCbTRi8Dha6NHzC+mIy8OHQclmiWfDU7\r\nMFwEKtKNsa5h+DaNYeRgjYIz6vToavbeWhv7zNxqnzg+Q36QQRO26f3lAt0h\r\np5Hiwj4CDXrQ5LqKLDPLISzHIHNNloAtKWqDWNax+GqmvNYkIvVpVbFYUpKW\r\nMw42P8G+TzZY2fYQBvr2l054KRVzRmIFnBR7gB6694Zlg1Zetanni9uvzet2\r\ngmjZvrj5TxMQGwpH+tA3LqEEjnt/0tAD84A8wRpXZkJKlSOECBBkb9ht1QOZ\r\n7DvPcQjgRUV63QRSLmZgvT0ONh0hCd6+Y4+KkmrtBY+pVVfGcZTo4oJZSnvb\r\nbVc7NfgLxKnLVPi3Vk9S19TjgH2mUsMzhLSYzkD4dKEIHN/bId+NI4ixvjuN\r\nE8xQf4ePZ9T5EYOwtxmi/KW7mhVYaiDKgmnvh1lfsrgqMi+vrbGlV9S1uF4s\r\nWLLrjuQ07zaoUuRTQHg7eszlfdN/IVddXQKozwuoCzSMRcx1SvsGQk3rMHbw\r\nP6HVMpsZJZjfwfvkl0Flgyt4SIxF1Kkfh9nw3ZeHIDmHCIU3fijndCjsi8+8\r\nYbRsVvYotf9NFB9pSYVSCq+2teZye8fowsU=\r\n=1mBI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/tokens":"15.0.0-canary.2d26722d2.0","@material/density":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/focus-ring":"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/switch_15.0.0-canary.2d26722d2.0_1669998451901_0.11815134932121785","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/switch","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"448e2ec72c409e43751e745fd48f5fc7543824ba","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":58,"integrity":"sha512-tcDJ0wdSDqNP+ZetiV74a7MjO5oFtOAgS7zNSLVN6/41z1UXbpqVZOiWnUVSFlJ6an7Z6BJYSFawEGMJYozzDQ==","signatures":[{"sig":"MEUCIQDKrLqkrbuQ1dHt7z0WB46phURjy3q2/MHW+/69Dh/5xwIgWwLS54tueW9DP6hrFbBiHltFsfj/uifWSARRWiIlt6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijlLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmosyw/8C4TCx2xQ29Abw4Y/oYd1pUBKML/GJk+qnMmmvHHAdjiB0Y94\r\ni5P8Y2ABupn0aTNJFYPHwqDemhINRwkjCpcKdh672Tb+ADtD8Aunz7dYlDvP\r\nmBtgtSwvJuEuHCbfU4RbvloSSL/1rhv9VbbVMEZ5PyZ0S7OG5xzAy3bjEE3/\r\n8mpHq1tmFwer5IQ07ltD4IBuWKzsQFLz7Qu8gTlwcDldzw5Irx8/VWVfiSMa\r\neZtFD+JDJIU463g/6+aR8HU+PsQxxl75vVbfFtlEV1IgfgT9YytjLnOaaFUF\r\nlQMH5pwT1OmB4iISLhUol1LaRkRG135TH4WloufcSFUee9RntMt56oMBuI75\r\nFziIjaMyG1BC0od46aWcHSxcyAVNpGz7sKAqwq1aStxSsSmoQLSGEvwJNAxF\r\nVorQBku9iHmbuBHI0r3hxxxMitIuFbBdVTQzCqu1UBecPmK1eJRxMVgJ2XCy\r\n9viRgbAVjYBGhRJ0oOhaOM7or1jOtd1r6ceRSTXCo40WwBpvbN9igQ3QEhcU\r\nmH36A4FqitvFZG7N7RDD8KxpEh3FT7kYMwFR+KKP2UGf6sQWVC3kthrs0cjh\r\nBPZnle62O+h/quztCs/Qb928JIwSp5HbitTPjZcneOKhGK1gZJUjWBHxMCZ3\r\neOiX61Jgkr+sSVk3pvcUHesmxDuockWxLEg=\r\n=0qI+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/tokens":"15.0.0-canary.eaa0c3a86.0","@material/density":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/focus-ring":"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/switch_15.0.0-canary.eaa0c3a86.0_1670003018792_0.9596554789491001","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/switch","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d12707de08318d2883981903441d39cd76943855","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.79a613bbd.0.tgz","fileCount":58,"integrity":"sha512-p31ZYfOwJLQD+HAsD9414BeE/jx1K5tQt6i227Rn5Bet6ybNbPGZjWFK9dojVc83+n8igbkuHCb7BUuybw2t2Q==","signatures":[{"sig":"MEYCIQDn5sO3JJ+Ccj0eNfBYrT3ES3gOLy08vPJayh/ArnPDpQIhAMxj15Ba94ot1JwvvpsPOJ6FwcFYjFevCTLPEuaeRmbu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1EoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCOg//eT10a9zgHeEm4abDpEnq2r+PYvwzHDhlF+ZJeYhlmQxawkYX\r\nYsdSEkY3UMNd4kPx70lHvENB4HK7MmxgI+FAdOHjVPCf1gst2SB4xvk7X5D+\r\nNmJLT1Tagp7HrqC9fHX8y4WLTkrtNaWaJn9zkmBevJgUFg3l1jSJnGnPgRqv\r\n0MAsm+7wYQRGYqMdwOId5C9CMezDszGSXw0CBcxCheY7HQaib/kO4RG2VeBB\r\nHAASGEqoE5RZs2zdyLL5/nJxtz0GJzOONbrdzhhDfz2//yeVZE/JdQoMJXWM\r\nbmlDfzQV61xXXtPXPv65G5fl9NafeTvwFn0GibqvTY4wBmdyZQKPlnp5RMFf\r\n4N5bQ6dyEJwC8/2RAXTopGdYmPqKYOthYbOz7YPOcfJp0TV5Vw86fAKBke0X\r\nEaT0s779GvDk0brEVcGsHS0LfkPyOmiJQv4AiRpRst1jxSnqBgXliUtNbGdO\r\nYDPbAp28Tx+TwN2TYuou6mnGykZtqfpUWrd55ojcFgejOcQH821KZN8zxrw9\r\n30u9HmqKd3XYd5vduN9gKplN2PSoA8RUVyUvH+466lhE8S7tiwwYF+XOjqgv\r\noizSvueLnjsZ3Tt0DONqA4y841lk/B0VbMS/wyKAUOl7KipUaqraWS4/3I0d\r\n5fEwewo+PlDYkbDiv2voDOqLStKhd+5q/K4=\r\n=GYiV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/tokens":"15.0.0-canary.79a613bbd.0","@material/density":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/focus-ring":"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/switch_15.0.0-canary.79a613bbd.0_1670336808454_0.02630260783395344","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/switch","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fd5ed8d7ad251218fecb863c0da269483c2188b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c871fe61e.0.tgz","fileCount":58,"integrity":"sha512-7kA0EFtR8FM7Rgf6WAB9uGpTn3chfsx3YEqBBRigu39Ea5GZvuk3FeDuAZFovcC4WDJcKdF22Fgvmw7bheX82A==","signatures":[{"sig":"MEQCIFIRr9nJeTp9Lx2o+kZzhrgzNSFru52/TrI2NOvsv8NgAiAqUjOjBcP9I8CuYwhZo16+1BIuRfCDdd7kroQKW4abqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEZSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ6Q/+O1E+yvjN4mZj9m2uvMLQdUKunq+oXU+LKWMbF+PplgDKuUCs\r\nvVWWEIrQC3Hvqs8z247xOydmX9d2s2HrDBx6cxPGVo7WjmlNthcryKyznWiA\r\nzucTxtUS1KlgdHO/STDprWqwLbILu9/A1fyPAm91+OfhZV6GKig0Y/HNP0l3\r\nBtO0k/5ItNMi7S6dfQo2EG08ouhLvKfIosSv7v/r0v8eb7nJISqX6zVyqjvq\r\n0Gk87i/pTM1M69S2NrFYDwvzOlIs7SSruc+HpUR6bF0kvct1nznmqTDZtzsq\r\nMOHDqN4VaiPXd7XavTfg4jNAioeUPC/C1Z1gEr7iDjnolTbAewoUuMRTT2EH\r\novGKAgd1cDhKFG0i+kM3ez7KXmleWlUbmY1E7bEJzsptTHGjPPBoVnlHYqfr\r\n6AJsWNXOYbkeuah8bVr1xI3x4J4hflG1GDvQakD0P/iAAr3m6DX7uxGJEuI0\r\nvn1EvrLCjZT+gnOLm2TJE4zaahEchjushvhIT2Cu4nTJENDUN+wEykAC3imL\r\nD+nGosBPw3TWJvgcTDwpV/nYq8zGLqCd4ts9Uw/DDdBj9BN7nQY6ZZfluGHK\r\nRzVX1xPtAOETsb/zvxeWgS3MUROUm0NoDlNC58XOPl8HMqQPp2SVRV8sBemn\r\nrvlKPhmRMebi6cRsL813EL3M3KbJOoT5WFQ=\r\n=4jLz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/tokens":"15.0.0-canary.c871fe61e.0","@material/density":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/focus-ring":"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/switch_15.0.0-canary.c871fe61e.0_1670399569838_0.4534968902529002","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/switch","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8725a31800c5efd67c7f99e8f61d9d6926ab0286","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.9eaee7936.0.tgz","fileCount":58,"integrity":"sha512-Nv0QnlDmGVo/Muu9fMwGd7ybcsD5WLWwzacYN2KHK6kkRsFRsHm4chH07Q4eZLqCS0x61aSs+1x+mOgR5GcPRg==","signatures":[{"sig":"MEUCICvxvkvFw8Rx+cJgvvmiwxW9Z5lp8bYK3sFI0XXbJe37AiEA0S85QWWPPFypX4e17DBfyuTcgAmridJrc/38W1cj2Ak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPG0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCsw//Ue7pXJOFFsxwYjr1949u6BipxrJmdEsy5iA5phWGQQq9Ybwg\r\nQWJIPvs5VHgQeV2vg1mpV+WKp3+J4uKsr18lTY1Zz+pVeCyrS5GQbiUThI14\r\nkHk2r1AfamIAc2VvC3WMDXfy/fMIMNo/Mgk1VKjZQn0kluiufJZc8iZzOIqB\r\nLH6B5MpJEwZ1r1g1lVbIzs1oFED7p3X4dHcTNIqt3CFspad2hKiaJy0LvKO+\r\nFm9qh1Qq5n+fI3umaPbVKO1W1dzlrpihcYfCHEUB1wF+/cBznjM0t+PKgwtT\r\ncA97ZyBe978w7j5YgBbhojPYUltDg7Rcxa6XGq1++w+uZDPsDBLJIF9BEpdX\r\nPSx8SkJ14Zs97l2tFF0LqCjb9rihE3QRc4LLKlzLlSE7bhuTEb5TxEuI9v7w\r\ntsKtWGuRLDQ/H611kNH36ZM+V/5OxME1I5cg1LL4GS9YBmAbqU7tzJdcXKyE\r\njOpp4FHs/UyVsGhYzKf6fki9QLyHNBtM3SQnQxlsy3REqIJsswdXySDedFf4\r\n9WYKpWIUIBwFJi3OOhTgDU/h0f3SAqrRAc+NcvyrT58EpTU7bNxmEd2vFJXd\r\nRUyc2F2WUPwb1yt++K6H6PaMvqAI6+7Y0+NeSS13hR7qar8rUPbypP/hFH45\r\nWGKwmi+K6DtiqLrb+DJ8i73gMGpqchzLr+k=\r\n=vzwu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/tokens":"15.0.0-canary.9eaee7936.0","@material/density":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/focus-ring":"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/switch_15.0.0-canary.9eaee7936.0_1670443443690_0.6124052597384984","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/switch","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad4aaf4f4fdf7c06ed3e8a85a5dcb8439d7df1d2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1d37bf601.0.tgz","fileCount":58,"integrity":"sha512-uC42pN86PQTtEQDV3F0elo02E1OVxa3HB/C38XWdidBAmln2PVbfj1ZWDOHLO++ZcA416SI38Wltcceh3Kn8Vg==","signatures":[{"sig":"MEUCIC0LSiQdIfekBPyLBauiql1PpfmpQwsV8ZOTMMk79Wv7AiEAzV0MGbPamCTjeC0lxrBOugDLr6srqW54MCfdH1E58t0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPqoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0FQ//Udsl4JF1JNuI6W6jFtPoxWFfeDT76ikErCC65MF3/SlRxU9k\r\nVU36rcM2aA+mKyUv3aRi5VjUVUWR08zgu/VmHVOeM2FGBcDgK6TrTBnvSXsz\r\nLURg5rdDhFwrU0KOvINLDg6rcgk0/v5pZJ+lUrXt8uw39xHUJArKOruNQp8n\r\nk4cGBjfOkO0v4WI9bDbh5ZYHXuwwxs/2bd2c9upox4Knnm4GLT450FvWGiKG\r\nsbEWaFgi8WrfqGzlh7CpRU0A8B39n8BMC5YeyS29ENfzENe1Qe7gmuJXjnPA\r\nWHonkeLAPPf52pvcvUuDo0axPjad6sYzJ/rgKKynuX27h0d1O1EiZlu2HgVu\r\nXL+BiZiGseH2ztKBi4MMb3ozgDLfty/cqlA4otQyG4oRyPAN/nFqKelK9qQG\r\nIQQAZypoefoLUcBellPK93AS5OZ1D2tAYFEXcsi8CYij+4cJ+Yd1/uLRW6nW\r\nhLKvxOt4yD3wzYViiJZQHXHKdca/05GKMPHmja2Hd05YvOZxBYFP4hKt9uNd\r\nDRc+H82UYzWQY4Xad2omonxdfugW1WH38oesqUnbTgIWxLH2SfOYr2IalXST\r\nxSIk6ar9yu7xd/T2tmxjfnny0uDpIZ2413S+p7ZZVyItCVbLdbGNlBaW2jbE\r\nfpnzSJ09Qopg9Z3q2kA/2lWrZ3hY5OtTgRI=\r\n=ibfb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/tokens":"15.0.0-canary.1d37bf601.0","@material/density":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/focus-ring":"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/switch_15.0.0-canary.1d37bf601.0_1670445736380_0.21634018720591652","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/switch","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25b1e043e93e331b8e132ea35205c947b30a5a46","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a5fe069d5.0.tgz","fileCount":58,"integrity":"sha512-9kiZs6zRmJxNzVWBIhqwx1u9p8tdeurDl08GSe1myq57Jtd9QDG/oCm6A623x6H1kBrWg3HwZDeJJrX0d4/HQQ==","signatures":[{"sig":"MEYCIQCzTYSLYYbCsLtJncPd9yyBvce0UOfFsRtW+mftwKEmjQIhAKWx7mXeNbX51HXTnebOs2vASPrzIUlJZuVz08+Wy8N1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4JEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Ug//Z60Ade55HW+Yu+1DhJ6btEMRjjXp+aLRwxiE8GTylh5mU/0U\r\nMcUbSOE4VOn5Cu+22VDV02//Bk+b53O8ZLlggXOPXHaJukxPK4A01AT0Phiy\r\npARTRQ9gRDGcC/3KN4/y1e/OppKgc5/SyBW+XDmvUnf6JdAw0q61GVUsGnkT\r\nITxVuQonLAupezktTK7A034ovyzZTguo4b4cbCBAqEcCBh0znxwukCxeTCTW\r\nZJqaNr4MynGqkEIDmZ2MQXF2oe2c2XXITfPfFbykje8SQeE2VEUgDnljsjDU\r\n5c2BSxWLD+vI2uYm4Pcd/u50KN1fQPhOPuLALQACsQMaXFAT1+Ozu2YOgRuF\r\n/3FgwUuEBgJt0qUDfhofCTK0P76hyDS218rh5rFEnjNO/U0lqP/Y8FBkluo4\r\n4VRJ+vCXBFlL9RXD9wuSWvL5f+jx0aO+MLazm1blpfG94YOUmtEIaU0hAeBV\r\ndodfLoU3Qis5UelAh1FTTik3rE8z3sn48NyxITxCItykL9QnHN274rdIv2qJ\r\njS3IAqw+eN+QIYj06KL2un95m/QWfO1nuZ+idYAos+0s1kE4vnzyq3hzZfAW\r\ntniihGfLUyhkG0VpOV5G7EeXlGsJVRmf03yT166xZ9rgePi4FdYxcoIdy7vw\r\n2GYChozboOy7cSCJuCMrLR90VAJT3vp7238=\r\n=HrVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/tokens":"15.0.0-canary.a5fe069d5.0","@material/density":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/focus-ring":"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/switch_15.0.0-canary.a5fe069d5.0_1670611524084_0.8592354120585735","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/switch","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14b756fdd966cd7a1ded67c00c94a98e37496f78","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ce8b5326f.0.tgz","fileCount":58,"integrity":"sha512-ah3FLoIA/EMfDgQdHQTy8JhTa5AKdq2ZaO6od7ZuQWONdszOblfE1MdYQ2aMjhwKC1RDMRmxFyVGNPke11Vj5w==","signatures":[{"sig":"MEYCIQClN5+9bXz9PrLSZ5PnH5M8ENDRFIMrWCuMFbzqH24mBQIhAN4Rx9uwNjSskpfb6dHUgBCn31f8r2t26kOIG61QZXv4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8ViACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8eg//R8Y0ESTMc1F5SkjX9p/boZghAIXQGFdMz1oW0QeLTxobT7Cd\r\nW8mFmAKxU4cjMhWLm7wXZgjMZzWe7qtMrPH8eKe5JhBEpeSePLuBNmfeiSRs\r\nX7B7wbCZMhGvxMxzf+owZhC6vGeV5CNIyDsEvz+dbthUaFWt+BMXCs/Y+UY8\r\ns4lx/3yPyeOQRf62GVlE2QVe2ilIvXLMX4TNJfwPnJAUntBlS2+93M6TPzEX\r\ne1pPLfb/fkR+zJLoJ8cucJgr7ucUM2b0ePHBCOLbvMVdl6IVAPnSg/ygbLQA\r\n3tw/zNLtBsTLTk1gLj94q4Tr/XqUpRd6uazJPRU0UdJvMD865eo0aAbvcDyK\r\nDcy8lqqzYChUTeMI39WnvQJz4+cnj3rKMxBnUoSSMsWAOsqhhmQup/tZB2/9\r\nHIaO5QC9qF+JotmiUP1ARUkV5rhndcPffwxYoTeiZ2wJFEvw89IU94jzZOFj\r\nH1nBPEkBNE+UXVaPp5T2xih4P1Z92pnG1X2mQ+AeW55WZ8rPDxYIk5ISZUXh\r\nTLVb+llCwf4RJjst/jkqPfvk8XXoE+p9hq/Q/sE9OOcC+WwB90FKM7fEnOpR\r\nuCFpgvsHTRem22dWHwBlWMOUw77Lz9f2biIvj50/o8F3OleFCOZAa3WxRVr3\r\naztazrjROv37j47r8pqHg3jEQ+LfXAi3Muo=\r\n=t+rB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/tokens":"15.0.0-canary.ce8b5326f.0","@material/density":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/focus-ring":"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/switch_15.0.0-canary.ce8b5326f.0_1670628706561_0.7830337363171083","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/switch","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f57103157971f0e8244974598c6bf2d4a216275","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.43f5323bc.0.tgz","fileCount":58,"integrity":"sha512-XfCIywd8QszZTkw9ge8E53S8DuN29+br/4CXBG95OJJNvElqn1oioUNyJogvpM+60u/R4mIHzvcbY6LW6wpX8Q==","signatures":[{"sig":"MEUCIH8ZgXnPGrTJy/GNqC14R0DtjXxHdQ7imid8k1k6v48uAiEAvEd57ZRAbP4UaBta0bCsdR6U+PPKhMSd7ohPxBtGCeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1sqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFuA/7BY3J03/f8/g9+G6HiqA0sFu6I8lGILy/YNrYmox1hy642CoV\r\nx/iDrIolPfcUwPj7YDqWLuU0tuX/Hop1y7qEo1fAWAW9KREaBBpFAwkYC82H\r\n+gvgx3aNMD2qyzVxiBA1zPRISdkvKsN02ozyYh8LHmVDk7Vm+YlHrJ3naf9Z\r\nx0wx9jahWwGWz+n/Ql5r7PYZIUNoZ7HoYL2sXvcYFuQNQNLjbv2FN9V63IyX\r\nC+zgrBMadNwvItW6udWcNd2h/YZVM8K2SKO03Dpg8YsObUC8eOPD9/sj36Kr\r\nQTM+IFyNEWwJvcKnE3j9B21HSwVvyexETayx+oxvwu6VLYaLur4boI1zwcwG\r\nv+ITTEyZR5xpGpoT5wMYtK+3nhk+vIZ9QVTYkKOlM6D2e3gr/CAPouqQKoSp\r\niT1TbUSqYca5mw2TGSN5H9cpOVzAOH6Q+I0LjaUzos1MNpazKSRpmwkYyzmX\r\nr2FWzJTHKDmTmtRTReZ3F2C+Ral+1p74z8BCh5nM809RMf9QmBSE5g/+H+uz\r\nTWoavXn5zoAlSeIB/sStNWN5sRJzEpJ1UQqqdmCJW3xAG6R82qGa95qg5jla\r\nTB6AgTq2lUZMG8B/9tPRU75nqc1hV93AIh4YoSjY0WeGCdPkzO0vglPwlglh\r\nnp1kruy4JzsAJp+OHlwBBTXJF1SIWLg/A0o=\r\n=A7la\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/tokens":"15.0.0-canary.43f5323bc.0","@material/density":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/focus-ring":"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/switch_15.0.0-canary.43f5323bc.0_1670863658743_0.09561597141417844","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/switch","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e66932e59ba1365f3be2934f5604f1af843b1a7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.5490e32e7.0.tgz","fileCount":58,"integrity":"sha512-2pVYSpksLGo1P313d5IoGignTT0xR/ezm1VurJT054jfL8GL7potCYq+1SbrJgedI1sDEE4MQpyrlFdvkmyLEg==","signatures":[{"sig":"MEUCIQCo1Yt3I1amKiO1fmIuHsQNx+jUckVsmlzXYEvukxc0swIgf8gF2LnViuKuYeXub5ScwpiiIt+k7FC7IgN8cHVdu9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl17SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8RxAAklg3zEYg3jfcqBZ0pPWooJ1q1xGdLF3dl3E4F7bGDCTpnw6R\r\n2Q0jIqXunDeHMwLbPONZmDuyIoNHMCffApXSmx+rWC9ETieIKmbzRtdCk6S3\r\nwf7ImvcJQoqVXCs4GuzYoNAffKeVeHjkKKLAHgxtrjUfX5t+o8kUD5Pa5R+u\r\nctn1VaFw2VeDG+sM0DBYRjVOKOBTgIwLCce/3hRFcUX7d1PlVW8lS1/lGaGZ\r\ng6ayqELWomYOLLVOJDDrUohShDGxArQfGW1ZpwV0cQ874IsHj02ApAX7IraS\r\nwwsLQb4oIckemexNsASWeAw4OREY8de5rLBThWvZPw5Sm+9Ec+51va550e5F\r\nCrigiUosMXPOrm3i5tQ2pTRtRxRKFc7tCz8vRdk9QxwE4u0vMShM90p9W7jn\r\n62XU1ULpF0jRo2byzXH9ESBl/I767hXMxLCoZuedbpl+zkX4ucit+zL3DONq\r\nl0Q28Lvu6nhfkKXyTnZvLPMkvkL3RVzVc8+lnyoQmoJhC2qgECox7bNGhBlz\r\nYwD+Nn5TuCDE3152xa8Et14d0v13gUi5IPtebOwPhd9IaU+pA8eR5cFkE6tM\r\nI4Pqag4JtZ9xN9YzOX2IVGbgHLLxmt1ex8yjqJf9XVtwE2W+8JqBocsboVoO\r\nc8xoZx/9CdlJGWFDzBUAMvYj512/mZiQ0fo=\r\n=lAvx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/tokens":"15.0.0-canary.5490e32e7.0","@material/density":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/focus-ring":"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/switch_15.0.0-canary.5490e32e7.0_1670864594401_0.3518555344891128","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/switch","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.817002c29.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbe800f1f496453c33d4e23d257f84ffc02ba26d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.817002c29.0.tgz","fileCount":58,"integrity":"sha512-j/vRXzPe0gF8C6RZzfaklaNo3nSMCYSQvqvCzwtmL0LdSBYZLDPnQ5m223u7cfmPjdo7t/qM5G8QS7xQUhLhJA==","signatures":[{"sig":"MEYCIQCDV7mGw6c0H5arZs5V88w7afmXGKo59KQ3bMtRG27PCQIhAPC9fcpf6SpIetoM9Zc0Z0DkX1wRiK+z4d5kp+EQcqU8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPS5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSeg/+Lxltug5LhZKYTLWaE/SsSrxVqJNZLTl5qvkGMYlf4f9iRut/\r\n7ZHaqw/veUxMFB7jHP95RR76MMMIwfivXrD9ahoULYXWlXH2cMH1vX+atBGJ\r\ntd4zB6KEFbNEpbCWcmXTXvYLbTCtKwjTjMOp85TLhSzivaONKo9rO/w46X91\r\nr4nJON398G+hrnzz9/WBeEjQmcu+U4YbdUZaAYLBnhdPNFiITmednbSlsF3Q\r\nbB3hyPB23utMKYPrFkksteT1mEXyWE+sJ40SxtIwrXWe95FORZd5buWqdrtj\r\nsdBawP/1yKCzkud2mKwwxA7/U0R/4pr4nGWW9NzYHSZ11e9LMRNjoXqw/neL\r\nEUP6FxqNEboKECxicR7DJbtOllDy0GZBBYzv/J8NbbLMTnuiA+bHSPVNZanv\r\nz/oeoKqAsq4jngIqTXL3WOkxlBgv4AcCKp5RHObefR8BwAvhVEQzIsM8cBji\r\n6ZCN6/1rZ5TTiG5zql5xCn4podXWuP4ZaPgkvrcIiz0qTJYv9PvWgvjQT7SM\r\nga5cauZzub7JShFJFkQSUCRDJGHZRpWYSklQicmsvOz5CmL+kUFrS2i1VRP6\r\nOwSIXmv1bDFV7GwF+G1jXlCgEdJKX03WZ/Swa4Ax4QElknwoY3KWrA7NEUB7\r\nxrd5r/Y/T2wkixFXduulJf0ffJVPqUsOsnY=\r\n=18YB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/tokens":"15.0.0-canary.817002c29.0","@material/density":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/focus-ring":"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/switch_15.0.0-canary.817002c29.0_1670968505352_0.7720969067730039","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/switch","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.313a1326a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17fb8438e663b86631d1aa83024433c192f35e9e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.313a1326a.0.tgz","fileCount":58,"integrity":"sha512-6L0wvrVzeKC/Lm9GD0HmkAMR2zQDe8LVl+TG6VOqGb+XKtBTl9TorLxxM1vDLKqrZ5vVThplEzEL9jOZGO87bQ==","signatures":[{"sig":"MEQCIAHRKnirc1ZEKtwzRVSqItCYs3d2wl54+c29E0nf4YsmAiA3V6lyvi+YwMAaNiq2WOBtHYt+hyKbIQ2t5DU2W0godw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaWdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmogeg/+PJs874K/DNN2ifWTOcn8LSnPzYpv43YvRnVTUN+92Z/Tu+TW\r\nUgVztVrm4KN1ETQStuEXnxzztDcmYJIlUfFi8Eb+4uNayVZPBLFVWaCqQFG4\r\nfQwtMq1KYtqUcECuj4YemHKObe79itDy3YLQPZkltSv0ZAceo4ZkdlE5+ZMz\r\nKM8P36IrjrorqpApyaX4Qy+Yp2rLdxxOHxXeuhszu8bAcbqhksTPraTcGtjH\r\nN/En2+WYN9ECVrSWvw+FEUkCjvJf3T7SSwCS1X4TpYjcFJvGyaYoDsLwQD3f\r\n7M77hmdtFaK076LRFteWAE6cnGQZH93AxuvzkYMIDTA4aFi8S+GqkMJTC6H9\r\nobqKizCiGe/7qXYBjpzUc3+CE4x8u95mm5LPIsINsKKtVMIL/baKLDyFXeKl\r\n54Mf9fA1OyJSJ0BUIX5f3vY1iLPmB9vByQTDEi3yA6r8ut0rRpe9obzoVYzD\r\n4Lpm0BnHzjptL6P7tQ5uqz0b3UKRAsuTeJYbsGhaWobLv7gF2WvIx1YawXfe\r\nIsrq5T+62BV47Kxa5Fu82HvdqxRDPgx471Wzd0iyqdr90UnrxU59RWmgAWew\r\nRQApIuUWWqxFiYc+rxKYWMSJMx/oMwDZeB+cYZk1W7Vgm6RfQZ7I6h6/YgNf\r\nnKynPROb4TF64qXf8QuYbXLUh/FCmiyhQ/Q=\r\n=sV5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/tokens":"15.0.0-canary.313a1326a.0","@material/density":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/focus-ring":"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/switch_15.0.0-canary.313a1326a.0_1671013789444_0.6169177570129558","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/switch","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"668877ab2aa39c9433231f9c90b4d87ece0a014c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a69c14e10.0.tgz","fileCount":58,"integrity":"sha512-FzJdtr5jbu8XmcmDr1uFu0C5iOuw2ZXpS10KZC+DcP+MXJNWcXW3n5xerJ0OS/GOd1v5tBi/XW/WNE556ztyvA==","signatures":[{"sig":"MEQCICu8iIJ1Y6yzn/0LTr0cbPiIpKygOyTSb1L21ESMly3SAiAv6n8X4qMcRXxFrsgcGTYdrnFa0SqalS8LbV5/nJraNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbFsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroIQ/8CjU8IzZrkIE5kpQTnDqPFQexgCTKsaNvlQ+03tztrZ1wnh4t\r\nsda+zKTEZrCTbrF+LJSbjRzCreKGHMEbvhH4wFsTWNuZbt7nGGMmJj4e2jnL\r\nMOzROXNErPAIKoBbOA31HU2wLx2RN3lhyngwCDI96zDqKaUbd5rj5MWRCfhH\r\n4Vn6+hk25ujsjmThRVj+mJSf33tQ2tyz2ym8lQkkNgGTfIpjT6eOBE/kc7IG\r\n1j681BSI+9ghtObwaKaPsOG4qEhEjSJrJi/5C4zNTS25XgS2qjmNF7WFgwjM\r\nW3HSIwuhSlptMHP5hkBjcyfY25JjGNTIWCPedO9vhIwi3KXIb82IM46Q2Gr0\r\nTzN5zgVzWh5PqF2e7fqstgCqTemaxMk7tRAu5oF1v8KNmoKq5CvGkQZdyYuu\r\n1ud+O+4tdV3te6rK2qdS00fzzpsSOfHvWqoVhpePTFuN6w9zydqJ3qPoiWVF\r\nlkH446hfuXhkHyzU/eYzBfbObQUOtgXhaFZ4GMwJVMUAywgJKoZl2eWm1Kqv\r\nDsaPeGpHt+Az/GvcwSPnRxwNaUxBol3mLcLnkUwtsfBJ1v7zOvIPV26rlVWn\r\nUm2iat9PI28G0Aw1DA7Z5gi4/R8PX6nKJIM3lVyoMujcuSUQtXvS7/4nXERo\r\nu/PmS8E7w5ROiq1bBa4spDfyfUlMrJEaTxo=\r\n=Iw/d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/tokens":"15.0.0-canary.a69c14e10.0","@material/density":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/focus-ring":"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/switch_15.0.0-canary.a69c14e10.0_1671016812594_0.4048591508526549","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/switch","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f768147356b14c0b3989ed742ddeded626c9edc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":58,"integrity":"sha512-Gt18IS5HtdkJP3NXMp394fLPG8XW+Z9RCUMPcmEIrxYl/ueabwAG8wb1lDjR8YsB06r/CxRDbi+ZuZ6qHHGRbA==","signatures":[{"sig":"MEUCIQDaVSFY+7afLZDtvPtKBCLABj0uCOSjWJFOS2Mgzofu8gIgPq0y3xlD3dPjZztPC5vZfgvixpdB3K4pUipsoRoo37o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF4Q/9ETxrV5OZV/9JwV3d+lTmpBtBZ+YKuq3sN6hCC7ETj9UtYQIs\r\ntWuke4+pFocCkB4AwkcqLDKr7D685jo1dhgd5wt5CShZU6Gw5DBwIpEzOT5Q\r\nRL6rUnhMUq50V1KAJUrGRfwithmlN70YNYm2vW9fm8s/vsGI1bzZF3EQhudW\r\nNim9h2D80SNYuQiFDQdDr7zU8ITSBmBUNtijr7rZAXsgh/Faj2A8FeFdwxPp\r\nl6NwolCAuRlNg56KuW2qgN+kI26DNv6isgnQEaWE8Hai2zgz6b8HLqCfyJJ9\r\n6Kpg3q1xgSYPMHoHPFHsvsw1RmPUJr1OjcaNe748sUtIivRBTqUGLHdDQkh5\r\nR8nQ5fDeGqVSEVeIeIUIwryxPJnBtKPIYMW61hN7IcAXoKazArSUVi+2zwRw\r\nFahSzzt494iNCkRMANE712fZXK8yukdogYlqJthGA9RHBOvajyLsR3NE/rQh\r\nLrOk0Ckl6sGK9nDpmMvT7cuiZVRu/+9UreqQe5EPdy6iKvpQ2c0RdY1k2ETp\r\nZte/8zTnoaep9dRxJyOionSvl0JZYnG+LnXwcaT2i9K4+PkBA/RCtnRbGdz5\r\nYasg9oMwjh/X5JNNjlA7bdsElm6BsO31XAi+UMlmv+Ah1QGkcKd+tsXS3Wol\r\nyR+8RmF49e9onINhQlyGw6HesDLy0P7uobA=\r\n=ZoON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/tokens":"15.0.0-canary.f43e0ceb5.0","@material/density":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/focus-ring":"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/switch_15.0.0-canary.f43e0ceb5.0_1671036350986_0.5291001334971237","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/switch","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.34767110.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db1c42f040a6def064ce6e1626a31fbd5599ff30","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.34767110.0.tgz","fileCount":58,"integrity":"sha512-H5x7wgMmZwW3uk+0j10AQPerAlitxSz4b4ztFBgpWdvwX8GpDQ2MGXjrUyAiYBoemT/GfH7rHvehp/0lg9AqsQ==","signatures":[{"sig":"MEQCIESzVtaVR9MEk4i5VUJbQYxGKhXg9NooTC5cPf22g+u5AiBTOL+Qv9sj5wqnJy4oehCXD54pEOvyXJHqY6967n68gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgZOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxiw/9HMkqWcP1hW36AXBzfNqJZEhEjOy51QjD2rXjTqE2lWaPIMf3\r\nynY2oSkIRwLQsYZspwk4Vx964/jwCvUx1IzM/BO/hmzyhwmH9JVsS+7fKq2a\r\nRUKd+P3v2Ac3qWOBQ2IdtMhRsAOBq2sBMBsge78tBHNsX8892aCmY8AoOja6\r\nLg5SKhcYNzBI4N9b6IwbTZlLwRtGnG/PdzjOysr06+g0PXvw81ozyeh1rV0E\r\nEZ4nxGKMYToFG/Pc8/1YmarFa9dJyQQUZsq50acVu6c7v49hD2WLSJkkotoT\r\nRMqKOFrkmFxivLDvlvO1fje3x03w3dJRCb9GLTzmzzKUcUYJi5SFw7YSZ3ML\r\nLqTT7FTHPICf60BTDFwD2qWf5TGOJDlHhgMCemSetlT14b16X0aQK4howdJx\r\nemuCzWNR02qnHI2ubES3Bv7aQqy/a+Kirjwn59cCl8rhDFMaia07/Twrcvs8\r\nE3DiQ9bHI7tIa+XyFf4PVO4q7tH2z75w0dYonCF1uufcdXxAPlftZtoyBXby\r\nNB8yhvxamJB8XdZ0DxYD41xjdipwQO4JdasQsgwFgUQd+NOEzdjijugOMPpj\r\nAz9RLuHrStLk6vXApJ5iDRTqB8HmOaxzSwNHpB37+4pMyfNw0xJvdCaPMVdo\r\nn2oWcsnsgICVQxvEqrwzbFYMaPB7d4E08oI=\r\n=da48\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/tokens":"15.0.0-canary.034767110.0","@material/density":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/focus-ring":"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/switch_15.0.0-canary.34767110.0_1671038542398_0.6540007963825989","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/switch","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"144ea4547bee306ebd1d108be5fe862e48f98708","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1f99f3c50.0.tgz","fileCount":58,"integrity":"sha512-veL5hAqZBzrUXX2qCd6Db9dNHjmD0dwjFfmhIfRhZWpQk108xgVD2MxGam9ZW0Bqub8m/pfNXzHfZibHRKfShQ==","signatures":[{"sig":"MEQCIBC/w+fc8KbHAqfVldFLy/jo+honUrUeXukJfYdZU01pAiAQtocmoOkC25g2y9fbOMxV3YMqVhubzId1LiEvWKoAIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy6ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJTQ/7B8QbDTMU9GR9OJYIHYxJLsurkUp9F5lvh0ktploMY1peOAXC\r\nUyDUNAIm4qO7E5L+RlczSbzpJHXkYLIEo2JGWoxRHfw+k/DqI7bYsquHdxMC\r\nogThTPgcpXoXMKGW6Kh7tMlC421BabD32XP/78bcsmt0WmqEPywREbFGqlds\r\nt5tjPcEXnD2qQi/viHf10uf4vqXm3izr6C+xTQEtzVVd1I9ADKHKkVPvrYi2\r\nJzy69oQfvU/KuVEzvvwiwFI/p2JuFoLa/FQCap39valZcJVemsh5ErCRgn0F\r\n7L9yGI3PrxwVoJ4ncdHAcJCPotBuCRYmeQmkT/BVrDFXx6q5wToyWSNrXTJB\r\nTr1HwfZw8cw+j1Q5nNW148x5VUftH7i2feHXt1UbZDWkR4kwCk1MvGpZ9OXN\r\na8gMO4CQxObDzFWGzw0g6yb96hd2CCJoWsDY2eqpODR5jrQP/sfEMjkziuKm\r\nMsHwrUQ+nxshVEIT67NDS+7c+Eec3rKIANchrLEQR0XyyElGaz2py/a8hGT4\r\n64Apmg2VkXW6yIrT+P1wRIIt/mTG7hWHbOoO6t5yfzsjDhjUf6JAdGw1zJxE\r\nYxxmJWFYutBuwf64Yjii1Xjw17LyDB8zr0xT6WLi0lzLW+XDbePOGI/2E4y/\r\nnagc0fgaMICW/XeyXPmeXKdK0C9ajD/jHgk=\r\n=qLh9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/tokens":"15.0.0-canary.1f99f3c50.0","@material/density":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/focus-ring":"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/switch_15.0.0-canary.1f99f3c50.0_1671114393353_0.2612931949186097","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/switch","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c89811edb975ce74e49e0619cc952d3c31ab927e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cfd69490f.0.tgz","fileCount":58,"integrity":"sha512-fzdURSuAx3qlV8mkusJf8VRqjBIcGJo0zHpRDDb2T4/nUi4USIsFw3U1/0/0dtAV/ovVTZ1E7LNgIeGaD2UHSg==","signatures":[{"sig":"MEUCICDv0PdTiFszjnD7QTAm1/U4xaPPpNxuotroeuT2Ea9gAiEA4iHLHoS9/VMms+L2WWItMFC406MGs9pj8nAO1ol2O/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNB8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKtg//QlahAzg1xpglx7hOiQJrIu/aXiKXdMgaUUEJ8C42NxeJLfdV\r\nwOyAMKm56QtFGcQrAf/BFMvCoOlXW4JuDM1hQgOJq7y9sptDKCyV/jx4Fa4I\r\nR6BR2JIMl2lnGMDAO02jAWRkYKkUWeEboSuUr57rHO3v7UEG0CQg/u7IXjrv\r\neIFYzyfRWhUFekLSR5mMoPc8sO/78Qdmo1E6D4fgS6ce+Z83H/mMcjbP9gnz\r\nmenD6FpSiekTMw97UynOfpUGx1OPkQrf+jzKMfM57Jt1FPfRcVB4YM1whdlh\r\nuD9EFlT0Ygjp9qLnCZs2PaAGddoLaXNMZYPCK5VhtHcQ3oRa8/YYMhfSVXKE\r\n9pS1v2M3OIkCQ7W/eutDyBKAfzNTJqEJ2+hPrTb/kaCojftlYQf/UStWLdlp\r\nnNM/Ua9LPcqP9n/oM0ldtL0YN7++p5REj71XOKvgrR9l/WM73qQmfz+m/ET6\r\n4GiQWFepijtwEgEbnHVXqTAW00jXxS4fGocta9mLvUKH6Bo16yKWwGvOi89Z\r\npf1R5vfjOsBGA50JErPVvM/CiDmJ94s2ri8EP6e00xd/rtGMivgCLNRF6LTx\r\nMzMSO6l/SV9lTFoeHQhpGhG7WySxow2cSOAJM2pn9Jqbyp4te/l0vRIT9Swh\r\n33eUUAUvd92pjpTG0yhC62zqA50Qk9bBVms=\r\n=ZOnH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/tokens":"15.0.0-canary.cfd69490f.0","@material/density":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/focus-ring":"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/switch_15.0.0-canary.cfd69490f.0_1671221372267_0.4487414303534176","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/switch","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86bcfd82a96be8948e88c0a4a1ec164d85ce7f72","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.94ad8d986.0.tgz","fileCount":58,"integrity":"sha512-0pyOBdgVyzvGO3vlY5QkXtREkRV9/YsdAYKhjqkgIh0anMob96w/r3iO5NWWGK9P6KETnejo2YsvTQDHDlATmg==","signatures":[{"sig":"MEUCIBFMt/eskksxDXdAiRDL62nuhT3s1FD1FYoYME35/lxRAiEA1M/Lo54ohNm8kIPw5oRc5inkByrlgd4Tpa1UpziRg3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLtFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrroA/8DIReCLKmR9CY/7W36/Ehf897sq5qrdo8lTwNKgaJa3qFXnl7\r\nr7zkPTV5nTEfQ0IqGiGq/mtARhld8FxEotZ07POGwx4hAnG2PUlHOYF3qVyo\r\nJbmPgatBGAQ+vvCc/xOEXoUwDBPiCc/A2gc6CjI+9MYf4RiA8bHtcm2n1gUF\r\nmPCfzHRjnoPpF7pHJ2AYIe7JVTGJr4itoXHz7ZAyhZj3lDkvwdVrKFDDP/F5\r\nl+0Wu+nzqigJIFEBfzo0uK7hhVX2/A0qe8yP+cJ3DGIllhQxYGyAvGirIr42\r\n4+DRVU2WwLn4avGyarpjFEhXJs8BCBkPeym1G7yHWxJe/ehN4I+M7vAp35tx\r\n+sk5y1ep000N98k7nPYZop2EAh5fpcknUkCdjwsp0T+owCum/byzPbZP4u1v\r\nNh6buqt/0AOjdd+yczfuxFz97yevNxrn/x/lQhwSyZ0oCPq9GACiyECBz4nb\r\nLL/ljnzEq6b3L5X0rGkP53umkXQCOKcSnBMluik//zz8l3GNKXqgzoaVg643\r\nx9VFYU4DssWVML2nGiZm+MaumVtXsAKjNV0KmgE74uA7sP4D40KMnMlPGQQM\r\nObimaKzG4JKSRHvnXpusCMRSqyOAf6CB/v8mQSjmBKxXh8bGSJsqtdy4heoW\r\nC3fVg5nwQV2CQ2T4rKHl4/cDvOHpbyTi0S0=\r\n=cvK+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/tokens":"15.0.0-canary.94ad8d986.0","@material/density":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/focus-ring":"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/switch_15.0.0-canary.94ad8d986.0_1671478085419_0.8141603190849669","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/switch","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.604264203.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f3ad541474ec8bf16aeb361a41f4d91b15c2788","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.604264203.0.tgz","fileCount":58,"integrity":"sha512-JGiwUe8oBRwakg2mR71mdCSPFeqpqR6RZrf+JOk7ti/A3gMrkuJeCDiFT6Q/boqp1Av4kDBr4pgcqYjPQgJm9A==","signatures":[{"sig":"MEUCIQDkmoIMxUym5cpAAPO5ngwAppwySjvA3+gAdkQLnrVKzgIgDliBbJeyjlsIzC5GYdOfXJcN1WpAJqPQKBYvzDNB7KE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo32ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBvA/8CKWvjUvasiv8cxln3lCbSx38gWSP1FeBj4+9gJfRZIZm3CYb\r\nhqY7pF0ThNT75Of+1Yc6UrT18aFdN4QpqbNh5ga2uziZ0W+T8L0DdizrrEHK\r\n0CzbKyGrMSk6i1q4D5nFqID8fC1CHweMfrRod7GHrLVkWTk7thywHwKrTgAv\r\nkwEl2NIA2ha7eZ1Ut2p93tktrbMM4GDGgRmOo1mIWcHa9s3ApaP2EpNHAo1L\r\naSMMo/qVBdsdxm+69fCj1A0p6kwK1slnRfSTt7S7/YRBZIii0Oiwx+q4U74h\r\n20DPZ/ct0k/FfT4fsNEyAAdG63g/gjZW8jmvCqjMAioAktZXkjwrvS0gcwFH\r\nn2JM7OIULfwjRUuvhBa7LNC4WSWL65CNXi26c44H2rSOen46qkhho0t0I6y/\r\nvA0g6KSXxEyGdwWWBsJTt6q40wUhLkwiiq/UJl1QmnS6WVKxM/ZtC0N4Cagg\r\nj1QT8mM+9CwDt2PfYYwB/h70uweIg6ImVFOI3vBpTPCTuOjXf4UsNuCfxnGg\r\n7D0MZdlJ2foW0a5njCh6Hqs3vjMM4E0/GgjRKPePW8SjOq+1nrKQR+Q1coHJ\r\nCGgLe6H+uTdMUU1EuasVN7CnavvIHSl8+E/e5n6DOyh6LDkAzuqFcAatfrfb\r\n6Y5KC3DNdqnHsFnvLOJzP01adeDbfipfAz4=\r\n=AVAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/tokens":"15.0.0-canary.604264203.0","@material/density":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/focus-ring":"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/switch_15.0.0-canary.604264203.0_1671658905447_0.6945344488824081","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/switch","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4811269312f64898aed8bae3dadce7418e5d7834","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.85bcff6af.0.tgz","fileCount":58,"integrity":"sha512-sHPqv4BA1qGDQHbemGqFqECU37yMjDyhMcON5glzQeO7B3oPccwzYg5zqzW1+Pa190B6X5/gOmEqo0CVSnN2VA==","signatures":[{"sig":"MEUCIQD8VmVviOM+i/zR1qqNE5f/CHDCb806TTdaYDDoQlL+pAIgJ75vR+UR46G4vb5OswcufwZ5udcVeSG7yL5ZGLjehb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDDbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY/A/9HGFnDT8jl2ScqMNkU3CTX638aJTIVLooXp1GGr9M3vb4ldPX\r\nGp7X1ba+MOTPoVeeGfC2bySMFscjUE+DQsJIqMuMBWVqR+SriaahwcDVgSFz\r\nRdGU2gV6ZI7AdL3i+WvwOEhjLWMkLCCBYy2H7GM/y09usP6/VmqPDhjKmBb3\r\nvMn7lU0R4BM55hx6xkWk/ujoDHtrDVbTFDvoptOvFYaddeY72XHG31C9ybDe\r\noijqIoSPai75uIEFR6RqPQLGyh7Q2xaGg5DhdHhoAVJZUZ8ck7aUGYysoPNE\r\ndcJYC5sErtW571MKatLjCYX7N9K5bd0WxKYrFU+jukKSB3KEOezW311RVvmg\r\nZY0C5WnbWyoJ34GE0g17PJhkpd2m0kGOPSmqZpzdCLF4PBfM3KlWwWrgHjbA\r\nngUUp8D6CD0FrzrC/1Gw8CQf06vpGrDF8EOV4o0UvVX9fVsbedG4U2kBM7x7\r\n2umGn3kdTQkVvMXng2YvMb6aDIaWkGMaUMw7CmHp0cfGCHhpJwdsIuLQ3NXT\r\njNqyqWgZV74DqU/CTKp2mtPOn9TJ8xzg6WDnR97CbhMzia6yIhKyX/NpMobk\r\nX6+VvBksJ0yR9x9IgbgF1OAshm3vaiiT2VU+Pbd0pwqhc9EcIEycmBkJYeuz\r\nONMcCVAG8qdX8N9og37ZukubWljdwf15c4U=\r\n=Jvio\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/tokens":"15.0.0-canary.85bcff6af.0","@material/density":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/focus-ring":"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/switch_15.0.0-canary.85bcff6af.0_1671704792312_0.4147049237226428","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/switch","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fc30db027dceee0d6922683cec52c58cf143039","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ece3e8d21.0.tgz","fileCount":58,"integrity":"sha512-G4UtOcjoOcPpLoatc4vK4yJW9eHonGefRg4+1ndc8T/F2AbgrLnZ9Ua0HOZL32VlvwSazdoNamMs8Jbs+mUyfw==","signatures":[{"sig":"MEQCIFCIaoCmV2q5Tq+iJ2d2MyEgeZQR+uC4IOThsX0+3PwFAiAuruG2XYWPIjCJQncgS9w+7SB2T0eLNtSJxzCz7R8Hrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJArACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHexAAi1DBLZX0Katb0INtqZKVIkBpztWqrNHL9e+pkLGELfS31Red\r\nGbgdAV7RiotZxsw2a7NVC6xVsLJT3ETA+VNMQEB5AbuQ7WqlO9WvNEEWKaqR\r\nzT2cHTkF4CZ5v85RZfRp7rtgiZsytHwHB98Wh6ipHW4J1FEicEhQm8cNkixL\r\n5ynkDXaEnFZlhSOwu3+Ecp1ApK51ZB6zY7KZpKnXyVRrl3/iL2D78J6dt0bu\r\nSWccPJB2GvSAZSZh5JAh4iwecCnm8QTAVc/0oNiW78V9vyc6HOXYaa/CfpN7\r\nTXFnnBXp+mpgJ2Vc/BRXffW1oEfUp4MC/s9KkoCnpMkG2J5CpEzgmsDYwf/4\r\ncqJ5pd/+3yk9GvrjulS9EJ6nRSfig58uWmB1b5IZFTL//jFn4nH3kSN0i7ve\r\nW7NVobZChCMgvs/ajV+wcmUDzHFixboLVe2tLtpEvAWO2tyEggvIe5pD1HuA\r\nj5u83FJsQWqyziuWPkADTXwGhiAFpPLtkv27cyGa2Kv0POef2L/cmAvS5xVP\r\nwcndVel7DBBmQQMQzkwSZk+R4o+VYILkZlP0rAMhjk/8rkCStxiLvwhk9lDG\r\n+fJEie9J5rVohtTqMK8SqzkQEG1OydIOy/1c1szCDofN/4WwOBlQ+fOW3iUa\r\nnPZ7Ezg2q15/+NAqc9I1oqkE+gbiTum9O/U=\r\n=3ZSx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/tokens":"15.0.0-canary.ece3e8d21.0","@material/density":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/focus-ring":"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/switch_15.0.0-canary.ece3e8d21.0_1671729194921_0.17006798157438063","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/switch","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"435d8d3264cc932094fd175639ab2fc94e5847b1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.278ad53d1.0.tgz","fileCount":58,"integrity":"sha512-n+bXSlTeDOJhE3niLbAr8dC7cGWCGMdvxxkA6YftDE+Q90TnMEaYnIIFQse5nYrs7hl014eFc3SarCf5uodJnw==","signatures":[{"sig":"MEUCIFNoT+x7Lh2AP93cTtCmGkQdzXqza3khcyKNh+ySikEMAiEA2R/SPWvuMJu8bs8E3MenTLuo9SWeGKPLwtarKiaY/u8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqlhAAiex4/ykz4+t1ohtTZkjfDcKfuvdA+H7Mb631V9Mxn3S2Jlsb\r\nZpq/Tsp25T0oG/FHXSyMyiDa3VzypVQij/ggCXbSMQofnDELobLfiNqx98j/\r\nyqwJ0dgWsLZoGLYRvjWsqkebWFb9bgv+5sEqA1tZ6UtMG9vhkJEyNVzeAlbv\r\n92cTuM2MGbDs6eFtrw9v6O6zfhZSJj9r/IRy3gn7otXJzwqoLe7bNvxHlZP2\r\nwFvmXgQxVOoWglNt/Ds2gjaocLiFJgOwqs2naBaOCWlQTl8o9iuE664JCpON\r\nOril31q0fExrAJkTYjiRsOuuPscnyEkTXpTa7TZuyTMr7hCimS5PHvaiEI1g\r\nvcPZxbUBurukN4hB4+QEnDYTx9mE5MVm64aTcxCVAJ3GYsVWPs/KnojJirpg\r\nWAKrNet254fnX3u+BtyTxoQyZpD9vynu0CUTwEQw01o7097+IiXRyJOfbcc8\r\nZ/HLDqrMmH6IA2cLLReuaKvbS53/p+hYERZi60BpRMAlwcv4E+ehRY6/0lRP\r\nNAxvYv36xns89uHh89KbdD0jD1iDN8BeWNeBwn5BJJNA4fuH1eVc7Qbl7jzr\r\nH1CfALlWnrJK3zqWkgANtmRu3Eu9QZnuS+gFIUCyz6B82yXJlfXvp+vSpN31\r\nxhTE6fPP+sSct1YU1z2hhM4AWNWwJnexM+M=\r\n=9XsG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/tokens":"15.0.0-canary.278ad53d1.0","@material/density":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/focus-ring":"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/switch_15.0.0-canary.278ad53d1.0_1672160767774_0.6176303773682446","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/switch","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ee4c6ee6b7ab1ef4b4e57ed63d561a9170b1127","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a7d8389e1.0.tgz","fileCount":58,"integrity":"sha512-FKsNJUC/f0RnAmj6+HCcqrmvA/hobBymfYsyaHwC7paLtEJ/lq6IsOtMjTzIuKKl2b6nENx3W8agGuOTZHWPRg==","signatures":[{"sig":"MEUCIBvTEycTlmt++11Nlfx2H3ObWz+YxqZUtK4ZW46+/6BAAiEAtGygrTQeg7+TbXfzVrOn0M4Q2vfvBqDEE3JrrDwTjFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0HYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJgBAAjZ+92uzIrqOjyQ8Ntc4FujmLDiChKthw6pDz9ofik8Jfd8ZG\r\nuvN1ZgWEnAMYhQ5Xwegzlmej6rZ8+YCgUFdybR40gr2S0hIFl6SbbsDbF04o\r\nlunFU8dqCRwEYBg6NB4ZdL7EKqfKLMpetjNIYkckbhGTwhMsFJ+Ge79mA9T+\r\nWtLykKjSVlte1lEsK0y34zFYLRKImftE+w50f73iETvykMD09k5I0iyXPYZB\r\nws7AuBd6SQu3+FmG+DygsG/FPN8CdV/twNolFmJ+iQky4DixIltcREnhRCGb\r\ncnOCVEs1qHBE6aCGpcN/2yGfbVB926XRYZI9zACx/JRTukEAB/mQy4KnenW/\r\n80Yspiu431nFJitNqE9SpoqJCS5drLWK4bYD1S6YZ96OC+h76fwGgLnzYgRE\r\n6ykNEThfAZLAgTXcQzaeRN+7ex4noXo5faoWZTWVzWH+3tMNU5TSrBNpdpPw\r\neFyrKyKGS0KiQKuuXbSs7raDt7osEGmGSxlilO8DV2YEu6wjChomtadDfqJe\r\nGfnmoTcJYIHiODCKsLBA1TzqJnI2TEc4kaUFJgKWBBvw5SmxtS0/t+dTWQUI\r\nTkUzqCp0TjvO+Iznm/diKVFCOen8jujjESAOySubp6DpH9uNuxGVT7d8+WUZ\r\njCZ1fRxwpXLm/IGSqF3UpDsMXdXKQzk32yY=\r\n=aDv8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/tokens":"15.0.0-canary.a7d8389e1.0","@material/density":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/focus-ring":"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/switch_15.0.0-canary.a7d8389e1.0_1672167896438_0.4394594579490816","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/switch","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a18a16f7235e9298ce7e36c4f4abcc010c5500d1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8175d5eff.0.tgz","fileCount":58,"integrity":"sha512-mTW77jz5XGVPzjxZLQl93vxUKy33c0l2mX7S0gvz80AnCEFhBZxUxYZLSuMvQ8ZLu9LDLWqdF1pXUrRhTwicGQ==","signatures":[{"sig":"MEUCIQCkfteMDe2hwpCddrzr4MgRwaD7Ny9ksc+Xm1emz5u3CQIgaezrO0H2EFGesTt+gHKMKYdmXOb0nH+/WTN+RVk41Lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1067334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6FnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoyhw/+JMLB7BocMf7Wl9DEqX5mt9Aay6fFid97u/55a/uhHebGWZX0\r\nohKcRGg1tOOxaOOqJWPLu7A63/qOHfkRZoGtarHdz9T/GMGL38sio1EVQRme\r\nAswLk5ozcm21Fig6zgiGar2+htISA/zSt0403tzEp/3jGfiyukDdepdGeLV0\r\n8tYfgQcB7EzeoZDfJKEyhW3z+g87UpUha0o9uqX3IukW/3hBaTBS6DE4xkW9\r\nhtEC/KQNJanGOmEdsYx1iIlcXEZwXlBxjq3f5DcK68GNPW4DexmGOBQkGMQT\r\nlsIIsLe337ACbbsiuHgzFMkyXYXkhEgrfAvmrW3zlmYfNsMMEdCFdyJKk+T4\r\nQyxspcUlkRLa3pWdaIxtVs/1cZ8bigtIqXpqa+5pztyP7OLYE3+ZVWMCRm2T\r\n1l9tYUARpmeudimRbTXR7IySwzd1xCbd+fJiDZjRakkUXbT9Zd3TP6BJHaXv\r\n+mDri/9/zb353pJFm+FDiiyikXV2wnkE+eZ1n3+syd7xjdufEfNp1maeDSRM\r\n/fqAeB2MK78NyOmzteS8ZU/FGNMUmSOH0xOznJtlLYPCohZ3CCd9gyuC3uaU\r\nsgCBvTO9hCg0ZnC++aa+Y4ceSIepUcWPyxCxbERAbASPSKymrXP1ku8Zj2Rv\r\n72gjglE9ymd97L9qLeAKWy4Je1g8hqjwXl0=\r\n=pN5I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/tokens":"15.0.0-canary.8175d5eff.0","@material/density":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/focus-ring":"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/switch_15.0.0-canary.8175d5eff.0_1672192359356_0.5262416277658446","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/switch","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feb0564ce2d533cdb67368c74c34cfeb00090a0d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e21dcb86d.0.tgz","fileCount":58,"integrity":"sha512-7x47nTMIFl9srjttNEkq4uPl+ZV5dJZ6ikxSYGmrBlwKoFgiDevSMRpCNt4dYoh6k4+lGDQtwwlPoRzTXX5Y3A==","signatures":[{"sig":"MEYCIQDskUwVB6GjSwcrgYbYJAyiEg0g2LpaPkvMDQc6LsGIUQIhAOIO+0mn3Nn8tJyKeoDGjjh8l8JFPzFMLS8RZY+i/qb4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1067490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ4fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5wA/+MThcyZn7huLuZ8e4hUhk9UWQcPVaQHgNGG831wicQTnCIefp\r\n5O5HopEIQ80O5V8bNSypzBh9pTgKyxMRcSCLnMfjp1pT72IkWijyuqZZz0HK\r\nK4CVS84kyxzOZ1pOhANTrGw7/mWwEC1W24Z/U3GQaosbLj8n+nxwrIarmaNu\r\nh37EXO4vwYJGRt7u1HgCsiAjTnSarJ28UDa/BmgFraRJN0wBgW2tf3fDkOEj\r\n5nlBjQfGe0iBuOnKHY0vNbwWhAeStOaSgA9bsE7KfNN8S0GZ9WoPweprL8mJ\r\np4Kg6+O7NVBBfz0s6QKqQj+pPtvSOR9oeJSDN7Lh+3MgjeV1aR2mKnrvkdOa\r\n8fOFPQiSCva7C5+jNFESVF9IuAiLzNHplZ4XyusuxnnekdzBCxcnI2ImEKha\r\nrKziQFWJHZLqk5QXnKeMvSB9V4dgsw1iNmIha7F+9Xat7sASCuwbILjx3m8j\r\nTD/UuTko6Luj2wWAbDqDC1J06XifvZScb5pz71H91Vsz7W4mFu396IEmBNpS\r\nT1rB+lDktLmDIezbApPcSVy/BFl8amOV7sNE4YCvriWx9FtJAMpbeNIIOe7J\r\nW9BBjU8i8owJ8vcXrXCDMv4TVUDZwafgRZHyS+zxoRQVu+/J7Tq+qA8oaJoW\r\nFKTiSK8jnCouff2Ys4wnEyh0av6cDjjQ568=\r\n=fPHg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/tokens":"15.0.0-canary.e21dcb86d.0","@material/density":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/focus-ring":"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/switch_15.0.0-canary.e21dcb86d.0_1672322591475_0.9580639992011175","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/switch","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6c47a3776414f6b7db478385edfb8d1ed9178f5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":58,"integrity":"sha512-l5GY7MtbL7CFBvtZisgqcSWTb3yLA3CkkDxvR3usssNK0o2VdVFNDoikq9fo2Oa41nzshvHs4uyE+k28ThaX/w==","signatures":[{"sig":"MEUCIQCQIU+B4naPy8U7a3gn0NfvvKHbI6mDDxWR9hbmx8KQ5QIgTG3zI3M2cRkeK5ukcTE4XX0l2bXpy2jihakieIpwjME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1067490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre2EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3dA/8CrZtbF2kVieYe93RKY+xtaH8yAQ+Vbf4ucGmQIIYNqwvZdjd\r\nZOOA2d+VIq0Nm/Ptf6aXFtzHVHTWJxWuDwSUtiWgxrzvXunUdrhSdvfTWnrR\r\n5oJRLpOZd85XLhnSvOgFQ08MpEK1SSjqhIRHVj0S5usHFE2jzxb5Dud0UZRK\r\nAAvkIbTTUZZIAs6V9AKciVyNcMJ3hy1rGr5LG7hpAbaxZzBTZuBdYgpPkLR8\r\nbRW6eE4sIu0XAC+55idq3ZakH9s7kIhxR2OviRHdv+elJrXLAmxi40k/rNk4\r\nz2LpMVk7D2Pp+okdd14BmzKB0iUjc9blnKGBgEItp32osA1bFtK7xq9BE/ug\r\n8tUIjvGfQ34NDXaXLNnFIF3Sdl0M4PUqOgshaPGeA9SkcDY3eJec3J3i2kYr\r\n+YlpaKYkGTUd3McCYtl9kxwzikDa3waTHUjk0W2ucPCuK8B9xcBX4GhZBZGQ\r\nZs7+zmta6PdiiIyuc8LkEb1VkiV/94qJexOyHKnkwGbz7r3NSX/LvMv0tWsR\r\nSmnZRe29Yax9clKwy4dI6LC4U5E6qX0gq1r48FX4iZB/fh18UuNMbxhWpLAR\r\ntmFZZCjtx40M2JI3j8iRSEsVpgsPQLnSQryWF+vBfIEn2RTSQjx9mBNvw62L\r\nNPIzyXHmkLhlxc3H3FjCEatFL+41pQk5pRA=\r\n=SHh/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/tokens":"15.0.0-canary.20ab6f5a8.0","@material/density":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/focus-ring":"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/switch_15.0.0-canary.20ab6f5a8.0_1672342916603_0.8535756119803688","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/switch","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b9806f623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06a41b5ba26f377aabc3f23b190746c1c28b8149","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b9806f623.0.tgz","fileCount":58,"integrity":"sha512-aphSDur+ALCLba3HG/vUEaMkUifo5Ea56nKT9Kb0B+gwbIjDED+XWXXW3MdjyGMbRRjY7+iuJUJoYGbUBctHzA==","signatures":[{"sig":"MEQCIGnJJahs7tycsSB9y+7VjegAoT6cJG87q1i7MKsGWZQwAiBU6ThupiXLt3wintL6SbFHTKmz23S5JDFwbYWef+0E2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1068429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh2UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozuQ/9HXbjj7IwZPOmn4wf/T822heS55OILxUYmyX0JWLZGisfDTnB\r\nerwq0j4m8Bs6H+CbqRI2CAPEsKLjnt1jcQxdk0QugvMDbiRXbjknGZc0Eovr\r\nVZ/EEz9kF04v2xDH+yRucPh824/aAjjRNSJVKhPuX1Pdv/Sp91/vJdF00twZ\r\nw0QzJmw8PlM4mifIWSraKSQEAlGm1actbaFmDkzKZ8Z975VgZ4TEzgCpiIXK\r\nfKZLfj9TsazECJb/FzwpFbM4QD5VqpPstPwwcASIVZLGhKU5dWWQONPHppMT\r\n1yqe6WH7cxH978weVKWCc5LF8mA0c51CxmlynBZa1Hf7ok257exhaPwQ4F5s\r\n6DyrQ/PJ4QH2zBLm/u+ReXc4W4jeluBkzDd3mWYmgFsqeWSiJkGVy9rpb/w7\r\nwb5zKr2vh2sDtlgom6ldErUZNSmZZ/6mzIdVDJ59jSw2F+8zakc9ER3dbVnT\r\nNp/JNIC5FUdHtDlekQ8DUMIycZa5WVzoME470UUsurH+ikPX2w5bjB9mfx1/\r\nrzgyz1AAN20O7Bi2sengtpL5rjz7tKu1SNH4kjL9Z1TK6rvCEDff1QeqvCHt\r\nvG6AcvsIuTX09f3Vy/g1/TfpXHPR39mduZcZHt+FWJsDWVioIYEurMR6QEh1\r\n7JQSmGq0yjxR8fckjbhh8Jd8wRDBPTgBA34=\r\n=Klz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/tokens":"15.0.0-canary.b9806f623.0","@material/density":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/focus-ring":"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/switch_15.0.0-canary.b9806f623.0_1672355220153_0.5443665154888198","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/switch","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c46d05c721ac1d7c958e16270758c7435b986b42","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.50c9f550e.0.tgz","fileCount":58,"integrity":"sha512-VSXlMIx4LSf3kx3zQlgupgCMPEqxbMNIVzSYqy4XkG19NXzUvUR0fBOIDUPu2bdtKq25sxFdNy8JG8+I9kFo+A==","signatures":[{"sig":"MEUCIQCughbt0a6wOubo+enkYxzK/j5TCEzX2gCyNs33v0MvmAIgd9pIhnCrufgG6UsUO1i2jVlddm117tenRJImRHULvmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1068429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE5YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvxg/9EBHgp5j8Yw1cWIkIYmFTXhYgEe0P11bT751hhaCFDFtTNUdM\r\nX++v6L/5S6bvNONF1PQcwdfFDagskTTQfgAFIAxePvZDLjHb5EdM7JXdepa/\r\nD+WEbtc2G7+KweCwZrPEIGHZdDC7qmi+jIQamyp3shAwShTyUrTOZbDPpZFH\r\nj7bdXh1KzOXll/yfqUvnIPYSiqCO1mv8LTSvvvjylqGYCYhC6KSPHoS35Ja/\r\n8VrIuslkxKcMbzWLZdNlxpnlhtizjDmFrlJduvpafoOQabpnmgUdup0/BrfA\r\nOJH/QPr/hmALISInksjk2+rXujfz0ltPUzqxpyEQMLYf1NjwK8/GqRt18cw4\r\nPXoyPcPO6Gy2vzf7daUtbLzM8TyBaQ8d8LnCw7VimyJbn6WC8h2gud1fhwVx\r\njZSz1D1Ub9d3Qew699/PEePglgB/R8cf9MMwNtg4mA4e9BmvLgjSbObqYHC3\r\nh/omyrMEjW4r/8ILEEDjA2mSOG7IEZJOHvFui+QX0SunejjL5OzTafTeLHdI\r\nJR6n/r/MszTZVHTwfoBZSm0Rxc4VhYdbvLfneTztJxBG2hHkouz4nQU/aiaZ\r\nY9zYIj0UCvA/h1rAK+wuvNBmG4PBLAoZQc281FPTEaT0iZgcynyPtiVIqwd1\r\nmQU2lkoHWBziV+K/eJvmtx3+jwdOfa/hK+8=\r\n=mGs8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/tokens":"15.0.0-canary.50c9f550e.0","@material/density":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/focus-ring":"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/switch_15.0.0-canary.50c9f550e.0_1672760920142_0.3652231225058302","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/switch","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.af490a848.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63e3c8597716d5b5ecd478f1f9f2b9917eecdfe1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.af490a848.0.tgz","fileCount":58,"integrity":"sha512-SzKS+mvSg866xS9fSRGRR/z8BmVaBCW1oDhasLbbmtJ2pwdt4uHmzeSgi15FCUydwqQufm0U9MrpDbEdPGrSag==","signatures":[{"sig":"MEUCIQCDZY+VYqgvy33s2H1/fvPJW+ot/7DuufCGMC+Plf5v8QIgVM+CV4Oqdrhd+jPemqWq/NBIeKruH2Ae0PueJ7xacMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1068429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFCuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGvg/+JtJqQ1OS3qEhvisVyyrrJtLuAd8Q4nrTTg2TPqwnHcm3Ziqu\r\nnQTWoIr4HiUTGkvwbP8fS5ohmq8KT79lIcY6+oM5dS8qtx5OI/HYugXWgLCb\r\nxXUXVDrykYAjPXOiCu7k490BW6srKIQKooZ5JpEn3ZwwqcW3x+kVLRDMndE8\r\ncZNaDqKI6WTPnupulKHSxd6QP8FZveYwOiKQF3V/Q4qALR9eF5eFcgMERTQa\r\n/gAzWANV0Z+ZNebopMNhdmrWBi6yQ6hG4Qv1Ta/xqApeuNEr4AFh1Sr/2/lu\r\nOJIy1VfOSou9bHJQkM6jpbyw2xMRtiUtVpHT6fFb0ahtKivUzltORrRVnFkV\r\nuiDYvTSDTuYINRAf/mp1WSPjvVu86lHl+P/Qycrrx8Z4vITflPUDeuTI82aa\r\nbVUvOLPqYLduRZLN+lVPMQIk9xQk2mQBYb7YqMt4qn+mO9fmadMoiavy5kSz\r\nPdRJ9REIDwCarYqYZMfgLKpxOXBL7PDmukhUJkm6grXiq2wvS430Sjtge4V6\r\nKYnIEmkYGvCLpBfyVT654W39ub6YWaXqhL1XHMQiLwodAtTIa/dvS8AAynBI\r\nwFwJ0FwAzLnlK4ch5OGD9cnG1i7omI+3QpGfNf7ZFrJhbZiLD8nJ31rmzBGk\r\ntYGiNN1C/Y3EEHW8kYWLoZuFKeV1RvwWS9U=\r\n=P54y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/tokens":"15.0.0-canary.af490a848.0","@material/density":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/focus-ring":"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/switch_15.0.0-canary.af490a848.0_1672761517878_0.2898211118184346","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/switch","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5175c7335f4e0bf1f44ad81613e86690587584dc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7cf487c98.0.tgz","fileCount":58,"integrity":"sha512-gh64cr8J7asUhH5R7F+fwQLg7PHVNYdOEK83nxdUze+8MqeNr1+MhabFuoVPWKMZP6kSTvs4tJSnbFwHOag6FA==","signatures":[{"sig":"MEYCIQCM2XLsVx553oVOWnuchADh/Hndg1zkeD+WwYrw0sGiggIhAMsZhaCgTVMjZw8kxfBCjhgi9UMZ/HONZK9Enfs2KRcf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1068429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGhiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1AA//YA4zax5p2mDel7B5x3vWvyJw6xSqU3I3LacTtXaBGCw+mtqL\r\ng68pIWYTNTmHY3A/ZIzj/90FextnWw21NXn4DTvAyndqToJRFU+0IGWp/xXl\r\nZHICQYXpFLV3Xj+v+lZHvgwGfuLTatKlrTI4vR2HnV4HvON+TlzTWeRr6PWI\r\n04y2gCEJ8v7ZRUUCj+y9OeAwIwK70EEMiOfz9NJf/+IBlMVSswQgn9AvCho+\r\nHW2HR5E/6DdDyuEnmmDInfJRTgOfiYz+5XXnGh1p10Q+qWTOlrFBSzWVQoP+\r\nmS0gM57ZQdqhyAa0RtWXsRscSw1MvmlY/kBJI21GKUTHie7hP3J+MdWDQ8R3\r\nt1vaYTMtRFojScYkMf0f+ivYjNHYBiCmAxms0fYVwUlLOC/ewczt7q+jBYd1\r\nc/vLAOPCuJBhfF9unpOKPSU1FD9guol/9KAU8I0DM90RRBGHjh6NltA73kdP\r\nKZKe1ZWZrb2kdDH0FsH1E8D+hX2nw9/cmBraJgElvR0GT/jgonZ0NAT9wEWC\r\ndc28B5AWfz8fHFcbkmg/fgr2UlkpXk+uLpisND6hTie/b1uvifKZLU9J27vg\r\n/s5J3hai3RjsgO/jEQ89jrhYmHgto8ZyBUnehu7xHoGpBDCCGRTDJZt+xziT\r\nl/K6LvAGRIaqY2+bHwv6JdPa+R/YmYFd1ck=\r\n=RsoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/tokens":"15.0.0-canary.7cf487c98.0","@material/density":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/focus-ring":"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/switch_15.0.0-canary.7cf487c98.0_1672767586503_0.1759208129314498","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/switch","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66708e2df2fb33dea426c70409d03025f7bc8d64","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a52be2d5e.0.tgz","fileCount":58,"integrity":"sha512-wajzrYZPNIk2+m8qspZYkI3+qDHBg1AT9YosDLX3QxOeWEGcWVVVuVkgdWDyRB7zW1Po5KsRZ6387FX5FbxSkw==","signatures":[{"sig":"MEUCIH5BItrW5YMVrKJDpiuR8Lgr/ALToQ1xiuJuoA3JvyiPAiEAqOB/zQ3SIno9MUKih+83dwaC1W5tuqVqJX/u++jsOkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRsg/8DvVVEddC5fu1UOrfSrLeoFpkC3SqAcNVTjzk5D2O4BqsYPNm\r\nCcAtl9SPTOcPQvZ5LdXS4DXZkA6TP8F3Cq/KcIYSu16dB1c1aTeZWhS3FF+x\r\nQWUHNvurA11W+d5CCBXaQ7MlznYfkOu/YOdU6/ZNLzejMnbKjo5skF5QiUKU\r\nHO77+3GGVp4Oe4LuLSGijLbcrydIGi9HEQc152aFNOss76PsZ4rAW/y68DzF\r\n4La+6eUb628JIFN6kAq26Go6LYZCiZb1BgltzXcKykfwEUlWpsSFOUwDVQ3K\r\nYML9F0i+t49iG2sAz2+Q3UoS8VpZ9Y+Lnm7JTnKegOVLbNIcK/0Blx0/QEYQ\r\n4hiM2nrwplkKbM01CBaPVg7LPfmot9LV+xCWtIbinnXotIamBzjB+weZ/9GY\r\nfEqIZBRYXfdhseqcew6wZ9LTCfc57l0vkEKXX8NHU5dSvn/fgMBz54Psx528\r\nKOYqlMSOwR/OgL0hOOuzc57OarTaMLueD212cT1PyfXTDUusjGhN8zRiqMz1\r\nBCbzyD7Rv4M5Vw0rvXLuUhlLNsSQlpFDdcnPs9rzMr9ukb/wSRTZSUPnxgY5\r\nKqnGd/7fKqGMl1tP4Tmok623w0P0tMkMguKhmeIyHzbEiMiz3PQhE8CZCZlA\r\nqSxI21yZhgLyg9IA4sFY+XIFo+RdIzXJtVY=\r\n=yNiw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/tokens":"15.0.0-canary.a52be2d5e.0","@material/density":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/focus-ring":"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/switch_15.0.0-canary.a52be2d5e.0_1672773247374_0.4144452479032148","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/switch","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0757dd9279f2eb04ad74f1b7f68f506e3759416","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e38ba17c5.0.tgz","fileCount":58,"integrity":"sha512-PfrLDA9yYTsodbsm8hH0paEU2SIUkNJ6HTGXyihGWWZbLgKsmXnwjHIhHRF4h3dbQWnLvNAox/e6Bh7joIWzJg==","signatures":[{"sig":"MEQCIAdf3erfAdPsZFBULiz3P8yafZ9C/ZpEtyeJU7wheOXuAiBCWkxxvOzZ5/i7N0nipXOZjZLp/x37y20ag1PZMxYDcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpx2w//bF12BP8ljIGYJ7fMWXva75ORHjaMfYw8OuAKx1Ew8n/UAKAE\r\njo84s1cLQ/PI0A5fwrjc8ChN8p/32+VNZ1+eHWAxHtrTi1kLyP1J+yt4dYd1\r\nXK9iJ8lmR863KPaKwo54wZxjMObsVvIDiWGBvpUesUe3SYndsz2JpQaxW6fD\r\nGC9NqY5J9gUQaZBUiuw2pC9k9x/Gew2u1c1JXDbdA4ePXuBIs/m0Nc/3v0DI\r\nFimzacpix7csCEb1aqkbHfiodE8kG2L4nEgMgRyU1+Bj2c5vCT0k8TiWZBH8\r\ni4misXbmGzn9RZSGGQmnqdrf1wkoeZJ9POSEQ/yqQyvIAmOa8V+gCFmVxSnn\r\nDgoBfahE69Fhb0zcaPwRs7VWEf5GVNpR95Q/kVw1ng8/fIzeHu0XYjQgZWMa\r\ngLck1nAsDuMSQ7WB4RZOpa/y6jOy7RGxG2ukiHtphIFN19BzK4BOv7LWCOEq\r\nEkme2gMkdBJKmtavEafQWrBScfjoNXeggF8gcV5cepCQymAJn8xW7LX/sN8k\r\naqghaNfra1eoA29qDYegGMVTPF+lVi9WZLJnpiHEWUDK5lGqkBjLjzb66FP+\r\n08XPKjzRg8S33/6b1aDHHQO9ayy4WjumKdkof1f2OoiYa/eHCu9lge5KUfUm\r\n9OrBfvxI32NcxYCKiMLvNOeqsAPGgZqWTs0=\r\n=4Weg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/tokens":"15.0.0-canary.e38ba17c5.0","@material/density":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/focus-ring":"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/switch_15.0.0-canary.e38ba17c5.0_1672785214856_0.6137490165542965","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/switch","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afdce42d13424d940558c334a679d104b2ad1df5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.49041a6c3.0.tgz","fileCount":58,"integrity":"sha512-R4Vr7KMf6S9XxzlaX1orWVKWxiS325JFqv+HPJWPEq6304J8NS17U+/Uwl5KELit5sEGRKCB0vkIZ69cNlFwvw==","signatures":[{"sig":"MEQCICAJx7ZwCmbU5R/D6hv/UIvf6nGIcXUJBLUkfwf2w+pBAiB/8TV05heyxtNUm1g21lAiI0scVuL/oM+jpK059rVAKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZjaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAQQ//T70fr1SfZ9H0rqq5SrTkLSOsxXAAVsGpcGpIPAgoxa/G4gjt\r\nXpFTTnZRaBzJvj8JDLkry+FX8TC2yMoKcqj1+vM65r0ERNntsV7f5Tc4B4JW\r\nsl1yhw9QjG7Y5567DvmAubRKLVJ9tMMtvWWxbGr+INK1aemHDpRfzK+7i8OD\r\nq0VhG8X/F0P74Gqx0GIU20nsuXziDzSDcz275tPbr3qD/wv+A42zEc+AcFK7\r\n+t0uEp5CugQH2ZGvI7ZAw4Zd5q/sc1KoiqMSxa3gKV5HkvXtVHI+IDSXPk27\r\nB3DzfVBXpYnT+07qgmv4Uss+UMff9vJsAzMJmQg8O8oiAx34UkVoasNrdBvf\r\nPPRmkRFDg3M+RA0ACFp/uwJcxaTdVw17LEhzNSPKvBPezsBYf8stqA2ahq20\r\nJlU3T4Llv/7jRQu+y/gmcpx0Z8k9XaTrGNtGfgSpu6DugZlE6vHcb7VgBNcv\r\neeSLzwuW4OCkfeykigB4UZ0fuEfmqOYTLjf6zlGBwaYOLay4f1T4TqNdNaVF\r\nQdQbEfToPvh7Cu/mOjM6PF5MHm/VpaWoLggQZFgQdhZPQoTJxdOoaI+NmKSg\r\nt7eYSOrha0Ev+cj/NOZVXAC5quHVgxnpGocGz9jRZvKBUSgOt0Inm4KHCBDr\r\nZmFYjAJb13l5BYCeagSsiqNqSTKatyEXyWo=\r\n=DEkg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/tokens":"15.0.0-canary.49041a6c3.0","@material/density":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/focus-ring":"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/switch_15.0.0-canary.49041a6c3.0_1672845530380_0.5833399494131806","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/switch","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c492898c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54e2eb2a47402e2b1dcdd89cdc39ded3d95dde4c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c492898c2.0.tgz","fileCount":58,"integrity":"sha512-Br+NZIGdA/dMNUqD6lS7qi8sjywhyx1Swbo2NOX3MzB1FFb9LCysbPf0ee7V8+ny8rrO+F3DLGVDFI5PWnqJwA==","signatures":[{"sig":"MEUCIQC1CgSurgo0uBEXYPUQG5xzgvPsy07QZt1n7KrJxHuaJQIgVkhBImTtfANGZBiQnVWHlZCk4kaT6/f/U3f+1r5/YcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbmbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqNBAAo0jnPgIGciCDX+Ciw2E16xV/jAmNGctKpKInnqzMVc+iW7LC\r\nQqKAiyA/yWNPKYZiDkDzATM+ApcubF0rf355lryV8/Fy69fKT9VNf7sBifkW\r\nankMq/Ip7cI9xo1seXRFvTPrT5ePTcxtlJw7Ofchcg6R2Tspk+fbQ+yCiqug\r\nLtNFMf2sb6AOETANFcvV8ELl9zVeoJh/fWGzJgMwQZch2FKPG1j5mKZCiVxn\r\n3rwKyoVr7DHH1d9rhF2n3LUOC0IdTsiTlhNG2DPpwwougpGHt2mBmRSkuPoI\r\nS3TTZZCGYkq9xx8qSgdj7s4fMHRcDeZcOO0LVAfbYQID6IOaZbZd0id9bjsX\r\nMJNlMxoUYyl6sXXgCfo5bsIK0FUTBYu+weZ/neS7Ph9/hrpvnZknDH8mDEOd\r\nW7UvtF8G+qO14/9WqI0/p9f65IJMylWIpxN3BUaufbsiGExyre6UDxckjtn5\r\nrJ1OQEhfvR+7Hd0Lx8ynv6cOWvz6Hh4967xdhP/flotEL+0//UPTZm7VegOX\r\n8x7njwGOHfJEkUa0O9TorFlF3qDGUPJFLcyl/7mdj8LKXKewxRnjIkmr5JsI\r\nAmTTwsi0QwfEX7g0qh9EFN6nC4wgtmTYfr5pkOQFQAl4eexeNaaZJ7svX/5N\r\nO4U6Itkah4eVNtRuB63S/DVKk/VqYxORxIo=\r\n=00o7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/tokens":"15.0.0-canary.c492898c2.0","@material/density":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/focus-ring":"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/switch_15.0.0-canary.c492898c2.0_1672853915591_0.7061079684377718","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/switch","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5f7109c6c8e86316654355149106f2dfd6d75ec","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d7a2277de.0.tgz","fileCount":58,"integrity":"sha512-/6K4TAnBWtpSlVqhX/EGeVfOdLpEl9htkOJhxywINPlrzZNwhoUhxMgEXklBEs4yJKKcu7LHngYXMWAITeSP9Q==","signatures":[{"sig":"MEQCIDZYUHUwuLe9AobRUCXDpfwThkBKOxQuHm4TcgNQQZMGAiBubJuVYCZ1zpefggl5u1VH8TKShGwtDGP6dgZ5btyoCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfFqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmGQ/+N0h6gByebkBungxegYsoVhM2wM9Wa2sK879RbKuTTJzhDa3O\r\n9N33He+NfRAaIcRSXd+mfeAi1HKgMD31qrxB+46KUMow1zMyVtUk7CPgJ0k9\r\nepkDELd2aRbvUf9j184VUsQ3qcc5w8QYEx3hEyCLAU9fwtrIrG0FgFb3lcXJ\r\ndVy6JI6zidBWzZ+8opEDuM9oa8a3fx6rUjOXOZOTUrRGlzDZUYnV3AFQGilR\r\nAiBGX+3qgeXQdSmXcxEJqgLXXDe0eZgviguFdVH2GP6SYCqvSrZU0kCcbTK3\r\nyro7yTLspsV8GJWkv8nH+EzMIjuo1MOnpOZOIVFNUVNYPr0M3CUVVXs5JQ4w\r\nrW7RtfCzBn2jm/OqxcxOOA035gNVuPZKlWdTgHaHlwjFLrZ+kiuNZZ4F1A0Z\r\ndRJm0FhqzWb6YLRIiNZm27VjAKPHpHOdm6vSGPiuLK315vDqJalBpZMeEpLK\r\nexdEPSvk96GiiNjVRr2HS6HqxliLxBHOgb4zO9UVrEg14fEbEB7jvuUc+YDD\r\nw5+q9cF4RykclnWWOS8tVjYTJxB829fTsa8nMXgTW2wS9MnwVs/mB9wQGm6+\r\nJDiM2qe3dprCgcPL7m5DzSiwLlRAz+kivoGsYAyLfXI090SzUrAdHg2YG7yo\r\n+miCg8+XxL4yDfeQRkEhxe5htksEFW4syjY=\r\n=dMzx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/tokens":"15.0.0-canary.d7a2277de.0","@material/density":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/focus-ring":"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/switch_15.0.0-canary.d7a2277de.0_1672868202393_0.5702171584080002","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/switch","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f8c4429df51e01dbb261a118a0467e842b0132c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":58,"integrity":"sha512-skiw+HbrUh9qh1x8Jl1hNdmzqwPKzHnvJayHC7o6M4HXpIkcBFtvYrUXUc5/XQ9cqd2Nyh7i74aDGlp47fa5fQ==","signatures":[{"sig":"MEUCIQDnMlU5h691oD+7JIoHVXaP863bgmpztQGvmO+ZZcstXwIgZdSq8cOaOkP72+cqnzriPA0whNcGBnv3OWTSiYh4F9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiH2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDtg/9ErouQDccoZUfwcloiWnU3FUDZYqdtLx/OozIUSrYgrEYyrL8\r\nUPSyUafkQdWAH0J6YmVWIk+VSk8d27l39GIY046ccBifURjmjh0uKz9sMIvW\r\nIVf3FFD7SZ0yCj5liWJx/D1RDzQ7y4BdYVap0pSuVqRZk3Uz5vQ3njJn931p\r\noZGf+Jvae2oXC9VMaAG6B6uicF8EqCXbkjp/3oMj0Lr0fzSRWKcU0zSSux6i\r\noEIoHEwoIxbuZ7f0MH876HirQWOXbRUyReqeb2ZCqFmm4rcnDd2OSY566jUP\r\n7RDWRElJH3s2rvA7VlI5Ed0ka8T/T/sphqJrcbhagNOkpxJRSyu9uIw2eTBt\r\n/yLApAGjZ3HxV1vG+1Fnwgiqktgw8V4aMwNv+xGdFI7XKbY4tjYu4iEJ3hzU\r\n7xMIhnBjw6zSZe6JiR0FMiy5ma56BR5Kv8jofbCBpiKzujcoV4Y9tqzvHLWd\r\niwWMstEknTvMDXHIGjAZx9pnfo5HpSJW/PRXlR1ft1gtpIpb/qNn7jc/CVAN\r\nz3AbADyNeuALVvLmDmgakDbCgjRKFLDUa8DkX0E+b2Ik/uRiKUeqBrSVrDfE\r\nX2YPFhjJ5ZD1tmUu1LMOZPTrXSo54VPlC5IcTuCaZztZPF9hL1p38FIq8ifF\r\nqIL5SclKWMi/NPXuZ4rb/Kbs73pxbtf5/Rc=\r\n=eUEQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/tokens":"15.0.0-canary.fd95ca7ef.0","@material/density":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/focus-ring":"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/switch_15.0.0-canary.fd95ca7ef.0_1672880630270_0.6171067460782018","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/switch","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd3088baf31f4e762f9315869680ddb949aff88","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1eb44faf9.0.tgz","fileCount":58,"integrity":"sha512-ciq4bt4jjbdtoFIgjRsESXRHIaDfyQlT3t9ybINTH6YTlH/ug7slV6/Vy2IPj0mArbVpeuv0d1rfdapJTtszTg==","signatures":[{"sig":"MEUCIQCcSlFiCGgPSAExstH6Ke7SCa4nY0n77tYHBID8LNaUZAIgOmKDKw4IkF+GW4eftP2qrUEroaNAUGTVrkcsvEl48BI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpP9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBxA//fLQC9v6xtDd6bilmiElIUS8TXebBy2gm8IzLQGHG2sBcNzyV\r\nHEjD+avauR+I7GCex1NlwENo/M8RG3Or0s5+E4bCJ37TklKv+rgpTivpil7e\r\nH6uzrhkrUIQkdH4hRPQ0jv73yGljqxSdI2CrgHbfcKZc1X878hHPvahFwHZ/\r\nNu8apR/utr5A/+dTuBs6AxZCR5CfrlBxXll3T5ATideiTYoY0L89i20t7Gn1\r\nLK2AepXumlfXYbA+Fh8LXtusgZNh/2qxTn7T2zTyZkEe84kp2FtJnud/EgI8\r\nvX/zsQZ9nk9j7HCrfpzgiZJZhmBCAKBcEkXNgX2kvqciBB3cQ2B26aw1GBmF\r\n27GlbVqHcpc5Oa3bSMw6rG4Z13M/5tNDS7U+qeW2tcr38C5/ewBHOKZnwxdC\r\nidR/sHLwK7JdVeAkPHRxqVFGtEAi/HvbOas20nG4FpmZI2CHCPoHFwWZr3IC\r\njbsKiMC1fKmKxfcL3wVzrxTu2c5oJsDb5kNd9qFyGd0vu01HVTLv5vt0AKfU\r\neUgRsgk+hM642MwVx5LHQ23epJqqFTapgMfTL+Mi48CYi1xcxRwIpY5eockr\r\nheXD5alKOQjz/8F/EeF4RmF08al8eaKKPcJYCwUsL1Pv4DxNwqBdpkWYuYYy\r\nlRm1z98kz/rhWMWWfLBSxBAikIOdYtJ057M=\r\n=6rxI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/tokens":"15.0.0-canary.1eb44faf9.0","@material/density":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/focus-ring":"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/switch_15.0.0-canary.1eb44faf9.0_1672909820883_0.3131382274364358","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/switch","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c5269e087e0b90ccd3b77f1830bbf18e80e3590","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.adcdb7db9.0.tgz","fileCount":58,"integrity":"sha512-GM/UCt9WOgQePh1f8MN89rg5qcfeEtaqg/EdIQmLUdb1I/+AzLZwgTEqE3++7s/CTFMu+KmQt5D2WLLbQ8aiEg==","signatures":[{"sig":"MEUCIQCqjpTi2cfyPYhnwn8yf/sReojKW8XmOd/8qMZ4YOsN6QIgOZPvREaRudSbBCsRgBn3N5yMA/eumK4UMpinL3KRSrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvlnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRyQ/9ELGGdZG7ufH0+f1LkStF5XuDskrIeG+J27NKBxrLGGspx2DM\r\nislCtZezudoGNHHNKLx03QMqAfq0Mw3J6Yml/jjzuj9pa/JwxwBJXHMNhqsH\r\nHndn3y1+Sx2iJbCBY+iozhU72PqUWn+PcctKMptRFdn6qPlPldBWcF83TI8j\r\nittmhTd+pJZc/y6IgUaEnnJ/PW4ep5SlOhVM8EDuFtmrDZ4goVc5uEGztvr8\r\nW+LCxS9qm8PRI5O3B0/zloHHfna+MIAJ4TOLksm3VHyEmYE+bMN71s/fpID0\r\nD3A16YKNjy5FsemKP6Zvm1tYxp6CHiX7F7q5Opd88iQKKF8FLLjBslv819M5\r\nueR2EXoPnQ+53Zbsfi0DcpY1y4RPQhs3BIk3mL1pIBF9DDJDqDdqZizmuVII\r\nF7yvHuFzsBHfoRpLyu7VLYMFG8kl/a2FPu2pvhwQ1SwuWYileHzWrP5Quj81\r\nui89sG7IV0iQwf9wXokKOHjacKqpBtcbODsjVCbA4RNA00wRsrWXRnUJ4Xm9\r\nC1vydQWe/j+7w0T3dBdZULX8u/D+fe1l8uGvxme3Uys0vF1HmkKBcmrgHrsp\r\nVFJPXA55c73+TbzviN2mRElBqUTzECAivRn0dUJpdxrnMDvDKEuada2dn8uZ\r\nDJLmxckwsM8OO4ei8m8nr5wvTqHZZosa7Pk=\r\n=6g3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/tokens":"15.0.0-canary.adcdb7db9.0","@material/density":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/focus-ring":"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/switch_15.0.0-canary.adcdb7db9.0_1672935782759_0.771039155490284","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/switch","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.067af7eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d6fe6a901f6a7f6f735cc1c87f0be0669aa3244","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.067af7eff.0.tgz","fileCount":58,"integrity":"sha512-+FRSWv8JNHR1Aau5Rprb0rxl7jk6ySHqYydmPJ1nUze458ONZQlp7wB1x2RKTP54uFKgAHFBn9SXV6c9CPfKIQ==","signatures":[{"sig":"MEUCICyliJc6IPoh3B0NdKo1xpOCU1yte6G1MBCqlEt7vBojAiEAhT0kipnDDs9KeAxrWLJyPZ04T1jUTJcSd1iWrLyrkJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfnw//Ta57TzOXTQmcPSs/WtahZi8tAmucVOg5Fwok+Y5iTbGB3jHf\r\nbT0PMesPI9lXycAKN+ipapdrOGveU0zBkZiMN0D3oSuLmKZYFVt4XVMdobNw\r\ntb6zzDwPZMF4laoAZxSGbgpPsGs1dl7QiqOL1F8SvgnXXb+BGtfjLqGK6lJ0\r\nRsLISmicWQBr6j+6t+L7euEc/Hr3M/nimILmM4Qw/uoA4qVKkTC2Lbxk8uUA\r\nTelutRCwOXgzAU55gTOWCYgWVlt33StB4c88qL7YLgwz0D0g7QiypWxZfOov\r\nR1V+n9PC1Ozb2gs/GYOkZ2l9iBHeNWS+1oFSQAlyvF+DeleSAo81aJ8q98AW\r\nCN+urhg6vegJDzXHOnm15XkejvjabnHR1KPIPUoHgGf5g3jPXqrXwePycqOn\r\nGnK6LnXPj6nwVKf8RvMVyk2cqD3Vpe4cV8reVl9wHR/CzXTWGThelOcryUO1\r\nodYPK18kECavv4N/h103CWSuaDcNZK54iamR7W+7jyTLlwmQwS0N07emECsO\r\ntM57sSSCf5RiLj8Yv1FyeP0QEUnzIQ/T1nX/215rzifrMrjrd3chuT7lzZZM\r\n6ogKPdwXUQbdWvtaj/WaYpEZ8skKBmPHem9F/nisi1SOvzJ1HlwA9/RljIiU\r\nPlUo1oapqSWBpQm+x2XG1qx6/Xb1/wmdEp0=\r\n=0aVU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/tokens":"15.0.0-canary.067af7eff.0","@material/density":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/focus-ring":"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/switch_15.0.0-canary.067af7eff.0_1673047022792_0.04800673786641618","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/switch","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15e7b1b1c8024373c002fb783f25dd3ecc5258ae","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.21d1196a7.0.tgz","fileCount":58,"integrity":"sha512-SbbtMOUpvCXislU1vEq9vpzeZLrFFV+A//NvytXUzHTnYK8diAfwuR3/43Jih5YGO4rE/N6mMXuBWbtwMfT/1Q==","signatures":[{"sig":"MEYCIQClEeNDRQWIMmP/BD++73fU4NWWdKGlKT+DKa19APRZtgIhALsYJTI90UCDTCuWdsR0RJI8Zr3wiBDqN3P/pqJixT0Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju/AMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFcA//WK0aFbL1HwyoGO1s71U+60vPBmFuxM6lRELj3u/ub3QaRnfY\r\nfYHc/DXsYaYHYlKL330DEOy9uZX+LulMIJV3lfsKqLHPFyhi1ArXAPsawf7q\r\nkuYNDtZiA2sLTd7Uz3SbGvJ8I4N/NnnFb4jwnuoPijJviqxAmwaJzmdeogWi\r\nQ8MpeESvahIpVbENwOw3E0Tpm39fRQNoEWFEX46mk4vIfqot5iQSWvG4aptr\r\nFS4kcgz/T40nw/APRUADKI8KPBLJ4gvW5fxMjie71xkSY0vCVgUYtuk/j1Vq\r\n9GUOzHITC4DihUUFHKFfpo2VZWF/lRXii5hVCahF6BZRFrZ2RaEL2wkwkF2l\r\n5Ng111WA8QRAK+63dK1t/jqm4lJnw90+VLstyL8L3y0gRZyu1ERr0+u5BrUV\r\nGssxOuSpzqp5ZxVDdUEmAR2hhkU8oZRMzQp2Xmf6xNWCmuhWDYhtkgeG+YMi\r\nb0dDjGRx6hYABmZd4ApqCQ7csgLAPSrcXFG64YXFAiSw8cnRCOg0P7oYB5EL\r\nuABFo21K45t34yRd62pkFhFBwhdmXlv2g5nySHmbjJfmXzSZjf0K5bINfjNL\r\nCNT2/sHPRIjvMEqYxsi/ADfuiHGBxa38JYkP5gaMiYE94T1akmipV0xq+3jD\r\n/UILzQ6pnYdW87H+PWSkyumJDKgpftnhZMo=\r\n=00e/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/tokens":"15.0.0-canary.21d1196a7.0","@material/density":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/focus-ring":"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/switch_15.0.0-canary.21d1196a7.0_1673261068578_0.3351264174919697","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/switch","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28985a02dc433100914876f07cb0ba7fc740e726","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":58,"integrity":"sha512-cVvWAfUqxb6wNXYt1Tjc547BiMuwqP+UoGp8C5/+ZysIDrD9Edd0kG1HL/jtP4sRx2gZfulCPfD6Clnt611Pxw==","signatures":[{"sig":"MEUCIDQgSF9M8O6vRo9rAR5OjWOSR3JlziKOcir//9uNk3BPAiEAoW54HY0N80M+isqB9ia48Xlc8U5NuNxq4Ixbai2Lqkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQ4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKlQ//ZW2CE3oxnPFpvQT4taq6GRCI4PzE7ItrkKPtrwGRm1pYyAjN\r\nx/yXrEOyAp89oQYrWRhZzdLIj8TkppHtu6XABBcpyJnTw77DL2xTyELlu12S\r\nPGTGkZzQb6WRJmIyj8w3Ipjx0Z83aQ8S0JOeLtirqVXBlxVa4hdJeDBrm+l8\r\n4eXNnMaIofOSU03KImUQAsAiLa49ok3/zrRhXbxzVUS81p+xLOQs0fLQf0aJ\r\nUakQUUY1Ja8WSvT6oC6VuivXG/Ws3H63imUIMwnC8m0djeEsEjxT5SYxVYp8\r\n7GZaYknS23E44D0h7vGFYhMesu1wK/IPMbkryba8pU1zTr/0txnjXRgmocuz\r\nFkHSVLdWACtOzIIAUnjxtMR3cMWNgfII+gv/NYlTWwCSxKyhIDCxkl9vka/b\r\nZjUNaiTbPOxPScGw3cAbldBVNS4o4l99d99r5mujr5OKpCZZxrwUYOwOe8S8\r\n8y6yaLfVEzKAxOeLPOeKzYklhO8oquvqDQYHI70QOHSCUFFJ4mwmD6izfGuT\r\ncLLW9tpOiAl4gWrK6TxmWTnQnyejWbZFeLGgLpFZw0ktd36JWzvW7ODUjY9C\r\nBwviWe/tvXSRRKLnw7WogEsZg/hiDhiJe/+SKLs2PD8+3HD7E0YwkUT1O79h\r\nWaU8JICDjRK6IRtHHDIIVylleDSY0HoRQiE=\r\n=F+45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/tokens":"15.0.0-canary.8d2d8d3c4.0","@material/density":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/focus-ring":"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/switch_15.0.0-canary.8d2d8d3c4.0_1673303096369_0.38018264582178873","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/switch","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"817bfae740955df8713a02e0371181e81155b807","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":58,"integrity":"sha512-qsodRkUtyLZy5KAXRWL3lJ1vaT0nhuotldDbnrwkAp0cZWyLZVf/2IJtMHwp/EurasxIyApMsONaF+WCGDxNmw==","signatures":[{"sig":"MEUCIQCuqZAQKweAYcp2qyF1b9MnlAeDaMbyEY3LpxehoywjZQIgRPUlqZjlbgdf/YFgYJ2/A8CCJ6yK4NsiJlawvBCuoYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZJVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorwRAAjc3aqGHQqBpubd1OPP3wf+IfLu/JtumP5G6vSLDYvyoadu2o\r\nugbja7p6kBhnIx4mCLFYOXOQYrBwZvFTuVFuZxkyYezUBKU/QXJFHp4VMelK\r\ny9ZaAEwTWzZ70uhay3hGdSkPKW/TTcpaFbjcbr1CKESox/Y8n35wlMb1PuwJ\r\nqUCbQNa+rx5tVuxXu/iVigMH+Zo+RSlaaJg+XTR8nSuqWomVd3o3VLKAZD1u\r\nQ7wMs2vwmNmTTtLsr5bW4gyEJJa3ZKSd66YVVRB5on8wreNSA0b3UxcjKWBi\r\nKDj9YmaBYi2W264I9LPlWxxXx3cWI2Haxt+XRlrWxvcQ3Eqg+vRudPMrKWPV\r\nyYZiMkWxkkQtJhLPUZhfGbZ/qcZNdQvg4+DXBcqyVH7X9nNq9LY40w8OezVf\r\n7rAiIYezb2Rg5QSMCYv5Ncwacuhwz5d4ScoajeUcFQ0ZcamKrArs1IVcrXgU\r\nHGRS2pESauKhaGMGGqmV0sZP2B4xdA1KCE6+XTw6R4MHFF648PIJxo5sroVW\r\nSUtwfCn99EDI1JMljpz825oYn7cA380qHoLHyP0qC1Lnxfx036mu11p7nTKt\r\n5cSf6B0qz7xAGrT1YXnjFZ5qs+oTvL+8ajrfM98A4+LbkHdCK7nz+hAYvHC8\r\nPh+XR7y2ob79A4h/i+bmnpM1zxr8ZWShc8w=\r\n=ydFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/tokens":"15.0.0-canary.fc6ee6c32.0","@material/density":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/focus-ring":"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/switch_15.0.0-canary.fc6ee6c32.0_1673368149448_0.4485603247058578","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/switch","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f44ce8ee0b0584e5ff986b90b215a682feeabeb","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.73537ab0f.0.tgz","fileCount":58,"integrity":"sha512-t9H+4efghJSVs4xyRXWnOL6e/nBnEs7XTMBvzzNBILseOxF435kD9KjWVnV2nhAxgV6xemaI9SoGxTQW7AdkmA==","signatures":[{"sig":"MEUCIQCgFAnmwqSpbPag4kY0nBmXmxWFK8FUlNhd9kJOCnCltQIgGptk2btSQ3mMla8hj/P7Da0Nr5tuZivHGHdKkMg6i7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaqSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqABA//U6sKsisLOT2Xy1zzgTfFRQ5gh8RUBsRRw/6b4FMnuf4zokX2\r\nuX8ljM/p0zAG2llmt0WY8wnl4Y069fXxF63GD1AMTqgp4oTPjLcsl2Ne1sh6\r\n54wXu721vmOdUyV1leXv0feSaOkbPr8S5BmhnxGqYyb2yw77rutaYEHD4qkJ\r\n3Qjae/mo/kic4baFj8pD4AIpOjU6oQNwIc/y5pKtDSAJ5r3Vjqs+9doNAbZG\r\nbzfkj2/K4KzIPpxmWfcv1+QeMD8gud4fuLpn1dcJHs7etMaAWNyKOZVVEKOV\r\nPU8asnu+eKYG7dPFO7Pte5atbfTakbDD1dncOLY1MW/hj7NMIwfIn7R9EXue\r\nSgRITGXzfvqIBL/KAvKYSGT4bGQ5bbAqs+q28RtQvn+KLHeQnUxs5rlCkDH1\r\neqO6ik00NEJ2FoW2vnNIUbAXYea2XkHKa38WkvJI1PY4BOJsOzbPkTmRsKEc\r\naDK9vtGfgH1K8Bv4Kt1CkshPrceySXhsiKCj5kkrAMR/VtJMVmFWAL77j0k0\r\nhF/TdHezavsXdyxowo48gEzU92g/SKVVsJnkVF/W684yxWbygl3W33l1a+Iy\r\n5bGArgc0t4uH93AjYWPxSdgB558SUdfjGPkl1WjWi5ODDzybiUm6GB/cWna9\r\nmNvUyAWV1L1gs7jpsiX59poFmdZAAwaP6qc=\r\n=f1WU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/tokens":"15.0.0-canary.73537ab0f.0","@material/density":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/focus-ring":"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/switch_15.0.0-canary.73537ab0f.0_1673374354637_0.8820306537110776","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/switch","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.684e33d25.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd10b954efc49197bd1beec279c23cf26b96eb03","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.684e33d25.0.tgz","fileCount":58,"integrity":"sha512-Jxi0gl92yvvZZsAPxvVHzXx2ga+T/djMow98jvEczmpUorWnAhgiCr9CsSSRoosahWyRB8NLZOxUQrACxvffjw==","signatures":[{"sig":"MEQCIC234fnOAVdbOSGOgTkOQdZVouVAuoNU0lOKS4YTZgu/AiAJuvwFNLt63cAtv+sZ1wpe70L/jcP48DNtxpXOnNC5bQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbpGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZ+A//ZiFPubOPSCYJbGQk3DCZ8oHN/njZLt7RG7jHtepdCUfHWm4P\r\nyd1oRoaVeYn5V9YcNJ6f1fFdh98FJK+DBJLIkcU5fvRF8Z6wothhlkgi4qQz\r\nqBZqrClcfAi9IwMHvMw6vIKqx2rFoI+scaicGtynzGGNoiHLjRAAMzZUK6uA\r\nJ8E6NNBY0IfGm7ELFjP6iMxf2c9H+mDSTRd/rlA/Vs/RkHHzDHZILLr3wUHz\r\niTtoFIc5gZHgVKe5GTdW2upyVF6WoDB1G+gsUtpfP13EfDjF6KTKFS22tAw9\r\nAO1tBret+hlZoUW0Aruk1InLB1s/fMtNeBryRJaSburSIEyYFiWAkpYDosgG\r\nf9HAkrfhCnVFvtrggUa0DYg7Pa+i5QRkVnERxrhTRSHWUeXnaBZ19tO1k2N3\r\nJtj92yiiyPEW4paBL/lKJYkq0iLBfYmgP9PhMo3KD2R5qgc25z0Em/fpTtE5\r\n/iqEG3li94NPeSiaxbTAgBqtQj+l1L6oQTQsvFnE2S47dJt4LpV0KKKiYHUM\r\nzUQBJwQHrU1gyHYC1qzZqigtbT/DdyJnyBENzbjXf/pbMrMFnaa9Yn1cQS04\r\nsvZbirDaveJOfBV6rdIbBA9aFkrTNe6nscp8bGuwm6rgig6AoVQIdWFrju3i\r\nZa6Cre5Ep4mIBvWycohVXHpOLJRV8A2Kq7I=\r\n=ntHY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/tokens":"15.0.0-canary.684e33d25.0","@material/density":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/focus-ring":"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/switch_15.0.0-canary.684e33d25.0_1673378374561_0.4850909002128425","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/switch","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8d971e090f65374c64968dbaca7a7ce391bf90d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0e89aab6b.0.tgz","fileCount":58,"integrity":"sha512-xocGJC+g9S/+0q0DWeBfS456jCcj1of1OxgnGDmzTb252cVOQ410EQAC/2HyOFy8diI/5z/9CWe9tobdQBxpcg==","signatures":[{"sig":"MEYCIQDmWymIdachgI4Va8GM80KWdUT1XR3QXiMNb0lSRUd86gIhALLe3/oJBuyvZWRUOmaokEVPa58joVvJQkJrAQO88UwU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuF9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtiA//Si/a6MVcs0zamWLrLQJXpN70kWEiO/WVYxP9NflEgx3baYQG\r\nW8sI0bxNUS/AGITlJvTM/XUrEKJn5Xnk9q5fdR38B4hyPfCkgF2UNl5tZcRS\r\n7Mi9Zca9DFcETFanj86U1kmFj2S0fvfECaRUQoVVA4g08HfBEkaWdwkQU3/H\r\ncouHsuNK8UbEg9uqH68FdRMN+jdopTH+TD4/xU83r9pqdP1JmaCBO8Bk8uJW\r\nKzOguP7Ivbf6B3mwdX/xehFH4VbrFzV0OKbR6T+QVPqTYo4Zy+7nBydo+zJO\r\noqwfMueXpd5XKKcWmDy6SkMlXq9kRSO4DHrBcfFVNlXXsAkckGR0o6f1wLSx\r\nWJ1zwgUXPEFe5QGxbVG3jZOqMV8lzYX2GMDZ2tFirb/PU3McWFhej8NSEIX4\r\nGBvtwb6lJhVIZfyxulspY1UqLhd/xjiW9KpWH2MtOHjE2ENC55D7mTg9eavE\r\nX4icbx7i+mKBlz8VmUkRBqRGksLpn5XgjDZ6E+u0aCQ7d6AcEVPtQR+o0fqe\r\nJxCafd9WkPVlEabUdMdPwxlkdvmF22+BgQGi1myv+j2OtU2YLZaIzlqXC77y\r\nXO3lZgMCWeMjOtGVrTtO5+RjJqUVWJ/7jGIQAQ/9bAPKTY2UmDzKaAL1PKOB\r\nmYupjSkdlvhl1dfb6/NJeNfJ8wQ6C4ixxsI=\r\n=zTn7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/tokens":"15.0.0-canary.0e89aab6b.0","@material/density":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/focus-ring":"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/switch_15.0.0-canary.0e89aab6b.0_1673453949280_0.1249566162354725","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/switch","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6193715e6662be908d73a44fef04b164dac2ae6e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b0103d10a.0.tgz","fileCount":58,"integrity":"sha512-b8O3N69xkIdWNmSRcRUNz1xtk9MfFgHJcmoeus0EWJayZz4YiU0LIn9jSzeg5aOXB6GW+K+gW87jxiYg1GnoxA==","signatures":[{"sig":"MEUCIQCbTUGwBrYy9lzckyDXHpbxVWe2Toz73FDGd/6aaePtsQIgCcKsJmivjfbmFur6hw8x8cUKUQ83R8xXZQs0d05ieAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwpkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpysw/+Ks+Ij3lio54/goAhZtwleSSjj4nwUdogSG5SEBPteuJmrg5S\r\nEgtR2lamGt9iHDa1mMlX73qcTpwWxJb70v1soVknQoWaic9AgzhDQV/YgcJt\r\n68SKOUrolOQB3gPI618V2slESP09TL9mG12kD8T+YQeoLgyvhVZhQTwEPwhI\r\nY0ooIc1HXyxMzBj8IHWQs5utVE9Woi4mULPkYipSdFc9rv8696SThour/O86\r\nW4n/Ymcv9rnYHE3mVd63UCNwsnWmTPCjlbMJ/Bf3Gj4OUb2hM4H6hGXpQoQ1\r\nLEDloqaSYn4TDP41/q1ef7+bezvoep919ud2JTVxKj5g0tD98/Jl6U3E5cpk\r\nsS1EfWngskHKmmor0WM81Bdi7MnIK1s097O+PqnE6U0nbXc+2CckwomTF+1K\r\nK/dQ7srZQYV76zAmZ9YsgB2XoXMKga2vy9F0+psKdPhzErrKqH/G4e4PQf+K\r\nZHT3YkGyil/m3HCWr1W/hrsZCmwLzMiVqBDPChQfxIV6KZ9D17RuJjoGHwlK\r\nCZOqjUMT4PZZF9hfO7ls7MitDSREIKHILyGeZxTTsCYy39luK3UoxEkb5233\r\nxrM3sMEEiaBZ1PWHzRwsdNukjSn+no+g+DGHgW7AJcxs8Kag6Jt2zyJAWjQJ\r\nTWpO4PzdFT1xCg+Gnnmr3fWhNWuwy8nMZT8=\r\n=dVeg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/tokens":"15.0.0-canary.b0103d10a.0","@material/density":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/focus-ring":"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/switch_15.0.0-canary.b0103d10a.0_1673464420008_0.32848523566291266","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/switch","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e21813bb6a91fdba1811d0246db732be650999c8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.50e7a5312.0.tgz","fileCount":58,"integrity":"sha512-aIGew2/kCwlwZbEbCPKQidns/vehLamtvx5bWmgcjF/+Nv304sQVwD7ISB+Y2U/qKiXYGhRcWqWth89uXKG1mA==","signatures":[{"sig":"MEUCICq75p88d/yzRY02LeMeTTKaF+YGzzISlZ44ic8gO9ARAiEAmDvXh9cpnWdPJvSNwqls+lCrNRfqyT8nZwVE5ZgmDrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyIyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNew//Qc9fVVKAL8JzHFbqoQzJTGk58nDZxOHAUbDN3XRK8GlpNijC\r\n6E68L6/rPbPPHZpv6iQsYZuKsKeoboFOnLPRjF9DUne1JSoXrFb7fNsfB3Lf\r\nFGEfGS86F0PdISPg3L3yH6Eg1DlX8FXnfgPY/PulMrCK+ga1HGfE9ncEiVR2\r\ndpB3gpDzxx9HEeVf6yCxxWjWqbD5X0VrOfdD9pT4EbGOVh99KV7h0yHtTvJn\r\nvr0Axrz19wXBYHKlcL8vbBi+FsCMFdIkn1/m0QZnPs0KLrWlcHFXb+Qo2mPm\r\nXCuVHqIn4G3SHgGHxl1EasbIWPYFHAZIsS7dKkNbUBFExp+Ptvo+D3rUgrP/\r\ntMaeJXts9efQHwdbc1wjMrbLRyDtIH1zWM1MpcJCuNh0ZObzOytLd1bdxVpK\r\nCdMBSjO8qMO7ROiVOcv6odOvOSbd/chAo73/UtGr7hkPArYigpwTqSNu7D/L\r\nXkZJPyBcG7m3mp7DfyrrjrWC+pvJuKcv1+BOnnvw5F/rWUwRnmu0Lkq/eURC\r\nfVTIg+9OVOHODdvn2ZLWMuVv7CSb9ejrwOTwVELl/4NuXJOv4xaKQ8poBAI6\r\nh0xH0LRVTvuzhoT7L1UwzIBvb9levOERo7zoQaWTOSUo8B25peKfMeIy/suB\r\ndY0G8wlQZ2JH/3misxaLoSHR5iHkm6H7hvM=\r\n=D93o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/tokens":"15.0.0-canary.50e7a5312.0","@material/density":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/focus-ring":"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/switch_15.0.0-canary.50e7a5312.0_1673470514616_0.6546776860729107","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/switch","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.202823f54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f036fa5ed389340c87c5c6d8a95e06b3477580b2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.202823f54.0.tgz","fileCount":58,"integrity":"sha512-/+vhPSScnGeSUQ8PKeIA2iO6EAC0lZE3pA3p3qaBuhGcsNUe9pVxLWWgDPvZLudtUQMPNP8XtAY2mSt0S8cHJQ==","signatures":[{"sig":"MEUCIQCgnFzZigV9CHFi/JzKvQK7QEQJve82zCDXlZaV/wqwNwIgfLa942sVeKmVbDgEJ+SQ6bYxBSPdaGWPCsVq/IQ7dps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1kw/+LOOL9hM3i/Z2FB8AKW8F98NtwnNXYB74cyHk71QM9qOuDr9f\r\nQgbkmRnngdnUEQMubaxqV4qwcmO28IeVmKSXneOF7i4F5pOlzwP/W5fVpCwy\r\noktMmjKbsRsU0VoDRYndGT7Ngv3JZqpbqAAnDUkRM7d1zPoWtPt514qGUjfl\r\nwMQzjMuIzd+sNkv1H/r14sDcKsgiG8ZQvhGDSF69df/JCn6U8GK22Ws1P/W/\r\n9cJzqb7xPbwHMCBQz+/CGXiK61gkchFl9MAPHigaEhhPP9WTUi0DSnLX2QDI\r\nNGHGHCnqUNugraVSbBsQ76wd0vVhczlrMtR1lcGszizBQxul/2N8dlpCf+l4\r\negcU2/USUcskL7bXtKeMgahmSrAUibryBHmBR3YMmwx3DIuy5jhbNXcfhX+B\r\nctsSynsTr2c6XtFhHN6T3avYbxI2h65jKkApVG50x4r5IdQTouzcnPzY03kF\r\nL7BbWRNn1z/PbPti0/ROiaPMNLkHPn2qOtJQd3ZIvJJDu3frn5Rv1nGzc+Id\r\ngBa89jkDq7EzxEZLWdal9T33uXenmCnBuru6o+lVpjE9KCx/XjK7Fcziblme\r\nUL5d7CVMpurEVGGAiVIX3xuK8MomBLY6G+Iqp7+oE9PtuK3tIIjJYe97aEV0\r\nIijLx6VVbaXfGPle7f3T3eBDTRPiTLc/pKI=\r\n=wUeJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/tokens":"15.0.0-canary.202823f54.0","@material/density":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/focus-ring":"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/switch_15.0.0-canary.202823f54.0_1673473004891_0.4587645909851019","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/switch","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69427bd55db089787e3d2b4964dacb537a503e16","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.199fe2a2a.0.tgz","fileCount":58,"integrity":"sha512-5aNx4SsCWsY5/kcJK/CXHwRa4Rlhhlo5xJB3txQJKj20Z0y4V+kX6ACUfE1lBJo+YaKyTjuWF/+lxDePELHR2w==","signatures":[{"sig":"MEYCIQCBH1biMKjGHXb75iXx2dqQHJFsazWausGJ4ohqJMckvgIhAMwh6pQ7wtA0q2cpN0M9ggy6EXwDORiwmuFEJXbIIaS5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzCbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB3xAAkmq1U8v+r+RWakY8E3e5d8T0DCOneuarvZoCR7842tC/gSDY\r\ntmmX+yvu9gV6FkPUP1txW5FGYVHZX7RcT8NCPdyhhZe9OJh9q19woRr2AMjS\r\nEasSW6Yqw1ezDwmXY8iz+stV6npMlQGKI3VrbNgVju0eisQuPodz1GM6DDnn\r\nAIQt0B/l08sr7dlcIVHlOjNXsbEeKBaBJ1RG3qcCOgle48CGd1p+cnuCKcMl\r\nGC4xHJVN0WM5aNl5CNrbAfc8ROEbEtC8j7fqyQQFBLdrFhNHfQrGDZ8qhlej\r\n9pk/hine8U0/MBz0aUPh5otfKJEdrvxDg8+uQqW2mTwAKvzCj2gQ08ZMNMoi\r\n+QuZufIB27hxXPxvyHcRpNaCXuwEECaGpYKkZXSq26Jt7Jebun7giAXjIRse\r\n1F1KnhhjmU0nORMsIO7MW77pBG5PfNeLKqXuuqbbGbwXCATidmnIX4S6VV2o\r\n+4QMS426PE5u4OtYyAFY8ankjXBHmqct5V8fEBnImXouAvr9bVTjkdxLbNsT\r\nQA5zzbg3bGd+HOMtuupG9vM3/JcjC9Pi3dtzFXF4UlwK6LilvKeee6bHQFuh\r\nOh/dm2RiVRj/7aEe5ZQ0Dmhc85aCx7DqyVSCcF7PD4vK8r+kwcL/k4wEifyX\r\nBKZcTOFwra5gQ1bqteBloZMB74/kqTIIG50=\r\n=wuAV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/tokens":"15.0.0-canary.199fe2a2a.0","@material/density":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/focus-ring":"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/switch_15.0.0-canary.199fe2a2a.0_1673474202965_0.9847972014630895","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/switch","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d50954f8a0d92fe9705533fef8384b17fb117024","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8c0786d6f.0.tgz","fileCount":58,"integrity":"sha512-h3Pshrgd5OncJi4Zo1F2OmBvfWnfil2WBlNPPuSZKKRpcS1ZztVqFMnaeF3eD+YJRMMWKjW+jtIvvJ6KrFp21Q==","signatures":[{"sig":"MEYCIQCnei/xqLEyC0Ggwvac1sLb/aALNgjuOMKD36s8Lcf86QIhAICZcyo4o2lrLB1rlnyUoDIEUCBhZZ5s4V53Nn+waS3a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBsgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNGA/+L08BQTyPpfWp394uasYMqQQX6qQNiIc6xknftf57Qq8l6+R4\r\nDLOsK59MqA+xUOrKXZWjf8oO044ljY8DFoFIWPYJhdDEYmODPJPiASBe7EZd\r\nJ9f14rBHIdQuZrjdvFGSNw5j9mdKLUmOGY+fZhFFiq8Kl/B/KBmrJl3Csug9\r\nAhGAZmklXSqJDHEoKnmfu6wwkt1uyfyjz5+KCjUH8QXTNd974mRMGIqn0VsI\r\nZicYL6jZ3pjqMYQqbHZcUYscvjUUnbq7+mT7Q1XIXqA6JKi8G7smigNlaVlF\r\npWhZDhHTeE6P+t7guAjd9/du553YesIYvgEcMoC54kMzXKeROYWZO+e/Kq8K\r\nPTDPwZ7g8CWnmTmfe7dG3VbNEzLl8oys2ns88vyy+Mf+yMZdW7pVqy29Squw\r\n8Y+xJSp4for5P804Xb6TeJvngfYxVljzcrIm62JhMq917af+K/yeNNqsgT99\r\nm6R7U4t2zF7SvPY4qGbCxlVZI5CzYzNdl4p6tmuwECi+Vf+tUPrnIWhNMklf\r\nt+F5XsKtA7bTDOGa3wZHSj2X6/ezhmMci/yEHWDRBSMO/S0kkB+rQZqbmirh\r\nacPT5gWu0yV3UbU/7iEZPg2YK5gWNH8BRe1UgD2KICBXQjv8vQvAAPQRlwXI\r\nU8A5Jb9hTjw290XZ3UIP8riCRsy6F8jIrxI=\r\n=SvN6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/tokens":"15.0.0-canary.8c0786d6f.0","@material/density":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/focus-ring":"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/switch_15.0.0-canary.8c0786d6f.0_1673534240391_0.033026199196441564","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/switch","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"459a8832101e6bda66a4ba25f81dbb5bfb2894c7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":58,"integrity":"sha512-lGrTqyuFbJ+NNSFZ4ZSEXBQPoJO6dtelaQL4zrUCipaPIH+b4stNMwXcjdrr6W8VrmYVgkU4CyDTfu/zHtYAbA==","signatures":[{"sig":"MEYCIQCl/qXrsTDTt67Nr6HLUyjjblkuZS63Eq+DmMFkPxxOhQIhANoIwOGQvkwZRpttK7v+iJjF1Cp4Va9+HmgAZUUwZ5P+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrneA//RAQwsGVpV3Psn85WevBkTvPhBa/yn24z+ioeN4ZPYcjNMXrf\r\n+LSZSgh4vpfEnwYiLNDTWXmbkN+EFxrEx11XlNtvqy1PlAByWOHgDMrkA+yK\r\nLdtC7r+L34C2w2HYO4XRB/B9nyx5AZwM1Uz31FRBe6qfSp+sD3bAIYW1ZT+i\r\nlrkWn1t694QeuxBGUtkXbeN6MCXjOw8ihCOidiOB5bDqeqYvOnOI/YnETRS9\r\njKr6TZdKHcypGw5TBeCevZ4VCs8I9UgefggPzQJs6s+4uXEt+2PwlcsleUQv\r\nQHQXEGAneTcdR4rZP0bU4n8Xt/OUEwWvyzwNuyjwh4wNUJQ/xuxhBqtS0HFl\r\nXHH9hbBKzluNQC1PTZnZyESkCrNVihxHTnDrJI/Zhj88uLpE6JNyqI1DUURN\r\nzGwmxDySCdTJhbTxCueCByOH+V0AODDG8PTuU9HGSt4cbNiP4rKIntHiqFM9\r\njxClWY2yi7UOyMgWa1EoW3GJENMxOgnES+Um+3/TKOLgoNYYk2MwW14Vr5Mf\r\naR/icMddFm7DlpBi7FqUxYHW98Yfrl3tJpQj8CEIkkoDEtogmGyz/njCJZDw\r\n18WeU7rS27n8hUb7F/78lf1CDX/Tu42LlRJ4ezNQ0B6rfMpbQr/eQvMYBnTK\r\nlqx8VIpZSYvQysdc2b+ISqxQ548me0ooIew=\r\n=0pzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/tokens":"15.0.0-canary.8a74f7c6d.0","@material/density":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/focus-ring":"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/switch_15.0.0-canary.8a74f7c6d.0_1673983535010_0.5810760968862692","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/switch","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e095882c919025111b6ee3a43d4efd8333a52e6c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b4687fdc1.0.tgz","fileCount":58,"integrity":"sha512-5Z5WYWkvgPhmyPCh3sXIHduC5cE+pr/xxeHbE8UYd8goLiUDVQJcF1UxbVIu79v2IhqNKJ/U6IXCvYqbhKQ1OA==","signatures":[{"sig":"MEYCIQDBLhei+fcLdv/CUM+89K1JGW9gZKzl9uR1+opXDtXm6AIhAKYtLwz+BN8P8hSm3geRXxdBCfwUcp/KgZs99FWk6hV1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ8KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjKA//d+D6dap2U2lJiH/DHG97F7qWHHmKmZUIv0CdjVBr/inmsiTH\r\nUdrDGpQviQMxOQY3MRA5eKXz6rWRRiXmK3b7yvi/uShZOFGRZ4niU5RTrMM7\r\nc+Udvlnm0167Bn7njVOGGM1Dy6druVmTEAIE8+n1IfVIe98hUQVTxQaTw83B\r\n246Me4gWEVIkfgG5t3WO8bEqnfqlMv8JIf1TUREngdrovKVwRXfLOtmG+fGK\r\npy/Y7KlS+TQ0ssxrU9nZ844tbZeyLes+oK8s3pyIZlq+ysCB5V0SbPObvX/N\r\nbmCOMnOg/93sJJs+XxaGrDf/hK0lvkwMIKC2cC4xdwBPNZSmzxG1IkvlcgEE\r\n+l3xOKYK7BiuYkkJsxtMrrwQJg1CsqrH6gKovliEnQZaUC7UPCYMo3VsYZIy\r\n+ud7OnmV86f/r0CP8+cHMB/cCq9CRcPRUKbxNpZW5SMFs/GLSphnA4HMDIS+\r\n3Jhlo/MP2e/W1MYokuguHgZDMuzjwp+h7ukyoUibr9zwuUeQpCn4QjQg5r7M\r\n7LLHnlSr6W+k+7E0t1Z/wyl4f9rmMVuXDYi6Up3l1szIuTgxuhd8xUmfxrqz\r\nGLyJcOv8Dd4kNdIhWeaMCA1J5lhZEMPrg1LUTv7pN/KgCNFcJxFpap860Ojm\r\nOfJpK9aggLTN8No3HTOcU5mw8R+en0J6iwc=\r\n=S/26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/tokens":"15.0.0-canary.b4687fdc1.0","@material/density":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/focus-ring":"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/switch_15.0.0-canary.b4687fdc1.0_1674157833964_0.3326569502649066","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/switch","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b836b9892.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31cffafb5102f53f9300e2e96193dfcae54a4d4d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b836b9892.0.tgz","fileCount":58,"integrity":"sha512-dlce0oWxR086QXjNRRtS0oaa1BFJVN4nI7z3Z7/Y9kuYS6aJj2v5qwNK9LPsTnmC7YO/+IL3MDsMJ5ARcXlyqw==","signatures":[{"sig":"MEUCIQDmLK/SjwiSsCqPKvmIdc/Jm73Dh7yVzANnGf8VPJ6TkwIgK7CfdmuuWZqUd+kAyUj+GizFz7sWqjul9lTf5Ficp/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F5LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5UQ//XUXdCxlTyXmty1wDBFOmyvZAu0dt2n/onYEjuCCI7sz7wzcQ\r\nI7L5scpCOni3wd+YA02S9CpQwAQJz4NQtWKlW09jW7fy4G8SSwutAeMG8cSt\r\nhlkB+p6gD3KD/QIMggKa+BXTewUvRW70l+gwhTsJ5Ejr8oE2hjowBN8cfbSW\r\nvzcOPVizdKkoOPrLCO50ba1DZqkkmZSxLpHUxhj+YjN2OX4Ly70rMfqbnLnj\r\nn2/zv0sN+wIiSHARKZgdIMIkfGCqvpIizdA4/vURK0pIwja5SAJL9raUkn7G\r\nJI9B+VYB+vhPkoAKteendFZxhI/E9a+/66gb+W+0x7ax84IgrVvyvBqBssh8\r\n9LQqm/FjwkGVRvheMsr9lEDsbAdiYkAHmqbysnQ7XSVInhv9aCf6iQ9IXMg/\r\nMSFOJbn2OFgm+fFyaIH9pcWEllmFoNfVi3OTooWziYF+pMRSn2uPyFz81oG/\r\nfDyu377NVAGKKL0zDJ0KitewSYLM6LHzT9ngD96HRPbq5qPL+0cO3mu8ouKO\r\nh8sWXP1CyoOnN5l3Fx5bCEKU+oJ20o2iOIecdqR8x6Y7CZqcLG9U32REnpoa\r\nEVUsnzWWwxXg+svMUZ09MNkMK8eOIfmPggLfSlsX2ODuL82oAvmvMTo7a4dX\r\nOp+oGWCs0hhEA2f2pqhzV2fmRHAWkdQgeRs=\r\n=dKIm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/tokens":"15.0.0-canary.b836b9892.0","@material/density":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/focus-ring":"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/switch_15.0.0-canary.b836b9892.0_1674600011508_0.1596740678607229","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/switch","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae68ca5928bfbc4fbbaa36d789381f8f7f22e07a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e8912fd37.0.tgz","fileCount":58,"integrity":"sha512-RVaTre7fpD02MoGxZMBojqbfLiNV6vklMyqLP8elJR4jYbbzdcsu29Tmlmf0XbnVW7Tb6BQ1CmVJ0QKVKr+miw==","signatures":[{"sig":"MEQCIEIUoTbshbVqwK12TirQ2CYuHwdMaNhhvbTTqe6ucMZAAiAomjxJY7l3hM+4xy7NFiMm6CRy64Ogb4rkjCaVEec2ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sbWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe3g/9FiJlxih3uFBQM/QQk6bu+LALcHfK1bJ9sc9umdQYVKhgHHnl\r\nY194YEoish3bTZNTLox1qNy7ikw0rJo0rpmVTw4ggIhUihsPIxTfKokMrsUL\r\n4eO1FS3VXkTI74dPQy5NBJ+AR+OVXjpru7MMy0rsOZc5u2GaAcR2KenEO9Fz\r\nDij4GUBRgr2p7j+MR8zxV3cPE0KBvqC+YiTJ+LTpCT3c6DUes1jBR8CJGqdY\r\naQKregOJoMOVvkddTlCDFi0XVwzzOwQ2t4EjHIYv3SKjmcgxuNZeZDgwDeIn\r\nd68Nsrhk4rPQpZXXhH3cYO+M7SaEHay2FXZAHQR7WSxwLP5tLd/470rBURCo\r\ndPeN58RbVLvpPuB75Pg+9kd22GX9BV28rtoMLmNGOxZVpviY3bOqL4JZPT/j\r\nHtoVpX26lPkdWnypv7gGJKlWXnHTZrQeG4Npp9NvFiQdKnBXhZT+eKsUsnJ3\r\n0fiZ7e+WgNUXS8/XGgMg39k8LhTDjyrOJ08eSjtV/AmwUOiy/Ytk3lJ/hthA\r\nothnmN3z1XI/2epQLNW3xaID/mIl5Rok3N4dSLeWg2JN0ARh/hpPDQNSD+EK\r\n1y2XeNP52re1qhkvQRfnzXzX7KC9VtEhKnSBeu9dzHi5tutx2I93+O6dP5pq\r\nNnztIs7Cg1/1tAMKcmPs5S3jprxGKa/lt3g=\r\n=ZwE3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/tokens":"15.0.0-canary.e8912fd37.0","@material/density":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/focus-ring":"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/switch_15.0.0-canary.e8912fd37.0_1674757846187_0.941739040997871","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/switch","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5029572493a97057d6d7a277fa499069bb42b3c6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.16fbd30ff.0.tgz","fileCount":58,"integrity":"sha512-cS2OOJJTVB29DtRqpoOINd+UfKimdcR+dD/MiT88supCuxJ6ytGJxWXMX1KCouDDAp2wG5pQXouVeWSLqmuBNA==","signatures":[{"sig":"MEQCIAtMCjXIsXWGZEM/AyasOQgkVVvb7R2i1vNwSEaO+ROmAiAhbGhUJs1ab8/FU+7yZJRxQGgkpZq+nx2s0E3B75xpCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sgQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwKw/+K2PABl9bBd5W65C1nc9v5Ry7xvTz/NqFv5SOJIsjfurwKTIH\r\nrRx0oJhVULVEpfR+sKC9iR3pbu5TI20nIbMqyAfNYO3V7uyFEfeyJGGI9nqm\r\ns2bossImcTgCZm2Lsl7ryOGMMnImInLU/F0a9twyimX1k0eDALCB3uTtXoe+\r\nMnh6FTHILPQdbe7ubjNdCT/ylRA1Qy+EbqHfYQXOk/5Zs1/kZock2Zz/Bl8P\r\nLqTyHstGppoIh0/QUFNMaHpxEdOpvjh4D45t2Tkok48jEc6wJgLe+lvNOvWx\r\nHjBtXUxwglvpU09QHsM7RVQhMEDFG3iWt2PZW5BFfwa7or7H71/gd7dODj/y\r\nO8bX2g6qoTGDejQBhLFHErVKF8cwahoGlDpx4Kqhwv4a978wE5yLjqtpiMfk\r\nKZBmAxut9a1XLhALViT0sOkFVzLTGi2gbLgPNkwMw8WFYtZA6O7psy1JMu/n\r\nN7v4kC45Ouz0CYlLGTs53oY42AtBakLXjrnqM7fDmuRfw6FglU7tZzYL2H8+\r\n4ubd9tKgn//jYkOYP/538Ow5y054txIMWACH4uEgaGuutA6ewzkjmywtTv4w\r\nuimDpVXw92N8UmfmLynMWvV87wU65b+zsQkanQHmdIm69FKfZSZg5kCwDVfQ\r\noVDvYtVq7jDHqVqVFpMOuvhE3iFpC9iQwfc=\r\n=Z8jG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/tokens":"15.0.0-canary.16fbd30ff.0","@material/density":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/focus-ring":"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/switch_15.0.0-canary.16fbd30ff.0_1674758160637_0.38812136004225506","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/switch","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.033ae083a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05fd52bdecadbe91f69744abae97e256b34f5b72","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.033ae083a.0.tgz","fileCount":58,"integrity":"sha512-LzQJNxG/oDIvsuzZ0N8+As+Kxs7Sfbku2W7fM7WV34wsYMg4unMkORo8gV7d0RxFUWFO5VZXumgvrxI2gt0MAw==","signatures":[{"sig":"MEUCIF1ArrsSLCX1by8FTrNagpMmAZlWB+gWtIl6tBTyoK2iAiEAqvXzMskbKSDGAvP3rdY3atXf7vYirdr1KIWvOQXUiOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQ9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRFg/+LzJPb92Q5WubIwfuLEK9R0bPGCruehAZOLHvA+s8RzMX5YzY\r\n12jGT5cG8+mmMRosh76j49kfHRRDq6oplPJqX8C1vCB8WyeLkxKR+baahWu4\r\nAg8UKl1v3ovFk1gsGZM9sLiazLolx849KhAkeyAnhDzNSjqBr6uuOROKNVw3\r\nwW3+EwsViN8kwcSeldcxXOCr0xRPaTDk92HuylyTLKewxEqqd0rju/+MGJnz\r\nC0gU3ldhZH5dBZEtWPGVWCTho0EScCioca5Im5I/OXLk/PcivNQ4GzfpwELp\r\n4i3/B8GOuLhO/eXiVD9Jl94xU+ng4ZEePLFoNfk0w+wTlP+5HQKdbevJL3Je\r\nYmUMPzXQnUfMrIG51jNwVqbIeDpRc/c2kdre+DNRGftKIsGmsO0FmFKVEjgX\r\nXGCyZqOExzUhw7cxgY/vk8XvTWFXjnI3VarkjKaar2OWFiYPBVC6kY0dDTkP\r\nNXMrQM4OIT6GpAil2LsdF0v3GIq0m9pF6hHqJqCV7QEXqpIScZWFjWxjrfEk\r\nMLryiu3eV4W7afEJKtdbxCwdcF1rdBTQP8o36IzspDICzQ7wbz8YJWzxf+BI\r\nrPcvf3iLbB2UmWCMVaU8kWJ15Tvzkg6nZ/cDWZN7Z9CArYaDGG+ESg+IMbo0\r\njNiCnqV05T6iD28Kov/NNcgcIWvmADdfD5M=\r\n=PByx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/tokens":"15.0.0-canary.033ae083a.0","@material/density":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/focus-ring":"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/switch_15.0.0-canary.033ae083a.0_1674761277192_0.13948629669794488","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/switch","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b4ff58fb313a38052a924adb1cbf63c6af417a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.3a705fa1d.0.tgz","fileCount":58,"integrity":"sha512-+GIe4DVdlQUkIBdI2gSrz4qXpg/Jas4L4pODdf13kbtx8GxL2A8V+Lf75AjDswEYQt50pLE97JWSgrWvdJsJLQ==","signatures":[{"sig":"MEYCIQCdUTEZdgJWKKlGlLsrj4vJVYIpA+9hHkyMzpk1A2CxUQIhAPsvjGyE5/KY+wvMV8TfhulIUniJ+owhjHa91dUiOi8y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FPOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw+xAAkq0cGVvtqv/eNIMgl18T7Een/Tn1MoNrwJNZgY2TqjYqIFgs\r\n05IGQRmL7YmfAbUOONju5iBlGPjdACQNQY+9iLhF1U200zm9Pdi/oyqN/1f1\r\nO4PstzhES7/b0IZzE9euA67rCn9c4cpyymZHw4NmYC5nRhtg1/u7uf5gtJvI\r\n3QtPi1jmTDwFcZi+ck2Z0bMaypP6ANCE+LwP2PiY17p605y9bRS81LgIZIBY\r\ni8uoPo9ZD/QuASr7qANa8l+MFv5rqqfSwJ93YYRpIVhoC+IalFN2CGj6h+pL\r\nAU9Nm3Y3cPBvGmfLT2wvb1ZIIIo7b7PoavyEQtSluO841xOklzWCIIz7q9oq\r\nJBQMJgJk2Xajvg0EeGULMgA3WqRAlmvdQ8z04zOzN7hUqPkn6fqRBTjBBgJK\r\nX0k5GqXAptFDXC8+sJHGD1yiun8wd6s5DFXkUejYotnfmXgTdXFc15+BeElq\r\nejNO6LJYUILrK3mLWbQwMHL7LPfV8jUe7XMSrO3hV104IgAjJSr4ppDap+lA\r\nrkiBLUVYJ5s+Dbujj6zfVihS6ERqxtBXiLgaTfkYNhAYcm8ribvBocdM4q+v\r\n8fslIazAggk1j0xiTI7OBRwCA2usSZwYk7OWDwibIG9nHJ2hncRjxlKL305B\r\nuOdGmFcr5OJ3F38hXBqylww32LCntY9NKGg=\r\n=96g2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/tokens":"15.0.0-canary.3a705fa1d.0","@material/density":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/focus-ring":"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/switch_15.0.0-canary.3a705fa1d.0_1674859470157_0.9246428664796034","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/switch","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a282d906b9bab6860e913da41e3f54c4eaa7282e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":58,"integrity":"sha512-wecARmAJWDb11oLwNZJwByTuntkZ5A5FQDRDp7GyxBByWOEAbg16gbrfyDmNMnyvcyqNTo9iR2uQdMhdrd1TGA==","signatures":[{"sig":"MEUCIFAWtXdCxhl92QnSkthinJl474rm6tk0kYzxtG/Esbd2AiEA2cJTIYl/X++uPx/TStHyBKxjOi9DWCIfRUY1n1r7SD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQ7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohuA/+Jou9B0s06FtqBfuLjYuDhMts3CMC3wPBEi7Cruy0C4zNdcRQ\r\nsSOYUEAOrKEZF6q75P/25kLY5fuVEmOkyE6VWq0e72jSrk2K0LCx0dZ8ajrq\r\nXQDQk9Sm3fK1v3sMt8icf3K8tVg71NYNwKbz6C2ODZkTwc47/2JBvqnmPdEh\r\nYehaGQcB9p4g83Jp8PDX0HabFukjHGgQBetSIcxNql3e5qaHH3YuvnDb0l+M\r\nlxdC2/Hq26qqb2TacCacduXkeLQScZGciUZ0NHW2HLxdEfSk+KCM4W161+12\r\n0sSGgYyOAq7r2Kt8sbAZY756ToKQ3vQhBKVAgJDLZx7tkzN1oPxSbFcuk3n3\r\noG5scJoFyHJ929/g6ExHYFzAFpWbVRlUlLtfpGGAalP1FhNWsoB0vMrotFET\r\ncGkQdgNCDcVJvgkLfRm2jd3xdQmaTQlYLAKh9XKhiMdY2f0av2HID4Jrty5W\r\n7b5bBdNY0Xdx6cv7c0aJZvbtkPSnTXcrOIJwpJAdob0rdbwk5EdPdpydDkOI\r\n2QH6zgSPAA4fz9EMXBpyTs9jvWAfG3OkWgFEk1JJnL6MaQyRGmcKAmyp8dG0\r\npRtGOukkzOxQITuJl611a1TaKDfgRiLtODRvWew+14IUlLW6PaHlU0o43RZD\r\nDy51DPk+HYITXdduxElzNcBVYHOI06dWqek=\r\n=zBlx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/tokens":"15.0.0-canary.d6bea2ff2.0","@material/density":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/focus-ring":"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/switch_15.0.0-canary.d6bea2ff2.0_1675179067356_0.47335068191252727","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/switch","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cbae894302f1020ac41346aeb778b002fbf9bcc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0c94182c8.0.tgz","fileCount":58,"integrity":"sha512-TjFB47aZRGgJ+MdyTlGPOMITTgvfsMuZiXZaUMRA3aQ+6lGuhf/FRTCbkK+hYqgd6n+poPvbRYao5mTMjp+0ng==","signatures":[{"sig":"MEQCIHjmgibSTunLNwcSQld/ZuZcK+6K8CG2LjBuzB+a3aSXAiBFgp9StuvvJsDuYHMsohykQGKsQIFokzQW6pwWe1CXDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qUmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA/w//cGzDVm4TICVMYLVYY4IhUZ+O1E8xyD0GGFI+2iEHouAu7pGt\r\noHSUKycRxJ2ZwLt5Ymkp/g+eWrjsRKjo8a0pf4SBCvAauqXhPP/j0UCKrDgz\r\nm74bpnJMWNNffI64uynj6oKl4DguykNRccJ0YKV0kIpIF28nsVoH5UABW5uu\r\nBA+y2MogiqeyMXGBfoitsocLG7TKlU6WYLPZUN647Ozv1ttiB/PLpVXYkhoP\r\nqYOCP2LkwAPlq3F+kT/G+Uz7mu2zjSbX/BFlDgdGI1uXJ8jokKPzqwYwwzPT\r\nOND6zSo9zFZRWU+bH3a9CKI8zOq+xrwj35fjsc60R1nmQTTMhZp0qk65JHe1\r\ncNg2oE2e6722U/x3hxa0hFdcajjf98HYK+G9KDLy4Gjp6fyr1iRZxAuAkhfg\r\nvhWKi6dHPtmH3GzrQBMXEd3Z9ZKtQWeak6SHK4re8vexUi9yO/FnpBK3QKLE\r\nRaNOr/nRuuc9RW1DwAyadSSaACLGXBNWbHiOmIVhaaQwlXUPTuj3m5PV252x\r\njSed1ZXAa/smIwEXm1e+nRfXJhKedLsB/Q9gfeCU9GbsIb8jltaH17ETrw2M\r\nDunA6oeJrkFfdf5nYXo1ZGz4phxqN2d7iHRkKBM51ngfvYdamPsCqqh9XdI7\r\nhTUQ7fIDi4kfeT0S8/H6P4eWqbMQFqLNCdk=\r\n=X8IV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/tokens":"15.0.0-canary.0c94182c8.0","@material/density":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/focus-ring":"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/switch_15.0.0-canary.0c94182c8.0_1675273510225_0.8585177513286784","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/switch","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.15b221540.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ea8c9f0a1cf3e0dd1b559fe978c46c2e728634b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.15b221540.0.tgz","fileCount":58,"integrity":"sha512-Wk2kbO6SMi+PE48h5/U+3rYG6lU2tOfWyezSy9QNObOeyDWamBsiBqXj8vDHAWqGqVr+lsS9oQk7ljvgM2ybVw==","signatures":[{"sig":"MEQCICQF2WIEwtUaVoC8MOluhh0mQtQPVTYeUA4eAnIE05/ZAiA/5vFpJHlpDcmKq+fmyu5oZ8rMXvDRGC+vqD1nSIFJLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qceACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA2g/9HwpmE5x/i3mDCFkC/ohzqrdtIi773UyyiTZfFe8yhFCiEL7V\r\nix+UGows2/oIk+5iAJwcQdGZabCZvuTFGm6WxMb0eBlTlYm513+0Nctcbvra\r\n2f4Pua7qTDMsq5EGfnPLvezAyEg9LkGZJ5tr2BND9dyf1v4FLbgHZAh3zB5h\r\n6bAGmoUL+e33RLVpZ1i/4crnHItC2TAoJskNBeXgXsHkMl5TIAkx+J7LHUyx\r\nTkE7YYmW/15ew6dOLAQpB/5NjWQ6E/agycn/6TDGltHXxjjOnSVkueSEF7um\r\nqYTOrVwlp+t4698F0hGxTLzMnjwn8SfW4ZVZHXlvyU3RXMiPMJijmdo0U/tT\r\nfh7wq3Ogct6R/1vS8/QBWRI/uFgsRei6MX9YK3iGRM9VoW5MYMuEb6TpSndf\r\npFB585z4EsPfQAfyC9O3tasd49KonvUqegBh3vaAflMRiFluJNYcnKoSEAui\r\nM5ip+tAofD3KA1JtEVKy4llXHJOFk+UI5bN7Q3u8PzpJzeUacHqDGzSGIejF\r\nz833fHIIRf6Xs3BgBfkLXXh2EJOCwFvXFIp5cWQ37wzPaNd5GSiYJGvuSrjQ\r\ntzA5cXGWf7cFEtbU78f1VoC/4ilkuNSNc1ipWuhRz4eLsQQT4KGACAp9q6/r\r\nUD+S9KGiysXg3RwsT6ROjCpEPBjPbkQUNpw=\r\n=8E7y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/tokens":"15.0.0-canary.15b221540.0","@material/density":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/focus-ring":"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/switch_15.0.0-canary.15b221540.0_1675274014457_0.3559309072743604","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/switch","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb77ce1069e4d5ae5221d377e761aaca1104497e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6a4b3f834.0.tgz","fileCount":58,"integrity":"sha512-76RMZGVlxS3+KMBp71gnKCDLF7C+FBNfXBXQAZFe9Gs3sgvKBnlD3B/FG1E2Q3oTSNYnv6m0ozLQ+83yGw92IA==","signatures":[{"sig":"MEQCIAWkhlUs3FbA3CExUsVvdbhUMG9zCg+7a4RqdHQXiNZdAiAXETjNsFOot2ofvvPGoJ+lb8EdAEZJKdgkjnft2vU7ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2raOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT0g//Xky8MNxA5Efj4x0EdyHMHoeoqn5uK5yDtD8sx2RhNOvT1b0G\r\njIqMR8S8759zpnyTHNr9FI/rcEFBqX0L+Lg9OzcCiAqOD5QNAqsIwVBJgVed\r\nPFjNqEhzI7+jO4L7cEZa32TIbHVIOLwktCugdFLLlSP7XLlnguP5M1Shk8EH\r\nqTVNiok+DOJ6M0jkv4dXsKd62OSz0JzujxWKRlmFBbsWoabj8X9Netb/OCvD\r\n6xnybC09EKkpDHDQkvqVPgCAmoV3P3k2J21n5PheDmET0LQFvgR2YaLZjNyy\r\npBKEP5xHAde6WBmFCiX7ZJw/fqg3z679yWBVsev2ZY0L7UIbIn0asJuxelHQ\r\nNA8orzAYoBVKf/8D0c1AwsC20ZUNE/gtSuhyX0SqsM6CQu6Hqvs0TsSJngYl\r\nXyOL9tVpVjYVETUD/e3qv20zNz+pEVHfKbzl6FuzHpWt3ZaWtJwLAWQkFSZe\r\nzcM2cT/O7oYmEH2RpNud7ihi1TYkX4nco/j/zr6FgyUQhJHt1IjC7gN7jd1T\r\nLYYtFwr5A8CNPqbb4RWuZ/1Y2+IJuWzinZqIH/Bk799ioRkQJF9vS4Bbh78Y\r\nGS6gJLviOmMR3ir1ZeM+ruCppks/c9B26F/oDYFZXWEDnK7qv87215OyNQX0\r\n7O8mgfML0ZSI5EzCBnCRRCsHXwUydPdr6is=\r\n=WiqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/tokens":"15.0.0-canary.6a4b3f834.0","@material/density":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/focus-ring":"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/switch_15.0.0-canary.6a4b3f834.0_1675277966555_0.18476915254292336","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/switch","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f003b6e1d5a893a7a7fe56c2f4d5990332d33557","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b177b40e2.0.tgz","fileCount":58,"integrity":"sha512-xkMsFj1pwaWPztUP07qKaMVzFyFhozH/lqnJYvzwe7m1cTYtqiBGCCqEKMvrg7k8o3fh0JL/Wq4ATvOLyOsiWw==","signatures":[{"sig":"MEQCIFiZqIP4kwFDX3SOk8iILyb2asTIRKVjHhI0aUb6ii/wAiBJQg9MDETBf/AdEowytkVfY3eyi3N0nsn8t3GGLpZJYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y9wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp96A/+IPqX+snKtHl37Okwpdec0JmEcqOTS2XQ3vEDtN5FIPj2g38Q\r\ngWjmjlI/wfmq7e5NMzpNX7kNsN/47ImL4u42FfmAb4m75oiiWeA/no7pfXK/\r\nws1ldAOvTpW+NxHumC0B/WY6INZoOsqGhl25CMWWzqJwxggxskowOL81ZGmP\r\nlyeHh8O+cVeWLt3MmQbiYv+71W5a/qcWKyPpnpCP44fPA5tsaWlOBs0az+6G\r\nW706TNu7MpSFWSOk22Bx2YFR/b8D1v6MflIaBlvWxhaQKJph9zuS0/YxiO4e\r\nwaRYuzOFO63yelY8ro/HYhHmm++LVz2TuO2jnBGNb6V4YwBcvpQsXasY6HNY\r\nw3S9aOgBlrf8NwmwJl0bmovs11JrgltUMQNz7u4CpOZ3a+eIeG5qxkSnLDSL\r\ntF01XQVL27JNshakGEgWui1TVDIrHbLoWOG3syKojs1Se2oqrxxv5trPp8RD\r\nmew/DKgmd5RLXra0IiADAxZCrT4Ohvxz3Iyx5lviCLSktp9jxRm9pCv7CN5P\r\nvn7b3n7471Bma0fgfsNa2k2AqRTwcyPUvEGxM3FyVDL6tORdz6Qj6H61l+0T\r\nupKlytMWTz+131oaEIHw1CMiFyEANbp0n31Pix7JWyONfWe8M3k9qmLMz7cP\r\nAs+zUrDYs4ZLTIRWGfFM3rQ7Eyj3wm+QEWg=\r\n=0HRw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/tokens":"15.0.0-canary.b177b40e2.0","@material/density":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/focus-ring":"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/switch_15.0.0-canary.b177b40e2.0_1675308911823_0.3049138922752872","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/switch","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d9f821042.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf56b27d9badc7197a0bfee4565501e8d06f5de4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d9f821042.0.tgz","fileCount":58,"integrity":"sha512-6hsIs/T7qqw2WhVNCrvBUACq5xXFUea6QbTjIGXoP+qJ2UqYm4qqoc3w2Wh5B7DLAKI9Xy9k3dt+15p6rAWcYg==","signatures":[{"sig":"MEUCIQCT48xX9b77QqoS8JCf1bGLVe6wwsoiGhYC11CnH0JfjwIgDzzgkVvVdvBh8Hc6+/CX44wuYNVrnRb/uDtKsS7B134=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/VMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZqQ//SbvECub7ZvxZSGOZFHb7OTzCS5tMXJZd1kiUYtBnwdWzSO/G\r\nrfG445N32kvUYvB3/25O2tJ2BAG8HqlQ87j6LPnUYwqar3dfp46yR78Ffamf\r\nvoqFkD3LQnsZqxP+NtZLkx83yWcmxEtcxtzYWEiLyYllOfo8VdoafsKzqlUG\r\nksuRjRl3MnXm08g8CRDer73zMFKDbtcs5cTI+0HFuLgmxcl7tebde3Obnr9g\r\nnmZEN9NsHykogmcBws3W4L2xtJYbM9ati+pfSIezya1iFnPLs0D6A4JwlngR\r\n5e3iFgYnt2mkggyWYFlrbtpKVWvW0mOkxEArsNpkFOOPQt6/tgzqr1OQBZl0\r\naXXQT55h+R6OKpFNjdov6TJw8aj3012l8ftEPVAItCc9gnCWT3XENp5nRVsa\r\n47Cv5a1qhndnaECgahPIFBxn1CtT5qHk71YXa0ta02PCFjLcezS3+oJevLtN\r\nYpkZmW4/6xokb3myczBVSjzgmJkGqAmIRVRYNt1isnuej8EOrrmBzOt5vTtt\r\nO76eCUI0Tp3bfD1cwkypGArrg9dw0g7+IebydmIXCOfh4dDtzihioedGoAox\r\nguPDft34iL/PY5jaGfsCbtsyx6SwCkVK540sHqJXN0cZPPoDj6atfdaezfWO\r\niX7rCHYs6ydWru429uL2lv8ZRVLCzAvgrzs=\r\n=NYiT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/tokens":"15.0.0-canary.d9f821042.0","@material/density":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/focus-ring":"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/switch_15.0.0-canary.d9f821042.0_1675359564064_0.5055887617782822","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/switch","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4e2a0f3dc83a87ca0d4e9c4e5fd280bf2d3eec6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.47c7deb19.0.tgz","fileCount":58,"integrity":"sha512-CYpFPhbN24ZzdOQVblbOi9NeGhiIOdzGNlpfp3ShZI23uVeab/d38DlnIsTA0M1+KlzgYXLcvpRCV5s+amBpXA==","signatures":[{"sig":"MEYCIQD3pmgEEQLDw6ImyTs41eyRDAs7uFdNfMfBJyyR5Qs62QIhANOucLHa7ka1K0WRun1Bt/0i9nKJpfzfMpj9RSv3c99s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1071218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M9hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfkxAAl2jYWTnG4nPgFTxFGkmqRPiFXpYtdiCPzz8tBsLM01mW8kEI\r\n/+Opw6MGywVfWU8lXznihSIzb+MTxp75qexOpF5xyr3f/T//Jy0VO2rFyihO\r\n7HDKcDogcpITotqA5hoi8iYrjcNlvpyWPDJrsnRdzHghLNzhCKB+fnXd1iXo\r\nCSVWNGTUb0zs2qkaX41eg8M6WM7H43sslgjQiR9u6nfKvVdkTQmtFzt4F9w6\r\nlcgcYE0j0WOu8wEIMwcdZvGbLQYApXeMK3ErK5bqVFIpfpsqkROv6tMS1Gti\r\njNpMjsDuSwLsuUs3RrgrtfCTndC8fo2mB+ML6X2quP9e+c9cfb9Vnuk1fLcH\r\nKlFrhG5ubEBZkJ/f6Xqf2aPZ/iqfGuYQY9YNIktOFWNGAK2noIO4/qOR+Z2P\r\niatKOAwxI0sIPzWOd3xlR6gEhKmY5jnrwS9sgTc0mo3oYnG3Yj9KhftAm16Z\r\njT8dTuIBp06fTAfIBTYhq5K4nn17eeL0CM0DrmZ1gWWXGLPL9a9mcSECJJpD\r\nke4zYIrFGcFRU41war5qw7yT1lbvI1o5ST9E2w7AX1+sZq4RSSR7w6Nu353I\r\nIqbn7QwXeH8rIqEpnSBiWn2lCSUQl04OvjDgbzOy6rH4wNMtNRlSSrmKS53X\r\nBfdXAhicTkHMOY2Tlo7s78NyWQPnO6ztfW8=\r\n=y98M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/tokens":"15.0.0-canary.47c7deb19.0","@material/density":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/focus-ring":"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/switch_15.0.0-canary.47c7deb19.0_1675415393494_0.48175988910350487","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/switch","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1430d481004e4cb2c78986379f7d1baf7a2a6f2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":58,"integrity":"sha512-8lUz7p0LlmSdcSUqFSQG6efs9+r9m1q8LEC8PMYcA/ajeKdYktXfKmmk4/7UAzN7SNOp1RtgsZsDXs7Bo9/Oew==","signatures":[{"sig":"MEQCID/TtORbXyDwpfq41612CCempNITmB3yUewNVcl6DqObAiBaSmYpJDc+GnkuHXR8oonSrIigKNhJmtV9JkZKL5cfdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fgAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCLg//YoHn3l67Bqp3tmrV//awg99j7zMHaInDn52nksQ2ZbgYvEEH\r\ndgz63Y+LM9P6JhVXehbYXJZA6SPmYvoCzpro37EjXcQHwGVQNaM3bcxIhEKT\r\nYxh1eRxQ9thzI+87pENvraQfTfZvldwLE0f/3/L+rH8+5QUSwesUEBdNj380\r\n/bcDs61nWWrd54+9hsF1YN/BZsEbKK7WFFfgRZKEs99TapVIlFQhRVikhX+c\r\nlyFIi5+beJHpaCMd6YfZVA51gBqUjZdU0gpl/v0yboPNCruoR1AlGpDk4uqt\r\nAvLugh/l6mylMs3akRQ8DRAwmD2GZfxq+DSAn3qpszeZIsqI2S3+VOADVi2d\r\nQBJnkjq2Pc2rPhgsYiB5KsPGuBRljF+TDCz++vobn5PpOv/tUUcM1Ctey/QE\r\n6VRCTOtwi0NdaNnJ/X9xeppofvutbMftAGO0bqaWlMum7i0MsIGzbO/CU9PM\r\n17WjzrsQEjzm+ppZPF99gH5C/kGRGZHjmCPwQZ0qMMG6Jwmqjw0Z/W+aOiJn\r\naZgFFZvL1WJpTUZ7uFCL+aCgET20YNrbsU4JrDnS15MuxWAkzgT1lYhh1Wen\r\nOVJFA9ULkvqeizYlz0W+RRXf7nW7DSr2DPbC8sDFdtTjlHHTl+p8//bCR/8l\r\nXnXNvZaVrwS6Na7Zbsj3956TtzzG81EccYw=\r\n=6hbQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/tokens":"15.0.0-canary.a16dbd1a6.0","@material/density":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/focus-ring":"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/switch_15.0.0-canary.a16dbd1a6.0_1675491328067_0.950278413122063","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/switch","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.93416f87a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2247f8ff6b6b04bac4701382cb77840d0c81ffa6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.93416f87a.0.tgz","fileCount":58,"integrity":"sha512-hEkTHuN2h56ofKnNbpK8/Lx4HiMrA5IYJNiqNaiV7F0JlV+hOBL1YrDhYxk+rR48Rto/88y1Xub2ScpmNgi+OA==","signatures":[{"sig":"MEYCIQD5OH0LZGAaeNZQSY0+QKDWuEkMXOqBIqnXwEg4/qLAjwIhAM3sTdZ1Qqa/cbsD2WND3gnTH6XmMfAdakQnxOJ4aAsZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lE/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpegBAAi9kFooY/9PXxUDXmPtxTyipR9vSRuYnQRkPVAvypV65b5MaE\r\naTpzRObvTrZDqW8juk1Avw1YwdUfdKs3XePdRQ3BOPC2ruVRzuNMC6RF83Or\r\nrcBUey6n2HYy5FquEzBOyO3Xoqj2XwBMwTuD8BmNXuK1u8DYcP4AMzOEtTE6\r\nVCp5K4eY30KXWe4tYme4TGHKq5wMJEg8Vcg6kQ/FgDhoLFGV2DeX3foalpUH\r\n3/JTaqWGdFE/iuWG9i5bZ2e8q/s38d3efzEB5SIgOTtFiA1UeEYyyaXRV+LF\r\nlG4NtjR9HOYQLQ7aFJ7wZy0BJ7hVisMRiF/RLHDlv2o5MKS+jcwruaX6RXon\r\nZ9Tjgkui6FzsmJ1E0DYn2oOW+JRHkq8SKMWepZQrsEiU1n0U8A6+IPFENxkv\r\nds/qK4EPSrn5sDNel5AOb4WIufgFbQ3qNHQI9isIh6cKpktCtNzWIuyZmmVI\r\nhdwHKHdcZ6p+YI5GdTlDmtsBaGrB+jS6SILvc0d/QTXFvNze8ilXqiIVcmW7\r\ngdwPNy9AREh9u2KyGbUdcuHdlIDjphKHgXH2gzwWtJ1ovE/+KkFkMduDJIvm\r\nsH6Chb5ErNpoMh9GAu9IuBx1VVOYkxPre4YRiupbvPrKhoeRNwv3vrHAKTfs\r\nWrvfV4UWpKCOyeo406krXB5gQcjQDkOoCto=\r\n=Gels\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/tokens":"15.0.0-canary.93416f87a.0","@material/density":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/focus-ring":"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/switch_15.0.0-canary.93416f87a.0_1675776318797_0.2733604448126996","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/switch","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e92ad9114c8b8604e509114b8adde9f9211fa90","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.49b8e7442.0.tgz","fileCount":58,"integrity":"sha512-Z7FvROCIdD2x+Y7yxF1aB96GjHWmEBzY6AHWXMhv2cO34hUz0HP4Dcj0HOx/XpjBZ+x52nLFWTCTN/MAf2Awbw==","signatures":[{"sig":"MEYCIQDOPp26/kHvk/sE3ZAxt+Lm2lUl1lD3nhN0N7Pea/I9TQIhALE8jT8Yc946M6SKRd+f5O3MLI0hQWj45Qt+19A33ICK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tpoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgPw/+NilB3nSEUYc6dT5a/4BxJSdAcwlF+1E1K622GaLoJgyhmyel\r\nR/JiGuIkJ0nsC9QFty15YEr/elfeyFab9Iz/YrYfpa8Vcne/wbNMLJdWirL6\r\nBBcfS+XJ0eHXfVNLiRjR6+VW9XOLPyBE7nOobpxnX14UKixNPud2ZDH1xlqK\r\nJM1lE9dZzTEoKJDZa32sOp2kwBAzuoRCua/2l/6wr7Fz73RIPRfzbxCEIFwY\r\nOYniiGmlpJa9dvepdZQnMrby6DkqeKeT0AioZ151h7ol9LnGMjIZ7eSr4gg8\r\nTCWdJc9JqasaBBUTj4z0u7XVZy3v0IMXEgQ9g23U3i3XaNZWKcpLEbUkPbVp\r\nQRWbjGKvF2DHbPezBLo9GfbqqdD/X3XRI1fG5qwHf2nK850Rr4QDYFpO7qML\r\nkmit1fLQc6CWWoKNtZUjasS4N/ZUNuJnSOp457PzKBsww0sCAigmQDiR57/P\r\nNklb7F2sWrUALeBpB/P/tc0Lzw2PH1PVZwWO1J8ndbUKzw/NmXLbpx4yCe3v\r\nUcVVeaBD+goCojSh5qF7+f4WylQkwOT8NIqXoC3VYVyLGD97lV2zEkNadW6y\r\nKVBxr4DvU478xCkwX9k0ZUCWgM+QrmWNrE9ktogoiv6X8/vFbehk5UtDXR59\r\nlYvpVB4hnoVIrFo9DNLQFApG6G58rsqFYxU=\r\n=ZQgJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/tokens":"15.0.0-canary.49b8e7442.0","@material/density":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/focus-ring":"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/switch_15.0.0-canary.49b8e7442.0_1675811432031_0.27644592576067395","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/switch","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.de38de758.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77af9afd74807456ddb545624be81703681990c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.de38de758.0.tgz","fileCount":58,"integrity":"sha512-vdTO+IDpLBW3JAfEE61FbPpnfsffu8VLpRh2og8hdGhYH32b8EfwbxIVAg92vU8C3rdr9jaHtdoSxObtimKEFQ==","signatures":[{"sig":"MEYCIQDNLrIPCkNm1mWb4sjRakPmyIpcL4yUW8B/ydySsZNcdAIhAIZ/8zh7B78RtpZFHhLOVnUap3CUQThXAHAVbDK62W7g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RScACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrj8w/8CwelrfGgqnM6qSy9eXhuMXNdHpp9xjo4PS2pMKX6GqEoTw8S\r\n4vnQkhiX8JiWMOWA07WQ6TePqVxRKKY9QjLXM8fILYtiEQaomDxpBS/2Kx52\r\nkTnPteasOJggzr9w0+N7ja3wevg8qaQTja/23ikE6kpw6fzJaR3o6DbTLjFO\r\nhtRhot9izER4DbVFye3FrdzXq/IeZgA3jOsSVlKeukHnSagPRRncszKejNGC\r\n9mU484m0RDd1LfHgw9LUnvfKqO6D/7r1HDjiTlkEHKr+sK8pwALr3NMxpObf\r\n5tuyQ99stp+ZEMST6ivTiulQuVyLWKf7dSVarzar3dexKa+q1+dmgt/pr/yw\r\nLEq4Pbb/ZOPp3bp4fvIc4Y02oeiJTYlPgjUUyrvJdHCBJ5oHI6YhYaFb+BGj\r\n/duM2PaYpmA3vynW/65fo2SVi6eAChAvIWbQMhLpdCE0hOnLSxHTq1+lTNdP\r\nfj/P61a+/cOMOrqVHM59r/KVIj/cHoap+L6mNaqagppm0/2b6w5g/HbXZtNd\r\nZM2/KFEfDx3xVSoHNxseY30/BTKRCQnG0AcYTzGzNDCFXskoO18Rifba8S0B\r\nbvd8G2SyQY75THV1puz+kLuW1LWycg7dfxIxHnc+C3tMEJBTM8OJP6scDDMY\r\nv+iehKzqBJpesvjtEIxGpBapZKxdTjl0oEQ=\r\n=H2Ur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/tokens":"15.0.0-canary.de38de758.0","@material/density":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/focus-ring":"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/switch_15.0.0-canary.de38de758.0_1675957403730_0.026573239502171164","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/switch","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6f6a2b2781a3a68ee36d25d27e654f41f85664e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4d62de70c.0.tgz","fileCount":58,"integrity":"sha512-jFjZe9OLUtkXTfB4wps/Di+qKYleKfCORAyZe3EzDtfeSgo1w3DmN8Xv1cAZrtK797lsSZO6L5UU9Mxr7x1Qtw==","signatures":[{"sig":"MEQCIHK7tj1EpnLAufSbTq0gE9ZtKe5ddl4OpbTzHpZKwjVdAiAH9fbg8RcXmKRhVVgVSPihs6/efHnrN15vsRYnU1x88g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W3VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1mg/7B7LR+iqwkJCSq88MK2HyA3Lxow49T2EAx5m18ETGCdK2mJWm\r\nYRrADKMGNLk6xC6Wa/4FPgKZMgHKVLr+5/tlsXcZPtNR6DketDr06Dn12uHs\r\nCMCO/92eVT6zxJ/eU0eCkqtwA/b+JJX7ug217HstnMIQYjYtsHYiGPHEG79z\r\njMSeT9Z0A3DaE8LCXjdBLRCQLWND7ICicPxbpHw2WpipNbcI8Xh3vyLCnmw/\r\nR/jip8LkAbOsksi8cOhC2/v27a91GwTqo/bAOMUdNlS/jx9T/MoIJ49bp3t9\r\nrEKYSlp1O/aU+aGmKHW9TM/O+5yFkxKuQ6TsY4FSAJE8QhmamEISoGD8iuSw\r\nag57u5RdTZDw/nAC+ZjBS8mDu0tNWvykow7y1fkwymN/Nonao8gl98GrICUJ\r\n/9RUfP4PK51rcTz+Rb1buZ9NMDFgFO24L3bXaDRW3zGRa8RGDT2+8extiqGz\r\nM30s8dI//7XdNDBYKwuekPMGie3j8IFI13fJh2BSbgs6UhV3Zbu8ut19KoO7\r\n5c7Jq8AsTx3m/BkMYE41dfzJGLVxK/qFsXZ9RMXdAH7Jz9/PRMHM4hopPEuj\r\nfAtlHmZ/MpgBjndXDE7Rx9wBrOl/Ln8Wd95i7Qd49GzExO7WIHGMsqHOmKaU\r\ntyNu9BKPVkyDBBgP/l3VUnobXOCDCEp2hZk=\r\n=a06J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/tokens":"15.0.0-canary.4d62de70c.0","@material/density":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/focus-ring":"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/switch_15.0.0-canary.4d62de70c.0_1675980244906_0.8163457387025053","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/switch","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4fa1b8c9554ec5a043d2005d64b1f4039c74236","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6fcd8d418.0.tgz","fileCount":58,"integrity":"sha512-JjD+en18GNTEBV0X03Q4m4kZ1hz93DNxlD82RIDL3sX+5en14g6H52eDK+y/K49cbSmzdOugPXyPKYQmdR8u9w==","signatures":[{"sig":"MEQCIG5RRTr11q2m65R9gsx4h6aVt/5lvHFBOv739vGNZ4MWAiAtqcxSYRmLPGfaDjuKrxRRSrgk64P9RJIBNkA9+bdcGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iQWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/EhAAg0QHKkZXfyoUamDzx5U/Cr6kX4ytZQh7s91kJw6EHrOaIVHF\r\nsudMwIY1I4FsLXG8XklkDm9TaM9lMGITWj6M3HMQIaTKhv4Wjnt5sJK+8FQu\r\np56taic9X57A3JSgoTdzZYPS7Bv2JQnD00JVUUOYAV1gWCRTsC6ervyWgUi7\r\n516NNXzS9C/DpmpwslZ0AKQznerbuIxUNfgXx/j/s54kTdfeewn0dmOnFDZd\r\nDRXPN9rfe22oPsGcv4YMXdW3J88p3wn2/+V6swhHe8IZ3TKF86oYWDjRZ/jE\r\nhoEJ1Ei4j/IlsqvN6agDIDsqbx5+ei/gIDOSKAfvcp38JSbjWkU1UIHajiIa\r\nJ3Kujn2o9qXvoqKEzJvQmscqLZgs3ztVnDrJlvRnXqcdOt7yEssBRbs1gZRx\r\n38OzhhbY/9EMDYGWGOJUK4aA+VZ6b9F4bYP6JiN9bLJ3otgro9qgdyw93nF/\r\nBsyqm2toE+nYkC1X07wGx8T66TNwXTM5sgcNLzWvYd1J0hdzvqaZKGKVPnTP\r\nCsYagOtPqZswtvSVvwegCNTSljxMeW6WWgdEuaPIiKX6nUDXv2Du091cwLIz\r\nFF3pVMZf8dodg+6iIloN7YLoOOFmjHxLLeFyvJEZ9ta+q7OcbrUzMOoKKWMC\r\ne17iTD/NEHkmtJ0UOWQ3ghqzlFdF2fKWI8M=\r\n=lJB6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/tokens":"15.0.0-canary.6fcd8d418.0","@material/density":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/focus-ring":"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/switch_15.0.0-canary.6fcd8d418.0_1676289046154_0.9504074550966328","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/switch","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.066d9439b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2b513f1676446b5ffd9acf4c9f09b51a455754","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.066d9439b.0.tgz","fileCount":58,"integrity":"sha512-0UyoWIs5eF42KeGRqIJzMY2AUqpdJqJDgJncdLU35aZG+H7BDUGOhf2eG1uRmqIZMmnKtIuUQog0MnCpMaudpQ==","signatures":[{"sig":"MEUCICwAnvmRcjpuCXBHbBSk9Vc2gnEMxj4jWf43DtSKL8SCAiEA58EMrRc++IcgvS4ZOP6n6lw33gVpdJ1nqHpznewZz8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7Tl1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpX1g/9HbMy/L+bDGIRf23bZQHfkNbBEOR8l1SkEMTFS0RayD6Y1A9y\r\n8aaphxX7qmet0WN8h3fvTH1vGHo3m1QOfU3kSMjTOVofQZzE1UNH7fWGcQe0\r\nXDyMMAOdwOprsxEwhy5aFFdkIOfp6h/6fJwO5Ko41qap/toLTTcPRUJb562z\r\ncoe2nMuarkuu9UKeMCiXNqgETp7Rmiahj0VSjUNJ3KKrQfANRMtj6XLeHKU1\r\n6O4WD2lMstZwW3PtuBP+y2wyX/OoRQWxqRM3x87QaIY8q1O36o7B8N9NEncZ\r\nts7+CeDVy5KIXcXxmoDbsk47leDG5WL27b/fhemjPw1qW4p5FBz09iyr2C0j\r\nLt4KUqBv3s8MpgzxgC7YVvm/0qvVXu7RyxQ7O8XthYt9MrQoKU2OB8cw0h2U\r\niFHfnHwl8CbUPBokQ4WSr/pAfT3jeHwD0t2A8QX3uuwpGTuSuK0Vrkvc9BDO\r\n8fkgpZ6hafTaAtjrvUam4Kt9J1CSW67ERa25FkIPp5A69QphKtIwgMFsTaqP\r\nAtzAwAg+IX06TO8nh8xbq628Q/l6IkUaBWqjJ09AJ4SyISv0cwEjo5W8g82i\r\nD8OAtgkByTJdNBIW/ni8VfCrj1IY/IfVxBp1yjpQGt0sg2QXagRGWuf3w2Sy\r\nKv50mXMsyahs4T8fikWMBM4IF2jM4hmOgdA=\r\n=s9fp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/tokens":"15.0.0-canary.066d9439b.0","@material/density":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/focus-ring":"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/switch_15.0.0-canary.066d9439b.0_1676491125181_0.8025594632313449","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/switch","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"178f8ec4109e01011dd94934fcacf3499142010f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7ab32468c.0.tgz","fileCount":58,"integrity":"sha512-vJo4i9HPZs6K8RmuTcPy99bdSqA1vo1pGQo+i5aXkVGoE9Qt4KlFDKFGDZ+8+/1n+4Em6wN0CFtzeVLuEf4B7g==","signatures":[{"sig":"MEUCIQD87OCrfRBY9odvImPMS2tCTjHN1FPgVR7qoQSiYcZqfQIgJa2Pxy4syV5UGN493jfV4PACU0iayauEteaPeanYU94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjKA/+Nf1BmVIrqqD23GYzqqyin3XIc6pJWosgiRjAfJhVOHPb4jeu\r\nm9WdhsH2nnGvU2kDrrnE3qfgpLH6tFKO5xMp19cAVmBcGVfGOCEq0XZruGbT\r\n84FH2wcysssAQY4qXgDsDFLxx5TzuYjz+Mb49iAP4U8fehPfnFKSwhJD/FgG\r\nPj/831be4OvproHrYeGRS2hd+nvxO6WUpfWjARHobIFopx8Yu9YejwKwGGZ1\r\nTiIpOHJm24w0fPrveZ/FdReNG6tlYKxphphAOLp9frOUyhOABX8CCMhlDX7I\r\n7QZK0fahFc+54SGrZ8FEPrcFtHfCo9hia/yUPgRYu45gM2RjCFBS3NCfDEY1\r\nPO/REOSAWe7Kvt1y63i5hh1voHgWR0z8cgnwQ/DkHiXy1QATwxxbTEAnLvzn\r\nfaHiWdXFx4cxDrVCz6k7gVfkk36BcP25tETihkMmXHHgRHzWqZM54w9ec8nA\r\nNz9Wra5DDUMV1Z8Q7PWZpWSmQmvVGpgflbnlzUwfM22cTgCZmV8ttmTkItwV\r\nff7ynhnJXMOKy31PRhRB9kfwUoqr6rxd4L1kEpij4eBbhq6qCpZCYH0dVJoU\r\nCnFTmmVDl/FSx7Igg8QhgHWX3M+dAVZAcQkRXicO+kZequiUAtX+dA2GriB4\r\nB6r0fxt4enzqc3pb9VXR3V/ZU75+rAtmDNo=\r\n=FjQb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/tokens":"15.0.0-canary.7ab32468c.0","@material/density":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/focus-ring":"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/switch_15.0.0-canary.7ab32468c.0_1677004505380_0.21214380707617808","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/switch","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3eeb92ef8fbd013de9e1e1e7ace9ad7dd71e4a78","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.fa27ba61d.0.tgz","fileCount":58,"integrity":"sha512-pcXX/Drbhkmri1WUTUEPgjWE7/93aIy8yS9ZwcS3hF0KcA1jGLnIan8GjCqUnMO44QwMOUSqx4QSF7XnhlIcpw==","signatures":[{"sig":"MEQCIBo+vRjDUXcJNa2dICPSgsnoxjB/bWIWdGuLco63xNTBAiB3c79/Q2KnNeYEX4s4tnTcotdoRLt39q3FwmxVKLiudQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NhsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoShA/7Bg7IwvXdjx0bX/dWjYgAhaKQYPfwXzsP/DKz4dCirATZIPa1\r\n91NQF3x0PUhOxbNY6yJThBYP8eXOjxGognrfnUKJx2MUxyLxOfLerSInx2tf\r\nqd8SKjqZAqUCBk4mpO4Kvax7dY6ZKT4YGI2D3kkdlXWZQyxsPkBpohfiFJQW\r\nbiUzXSexLQbpuKJ6HuumjWhUi2LOk+D5+8b36+wY1lWhxQgv/d29/YT0lEPl\r\nu7RtXcdBKzkiDj7uWn27uhd7NmROVf7jp9EDJB8O8s3bQwlMejGhFj/epCEU\r\nlj3kyMUk+k/MKv6RUjFt7TsY7NDCGJHI7H8Uh4oI+LjKXh1yaKki77k3d9am\r\nJ6U8ZF3a8Cny8QAJujrm3AjsqAOnxoGZ5Gp/+e+w911hW9brjW/s+Wd/DwRw\r\nwI9tKUTbzRBfDQgOdvptcZgkYritVv6IjCZNmqqfa+POD5mh3Ds/Tm1Y+iRp\r\n3HD9zyuAvnxMWc2BlGWERPcUuHGyvlZlwAAn/ZWftuPsIdYrpVDuDFVW1nJr\r\nSegRezidU7PzsKlZKNK67qyWVsBslNxt4d/gQMs2E4uEyLnGm/A/NdFWUQ6Z\r\nR3TNMT7yF74J8Ggf6DHF7SVOAw9NnSdrhA4nUlxn2M/5w/D+mdIKdWxvlvOu\r\nlmoZfb8oUxu0JY9k7Uzoh+spc9o2lEBvcgY=\r\n=KAGN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/tokens":"15.0.0-canary.fa27ba61d.0","@material/density":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/focus-ring":"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/switch_15.0.0-canary.fa27ba61d.0_1677514860274_0.7232031471441964","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/switch","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17e0f56992cba1401c6330dd887bf4b206435cc9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.311ab4d4a.0.tgz","fileCount":58,"integrity":"sha512-2jO9RSj9aBPeyHPzUxX3PEqJ8ZDX773pi9kPYWH1lYdA6giuFygoGZJwUxEfkyOdhcPsoPORHwyUf0kyIh+UBg==","signatures":[{"sig":"MEQCIDHXPk9yEYnQpzlyrgEagZUuJBdtrh8+qoOpM8xun7zyAiBdFuLq+11TlawklhvkWe18T0wT0XPOsuBz0lTXZp66UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N10ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhrQ//avazjLGytxI/SqSX6rgVBhDEIU0w2n/bjmNf4nuwU8cKwohI\r\nduVUgeeghcYzof2BPz80+KbRh2i8NkCT/fDf51SGzlKlYmN3vxptMn54QaOJ\r\ndbDzerqFnyr5YrgpMAbEKW3zFgwd0Wp/bUzo68nlHDQHUI2rQQPaaAsQ8GoK\r\nAFCdMthlH8Vwu4r3Exn7aYyXRYF9B8ZhA4uzlJN7id9MxaKfxTEW8/p3AQuL\r\nvNV3c3rQ8Jq22UjncIyYeGCR6t6Me8Gvrq+OIb5Fkl57MNePEt6pJZ8nvJTV\r\nEHJtTX2jXeLYC0dYt2toIQJrAJykTGTDjx+E3Yib12EThP+0YkPt0/aMR92Y\r\ns6m+cRPHynR8+8aVQib6i14b0IBFHls8bnsXcAL+3j3ONUSb9w+b4JpWlHh3\r\nKDz8NeLfpNUX8HhPsTLl82oB/rx1MMRCmNlyaGX6cQafquxQMv1jJVw6EdKn\r\nmLvGwvZESPcU6TfNJvzJCVK+SEemnhYv4B5yAiefPU2jgLT8kJGRgj8T5CmW\r\nLisRjdRguwU7H795eClB9ntUWzEf1F6h8ChH/tlzHbxzNQ+aV3mzt23OnBGX\r\nji1HnIDs+RIvtb6v2XUfVfL7qEEQdSOyvVecIVAmmODJM68heDsUD2Qw50v5\r\nbBTwBF+gWCkmgxVVFsI6IIASGjtqoBEiaUU=\r\n=mvf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/tokens":"15.0.0-canary.311ab4d4a.0","@material/density":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/focus-ring":"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/switch_15.0.0-canary.311ab4d4a.0_1677516148383_0.41364633285036834","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/switch","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b321425626e3a94271e4b4c83493450ca9b920c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.5cb8e2174.0.tgz","fileCount":58,"integrity":"sha512-LRupUCud5oRC0Yiteq0/oHyvnzRKP64d4P7uT6T7TZmvUUnpY7XWd5r6IRRSUc3FDAt9cctcsQfd8raDbBkw9w==","signatures":[{"sig":"MEUCIQD1fVIUt+SaPs0YLA2FCmv9kXJtYCfaqNnUySxnUSMFYQIgLSKSvZp7O0xP9fmUI8H12hL+8PfI0EZrSq7mIH4H0z4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/38dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEjQ//StmXZGWZRlXoqMEwj21F9sP2VIvIbKvge+n33KqG7xrxrVqb\r\nmbeBq4W0CqlGMWwpocUcyvuF6hbb4Ldx1mEDWYqJN+wrbC0m4CIJ2I8Q87E2\r\nAqCF0T33uDrjfExV8xuVVQtU4g0QCEZfp+/uB+B2Z2JXdquPge8L5F7xi29B\r\ncX94gUdVAXYeRoUY/JJUvTJ4a8w1+dE9hr+21kgknlVKOp7eX9eljLmhgLd1\r\nD029Wm8+XZEmzXEJ9X5byWuqaPYWtFY1IMyBEw0HyHi18+rxRNeUqOiUnTAg\r\nUHUFc5YQ/X/6886YXuBM6CVlGIrKq5ZSP0k/0I/61lwiKuZVa6rt+82ljHA0\r\nS1S96dDgv72LH36zeLNesIAa7GzUhmNYIVyf6vWHonWquAZ9Ysj/lRH/jPNx\r\nmKriWoCWL7uhV5kBoN1JJensfs00k5GZDMZpZ+DrfyxKEzytjlcRJI5EAVuE\r\nqjWkMd9SJ3UAP1L5ClzxcZZBg4MXuZ0Km6bpm1l2aPMiJSAGYT/2loK760AT\r\nSKYtAtBWRhwXV7WZUTmAJTGmg4WVof+4E/qyTFC9bTyBawnFMUrnTWTM0G4W\r\n7+4j3TSf7KC+ZBpDQIsnknlQg/8/VMuSWHhWzO9aedP5xxvPzQGGs2MiyDej\r\nMsxDz0h8aVQwAHD7QsIeFwpa+5ONBeEFW/U=\r\n=JdLL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/tokens":"15.0.0-canary.5cb8e2174.0","@material/density":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/focus-ring":"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/switch_15.0.0-canary.5cb8e2174.0_1677688604951_0.2648639094533487","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/switch","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f32339937.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb26bd29a07ee27cc8115633afb23e16958321f6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f32339937.0.tgz","fileCount":58,"integrity":"sha512-YDLSpewoicoJ3eF5xqChHv9Ty4Ukm9C6OEfHLUq7f8Qi0hx0YRQcgiulMcGLBObqCz/1dtdigGrHyg8KjgSDbQ==","signatures":[{"sig":"MEQCIAeUDjISs4EYAMsq1axUVdruswVuvEZXdTteT7Jol7ZFAiBrP9gZl+TNDydO0zxaJsE1hltmCwtGufkrtdV5GqoKXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgPSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUaA//STytifMGeAe79Z7DUrz39GhQq0+XFoLgkbxS1QICc8JEIGme\r\n2X5v+TkvXiaGYdRBq458LkXvhHA4XCRU9J7gvzuqGYPbBOpG4d2OE7prPIUz\r\nu/9xIxPATQDMoY8/rwLTt4DbQ5NrDs07jQX4iEPOoCy0hlKdVj6Vxhjp9uy3\r\nu07q/U7Ttt5/+TrMCM3iDckjv8FGcx2m/9lT6+Hak4GF8NjAkAeqA17lcqq9\r\nkORIiDvtDQ6Shd4oaaOX1fKw/6KimVZr36EeAPt2ZyLuociLNh9XVviH0td+\r\npY3bkWhqbEwfChNLuK2COiNnQYMN+CP09Rx02gP1jGg7dL9JGTaBF0IHD/5p\r\nMhLsT2W0OYVUirqv+8yY2qCsM17FXstVsJJXnWcWUy5zHBHU2o61KtgvjDqZ\r\nTjjVRG3gy/vuTNv3od4YCC6BbbNzC7mdHB+UXVY6yvz57CuUzUPG5gy1M09R\r\nBaIJsZPHA2o4MDmrqm9PUUmzPzGy2Ec8UhUfXg0s1uxg3QeyNmEbFVQNUFww\r\nNIAunnno48Y1S4aRV7C3J/ApiHeDh5LmBlqcBBBEAve1amQA4v6mv9c6OqjC\r\nbE2i1PNAAE3GXJVRxRNP5Izn0TQkXTYqGuPFU3oGBJ8CkY7JBa60rbvONiOo\r\nDDCLFVnLEKO4peqsfJxR50h1DXKEdCaevjU=\r\n=V6Id\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/tokens":"15.0.0-canary.f32339937.0","@material/density":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/focus-ring":"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/switch_15.0.0-canary.f32339937.0_1678115793797_0.04756912923442935","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/switch","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ae8069271c1382ca70696ec3e20116e4920167f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7644d63d5.0.tgz","fileCount":58,"integrity":"sha512-u+RKf/yiE5M3MCP9Ugfo2VBKmhscVRTPEo0mgei/rLWUCiFVY5LLs46YrNQGdnMOtIUAjS4ekV6gANY1703abw==","signatures":[{"sig":"MEUCIG2Cn+4lG8hHznDPq7eWBQm3Qk6NOEiSV3yMIjNnqSSnAiEAjPOxKkSm+Vf0HHVj5qPCQY8wwSeSo7sSwRcL10TmP3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmkGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkgQ/+Orq8DuIPqC8HpOYr9DStsjbC2P3mcpFYD2c5atuGoyjiVe2V\r\ncc4OHUOhA9Bu+ZJ3VV9+K7PbUozKBHm/yhdubtYNeUyW4SFn9V206e5QWR+r\r\nizQifXV81rk2TQ3oFzH5+z0kotfhCekpnUPi1y6QIgjQbaw7hMFqVD78wsXq\r\nkDfwBOYGvOPyhyBGVRxfibtIZmyG4HdDmO8lVvuDipxtJk/8N/tErlfJ1VLm\r\nhdcYiFmLDggbQmv8DrZiwDvLflyiF6KA4uyhwJ9810Tm5CeOfVlHh03Sinoo\r\nd4/jFGIsC/ICYxkB4Q5AAm5HiHlgitA1fqXgOnNJNgBiRE/eLHA675tD3oR+\r\n2xkCg+faiJvCC7V7fMUs8mUxgDoJA1li05Leitl3hMP/Zj2JJFKvLLm4ycnG\r\ngq/qGJjucJJbcyiZ0mmtuDnwl/HMyeMEn7qWel01ty0avurA9aQiJdofN56m\r\noDxbr9L+ZNgQxVTTSNS0fjSUvlaxTPitauInpWHJw4rtk+RFb4n20KkoA4LR\r\ngnv8FpI+ykLMReOrKLprankmEiiqMJgGyA86NzeABlgTnQIqx1FOOExDf2IX\r\n71nL6sdqaSs5lkHbnY4p3ddCSfyRRoD9uK/V4np6kbmUdq4LBInbfT3+Rk/c\r\nWlEOtSrJaELCCV0h/q27fuilxH87YhrWzbY=\r\n=hgfJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/tokens":"15.0.0-canary.7644d63d5.0","@material/density":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/focus-ring":"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/switch_15.0.0-canary.7644d63d5.0_1678141702453_0.8515593814773714","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/switch","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d96330c08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b565bcc4e69143a4a6e504315056d455b2b5668c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d96330c08.0.tgz","fileCount":58,"integrity":"sha512-Ri5kbz7UaWE+zE2raL5lSsjgQ1NeeQATBBwOOCh4GfdQZkchkb4VGl0a7u7bESRFl8AMg0jKTDxLXyTtWg3b/g==","signatures":[{"sig":"MEUCIQDnWxjD0h0xH/IvJ3nl/cIvx7RxiTEBlBaIsnbyP9GJOQIgfSlHvvkAwTamd7t2QfFL3UsCVWDoHNZXyCms1AEcRRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHS1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJHA//RCUBAWgleQKu5aN7njkGHEqeGcmqKRBWcBT12FmRjOEerZjM\r\n7Zp5nBwB0b/IqLbj882VdO/eb3rh3P3svxkWfVWER3P5i603BOlEAET1cbPr\r\nRbEdSfGTHAa0DnVjLCJs2OfTahGkaBc4YYXSbDxJ+li/JeadPCdNCqrfw6I3\r\ndjD97yazP+naPoLxtK8oTpCLnLlbCtea2Wlx6bckRYgWgjfZED0GcjFXP+Fa\r\nTlDVn5EXVRic7TPnMDZ7V+Qzo5CoIm1dnDPV476PVAWXOah3I8sEEW6ATLoV\r\n/2TlhBxtGM2NztWBuYKmlKvo6WHUe0dDIXK+rZ2u0LWpLATIoSX13MMtyKbi\r\nQdd7ijzIjt6jcVxMYdBYdMhN0TC2x3Pfsm45L4B3RTcrBXYvsV9nqiCPYYSU\r\ntdDaFiQzurgCV+VVeZiCXf23fR349hyEs06Fm9BKqJxAcmBo//YzBpnCwZD+\r\nFSEd8OEzOqfGRVLOYRl5zqSgehJWCKMlPAcjfm2Az1eO4qzU6vi182P3iUy8\r\n83foK30aUd3d18gXFvnJz8gKtjb6Oxytho0z6nBOcrKc6753LLWqKApPrOtw\r\njGQiIaF/XeqWgJW+69c2Np6muwJkUDw+qEF0Se8StAWwyKFfnFKOl8CtY72I\r\nNrlKN7Y2ygmXf5pdNlQAQ9vs5LrJ/ETVDcs=\r\n=9gba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/tokens":"15.0.0-canary.d96330c08.0","@material/density":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/focus-ring":"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/switch_15.0.0-canary.d96330c08.0_1678275765037_0.5353876070984693","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/switch","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"354b25d929a89bbf0d1b51485dde4b2d4b299e38","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c99cae77c.0.tgz","fileCount":58,"integrity":"sha512-Qsk1+JtXsjBaOlBJe4U2nJ/X7aJPAfYwEiJiFll3WTgd/KJ/2nsmmGbKtsvJQ2tU8olroxSWedTlKG39Bs9dBA==","signatures":[{"sig":"MEUCIBgsc8Q1dZga9Rd6qn0rRrWcXVBbGuZcB/HUHxnH/O6eAiEArLBiYtLWJwpOjbYLuXvNUwxSzdcHdRmbyK5jOwSUYfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR22ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSEw/7BL5GwxUnCJbaRF+p3ZaEMZIREG84gp/fil38KBvEG/IYOrLE\r\nHgq8Wh393MXB1uWy5Hq8vuR3eEzpzkNY+ufhiazZZt7+2a7Cp7tQXlVOeUl2\r\nBUp2mV8AD97B75mXzMYQrmEZU5l3fJbKLyVq+VAZaXcNEAeqjAghdsaTti4s\r\nP0qCWtUYmmZ/JliLHJgj9w3DRMnxHgIU0rcXwT0rFTZ5d3iqncGXamhkyMVQ\r\nmPXjgXp7yGFFC6AseW7fIcdMcCCs9whbt/OKn7/mMke20tddu4kSJYaZ51BG\r\nhaXdo9+9zQHEbCMxbiKWWXdxKLqnfql/J2tuxflt8HFKJO6VQcOvmaBmWscz\r\nWpC+ZAyW/KbHB6d3H7dPB5YC5p5bB5IOk/i4gRL8mRvjYDaN7hi9VME0YVYq\r\nBUKsa4pOWuQ96D90S+WPS+8yNbIdGowDH+d0zuAxb14HL8eVdwrm4pdDbZsi\r\nni9GgqLVh5kSqggeQsII4j1HTB0rdTxVsrph92UuYBa8wfgjb1NqoSZopbnc\r\nUe2kNefH6umGCH69I1GGsTCZ6CHcBTcXMHYnK/6DUV4U6F9eo3km/b4aeXar\r\nC4tHl+mpY5NXgg4sqn5Yy9ICYmv8RgtTtp0hVDbxX2M3icMfqjDYJJUIacAx\r\nYjPYpQJq80ymP0mq4RK5i4VVkXBfEz2XpBU=\r\n=Hcxj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/tokens":"15.0.0-canary.c99cae77c.0","@material/density":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/focus-ring":"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/switch_15.0.0-canary.c99cae77c.0_1678319030359_0.7615899548361373","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/switch","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07646b592066208369b15c1f23b1d6de1fddbc15","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6023b1cd3.0.tgz","fileCount":58,"integrity":"sha512-w430zUN0B3t+RvT5HALZ+TgcN3SynII5N/H0D4Fet+16XPs5zNEx+hWeK9gnhdan1dK5C390F0X5wJDMU/wwcw==","signatures":[{"sig":"MEUCIAowf0zauhO2N3CUSehKzRO4WXicZKp807xTgzdNylzJAiEAx23PYlIUOaWVx4KgPpp2xrIXE1rDdAP/bPCdHpUI5PY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCezFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ+Q/6AkaDHwfJZXdeZtvCtqGgSg/zeHvWW2Pr/y83p6tdZWmt1Niu\r\nKOooJZOqW1zqpQo0pGdxfN0+ad8sJveYbicXrkPFFeZ2OabEfoTj+nLOnUxp\r\naWmHvU2SLhNZskQ153T+lK2TSd+oSt/5fJoQG8/ZZP1MvFHDufuuCfPo0GVj\r\nSiLbcxpW08bm5vOzYWrVkXxOM7muL2WkM5On5pmBsdOAD1tX1SmWREIqyT2d\r\nzw6fG+bqh+wH1c5mPPrLGBRwK1kXU1begDi+6k06zb29NEoa91FjGpc4rpX1\r\nqLW/hs/8xzINpds9Pb2QTMXwmzo2KBT/1YFssYs5gDlcM5QkZMrypvn2/aQ1\r\nfz7KnXHxqYnwjHyUG3DKS1uahQ9H0GdRFgeuDk0yb2r7UNcc67jkk93LnFN+\r\ng2P6N7Db3mLCPgdSl/2Cp0tvOZl+nlVzClLENBhbd3cxWks1KspwiogLmfQZ\r\nmN0Z6QJoEM8RJTWPPtrbeZLOL5h3hLtCq40h06rfye8Zst9Z3NXFhsX2cfcQ\r\n86P4cEIe8pqpjxAc+AJdWMp0xHv+f5NBy//boA6g3dgGyfMqHKx9VoCt2xR9\r\naorI0pv0xYR+QA0P8Y7eMOqgFbwNgiYQASVLPhcNb+Jj3dhtTlcr5L7QZQpI\r\nY7WZEMCzLhhEaza+Kk2AsPCm24d0lFU8ZFc=\r\n=Qufv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/tokens":"15.0.0-canary.6023b1cd3.0","@material/density":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/focus-ring":"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/switch_15.0.0-canary.6023b1cd3.0_1678372037605_0.3292666639984623","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/switch","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.274610c77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"197875311a15efa6cb5f1e6822d4628dd45eac5b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.274610c77.0.tgz","fileCount":58,"integrity":"sha512-bxmcJC+aHPuJc100X8r//d+eqCIrT0N0+o2LPlcG2zyqeSj6bPiwjamM+0cPjHrHqWqpHI4LEBC/xsjxO4chSA==","signatures":[{"sig":"MEUCIQDmFqwV7wDMcKxK1kJoBXOYUN8QK4YP/69NbVQrE4z3PgIgT2kNNptq3no+8OW2GEmeaUbl/mM3JClylKsReKABQQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfRfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Gg//awdYasPWAwlCtA/UvIvVoA8sjHDQGmpXExMOCLy4UzFNoJXf\r\n5E698sTpeaF1K3iBcfbMkDtO4HbMepJoQEiz+2EedE2KXX3UBjNjmq5Iu1M8\r\nRp55LWlSy3UTZhIbTSmvhPbd/K3psTcpzIvVXaXikMPA3lzzAgKBP47c8Zad\r\nuMT06vVk/fUO7HgL9VdBUatUWVvknCQgYp+SYpWKd0ryILY3gZBuA1Kd7qmi\r\ngTi0YJKtq5IZ9esi1BYdUBHwFhkDxOwHSdEVwX9mJappNc0roKZLv55OOghK\r\njphKOScjUiyEcEm9sOvh3B8jMTO3mt8t3hFzftWkgxvG3jgMjBxZNLNAL5Lf\r\nszYL+Laavd9NfbijDq0gTq0BNk5l3o0ytV9MvA7hm9c77Xb6SN85GmioF2oo\r\nfBLVGJvkFN7ZZm+zOP+LCeXKqhQJsUGidWtgKJXM9EzFl2SqEM/gYi8NLCpA\r\nuAwyHGE2N3rE5SMplBMlQDG8tcb6UrMEB5+2hwHDu32P+nzcM2tQ0W5gxD6m\r\n1irWH4YEQxyVrSkc7roZ5/xU+qCxi8KyVs8x3+UMq4Nh1QFEV8je8F3Oeemz\r\nGQmGUOLa/QtsHIBXc+s6Xu+MRYnvC7z2zM9MHmGUhqBt2UXwN9RPHVZG3noM\r\nlboYf02HO1kUEJ2xm+FSm3tt0lDtFrXLFQs=\r\n=OO4w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/tokens":"15.0.0-canary.274610c77.0","@material/density":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/focus-ring":"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/switch_15.0.0-canary.274610c77.0_1678373982915_0.5454764547229882","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/switch","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a274583b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bac1cf718e333cd63c9c16519c3caccd2a71597","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a274583b9.0.tgz","fileCount":58,"integrity":"sha512-joORUHfO5UHx9TqDf40bz1FWmmKDt35WqrGvAagK5H98WV5OhfT3R/axJ/LSk0NbkIzPeLeXS/PIuC89gxCryg==","signatures":[{"sig":"MEQCIDfnVdSfkS+nVgW6jMMeZL7rHPQ8mpPjZQ9Z/Q4UMaDbAiBYnr+s9sb0xuRNamnhQs8VffC+EiWiAlHeGmiWWC6ncw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjk+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqE2w/+Pr4TC+CIffQXi6NjcyVOQ0v4vhvKJTPIf07R9SPt8tfZAGDO\r\nFnj4VueWBJVYDRqZAvXIWGA5U8GsP2IHBMMIuF7Nkx3TbtuzmXBc0nzkVWao\r\ncWF1tZ+aRzyvJBsVJBk7yL+9h9yLVw6LSWabAioyv11SZ7DZXY2OLhHYEu8Z\r\nfWTWE1RN09GQTrmlikV4fdDax68f1UlpQtJ8bQN8ayeqJxlbwJDRCorKnUtK\r\nCuU/QFN/lL4HF6NzKGgkyBbLjhA4mjZB/PR9C3D8uNRz3dhpigQD0xS1pELq\r\nWY+59zXngqoPwfCi6PVhd3aAx4kpFfQ/B/u/3Xm/RFcH0XsXc0uMX0VmxCq+\r\nEwckT15ORanKW3bBNzgd9ovWv/Vwr4+ksTbdMhGcNcVSgwooFHtQ3Ecn52aw\r\ngRcTq28xW5wb4eNFbpJrX07E35IEGMcphNizlSE/f4tcwOwfGB/vkld6XpFp\r\nFHJ115zge9VBrBDUSL4UIsCqxLhNoRIcfYn/Kz54OJKjABmofCQUkzAJadMK\r\nwkQwbTvOznSOmwkouejYKFCVCAubL1RQ8hr1A5WtVcguo4+adKafTF+LAEpb\r\nEmrrm2h2ut7jYbXTSajSIHuqVmWybRM6IJ8G3m0i2M701F6bgCuGxYiQRuMM\r\niNkgDzaOoSV+x7nGDTWsxaEchWTvZbLRgQc=\r\n=FcXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/tokens":"15.0.0-canary.a274583b9.0","@material/density":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/focus-ring":"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/switch_15.0.0-canary.a274583b9.0_1678391614230_0.8352819923912471","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/switch","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.da22ca960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5931f7f2db0fe96bffb7f48dca729936423c17c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.da22ca960.0.tgz","fileCount":58,"integrity":"sha512-6pZYJyLAlKcRJsjTrA2JFoFc6hNjzYiLVGlDajQJUkuOGasH+b2pPJJ8LHe4uJMo8fPY4KHGoCH6kOTBUCyeag==","signatures":[{"sig":"MEUCIDKZ7Q5uufYkCjZDRRXlenXG/r76sTnXgdzADD8wNHYZAiEAtWsOeeulyvy+cUNjCnKANYoq3103zRmwdFAc1Z7Czug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBwA//cJsUOJ9xxbToUTx8oXnFlvkOLvM1xtOrljbGntvNY4Yy47kG\r\nA3eRT5Nzx5NO9uh2lriU76ZsvqCGU5ptzE3YrZmh3me18VvXIS1WR7EV650r\r\nK4tmIHeS1yNr258ffpCrhLpRPTP7OekfMr+lW5mZGrY5S9NJyM8RHL+KcWOd\r\n4JXXEszT31AtVGX2DgQo5qcdHiStFsTDNWQ12U1Kb4sQmCvQ2Tk/mDAWRL6e\r\nLC30belZ+NjdriANZmf4pw9+AHFw6x9GDxjQ388Smz+2AggV0lnV087Q43wA\r\nKNAB9qF0cLckDnin27rgdJ3pZEXRX5Emiri8JWnGDASIDA7Vqjb+p7VsSVJb\r\nqr4wPnTFHq27V6UU4Ox0L6AkRvHCUGviw8NPOJEb98oHW+MjP6/vpadb6mKY\r\n0gDH63ySAZwzdMSQdD6mhrmxlq9ljbsGbEFUbd41x1UsPWwyQmg5rlo6IDX5\r\n6Zg/qGliUIBBDN93Ow1pJJCclt4LUz0kYLsQu/c5X/wKAItPayRd7a1Oswdp\r\nXHTt1m1cjVweiHIIBl3BGlNXvEaNOpbawC9NfWpcUi9SLQEjqc2sPz7RhS36\r\nQFot+Q5xw//OzUc8tdJJWQ8UziY3qlxqIVk9xQMRVNCsXqzPR6AdCVBGD0NI\r\nm3p44Sh/ZY7exf8fc9OXwLbBrKNZf9jGMqQ=\r\n=NWwe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.da22ca960.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/base":"15.0.0-canary.da22ca960.0","@material/shape":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/ripple":"15.0.0-canary.da22ca960.0","@material/tokens":"15.0.0-canary.da22ca960.0","@material/density":"15.0.0-canary.da22ca960.0","@material/animation":"15.0.0-canary.da22ca960.0","@material/elevation":"15.0.0-canary.da22ca960.0","@material/focus-ring":"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/switch_15.0.0-canary.da22ca960.0_1678393150181_0.15346424370207123","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/switch","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9dfa00b87bf63e47815a4cee34c5699bfd8bc3d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.304a94e8b.0.tgz","fileCount":58,"integrity":"sha512-UH9WAfucoHSEhEbQEPpDgQWRhcpNAoooFZlFJMkkE6MTn8QgTohrR1YL+vNBElqUTrwUIS2KMkrF4BzV/WYDXQ==","signatures":[{"sig":"MEQCIBnDgpSjDX/EIO6HVM6wUg1RfIS0IdtS30YDWDHZsYKRAiAVZ6TT5DhGOl6TYCzHlNbO9bzaGVkZ/lbi/mQINt1UFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkWCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqxpw/+NgPOJtd7UN8omotMFtBtVSifcd4dco9PRvZc2fkWtovHMBTl\r\n/ZjJyXL2mZmfuDImS4Oup41Z18AZUKY5wp2og+OkCyMHQ9FG/z5p8gH2Vt47\r\nnK1BOGLJJdOZGRxzC3gJ10Osaii+72NadCSFtMjPVddIhOBy2JBoSjFeA6vo\r\nvc/fp9E3O9zdkMZ26nx/L/ugwQIDT1anLV8LZS3DPT1aOPEmmg5hUS3qOdI7\r\nNCqFRigrByGTtGr/41czieC0OLbmobRr+4EyxvZPCqUZr+GhLrSQYiTvnhhN\r\n+zb57Nfitb76e0X2lyPlRhAbeB1kNJU65dR+Y8TaQ2PwGEAz8w8Cyx2b7O1y\r\n7UR2CodSsQrLUPR9uPg1Qhh9a/FEpS5zsVkDZYgVOOikJn+0T55rC7UN3n66\r\n8m8V7L8UdNgRRbwEevPE9cGaxbGzoHhs+Aj24TQw0y41rLuwVzBgtBCxz7+s\r\nilKZwsiFJViihovDB2HEbBpvz5fWWHHUs8JUGUGu7IS+v+Nu/vALmm2mWKS7\r\ncn4mr2ud1mb21RRWeG1tObIGPMEoqQH+OsvHB7U1BRfSuIQUNCQCv1AItya4\r\nvIWOYwli0BHxuRGvtP/ERN2VL1zc8RsQ5R+70kHJ/72hTKGFEbZeMyw98ijK\r\nfCDJTO05FOskEZcW5IlKHT5ydIekDa3QmZw=\r\n=ugVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/tokens":"15.0.0-canary.304a94e8b.0","@material/density":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/focus-ring":"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/switch_15.0.0-canary.304a94e8b.0_1678394754339_0.22875128269183564","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/switch","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6c265915c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f33c7d954318b9451ce63bf29480cf4b2047ed06","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6c265915c.0.tgz","fileCount":58,"integrity":"sha512-nOeGjK3oZKURiDRcd2SBizb6mW/CdXtVATRy5fCMKYpqZMbsw5nYvA37JU8L9SyPh+BfbrGVZX/sbdUg5XhlLw==","signatures":[{"sig":"MEYCIQC31g3JknGUwllj7II2nhA8w3RlLF0Towdek9O+Iig4SAIhAK6u7UBqCDpmAWW1b+hTIShTi55LYh1czjK/jD5MMzRj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClQbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Yw//fLLgzN+eDSacwluwf9vIbhEITZtCU2HZTgvvzRDnJnDNtbt1\r\nKlftCCV0SoH1Cdw6gq+kxBxEdxFIbCNnTQgE3hjiDWnLpsQYoPhC2sph8fIA\r\nO1yZcrVGAFSCzatKVfEqShqqOsinAWUhN4B+GeFMfaH5uNnZqgMoYBNFuOxy\r\nppnn5W3eqByJckW7Lg3hkdZhSD/INvab6dIymvmAsDyk2C1TcGARM5I90qXz\r\nwRgcVfFzeHrdheeKwADe/u/Z4TVZiS8a4rls84OefztQhasOna0q9PwJvr/q\r\nffAuY5Evr9ueXqH4Rv3YCBQMrZNxV1rylfepo1RRDDWf60VueYfjIkkq+73K\r\nzclQ0NeHWc2tnTz5TDU/dw7CK9HpXUFC9FhypBAQmfOhlQzwQ9Qnsqt9Q1FW\r\n6vTI4r2KK15/gzOvGqBRglFncO48q80c/wKQ4tsF5mwBzzcVo8IRlbbMde+g\r\nA9K7W4dQsLSCvbXSGWs/9WOEDiOO/4BHM5UMxp0au/vnwWQuYHK8qikbzoUo\r\nSj5SxOnHcNrk+jTY3SCV/fn4htFetRH3O9hD9zGBpdVlP07jvmCgN7UwF1DN\r\n/yYhS+LQ4+82Tfn5lrycilf2AL1LFyZPgLmJPxHy3yS5Ej0FmSpm1gS+X/+q\r\nnJXbXDRh3tDsQkB4pjwhHxCrYDa+VE7BPSU=\r\n=HkE4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/tokens":"15.0.0-canary.6c265915c.0","@material/density":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/focus-ring":"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/switch_15.0.0-canary.6c265915c.0_1678398491273_0.5689477081460852","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/switch","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.de5224633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2a0fa12b5adfbb4f27bee1c3d4ee48b43c53ca1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.de5224633.0.tgz","fileCount":58,"integrity":"sha512-bDbb7ubjv4/x0nc0hGzSePUivZv9BCRF4SAfsSvnP6SrK2t8WdgqbMqDDfRgBW59deMwVEuiy9sljBMwJxdT5A==","signatures":[{"sig":"MEYCIQDBXadZRSvY5A4ANHh5itgPygYlJTTiEYOJ8RrwY+KFggIhAJmxIZfwY0Pg3+OUfeFfy8PfUyOHS+cInukK+yi219CL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnI2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO6g/+JPQ0ojp0+X22AvTDEi5IY4zc1JG1GrDzEelYyaZ/mbFUjIqe\r\nkuJjzKJ8IP9jI5k38Ubz9sTXzIgOXR1GrH3T6dMa8ib1Om/usttB1SilQfGL\r\n3JHaYs3wkvzevhqXcd0oiBtc7EnWCDhlTQxWxiMJC4ZR26mqz3StGCn7MGkT\r\npZlMZ7Q9sb9QXmybjFpPzPpFtyS7bacoEk18qzh/9Orw86R+89DV/kVZ62UN\r\nx3d0mmS5tgo+zFvkehcfQuU4rQORNazCHSgLkT5fJ0HmmFXVXugqXkJKZhcM\r\n7/nnPOTGIkSAPsBMcXxiv+CdfxVlvMUK8MGmz0NV0clETgmMTymmB76BIpuH\r\nWmag70ldw4MKb2eZRFxoqf/TsG+b+jvggHOpnXUspo/pIOzC+Locd7UWrjcj\r\nUTcmOXHxgbbic3dX7/TdxtndFouVuW/qgc1uJg3Kctm0R3tyHG2BV6k6Jw3Q\r\nvNvWA84KkGt9unFG4GzoP3KrmvFa1lpIM73xTCc5h6PNaC12aYdLtG5Ya38y\r\nybPY82NUunsI3ZBq3LG1j7dZZuDnhV5Zlziv/JYEJD5s2wbwB13pX2TMECnm\r\nyIdudGgIqjZjkz3dMYDllfx6S5FNp1qjS4UIwBNpybEZ35xjXuzIJIc56u0s\r\nw3Ayv1oYwB5JCOT+JqGiR5isl8IpVKqzpsI=\r\n=Unv6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/tokens":"15.0.0-canary.de5224633.0","@material/density":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/focus-ring":"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/switch_15.0.0-canary.de5224633.0_1678406198056_0.313055395363699","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/switch","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8879557e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d238aac621728dc51146693e60f1291bdad51b2a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8879557e6.0.tgz","fileCount":58,"integrity":"sha512-xAmZLgluJ5oPQSEvTVCLN6ocnUDIfLy0GwuAfJ6tdFIjwCWEAQv3opfIQW1VN6RZWXfl2lJtQWimyVGvKHJxEQ==","signatures":[{"sig":"MEUCIHadQAOE8+8cNG28jM1B7LqEhinB75DZBFDwXHxCPOYxAiEA7XeQr145p3ZJ6TUaS4EuWe1mNvs6pM/tiXuoLR2UcMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCznvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqRg/+MRkpED8fpiJsRwCAx3l2vhx3CRZLLd3Fzr6ApUsiNJBUzJR4\r\nRrVh0Z+z4eu0FZLuJi1sW+jugx27YbCQuET7oO08uRZb9GPD0zrO11Bod7+y\r\nLpaXBAZRt6gc9J7sRrB/IWun3sGXSNvBQL+itN/o8S2kq3PuUi23+RgZgRnK\r\nmHUiXCgn2noQE8D4uDSEzX3e7g+CEPa/vRTcWAjx5m5cvVzZdGBeyhGQ76+B\r\nzZfInDRgcQ6pPLK3bc8HR40mESKhmZj54BnLJNO7QnsES132Ja+23TDQdmhl\r\njVD4WoWJXLZ0K5dYqCIoMHJguG3jfx3NTC7mcoB0bYJcC5AThc2Jn34pFH/8\r\nOanifP7X1dgNOWCUhRz0oqjdq1RAo9ZqZXo1rRGs2940995YcOgNhamqfoQI\r\nMQo6V/Zokafz5al7z9jB8nON6d2DU8WQ1qX0iGZN24O83j4K1VSgT7UChHoU\r\n8rVSRE15Rcm9fACIgRR6C18UA27T9Rg+DSBYcFlm6y1OD7SjHroDVHKoz5Cj\r\n/b9ZPEsGZanlig1VkS+gT1Yq7w6EZt7muxq89gSP90Mlxa6DHRSA4Cl8Kuob\r\ntdylCnlRnGNH6tmfCf2sZHGScQ84QEQPdKFs2YwQN4P8IULSUORGEtUpadDK\r\n0Gq/OCsA7daVLLIffmrrW8bRbhBEP5+ULvQ=\r\n=SNue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/tokens":"15.0.0-canary.8879557e6.0","@material/density":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/focus-ring":"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/switch_15.0.0-canary.8879557e6.0_1678457327636_0.5282553600281403","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/switch","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.23073a303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b04b02dd34952d666bd8e6151be5ae94de71cf0b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.23073a303.0.tgz","fileCount":58,"integrity":"sha512-HAnxHFg+FE5sPjN+iFX6al8ibfKMuxE6rIm998NJ3RQtQ7mFJW7uSgftf3eLRgmK2izbYHxAMqIGjX9cx7FdkA==","signatures":[{"sig":"MEUCIQD+urPgzHkG8heClUIwPFWYQfgreC0oPsX8iXo1YqjhcgIgKTMIFxtwtJH5B6Gi9aI3SgCkEJ2fTkKbXSdpxPvExcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzucACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp+A/9GPRlU5dRNtoSQbbRswhA8yUfPJxN0t52NqqurPT32Al4Nwpy\r\nBD5/udUiqmP6NxEfNN4qQC94p8UdV7QMDkvIxNaYM0zv0zZI1sW1CTtQTGwb\r\n8XhYETgi5znvoQ4tYMW2uLxzQa7j7pObrCKzjrU6rKxdxjhokJVcdjZihMQc\r\niAuHPr48w06EXJHYND/xOafnxfbmtRYum9l1WOKQLTUEXVTOXgEDWAIQLZT+\r\nyHoyxwUeoSJ+ZqHzd9qhVUGeOt6cBLg+c7mYR9TNnNCGOhyEltAegGy8+ZPq\r\ngV2w59cKGAT+ICvY0xTVD9ysLl8oajaY0iL7dMaDzqVwqBlOZ4QTKZ24G+pM\r\na/l72HAb6QDQiN8pe7tiucy5osChRySLV9f3zCtoUOrVk1AuurPnlEJCC2pp\r\nyluYvqTo3nq4GxinLPlDbJqoWx+mqyApOOJpcwhXJXf8TYDySLrsEDXT/Mfj\r\n8Y5ZlGBU82gdtWTAz2X8tTMbvJ43Z7mEm3wJKnbjrxsqP5gl08Ig89AAZyTP\r\nzWZBVLpQYcdOErg3FablEn08t3J4A19XlWw2vtjuihRvPzjPK8jf/CIK5Lws\r\noD3NJTeOAGzzjuKVuWYFLyO2Wdq5uvKXejYgp3G3Y0fPWVVO+ymcLuP3ojGv\r\nT6VDefHUcFjuyi49z3nRIV+hvzDt003LkHU=\r\n=luwX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/tokens":"15.0.0-canary.23073a303.0","@material/density":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/focus-ring":"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/switch_15.0.0-canary.23073a303.0_1678457756103_0.07483824765357716","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/switch","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a52b6c607f282ad76496d49b768669be6dfe986","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.51c7d4014.0.tgz","fileCount":58,"integrity":"sha512-S3CblxBQdj5VvXY0nZ/e/CAfqa4dKwcdT7jGhVriGSqlGwVBnQCnbUGk0B23v55/nSX0AiJgDDWejWCDcy3Yeg==","signatures":[{"sig":"MEUCIAj/XFnjdMdi8FWNKtfQAena/7ZEkcBCBsVzD0buBxPJAiEA9QtbjiFqYJ4VQuFst7AD12oX4eN0enWkhSHg4ztY3as=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC19VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRmA/9HHT3JMeKC94HIRA7TFjBZhH6/+jwS6ruirSzJGR6IaulQ2vA\r\nliEVbIc/7PgJw6IyDHYG8wS3xvFrBlUTvgckeId0himuvOvQ5n/RJ7zrhe2V\r\ncWU85naJ41ZLhKaBAcJoJbufFkWPXTXEbrVXE6YO2m5LuFcN/XSR2pBqOKpw\r\n00vnitoE7mN5J67c2/GbxAORTbDKPu0jX5C1co6axozm6U6WzdTuOp9UeWWQ\r\nzXrIp06V9G9qP9IVrXbsHYi1OB7eHGrfukPD1ov75GKVahxixOrxXTwBKUpl\r\neesoHu+oUqVlFzH+w1fsXQal43+043/rsVkjjbm5xh3WIJGJc23wvOOejXMP\r\njkfA19XYXeJQeeed6Q4MZxzxJAIuucRiLXDQgFxQ40va54AefP1Gti8QbPly\r\nnIBM6tf7VlXhWpbs/dUNPLOghomRdLjo5ai1pzcJLrkTBalWcJ/bwJOMVQ1W\r\n3UCX1uQm4TntDMioMKpAO3RwcBFUrqYGIk0ZG03bzwULCK/dUoEKdg/vqpOr\r\nXvBkk8lkDZHYMc7VuN/wp3cIuOC7QHTCFVeTnF3Q+KsOt/J/2FFbDXjFV3Ix\r\nhr+qVO96ytO4SQne9p1ThwhiEKAEVPkraj/+kdbrIuyauDEk/iCHI+BHBifr\r\ne4VmyuSFcHF9cbQ41l7T9LoxQ3IL3eV+U9Q=\r\n=l/0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/tokens":"15.0.0-canary.51c7d4014.0","@material/density":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/focus-ring":"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/switch_15.0.0-canary.51c7d4014.0_1678466901360_0.7786230036408683","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/switch","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36d4380afd1eea4765233b39e64385ad76f8ad4f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1175a5be0.0.tgz","fileCount":58,"integrity":"sha512-0N7TTrs/EgrQq5pyir+WrH8e9guWZYicA1DTVG7PEdNdOu6RGvn5WdK45wEE1UH+WlHPp/eVjP8nMy+wLaKvBw==","signatures":[{"sig":"MEUCIQDHrqpkXcKWy47RKCwwXWA3fz+OSDdOCmU75g7pD0BUnAIgE6FZ0aHfXbWBkesopDMMNUTcw2bH74fS+zJ8hiVSsBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5e1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhLQ/6AudVMJLUgiapwB571iilDVvaSlF1nU764/oqKoyDu7twv8lB\r\n+8efLPAyIAyF1jYSf22OaIlKlXoQtl+QzXKJs43ledUxaiSTS+THxGVZb+pN\r\n4jkfuTeOmUa6jA9nSZ+PuCngxw5hZ3vzZHC93oU6SEDW0IUG4fC6pB822G2K\r\n5mErNTZmVM/+utQ8aLhQAUvw/bKo6FWvwxTtOziNt7mSD+RpU3HC+tIPDGlK\r\npJiagAQEV00MmGH4kDcrEkzWrWHo+dUb8T44JrR9ss5GjWx78cZRcxAac1ao\r\nk1poI0RlkA6vKSWEx+8eY+GK/UM3nQ4NIXc2CH7D3xXA9PE8UIuZkS7VVbIx\r\nfQjsgyx/9VGygDmRY576bjrzIiYOX73+tmbwUJaAbWq+etbYR9xdDM6vm45U\r\n6DqN3Xia886oQnWDeettMbFsEPLY7yaQzj9MQwGIdDEc5oN197+RZzRsB6/D\r\n6zPaNNHF7zvs6RI8guOjvswFQKWwS9hjxVMYvKLfZ/Tz+gAuXfZSfBYwdhco\r\nLaYdajgYH0agh4DQnccwh5jZO79/mnQglG42mJfH1Y0/kWtSQj9tR57cM6BR\r\n+oJZOBngUi9QyjFuzJ0ASX6DBdgByvdB+akU56v0xGNOXrh3cqGFB4UNtU94\r\n9MwFagpLIJLltqnC6L7c+oKGRP9xojSWrlk=\r\n=0Vex\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/tokens":"15.0.0-canary.1175a5be0.0","@material/density":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/focus-ring":"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/switch_15.0.0-canary.1175a5be0.0_1678481333482_0.06465125774217584","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/switch","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc2ab694daf63c34d4a932fa85b41d7548c42010","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7adf3af80.0.tgz","fileCount":58,"integrity":"sha512-s3VvJg/C/JO8oH0PyVlk4ZBsaUthm+XZsy7BFmcEdnP6Ttr9benDtkOtci129jBMUWEpG0SbYBxfEx+mUt7e/A==","signatures":[{"sig":"MEQCIDtFWa9u7sTC6ZdwjW0fb3GmARJ1GOnocp1WJUffi9y6AiBoBaZ43vg2gzNk0zgVLX3e/AQmumhXThV3L26FqeO3NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9igACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVqw/9Etei8Wfq1LmH/k+UqKAvaq4PwfN1aQO0OhkVwncstPk7ILBy\r\njIWUtqoQCedK8Xe6a457ZjlEa6n3UGFQvUyR6aSmyslWPNxf8DYAWrolZLl5\r\nYjq38rgd9L9UUAgP8qUUe6NINfAdgJiBM7SQ7zrd1tis65+ermyK6QFG4ejh\r\niW8IokxRTHB9rJrOlGhr7jgWw86OCo4Dun8Lgtq4VCnCa/qgHCDoqsHZBFiZ\r\nims6kcTo2LV72UbOZLC9GqtvDPFsJxHCH5xLN9S4XN244IknmW6wm2PdrtL8\r\nnfRGGbkVUf17jL9U0MnAGlCNk2wcru81Z2+KkkZN9AcXuRiAs7kr1CnClVnB\r\n1GLYUu9n0raaaQgLBRRY9ZlTiPz4b+SECkQ1JzPGsM8DkqbubXgAydvz64B5\r\nMhmjIF42OfLXQVYld5FAxWQWMWs67EgV0saSa+5yN8YTPD6QAOdoXOs2TLry\r\nP5OVSOLb/kjinbis9udBHQmmye2DwkHYMfv26beQhKTm9JfYLSpbyBLrzFTy\r\nNJLMz5TOVGexFQ4lGnk1HdS0gkTSbppqXS5IKhTIONOGRahAk/MFZZH7NDp0\r\nNaalu7EFZUE/CejZ5FKJA7K9L6vGkHgJgWitsEu8+340vWPNV2/IiMON8Ny2\r\noyOnqGWcdlDyqNZ0m9G+sJSpOy4n3qf3TXo=\r\n=u+/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/tokens":"15.0.0-canary.7adf3af80.0","@material/density":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/focus-ring":"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/switch_15.0.0-canary.7adf3af80.0_1678497951985_0.8424659842222624","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/switch","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.82554d770.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35b2b18089b8c193740a993bf61144740f870138","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.82554d770.0.tgz","fileCount":58,"integrity":"sha512-4IefAyxxDA7oVqjI+lO/j/PLTB1CKR1qqkea/tHu6W+y+EFoFvWCQ3d7oIfuaiqdxSikUtxOS/oBM7MvZPB3+w==","signatures":[{"sig":"MEQCIDPGXHzaT97aE+9CpZInYDuohJWCwEwUYBdrTZb08ym3AiBvqBzC95HcfsPM31rffhH4utQ3cYbXvBIocnyhdqY/fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9t+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp/w/9E1/fpMgfEIWD9QmkDsyi0anpuWclRhwCV4yDyHW1xOnkSLFU\r\npoAI2g0ccIlNtpt709PXnU999ZKLavcnyIiX8OVHsT7Cc2hkwdKTx79U7qwK\r\nKfAuMqa5/mG3x/79EX2w0x6iD1wGmbQupc49bV281dJX8X4W5Mh2arlBXm2u\r\nAarDPQoGAmRHWTxzLXAUHNN/fjzXlY2xjVrQEDSpM2bu7et/4mZlvzCul7Bo\r\nK/dnLSI2iIVRP3wDcSAEZPGOCDh8kfrhe1M6RHgfuSyccVFaRmg00v4fn1VW\r\nX4f0Hzp5b3SmBjJ6NliFk/h2KMbHNhwOYkI7QlmhyJYptANXsw6MR0gjEpDb\r\nJqX/6W7p709xyCtApFd2teKbdy95vImsF9R6mBpjvZ74zJgs/yg5iYOHlOQ4\r\nOaUW9r9K/VPeZKjsBizJpyTai0HetecOXd5rUeBUESrE0TeddI09Cf2l+FBH\r\ny74NNgKZB0zIbCKkkoVx0Q1LaEgbJgpCL5GnM3ti4pzanVZ1wdmuMS+gSgMv\r\nMhudXB1c/VAQg8Djbth+8bVlZ8z/Sw1JIlrSUm9uLDSjub0l98LeoV3Uauck\r\nXMd9sj8lrFBGyaXnyiSE+242f3fcUFySwfDb4Zi1Fgzqp8+9kG441ggg0wTi\r\nWux34MVnb46wSdYEcwQujTQKLF7M+OFD0NM=\r\n=e8AC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/tokens":"15.0.0-canary.82554d770.0","@material/density":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/focus-ring":"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/switch_15.0.0-canary.82554d770.0_1678498686470_0.26408859677367724","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/switch","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"992611209d7001556deff828149575b1dacc1721","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.93fc524b7.0.tgz","fileCount":58,"integrity":"sha512-jmwAGwn/dHIxr8nGTU5lCTb/vuYN1hzjNQWP9eqF+in9qsURtCDRCVyR3DuxwiaDIqUIxkArr2vgSFAfChwhlQ==","signatures":[{"sig":"MEYCIQDwayeUroUFfFQGC0r2/Cfi1D9EODNVJFkhwmt84rZ/yAIhAIA0NvVy+ZOmov6WKgTwUL3AUWuJTfhIQ65PwDl+zRv0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuFXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMqA//UGlTVT6rXfiodfdfstBFXMDgBy9WD+oYJFSz+Yhox2f7m4ot\r\n6a/31hUKL1DN6szx3ix0MEomjLUrcdKL4qe0XGWvjgd4Glk+gEWN/QUPr0wG\r\nVqSjXT7Eafjf7wbQi1Wj2b8HBfYsP81sdkIM2KO4juest1CjLp2MPIxlGEh7\r\nVmyTpVchV6pA6BdsMKoWlBd1+uYoA1x0tBt5tjBIzCm/4/O4Bxp8zqEGCuZM\r\n2UMW1GY7Vc06xntNCzcuC2YvwZzGg+dXpW1XybsTOl2v6rUxQew4QCEG8hat\r\noYkt6APnPW+s8pTEajDvOm6ZAXroLdeqfkJIhsVUuuecC+2StYDZ3NKtPMP7\r\nr8M+s7RN74WEXWVPU/Lv9vzftG3Ax0Yz7nd737LhTU2h8NjPhQ302whlN6oU\r\neb1Z/g2ZDj7Q3WLIrWo+DoNZLuEIVoXRt5nAOl782vUXNwiCqNX19t6mfnFZ\r\nZOHkLu9wIsKb+6CgIuyd4hOhVvTnYH+QKCdoiDmRFFR0MUe65jn8/7i8ngMh\r\nFbrOfZeDIHQqmVt3mnR2FFTLOOs5p1q3KlrfHOS/01MhDPUnl9iE1C4j2T/f\r\nl2/ZTADFdlyanXXX2SvqNsJQXPH8ajkvv3antNmcT5dJ7xomJpUzijHzo+VL\r\n+HWgI0tXyQpHAiAIwJwbzlJNfqKhDQFhfd8=\r\n=da4m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/tokens":"15.0.0-canary.93fc524b7.0","@material/density":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/focus-ring":"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/switch_15.0.0-canary.93fc524b7.0_1678696791387_0.6964506310715288","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/switch","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42ae43f2ddffb621be99e55d4198f64a559482d9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.50be0fbae.0.tgz","fileCount":58,"integrity":"sha512-HEPGDqdN83hC4nPRbrL07dGCPBqNhd9CRsOGR78tWHgPWwDiqgTSD24HsdX7a5gvNKyHe7flZ9G2Wnwk5FKxiw==","signatures":[{"sig":"MEUCIH18NqRoQsa5z1qyVwygpU1/W2o9udsBZoK9+/yfoS6ZAiEA9/EtM2LVSpghUK97eBA+szO6V4HUsuZqlsgM6mhca+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2EiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVpQ/7BptdmW0riDHdnm9LYghYqB8lIA+yiLLgms6vbiOwflKRkDDv\r\nlWrAXpXeCDzA3Uhgb1UrZEAjUjbR+RGnZVUj1fBlS2IUTTWdd43UTglJ5UWW\r\nudQjDgigo5N2gXhwJ50gEw1yX3xrOHoe0rkbrQEvs7FknmU2wAelz+Cr+/6r\r\n1mVtMhngKw7XhXDe0ZKiC0IOpxMGiVLCd/rtfvdcN9YXGZIiVA2R7qy2JBvy\r\noFzlN5CmUvhZCzxMd+61DmHaueB+LA6JJsV50Z/dKIYmhoHWeEY6CmMN6pfl\r\nh8ckoEFoXjC0qt1wFsW4nwM2RyMz4gfTyFAAsQ3wSci5F5ruMO1+5PB/blTT\r\nV/xVkrtfmI5qWyXsix/rQpwtySn4q4jCZMhExxEBrw0B/B1cgFFICOiliDIO\r\nV1+Jkn1k16FCNcTB9SejGBf70Nc5jq6VEXjwNCU44unl/cdol2dcgXf2Lmyi\r\n0FkCi5SZ2/HyWoX03AWovlfDeMQenU9MDQ+O4IxmkcGZuQqmt41T1ElVrYe6\r\nP6QARc9zcPAvMuZ+eXvRAmPFcpcFdQvp6ubljlaSKkgLxCsIP+RzaPlT26UY\r\nArbG154DGfOcl3dfXQ6qN0hgcHH1FUFrnhi3NWfcB3KHTwe1EkgpIMMzo62d\r\nTuiT4XfLpSAjDojNlnUEuw+iKAQukLHeanc=\r\n=sdz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/tokens":"15.0.0-canary.50be0fbae.0","@material/density":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/focus-ring":"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/switch_15.0.0-canary.50be0fbae.0_1678729506644_0.6841829709355092","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/switch","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"313678e7b6998d9223e70395c44db91c8587ea0f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":58,"integrity":"sha512-ZHAz9fLs2NcOJrc5xnVtfTRrCfW0zE+lvTkSz9s0+mJaHClbyzlhQ6fte1cDWt/0E9f944BfOxJKuXYHQ7rqWA==","signatures":[{"sig":"MEYCIQDbTtXFhJ6b6vnQUdnajyqkyzo5IT0EEV23diLnD+pydAIhALa1E45Ul4lQtvQE422IWFJ/L6E3gAeG7aUTiLUo53yB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2HsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoR6A//ZHgxXRNYMJj6FwN58GRr/wrS/gY/63XfHau+r3cEEQLR2NsD\r\n5yq8aYzfcObtqxdwLaxNYnDLuSt4RSsvDi9g1Ki5+sR5st/gQEUQtankyJgZ\r\nfQPnR2Bmn040tEOf4I/eVh35iKekT73jNhCEmU6E6rpsYB90LCgqwhewdbx3\r\nOcKhizpETHiMWzhDg9IwnnZk7lqLJfTGi8+jKnHctusMBdX7mhrxjzOVK+Hq\r\n8ypYDVZlVTTHOQMo1erHWTZQTXQe2eavtXC44gwtVGGn4wshkar1yFUJDwAc\r\nmoBvff+6eqpsgLgjbMiSiD2o8Dua9lW54poNPA5wC7sHe8VQr22aM5AItyum\r\nBgf/ZAn9dSo88h7RkNZI9cq4OctpjZdVy6LJvyYXgk2me8OHV//31tAIxMi1\r\nL1aKMLdIbJVbZYg8ymFzTW+/L7XobiVvz4aCLNs97tEOyYlp2lYD/EixtadL\r\nK+se+u2xgn/IoEuz/SD2D78TOwEm26Nae6DK8naYP1+7kEslBTD7GrhQCmRJ\r\nJ0+KpNyF3BYtb6BXJkpJcvZVatA6Tr5cd6zuUxizCgu9RMvUAqnrJd7PyT8K\r\niXHIeWYFlRvMVmrQAhwj5DVvE+ttKodU3+jR1vmEuasV2b4bwsIwviVepN3K\r\nqD0vHblsP7cceqWd2NbS+GTogio3uiWdIqQ=\r\n=c4EO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/tokens":"15.0.0-canary.6b5ffccd9.0","@material/density":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/focus-ring":"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/switch_15.0.0-canary.6b5ffccd9.0_1678729708392_0.24914198839744595","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/switch","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2c6f758b9e7c94d708d92311b34560d61be6322","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1c8013f4e.0.tgz","fileCount":58,"integrity":"sha512-KkDSmP3fgLEMrUlaeIZIdfpTFb3yGNf5RLBmeUIRkcqWgMMaDjrC841zC+oGNnJd/LSZHVNFb24wr/cRpzhX6A==","signatures":[{"sig":"MEUCIFhflxtG3zQDfWn43/Pp2ANjKkRG8OHugiMYGD/B1UmlAiEAoknmizG0aW47xwSO/KshrwAJMqrOtlyJdMeSU6IN3rU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2WHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAgQ/+J4CFyH9zwrvXSIeIt0/QPBL/0GJ34TfltwNZ4ruYIJgnSsEF\r\nzz1tR7ydVg9bmPVrfdyLfFGPGZr8196ae6HTf0nBmx9uSCBt+iL4wwGn966i\r\nWxF5AIfs2xMUvRES6RYBbWkZ4hX6Bs+Ke4ycrrpAn0xPoQneQL8DUaqLV2O/\r\nyjHtyn38XJMa1cjQVSftFDWKtsEOXCB7At1p1YXZliy2qMYL0jvaA0nR/9SC\r\n73y1d0l12OoVeFOtUrUJTSM0Aq2IboZy+kZc598s7Ec5Q592vz+QNkQ//wzB\r\n2chVOK+X3YvtZUTBPGl8Um7hcXg5FpQlNo/nct6NgPu4AqW3Ch4jD01TIeUf\r\naIK07VRIatuXMrWtQQbyyTXQg5/mcCUHCI2m1uPYONrS3bUmq7OfPCd0N5Ku\r\n1NhsV1tfN81T67hDLC6WCx8xe6m1/Cx+jagfZ8gzF4dsEVnQu6464C42Y07P\r\nO13ZnaqEV8ex8fLrU3zI7Cx1zvghHShtbDaNL3NIjsLUa/2+JS0RgMI1j2vQ\r\nHDwhZwhkowa/TTV0ELfKTqxxvhl4X/hxHzGKID0mJxZEcguvHSEBYxe+vNlm\r\nCovXBbK2lyp7nLkWI04xAk3NVKz0190zXU/OkyWBEUxGRR4tk9J93PFG80Ff\r\ngH3nROhk7Vg1c9ErCCsLsALAi+ATB9qVkn0=\r\n=d61+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/tokens":"15.0.0-canary.1c8013f4e.0","@material/density":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/focus-ring":"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/switch_15.0.0-canary.1c8013f4e.0_1678730631693_0.04741387371106409","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/switch","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.112715df5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994a625fd173ea1d1df206f6b0975ce46989e70a","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.112715df5.0.tgz","fileCount":58,"integrity":"sha512-5DdSQ9fmJ6UH8NmqxFGzEb3Fp5Yd8/i5lcWG4fiKj6Yq//RejLMhuUV8QVO5a/M16LWc8gAHePYBGftVMkvbVg==","signatures":[{"sig":"MEUCICZFIuog4QOv/Fye6hi2s7/0bLJoGlejW45SP1K24qtDAiEApdfJ3TBdzcglr2V7rcd97PH0RrvfxTK5tpxJ7YF+2Hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD24JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzHg/+KDWDYysb/wf/exDF51T8x0S9k2d6Skoc1Sr6/iYalZj+Ip9d\r\nJ882X9opZkRnSsidDJUOzvjOk3sC6MI+JEfSEDaa+/+ESEafkA48yE/CDN02\r\njoFk1mn2R9BSBPYF3mnJnmL+SMJi+kNbLI5SbxASFT9vvPxnV63WMiZsCls8\r\nQQj0gRIwNzTXPsYq0QPDdi80gh370BOt2vlpl83QbylYKxtzVEch1xM6B7dK\r\nfw1gYo/FKP5g2PDutxcDJcDlYlVEoFRuV15SEtHBad9GBPMPkGZ6s2YJOmk4\r\n0L1evqoHR/EmJa6RRsWaf4Ladh0M2Ndfcv53dnTHOLEDfR5iw64oKcZWKD3E\r\nc7N6/Ojdd8esA+VC5spJlTF3IiNwu6bA41bklTPNSqlZd0+Pjif8qTY75v98\r\nIqlnkscz6cTPMi3TVvqXGSgGS9chqxdaeu2GgJcN7OBIt4xUaXO5Iu3KueJi\r\n61glChdkyfcFDpIw79+YbtpZZN+Z50Q0hE2roDxvsELVMocDLRpepqK6RDXs\r\npgXcNo2uR2XQn/q7skr9IXWHvHKktKP6TLn75Wd3094l3vqrhLAyQYvaGUyr\r\nHNfwDOGj/dlzQxj7ew+JBqYszAvbhfdP6PzgOnq/Ikg4jeswKrIyiprnKm6z\r\nqokA7fgfRh0M6OxPM8HvETpG2EQXteHKQR8=\r\n=W4D9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/tokens":"15.0.0-canary.112715df5.0","@material/density":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/focus-ring":"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/switch_15.0.0-canary.112715df5.0_1678732808701_0.39253918190112036","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/switch","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d250911f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75c5a9e219a9557ae10586596a8b625d93b415a0","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d250911f2.0.tgz","fileCount":58,"integrity":"sha512-cpQjp/tL9p2m+/sxxu3lgZvil/NpzgytWYnS2eisqgCMz4b/WJV3CCXnZ9OJNA8V7ISQ7rsO0hBo0yCNsyJiOw==","signatures":[{"sig":"MEUCIQCQy8M9A0Jd5I+16dDgwmZOSVOJ0eueprU/QXZkyMGo1AIgTCm3qP/3KTeW1E9dvpqRumE9gLKAKXUScN7G/zSXIeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3pHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSRQ/9FcLSY08+rgmVLtDa6R+yaMb2Lh9In5jcJD9D5R7DwANG91KG\r\nGX7MFx0qYIG1xw5JudyOcXdxbOWf95c5qIRRzPqB9T7ZRTmeoxRQ/TJAR8DL\r\njv3ZYtPJ2IzipTg0SyO6oef7cz9YCwkDad2EAwAeTzeI+H2PVP91qGYEL5fm\r\ncP5a3EXan05pMYP45iKMkEFIlvXHaJY6L60ZoLmgZ0IOp1ti1fHBSYE8J6y2\r\nVXTnfhGW8NkHtXDX5ioyeSTV7rdCzE0nzRjc9rK1hiXBilCmrxsFc8YS0f2i\r\nJQNWZ7ibUNYsDFy52OF9vdvANSAUSZ7BfZFpOONimqbkYSqsDEnVJVxkQGrp\r\nQ5n3fk1n6jztPPIgX+yHwQsVZBzhpNYI2sFHJNNAcQBbH4Rc6FXKLf/T3agS\r\nZHWsYvSSbD23vuWGxOghSoPhIQ9f8G8R7lcds3SJQ8JIy6Tz3SXLx6f2Ab/Z\r\nkmJMX8B5GrgfADyvn+X4Jz8GlPXgBRI0IjpZqMfcVIn9zr5pZ4+NOoaCcfTu\r\nyvr+9GRKFnJ1PX3m5MJz4TF+Qp8qKwv0t4qqBE5vP422cyDx4h4Sr8CjOTWZ\r\nBAF/KJpAHQBsCPHMU5z41u4N576GcFPUBGk5oGqjR1euCDyaP7lXG+zRlprW\r\n18CPGedH8sD1SaETcPlCWYvEkrNu/iIhV+Y=\r\n=GNiW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/tokens":"15.0.0-canary.d250911f2.0","@material/density":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/focus-ring":"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/switch_15.0.0-canary.d250911f2.0_1678735942933_0.5284440935306118","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/switch","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd0c93530696e79deb05e3bdb79e922daf2e62b7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7cd925c12.0.tgz","fileCount":58,"integrity":"sha512-wO0jWeiflMOrdnhljR089F4tldNptc0KiwyZSTnPe3AGxqT29QyhWv+hDJLYhesn8nok8w0JvQUFJqp67vQgwQ==","signatures":[{"sig":"MEQCIBgzlZQb2UZryiotFFp9bmi91CESSLowUO5YcIb24bb7AiAOEyZWSj47+imqeMeIcwQzqOlhOI1SU7n2CuWslxelWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3wQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRBRAApDZb//atmR0H5xwfJwWaC72ttBuSHyPueJM8dYqwMX1agfTS\r\nU0Bh+gGCXuQKAHiPeNvlun0p1ywqTwOJOly0DPsMQavhO1F9ju5JbRsP26WR\r\n3c0FfyFAs+1wUdPEBUxfVqraPRhtykM6EnEv9cLgX1xC+GvzWSdmCEbA2TH7\r\n4ygEeYLW22SYC0dWH46ampQ4B22yATmJJe+2pNdu1lochmZI3ParlK5VwcWB\r\nI5/5gxzyJxXWhCVHwRBAKpLVPv1X7txZL3tuthNsHV7L5smUOotmTy29l4nh\r\nu/3AuzAD4iB4jNL8iEMlq44IPBK6vfbOCUAq4AZE5pLzh5rqLunkK+E3vS+y\r\nsB7r496DV9+yUyTK+mGT/qUzUUzF0DVmNQ00mvq3rdDZgrQa2hPCQNW7f4YZ\r\nL6alpPwKXElh39ga19x0eoI9MG2288Lk7EC8OQqJ21oIT5BmjiJR7imAj5D0\r\nwlvwnYMqprjSkVnqE9UavKKBWrrnACYnl5RO0XK/1WmAPOXsfWBZO+g+PDvM\r\nI7oGheo0WJM9bhSnAv3vgzNXCCxwn0sx0nMeUtpoQBgG8njG7lyAeyOsglwe\r\nswuwouCrZ/p6TSXukzV38y3/68fytTeAq2P3za55C1pQoH0lulifXGnw/tlR\r\nW/CjGMCbYnhG08NaU/71UQ3UWOFxOzgdkPw=\r\n=7+lh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/tokens":"15.0.0-canary.7cd925c12.0","@material/density":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/focus-ring":"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/switch_15.0.0-canary.7cd925c12.0_1678736400659_0.6818941757483079","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/switch","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec7d073068d5591d65fcd2fbbf840d2756c098d6","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b2ddacf73.0.tgz","fileCount":58,"integrity":"sha512-4pSNqCQxLIb0qhrNhdJUq7J5sAeq+Y+oGmuLREqiK6MOuGj72RY5EJ/9autB2q08h0qA7icRMy1f2I4vUf1sdg==","signatures":[{"sig":"MEQCIGoy706jSp9b7qDDIaDvqo2QBeWW6luiuesCrNfEnYXmAiBZGkdvSTJAVTj+OYiVkU9XCOprG98UQOM6bRhQR4ddzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD30TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi+g//U5PE2NkP17oM7u3yVizSfzmdgddi8aoAq/Yy8kAl/cpcsZL5\r\nYlqNet7rmp6Yo0yPoST9uuW8+QiaSaCmTncZFIVMHmx/5oDgxHJW7jiLYukw\r\nuaS5VDunu8iNVZMicNW/qbVg0TdbYsGki8y9TdjKYSXbhqgdBNV37f6PBO+f\r\nW4SF8IUugri7idLSlMJ8N0oHyByeFWJdzRmeZt/ZEgkY+j8vdf5c/+lu813d\r\nqJP4EBdrhrSpMHEM2Isy1p+b8W2aFuyK93FMCQAuuCHV5JvQVN72bYbZIjvk\r\nUQ9Dex+HXX/fLHBEDB73V9HJVogIs+wMOL789Q7W1vVSpufiuCoRaZ1VoKzX\r\nnmxib/dgDPqICE+UDwCoLmnYaHW3WeZ313E0Kl4CpuYwj7IRKw67GVlAXga9\r\nQ3AF9PvtcWRtkka9LsqQCYgILzt83eB4t6LvxAUhZfwW9wdxg4cVIqkvIIra\r\nG3hdBBc3rzAdIbteKP/wBxNJW2/93mE1ChxsHR8o3MZcyOTyllIvaScqiUAF\r\n5zpVVBP6FSK2uqVhCU/jhS+Z80SefPM/OJs29yYPdheJ4z1xvaubNJFuxTfG\r\ngRz/LkIhpbyGUAxzELkPA6dW//InHUlQVIwvJpkAi0Rnr0/L+DoIJgjj4/rX\r\nRE4oaLvT3yxYW20KrhwLebKsz7GULjwuuY4=\r\n=l6Co\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/tokens":"15.0.0-canary.b2ddacf73.0","@material/density":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/focus-ring":"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/switch_15.0.0-canary.b2ddacf73.0_1678736658776_0.2909668257035736","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/switch","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be7e93dd31c6a32033fd9dcacddc2554d91ba9cc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.989ae2ecc.0.tgz","fileCount":58,"integrity":"sha512-jCiwsSJPT9/Pq36fScQU7BPNyW1eED15P+7dfST7M4Mu4P/OwpRJcOEtJwS/9ZqVEgyPJKhjbZj7oOuOHDZhIw==","signatures":[{"sig":"MEUCIQDTqaSmVU9itSCLA2p7WWDoGCidCGD0NtaHUMQfOjxSMAIgT4zmzcLICOR1ln4mZPP9DSkIRGs59v4FteF3UGxbCeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodBg/8DO2Vsw+EjAPdVb0Oja/8Dnhg6fktrw81yx+ulw8k50f/XPbz\r\nj4n3K3eQYW8cJbNzOaZVRbaffu/okIixRjWZxong+bH3X/UeG8RnJS6+MDPD\r\n/OMm91Bh5qWsYQyFO2HJLelmQvJSQbQovWuePL50WmRpWBm8wUsUDH6joLHy\r\niwHY0vGc8tvzo7U+w3LjowYHHkQ7+dfWm+kaIspoRMTMxIv2woL7QLuHbhaM\r\nyD2/1e+Vf1BotW8gmwpHY6nSw4JnJw0ZdlxN7Fqhyo6HYvk1YlI/3Bw0EnqN\r\nUHGMwhjzFcTOSHsbayY3ayk56KFgTxD5MDbK2LfAjqifyO5Ex2lF8lZc7xRu\r\nlti0n5fohPjpXIBjpqGp05QGhQ/ECGnGqKRoABdjKGKDRB3cobDm1k/hpHEd\r\nB09dcr/XxC2LSxfRpx6ONRN5XAHyhzJLvGguW/aHhMSMci4YSbhz06KIluvQ\r\nYhYVLiLSTyAfpLoQCU6y4hlnKHWcgBwUJ5aRd7FSil8E8JHM8USXrHguHZge\r\nJNBNORJTaPaqG0WVhsS1HUlfrjUgC77V8TKlhbFxi0vpHjIgSUIOMCoFSEem\r\nAgcSgjazCbM2lSLO24H32w5XhMzanmm6213KazbDA1m4jAtn3aTszSCWoxKF\r\nsoEWI4r/OZ/fm7+lNRGDHCvNbBSCdNsigyg=\r\n=kT03\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/tokens":"15.0.0-canary.989ae2ecc.0","@material/density":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/focus-ring":"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/switch_15.0.0-canary.989ae2ecc.0_1678737214616_0.6991162605692387","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/switch","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.89c66483a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2400f4f8488ee5785fe9a55bfe6de86e93b53a58","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.89c66483a.0.tgz","fileCount":58,"integrity":"sha512-AgeewGVQlie/LjAhFtRTKKIJzFlAZ8qcIS1jXTYA2cOU0wwGVavDgKb1It1AFNJQmx0WD9iFK6hZnH2ri8lK1A==","signatures":[{"sig":"MEYCIQCHvY6PwSDd2GKwl3kCF9Nzc01zSPPGoZqzRqnWnGbCXQIhALpRWEEvmVhSduXkNbt2b/02OG3/pLPEx+GVv53sZZpJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4TPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnxA/+LXVUe0r/VckORqXw57tQhzb8Mwoaql1Ae+93XkXS/rfe5eXI\r\nNhYKAVVc5DXT0gOg883eBbNEa36jki0wunsGI5MgRF/XYRckVTyq5AZXkJCF\r\n1+f4Ay3bvKc3huLrt2MLlFBh1oVRwqjxMZS/83LSOuzPP202gEeyQ2/tNGeg\r\ngjUIzfK0z929iMO5Lp9uej0dxtmp72kKowFU7niVMk/5WLTN7RXU2/L4aiKm\r\nbt0TJIb65laEQu08IY9JSyK2f3fGQu3GGBwQL9vasgFDXdb44ijwGOGmDNio\r\nLHN92VG0SKNjFhS5MA5Gj863VX/Chl/Z8k7+nCSYz6RM8tm6oc0Kp9TVnKoE\r\ngsYc9/BQ+XXH3UtgUbhUjeBjgUg/nZ2yK1xZgsK72RD67fN3d3d7YG1fh2um\r\nTCHQOJJy3iSKK03BokJuToEx90U3Y/o23io9JrjCezCQtNchiaRb+FyJ98cU\r\nPu5o8DyL3SeeaA3XmY527NXCUtlm+rsj0r2f2OCO/5obSt1Ld4TDZ4N+b4HT\r\nuJciLKt2sJl1KFwsFVcnVmniJULzujmDGlaIDLj68RAL8f5Q0PTKL7oYNnuq\r\nfiLQ2ClxKaw+paFY+KeLen3zV1C1knGrzBwlQMmq85tnqCRRpJf4CZlq+vmV\r\nJ+vJThlidx6qYa3RcWDQUCY8EtpgIDwWvts=\r\n=66Nd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/tokens":"15.0.0-canary.89c66483a.0","@material/density":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/focus-ring":"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/switch_15.0.0-canary.89c66483a.0_1678738638862_0.6087834756824897","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/switch","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ab44f7b18a99ec0a69f39ace8f11a220036464c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6a85742c2.0.tgz","fileCount":58,"integrity":"sha512-WEqs2qx5c1D+40n4b1P3m8Wr0Fwd8sY6E6rcJ/oDn/mqmus3Lvh3iOXgXVOB0TyIIr3KpNbjqXRZXqmPtp1kzA==","signatures":[{"sig":"MEYCIQCiQXuTjzlr/wZaa7qOBmloWsaf8Ae8fKhJslgPxWSuxwIhAJQFdF32rMe7RfJhIO2FWoE6/s3GhXvwR3E+59KKsfw2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYtQ/9F65e+gnq4WijwDiQ5UBH+BZBnzYvYd5tQrm1c2C4rsjUELzz\r\nOV+BiXex/zeLwG6FnoW/dZ/pv4ICxxKPNKgXpQ7JKeAqL1c8G8uGuyBB/1EV\r\nMaAKcv7IEmhgseDTq/ZrVIEjfEaIuUJRJTGSv905zEzbzlVMWDLGEIuZ2emx\r\nQdcLl4A3r3rVK08SNyISFnObBB3qXTLG6RFsgf/wWrila+y5MYgQn6yYN3iQ\r\ntgfXaJhQewwPI3evCZFj9yqt06QKaKpeKzky4U/c+OfBc2JeBkDjoLOO1+p8\r\nk3IwSsLBggGFKApapnIko4NZPkVupbRyjyVSRBHz4BHW5X8JE1LSZ2plDIoc\r\nd2ift4FuSo6I1f82NfIMLrGlnxAc/NFOP5hyqrupdtm/R9UGUcsSHIk2THMw\r\nR6BpKAocIFrUgWDH3hAYSoVgCz+7fHrX07Nq82FrFjwPY/Jn2OkKmeGiLC7L\r\n8RXu6QaTU+RojsmcBhelYcQojYVSCD/j1qvT4aKRsJc9y/D+exk6f7ydFb/L\r\nq7LLv4u8liOPrdVrvUciPa5gDj/vB0yxiAVy2kZfaj0ABg4DcZzhJoStg3eM\r\nLITs0wyIkkfgOGUPJ9Wf71NwNe0/fhvUlKiOgunyymTRi/AU5N3WNymin+xu\r\nj3JcRAza1E/0hO6wNcy2MdiK6eGCANvdUrM=\r\n=gSzz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/tokens":"15.0.0-canary.6a85742c2.0","@material/density":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/focus-ring":"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/switch_15.0.0-canary.6a85742c2.0_1678762094891_0.45907642972399","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/switch","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b692193b128444a2d1b43064f3616ce1316ed6ac","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":58,"integrity":"sha512-XJvfD1vrHDOTdJ5XH+fyJmheOoARJJA9yE2KJvrP3iqsWWzkoUUsEz9Mt6RMKU9JscuMfD1EQvo6RAMA4RoRlA==","signatures":[{"sig":"MEUCIQDyvd4AUPNlpaOJvbtE7pUAolhLs5KMkn7R6YKAX7b+vQIgCTLrKzP4onI9hUWTN0Cz2S4g8XgM+k/xRJcWnoOhqtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELpKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKZQ//Qs54gm1GmpFU6OpND7sqIZRBqZUMVOeLBF4w7TTung4fAUko\r\n34xuSMF3tTYWv5wauTtzuA7+NPYgQOt+77JF700G0FeRnPgMe1JIHyfqb2l2\r\nq5q0IsY9OjyjwQEpRMsnyl/TupxVfSxN+9BO3nhewaQ4j4GbteHzMyM6OIRS\r\nI6Ye/NeP3m72ZbqAHR1fQ5VVJdBKN10+yswblnrtiY1RcherE2hfqekv0qBS\r\nouZ03VzKXyfzK7u6NJWCRhgd51/LqAQ66eBp/KQaU7t6ycvgb2FWa8QZPte4\r\nzD98m8pqpqlxJIBm/7GAaRp9Y5aahG69Zoxt/N2MGAldkmFB6U/SzS6rviGe\r\nlVx8ieoOY5qibzE2HynAwx51DldOB/GvhOf2/e/ksxZRGR3ahAAaTqLLqwhv\r\nMoMvUt4Ib+fUypXTD82yzdU8fWg6noH/zkyiwt1dx0Ebk7eHmSyQdCs/dxOD\r\nOv8VvsKkqLgXi+ZgtcA6nXCbCXgarWpcpUwjdiIVeApn8AnxWfD1vNqUabhQ\r\naYwTSQwitq22LnIQHdkoj36+AQOCBKo6tZ59NL+VoLkz5l6oQZmSin5+wMOy\r\nbQNm1uX9HWTgBVWIc4NwyeFpTbu/ZOpuIDaRbn6JJ+MTqYg4oSB1OWRIrbSH\r\n3XLyZq9l+Emfc/kdb+st5b2UZiHYZCJi4vQ=\r\n=LW2z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/tokens":"15.0.0-canary.bb6cd78d5.0","@material/density":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/focus-ring":"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/switch_15.0.0-canary.bb6cd78d5.0_1678817866332_0.35196604269106113","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/switch","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0857009570ac4d45e5d1ec55f3b4ff9cdaf1d79e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.5f94aa37d.0.tgz","fileCount":58,"integrity":"sha512-s2FIxtnqNcDbcDEvGr73vaANlBPVZAwMFSgQxUAx0n9Pubv10xNdSE/KijTTD1bB8AAdaOk5p2tDLgMu1boWZA==","signatures":[{"sig":"MEUCIQCVpob5+d1NGVAbejvNuzdO6aMQqkcI0LEnhnGdL6oZ4QIgO7nYvfkeifejLBG+ihlc5LdUU+DPN7DcD7GRMc1aPSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELsQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrJg/8DUqkqsbObhUS6INhCsuFqcQtfJVbGW6KCpw4bfK99shpWR0V\r\nRMNp7KAZS39Umhxx6PWhNFDFby0MoqCql3D5h9arAKYefuZ4dh9NB5eJde/b\r\nz9aNvrUdHwclRZDXcApA60fCIBN+E/QcHIXWKfsd9QWHWsLmrvnhMADLT6Gn\r\nOqP8vWVsweZCCE7VK9JrOqYP6mzvq8kZvGGWnN38Ie+CVrcXGUl65vr7pGx/\r\nGspbIyxxdtZuj+idAY1WvNxsz58comDDqIsAfdv7kfxoGfU5ouniK+PbUdzX\r\nkofJ+f5dkpahaa+LZ5kRUjqpvntL9HnRBdQeTwuZikntyyGDtk3VcYTeN/bH\r\nnDV3QH5xPL9wIhPm8NeTgaOOuE/fcN0JlUHU2Je4qpQU5FqEMESxJclESkWW\r\nGgIHGn+8xrw8fD/1ab/uqNtIm3VDzLNPIl6Uz5KnTDJnrhI+4vAJGcCgZCuX\r\n925zwHHTghwsYDjJLyoDosa7yuLY6Q/kGZOnkqEcxvqRtVRI7i8eU1UIllLg\r\ngDgAE1C6XP1fsKDbiv4Ctt9kncIKTUOgYY/9osuvpw+6n8z7NzM9j93E+TpK\r\nWO7OcbBoFzZ4O37Klm1a3k0yqi/07IVlMT/DNX2mjkCmfskPASSjdoDPrPec\r\nnGqXG0qfiKUPRjavasnieVDvKEWfypMebS0=\r\n=KeCG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/tokens":"15.0.0-canary.5f94aa37d.0","@material/density":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/focus-ring":"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/switch_15.0.0-canary.5f94aa37d.0_1678818063780_0.4292290333588029","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/switch","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1bd317240.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5543def8d505da44eaa2ccc6964807fbf7437723","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1bd317240.0.tgz","fileCount":58,"integrity":"sha512-qOpltXKCIdBCsGWYtcACXNaVq+i0rm/fdGIUAR6sHlKghnLtBlyuH8ri+Hi8AccXMMoDQWNCKU8KJprAOlbwnw==","signatures":[{"sig":"MEUCIF3E+GErK97NGAVJWL7G9/hfU9zm/py5B2ySdxAGvSHDAiEA6bDU03rgjAlETQ8Ld2ZoenSpXpRlW+tAz+1gxwiFQ80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELv2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOlA//ahkiIyGHOuI6vm9oLCktjKDLj/y/9nJKfInXOYk02gC8ob9L\r\nCdewNbJPBYew3m2z2enQqEyDo0p1xQaPEOVYO9er/LtTMxmLq+rKOVor/vvZ\r\naOSLQRI+6tX/qr7gTttNuJeLbRzlTHYSZul8VAMzv9RzVtwx/kdqQDRc2o9u\r\nBvNMtXUImalBo2CXxrkidGm5jh6YYvuIh5/ZDq3BzLW7sMnbeduWAV9C1AbZ\r\nsq5NLjl3mV2ziDHI65MnTviQijmXOvtZ5gWQYOapsYiaD2HP2xRkQB/GP5ZR\r\nHMsKSGgh8Ms6drewyisKfi1JXK8scZ6EXzL0+uSqUYPwx3hdPm6uWI7/MdLD\r\nWyR488DTOJCls/hDNiCOYsJeBdvDbNhAPuOM4tA5wPs7OM2ob6rexMSFx7Ai\r\nmtrmZSuhSvfvRZ0LNtHafiy0RwypLZ5MTEOSgTuR+p++qkSi50V6sCT3YGsx\r\nYlyAhjsV9Qcey+oap3sLQHHElfxTM1kAeaoEOfkLuUpV74oUQFsAVU8vGAnc\r\nkYbhToT12Er9OqdNSS85/2pqjl7ia3SRmSe4EAeTj3Ksa3vXrxXyUxiHX5IA\r\na6Oq4t9VJm7W1WhnHVMAkX9X8cDpcNfnX8hkEvoluw6Mk50w1i+ENKdmyIm8\r\ncJS0geG5zWHH5nNhZIE75ffToLJ4SOIScQ8=\r\n=F7E9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/tokens":"15.0.0-canary.1bd317240.0","@material/density":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/focus-ring":"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/switch_15.0.0-canary.1bd317240.0_1678818294343_0.896756531314238","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/switch","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"925e54c4649be94cd53742e4d53094bfe0150701","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d441d2a2a.0.tgz","fileCount":58,"integrity":"sha512-s7z55/Labuodfw+NeMPfwnkSUno0FoKo6g9rfCSeTkT71PF11jI9jSs+xUdxmXkSl66dIVk4qtuRAbq+Y42Icg==","signatures":[{"sig":"MEUCIH3ZJsItboHUBXzHGvaU8rViLWTqy0mzoWSL7l2I4WoDAiEA7lQLFAMapGkuZDYu9Dei21FG8CaNMt3C5Yz2+xWDHLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELydACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTDQ//cEu7W7P8Jb0LuHxko3Gw/F0DJsGnkr7HqiMUZWSNCLmNXYyF\r\nTncQjzywZkA4IzDgMdkOTdIBK2Ij0/Qgc4OSTz3boUUpFUL42jGTGGYwUETl\r\nRpgWaW5tE60FfafY5TJa7qpt8I13FSQsUXI6emv+n/AEhjZevL6SKKpqSyYU\r\nHB8Ev0AhL8JLbk00GOOeSAsvBIRqBULY/pLbIuDNDJx0wUw0JnZWnDBCWeB+\r\nqu+UiFOWcgG14c92aEtgTDxnyjv0T/UZsAvxXB6rUConYlMRT1NsbpydzpZd\r\n/N3V36pBx37mYYa0N8/rMLo35+heqy1riIJa0o2ZWwPzXACUM+j9W1G3tZTN\r\n+7wLksEZuQri0xB0OpnorBLIaOKPSsq9OpJsGvry/hsrsDQ5lOuv6A72Hile\r\nrn8p6Gmk5ipXJj289g9Pdavb8zHUUdOWBGPIua1H0+LfIFRaymryTGS0kAUu\r\nsO+fGysR2xYyuWu0h1HDGdGwV6fqFMQonrbZt9WeBHzzSeeTj97f43AxdqL7\r\ni83gy+t9FE9RYjp3ZbG1HFL8K5Nxtrrz5XZR+UpoURv64r3y2z6J2PMW4lqV\r\nWYLoL6+zpOMjJtpUH3Ok1z5Rjz6KEvG0iwVW4/y9T/twn0Y43eW/oH6xcdJ7\r\nszbjwZdB44S24UAm2RK25ukQmgXYBpBP8iM=\r\n=UlXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/tokens":"15.0.0-canary.d441d2a2a.0","@material/density":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/focus-ring":"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/switch_15.0.0-canary.d441d2a2a.0_1678818461306_0.047381501926212266","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/switch","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"076c79a1dfae1b42c2a15857e8bbe9ffa16fdca3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.fff4066c6.0.tgz","fileCount":58,"integrity":"sha512-2/1Za+VH+A6lmgQUIzGvixmxpQgFnRX9JUZchdL1VF9FUNKyF72i23xiqHsz7a/Bn3dIxY1W2z0SiDVl+YmVAw==","signatures":[{"sig":"MEQCIESDGeG/WxCG9AO4IAdyF2wjFq+7MeWugGnHQP0THfu5AiA8WJHYd1IqLXc3hfBmZXLina7cTy0hsUWrOeE6entT7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUgQ/+Izrh6wONNDQP8i03GJajRq2SQNDRcPvDR6ey7FjAsqHks4vX\r\neDFBdYdhdKyv9Dfd35in+wnSA/gtumcoGpWX63hC5qcCYtQfq+XA0CkTnfQ3\r\ndxnOyd9FiZrzK7MY60k0yu363Vtk+xoXEkxeOnqelf7YE+8VgQblXcb/arKD\r\ncKmG0JnaSXDUTVWksNsKi6Sx3/zedsun/UlNg+r9A6DIoJpY6tEJ05Aa0QOt\r\nJwfQDkw2QNPGYeyBh0OAzoLrPY92Ji3++tQ5PD6M/siYsvQ2BV1zMyEgwUtz\r\nJy7hpSiJn7OiKAFTMrlIW6qIBRPxGhYPlCg6Nfedun+tXMFMU1mNQzGNxORe\r\nSc/XYsFZflrDuYvOJ1Hi5mVu4FX0xRazxpPNU0LaoN8BDsI2BUNLVByurDel\r\nhI2iBuVQkLzFATGacOi3hpggzyT+iCp433gfNoSQ7IOHw8XX7AWAM6KddRE6\r\nUYPJSIUbcNCNIWFM0odUuAQHqHd4Cc6BLlOw+3WOP/qEBOClt3IUZjCEwQDc\r\nPTNGF7drRQEjAstoykFHNkUxiiygDPJ/Ytz2EncslH8wZtxOpKRWzQeSwOxM\r\nH5HBM+SvdaaLW3OPzR8jpajkgENw76pzdYu/aD1vp2q2KJff9bLCijcWBGiE\r\nK3tF2DjGU/7/LLaT3UMVfZheesxqKblaOK0=\r\n=Yem6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/tokens":"15.0.0-canary.fff4066c6.0","@material/density":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/focus-ring":"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/switch_15.0.0-canary.fff4066c6.0_1678818499142_0.26064114540073646","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/switch","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.87809c710.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a11b72783780e5a4f22e4561b06f5fd0dd40e8f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.87809c710.0.tgz","fileCount":58,"integrity":"sha512-LTvq2SRwj8ntHQTBYyLNqQOBpGRARa75Hd6SX5cZFjyL7hg8SEpfpUKBEkHtLOHuUkRndPUHyRXnsxvVFSABWQ==","signatures":[{"sig":"MEUCIBEeQQDlsCfK3tCGZx7Fr79Z7r0IdWapi2bIu+LgYQsEAiEA2ln57YHnHFcEQU3Af3mzSVdzPT+BtmoNjgHTU4XN8So=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMCFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqztA/9FFzLEULeEv8uCfMwefI2pnaM21yf1AdGEU2m4oMxju9XxLun\r\nnrdfsTp8paorxbZems2smUWfxj0glecz/9AZ1dVLnZkQrO5OZM3FkuHI9XhR\r\nslstWzJKKlVn59mRN4mvpsOmFomqxw89dQL4keqgOrYb5i2jh5Xf13uLr9lg\r\neHwsuyhzxumnqiEPVH9N2WWO2u8B/AlqnvP+OZ8X1JM1ZQgBsvoqETMq+pzR\r\nj9B4vpZpcp3ewUZmrle2BMPmjKBjivSDh99TuPrX1wTiNEzQrudiloBCAHG5\r\nHp4wsexkcd1KZaRfb844uoZh2sIsd9+CpuEynCkxJjJRQCagOo8/zzoU+FXQ\r\nT1o+fn2fa6t6YbfUqkOcs6Fh2BBYApSkW1IZChiPFBuV7K7FynQ28fGbtPRC\r\nIoRLTf/eDzN9sDug0rYHR+baNree8KYroFn05CRq5UUdKNQrkhfAwhWkYFti\r\n4ITVpr23E+MW2KI3bnrkvragdwv59Ho5Dudz8defKZ19aQn1AhEcXhfSZcyI\r\nbzj5E+TUS9FWR6Dq1tX4XrAXsdPcadovAJ/jxQVKx2dwjXi9i6aNQ++w+ApA\r\nuc3heGfNU8ag9SGQTsAgnmThecqZN10+MAM9YM7XtM/RkeYLyP4cKqrAHH/C\r\nD46FppgWaywVOvunQDSaSIhGPMD+aSbsu/s=\r\n=abKV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/tokens":"15.0.0-canary.87809c710.0","@material/density":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/focus-ring":"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/switch_15.0.0-canary.87809c710.0_1678819460669_0.898478971117368","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/switch","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.48d30012d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aee7c5e53dd1ac2586c2cd55adbece3b9fc85c84","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.48d30012d.0.tgz","fileCount":58,"integrity":"sha512-yWj3/KqeedcwUfl6Iw3Qjbb5UWrzvk2ParQVT/w9QHF9RiwD/JjT9ZuryP4FGPVrE5A2fxhN+oHPGindxwEO0Q==","signatures":[{"sig":"MEYCIQC03kayaEr+2f2eIRA4lNeMJaxrgQFu29VZ8LHIta/0fQIhALczcv73LHnsTYLxVhr46/HQhJHzb+7m/BLEqPg0HJbn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMGHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6MQ//c6kFtbKqxWmWmNhHNRArPAMUPjV3kqTVbOFboHM/H808GeIr\r\nimNpMCx9zR0JDQOdylIsvwgk9kFuDwzobNo8Dcpsgr0wkZOtnDeX+jB3D0O8\r\nY6g5VpkZ9vCd3tarDWWcgu02Fi8pk9MM39k+tQQ7K5Hq1dZrh5JQ7Z19RpGh\r\no7yJVwRfe4oDkw5cwqSKLHyqrDtamuvoG1V+IVdZT/ooiGIzZ348XY6Vu/xj\r\nkSpJEofP/yVx7W90nwXRNbqI+y+QE6QeBLED9ru+EllMBLZD5ZpgEU6U8pDt\r\nzDV1RR8lzPkFs2kY6A04MmOcN9tVS/c3K4/ETpHQ2UMgeAtV3rETPBvRP9Z/\r\nAKhGmvPieX/yW7bmITGONaZUcCd1htQr1YRD/FS2MO9mf5w7khFWgoAV9HqH\r\nKduup04qiIf57ImTSpc3CFQVVk9+bSE4phPnwlAc2oh4rk2cHu1GnzYiP5t4\r\n94d8nEMMmIwywYkNGXauIu/qoDilPv/hG6qXTz1FNeQrLGLLMJgOQZIWxDmZ\r\nTwH3cWnBx/V15ZUtWmCaFJ2g+q9sURxFYCjj6f6rZjE83X0BqROeJcpfXWlp\r\n1Lstn3BXEtQ5JA0poi/M+rlr1IchC8KiVEaDHeE4mNQODLAJ5qmHn8qH7y1o\r\nzVpixcmwwIbTtlz4zCNBzHHKIWciK/Muicc=\r\n=Jzi8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/tokens":"15.0.0-canary.48d30012d.0","@material/density":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/focus-ring":"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/switch_15.0.0-canary.48d30012d.0_1678819719262_0.13296892333071564","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/switch","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ba6823252ca30d2cdac7aa03169eeba89753267","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.419b23cc6.0.tgz","fileCount":58,"integrity":"sha512-VtpMSWsMNkoN9wDx+2v1yl78QjkVoNB+nRuKV+uBQrk5jj7CzTpWa/I2OgEhsW88Q/KwPgXKeLzrdfx3Ak4jqg==","signatures":[{"sig":"MEUCIGcYxWrs0pxcVWCamrTpL3XUb+v8yU8jqVos3S76qGXYAiEAuW7yQLMHkM/5zN/qha93CtFTL0zLdBA+riGtQEmkMjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMQcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0uA//X571zsOKbq9nz0ssZQH73uIRLdTAN8d/L1jyYu4i9eTLH8nO\r\nRHTnK3IljsVfjD7RoljQR3WViJixt7cLSgskcRpjHfRBQRi2UoObY5u8WwBz\r\nkmhm8+waN2QbiGNPc2meLr0OR+F5rIdTb81jOsfgpX4kN2HWCWoXbj9jbcQ2\r\nYmEfodKUCzUf1BU86thyZDXlJdT0Neg8fLJ1C0K6smhNuCm4REaupWDFKTiV\r\nFN8jImPjvUCoNRaSd/lMud8mmPG9BFkro0mPzmA8EmhfPD3GrXs4IJq0UBYl\r\ndgv2oXsCWaXC5RxtV3/rjm2V6pZ31Q8O2NjP8sEEDi/6wTBKPSN0BmfGe6T1\r\nCbflYrIHgsCCGst8gFtiVm7tIPi8FTJtcfkFFQHqqX71QLGNaNBclT9emJnH\r\nqTP84h3CKgbrnrPzHfE8lmkI1Tan6T1e8wCy3Gaa3CuZa/rCVK5lLk8Dxup4\r\ncQzOWCCFzMqu6RnTjz7vGG1GdY9bYWp0ET61lQtQEvLbnQpFWshq+YmNwErk\r\n+H43Ktdyas5sfjOUcNOis7n5/sQMFb5paCCTx0J4FJGiakJE1V0rp/f+44PD\r\n6xZIBN97ov5dLZOTCYHLzGoWOsI5MDtaUTvOqG7zgtz5hlSngOfCrUcF+XSY\r\nJqGga3J2yO5hn8NnFTyC05cMb0GW3LQBBNQ=\r\n=Lwgr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/tokens":"15.0.0-canary.419b23cc6.0","@material/density":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/focus-ring":"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/switch_15.0.0-canary.419b23cc6.0_1678820380339_0.19684425631938018","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/switch","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0790b4774837661824121d7126604e7253a4d106","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.bf86521f4.0.tgz","fileCount":58,"integrity":"sha512-FOfTQeXSSNxRMJphjCJ5M3zLQwKF05UjTK2HnPOPX5vKNRNFegRqymrBS9aH5+ahfVsfPIsDhH7Txbv3jHIUcw==","signatures":[{"sig":"MEUCIH6M+PTB/4BYoYF1ylfqnheJX+ayqgjJiiVVuAl6lT1+AiEArjAsN17GBJjPnUsTj/M6S8xAyeDWXBUqes7jAQFRdGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP/MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2PA/9EetPPf2bVP8RdNHWIGyIzzBiOiyRt5F8TV+drQX/dgVXneX+\r\nW+/DU/tyLajHyplzdB16kemYDjlPJPESyCsh9My3fVSPEKJYoUJP4YjsJjko\r\nd4PBdWqW/Uq2RqDdfJVSkIdgujMOwuUcinHAv8q1vbk8lYfEQKWFpNb+nhg3\r\no2lrEbZhy1YUOR8S7ZmQXdScd4kT2DI96Dx6cEEDLw9aHYDLr2vSCbmXD9zp\r\nUaOL5F2oW8GOAvofH0qPyp3VZ/YOK+RC9ntrzocRH7kfldHCNy2bx2qv6cEg\r\nx95b0jOCgcuTT6KL9j5q01s8ttUw7j3jrfPHW/dwtf5MN9WxfSK8YAguA7LQ\r\n46PkPhxEfFrPX9A01Zkjd8tHq3mv4rsJeOdBih3BLGAsX8kA+PH3yyhWvUyo\r\ndU1IiVxMPVddnb9vp3yyE/kI8k3Cad7SwDc18u0ewbJ62l+O6hEh6NSXEdAu\r\nPbB+1PaTLGlioMr+gWzR3E7cGnveeamIF1CIAOsugg8SIqtuE4GSkLYTl8Me\r\n5N8I2eScs/YWoQL5MWo+zKChpGFXcgT1SQxphJuAYiTVOGrcAS9H0eHCBmFz\r\nJGL3ro9cpWs5u7EO0YAoCN5/wlecl7P/2hxmQBN31UwDie986DNMqrrKDj42\r\nK+9vhDjNM9lCmHrNJuoxSSr8hi/iqMOSOaI=\r\n=6gUg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/tokens":"15.0.0-canary.bf86521f4.0","@material/density":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/focus-ring":"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/switch_15.0.0-canary.bf86521f4.0_1678835660220_0.15467058231896536","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/switch","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"606ad05835f96dde192ec487269c40ae9c19e07f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.11f3d280e.0.tgz","fileCount":58,"integrity":"sha512-FOqnhqdAaH4EdIupeiVopxzYodynAP8arr/jMw/WDBr7tCTc9Y4nEK0qQmJpPyonuW/n1W3RCAlASQJyWwRScA==","signatures":[{"sig":"MEQCIDC3MK7yN0f3Qwh7WCQ/R6EJHj9g/Y1MB0xs1Oj0AAfnAiApEQjOnEZeZtinTB8+c7vkAd1SUqSrDN8osUEqo/ecjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ1ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8Dw/9F495T6zR56ySX4HXRS6vP5mUSGCbe0P3PFaSedYHvvx6X7NL\r\nCLYoy4WkWNfVdnrKQPmNHb4GrFHGEpdnUo4LF9Guj1C6zf8g2UGd1X+b9UvS\r\ntNyR6cr3ZnH2VzJzZlsiWds8QutOEpjpnJJttoBS0//3KOzraB6blNEnb7eb\r\nLDFPnbtHzkwln/jbGBKJezuq/FE2MN8bEU4H1rzuye440gTaBfGEpKrqVYDV\r\nH6SJtFW1zOjyZEH9YkQRSbKH5ttQOk9i2TxjqL/14jhof7IxJ7zaPAXiPuTL\r\n5KrsTUmdPo+lPpM2o7VgC39qrCC0IGxy8RE7Tg+AbxNBIL3MvRZuc69TNld7\r\nv7rr2oCkKBIxfuToM7oI8vGkueoPHjXRCWwLnqdk3wmjpzX2jZVFPSD/VQbN\r\n5pXr1Y2/O9j9AE/F6XshdyYeJGBM69emrcJwWg4zmcHPvdyGiron8Ewft4H4\r\nZZs4UjuO7HqRu0xIiLODn8IqZHBodzLAPq7MVpYw8bhpL5XEIYy7sCHKh61T\r\n6ghN/n49JMgylsnuUJSD3W/tZPNe00hCvqTJ+d7kvBN4Dy0gwXTmpYu/K6pw\r\nlNS9MPMJcjpr18r4QDJ+njK+j303uKBDBrMR8H0IGK9BRME99pjk7jqiFMK9\r\nAaCBqnJWKdThf2Vh0LIeKYHttf9i3CILRvQ=\r\n=MrKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/tokens":"15.0.0-canary.11f3d280e.0","@material/density":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/focus-ring":"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/switch_15.0.0-canary.11f3d280e.0_1678839128868_0.9160139410521193","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/switch","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b281a409a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b083bd5e273110c8da1957a3486ead3cd5f4a779","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b281a409a.0.tgz","fileCount":58,"integrity":"sha512-d5lBC7HsRiLLm2mmEXr/XfN8fCJEQlFBFpTZpHK/gpr1bxK3QkDDM/vgOY10CxQUeaRzld2Nn+ELgjeKyjwvmg==","signatures":[{"sig":"MEUCIGlf258DAS3oodVAlxmWueJzWcne6Na/nRAB0BLl0n1bAiEAzQIR2kM4DRBOWNNvGV92S0QRey6rLe2QdQhRh11tfcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdBZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhtQ//aWhoE59lo2adtGzdyFSMugw3V/OdibSqex0iOpmT8nXhBLde\r\noG5SSvRcqPowzYjbu2GTkeYAqOHdsf7M2FP6g+XQ5wDn87uwrcgWvbej1qEV\r\nd5OYFW0SEWaL2/Qu8y5vYORfxyz7wmYTnFLpaU9Bit5vaRMrW+OMZiJTCbUy\r\nJmOK2MMdT08PcpNp9JOrrf3Qbnvv4L+HIJZaQa8/A8yjHlKCoESr/ho+ByM1\r\nKvf0El1p1IT04g5wsnU0sxz6GXDTX4LEuX10CHZgKm3bRUM/wvQqUWQ3UCsR\r\nsnGVVcWhiEwS8rPaei/U97xjoJ57lvyPwCwKsiKmFPP4kGjfDCUafQjCCdXM\r\naqk56NHMndxbhAIstveV97crgCCT9/ZV70DPaZuXYyfQbJpK8cePFR2L0zUT\r\nQ+QT4RgkTRY0lRaQ/TyUiqRXjUpIIOxfm1hb/cpuyMuEMq74rP9ChYOScZMb\r\n9UbZO/naldHomWBU6eXGxvJ1HSnH+7BNQh71grYCcUEstTc3ZgiCbfq0u2wy\r\neRTBulsfbyuKkNTClVfafymm2/zR3O3OuT7p0kTL2hrrxp+SbYNGj2XZlYvp\r\ndkqWM9ubpMWPv3bFVWL0N0k8k7x0wZbskXMpPsALPcsKcENRbSHKXmGBd8Zw\r\nD8y9jiahHA1QVsT0rcbPk2GCiF5ZAl1yN2k=\r\n=NdbB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/tokens":"15.0.0-canary.b281a409a.0","@material/density":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/focus-ring":"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/switch_15.0.0-canary.b281a409a.0_1679413337492_0.005604149345312948","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/switch","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.39e473690.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"113a9cc66169c3439363c723920665c3ec0a9213","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.39e473690.0.tgz","fileCount":58,"integrity":"sha512-LcqoBqQq7uZ4O6Gh0FkWZuQkI4IdF06LohZIvZtqqAyq5EXIoR727JOPKIBtLwsO6GuhRaGP9hnpj+VQMXzswg==","signatures":[{"sig":"MEUCIBj43jh+3WDgI9e6mywg5qLEsDPS/vQYo15Htl2SweY/AiEAh4vj8hlHN9MHQT/QHyqLEcHM1Fb+//OslltA/KI+I6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe7YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4qw/9F4VsNI06wzODtGveE2U/m9fDOfaKyGhjrJrdInQi6fnzgfxi\r\nAFK7iXU6B95ezWZ69uiC7WcRiLf3u33hmy+lg0Rz7JZWOSdgfIQwdQSKQnCq\r\ng4ff5l90kPL+EZa5iVU8waMxRtdhLEq4cEmUmvvulm9G+sh++t4APFmvXduo\r\n9PZOXto6rTAz9uxRTOaAso7M/eUlUtt3fEcRMoBIGy6+1j/yZg6bZa+TMOrE\r\n9p4E0Eq74Tp3ronHq2t6s6GRL6b27O/Y/r8Xmp1mSy79FGQktAjQCBQz5baU\r\ny0SXG+GjA6Mrwjr6T6FbHJ8utNfN1Xb/etwFSRsQbujIoxTlgaZuH7naG8Xp\r\nciUhYbAxzq9rQTLrHgNoDhTru3HOn6x/eBKrsz/tepiGM91UzExmI6y+jEIP\r\nlvQuWkJN+xnMB07AffLjQgJLINwS4CFo/326LMTiCJ5FdSYUhLNnxwdeCYn/\r\ntt09T5o/2pl6+8qceO2GMAj1gGQU0yWXKA9/iH4hW42dDpIoCyGSLk4nGnyH\r\nbR6cafNoW1/lI2vOTx2Ae5PoOV5/W8Ujp94zXhaQQRki0aX6OmNYQP1XZFQc\r\nX0twZQit0F/TOdpfNKRTbKI2PvZ4uQ2QqUkI4z735awwb+hUiA1DREQzL35B\r\nzLCBF7G1Oee6kOqANHId7UFAAlwjXWQ/WFQ=\r\n=RvjT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/tokens":"15.0.0-canary.39e473690.0","@material/density":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/focus-ring":"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/switch_15.0.0-canary.39e473690.0_1679421144437_0.8061939841328691","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/switch","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8774c10bdd41c893286779be692b02d50efc2ffa","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cedffb44c.0.tgz","fileCount":58,"integrity":"sha512-QarzhvvLh74wstQGjdZecpx75ktqCoQDnn+wHfM//gGt7cduVGwZznaINBsEramPDeAUXUz+GL5c+O/giLqDNQ==","signatures":[{"sig":"MEQCIFBlwJB2Y6yoJi6mP302LBDilAIgm3TXzJbRdRk8pcwmAiByB6AvfrQXoEm4RdqCbWkvJKC7vL/LMP1AP9f+8HCKKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfB9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrL6xAAkQd4jE9OwxtOBVuh7/q+PwfMhHonjtsaB46z9TH+Ga+X38hV\r\n5tFlB+uolHA6U40hUS7mogUwxFkiC9TgWp66L0XA0qAnsLMUIc9uoTe1BRdw\r\n7vyMB40QJEBMzRVBl+u6U3M6La3UL2ik1p+rZ9JjTz8a0HhooRW2qH18AxxU\r\ndsJlvJ4qw3m5u5ocsiJkoj0UDkduIHgMKQmZYgFU/rJGnq5RflLMYIjgxFDq\r\nP1BcLIU/iYCyFDaW5QSz70ABlPaaiWZ8SX2PZnmEkv4tW5KoS3AS2wsIfEi/\r\nnd/QK0ypVyBRIhwvha+nLbi5r2YWJmRVQ+xKYz9ut/1Tu2fwambYu6tK/md5\r\nv4/RR15PLMIPcJUIrNHDXgKbCxh+nNXZOsXh4kCN2kjTJzs/54jep+EeHEIN\r\nO0jOUQi3ECJb6uQQDeOJod9aiug51baWIP5K4g2PmGbAHJmfOLx9dgmYh+PL\r\nzCai1Ug2Yz4YUkhbMAD7Ow42tlFTV517Sq3olZkLaPjfrweCrRjUkSxaI/yy\r\nnEic5DM6OjiysoTvLkSKDew3ai0BuU4JZZXCZPSPf2yJllvKd1R+mfmEAxx5\r\nMgaKELH4n+iSROLGzwh2D6A+e5siPCzGgMBfqd0cLd50+VAP5cjb0vehiSXi\r\nE1VXb+VrNZYBXl83aOD0CyxgeeUDWwpRso8=\r\n=L9xo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/tokens":"15.0.0-canary.cedffb44c.0","@material/density":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/focus-ring":"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/switch_15.0.0-canary.cedffb44c.0_1679421564915_0.013609002682567928","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/switch","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a888283e4fe4c73b8d581a3914b237d41d90f23","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.36a4cba99.0.tgz","fileCount":58,"integrity":"sha512-DweCzbk0205VOZ4av++0vNq2UD19+6lPQekErIot00JQVoDMvgxlbUi3v2di2XaxvSAHnNZlP/qtnhQaC6G8wg==","signatures":[{"sig":"MEYCIQC8CSbjFJFyXTQDZkAyEuUZGKxr+W0Q1c4fZYZWfl2tjgIhANXjsJaFJsnOiScrqSawve7ezRZswEBStEZ2sF2W7VIz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIykDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy0w/+P/FVQZBcf8UMOlFozlpEtS/PEUD2dtm3++GoU2CNZyCZWCCb\r\nGZXjfIK4x6lVOcWwp0Un350NeYJVEKVYkbsXgTNGpxu9c2rUZJZhVPSMqhk9\r\nzYGtj2eYs9z6Udp++GwZwnJO331rjS4pNTxx+yWwpu5NABzfEa8B7fiUjanC\r\nm61wEF1eHB0vpZW4IMylMJJnY3H3+oK9xkU1oIVwUe0RIFeM2FLlCG3/m4No\r\n4BSkRRkpmuw2UrvOhot28sUtUAiGcdRQ0OgxydIfwCprYoLmpgvkbrqtwxMV\r\nKD8Y11RnQM9wqlsNy2mrxoM39qBA5qSGFlLNrXKyZiR6RN6qke7zcZYYMwTm\r\njuYBCso6krVr3aRVmWLMAznFTrcWq2cJWjpv4L2XRm6iE8O1V2DfWuk5FDYo\r\nSCHwLBjLZyN1/F6Z6RIx8IMPEMACIIqIFjJvlkEBKH7dElPr1VHwGrEPkQmk\r\nerO3k4BKzTYv9kMFBHrw8XKP0lYoeJty7EuyxOaaGtgRmH/2HVdMqI0WJ6NW\r\nVxYikN8Ct4yp1VtGMIozwz0nE7UFZylap0VXChk1ZyvKsKPOpqJb2B+JzMAe\r\nK2rn5ETPSJte7ibi5D7p4zAC08ScofKXpaqn0ekygxjypQocq6C5ZR0/Xo0R\r\n7I4vLoHStQDfKBJWfhj/OB5oMqiy6Vx5fFE=\r\n=fzHZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/tokens":"15.0.0-canary.36a4cba99.0","@material/density":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/focus-ring":"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/switch_15.0.0-canary.36a4cba99.0_1680025859062_0.9056479172238838","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/switch","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e657e00e220209b27e507092247aaa45148633c4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ed7e82ded.0.tgz","fileCount":58,"integrity":"sha512-McMqjUw5YzI33v+DMl5t1xHJt9xpWvgaMgrtDxlQJJ23CkAyy7Cd7YdBjLrDiuMSa5AjqpUpnr4X1ZUTFVobQw==","signatures":[{"sig":"MEYCIQDpkd7IrD3QFoIBXi/+uaYqzSEl9PqCiNbCqyZWxxkkcAIhAMVdMr8Cf+kE466SbUSaUXhhm2Ex8WfAJhtGS9g2nfxT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0+aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT1g//RjW05zXP1z3ylZeaqbye2+gw66qFByDwRM/u49owXgBcDTbb\r\n9rT0zG5zUM26gp1ot3cfu6nMgsw9p8Lx6xLIc3KzpXMbkiV1+df8R6/HFi8J\r\nxBugfpk1eUC/Z9s+dxD967iSPnwpCaWEmclXMa/KFulZnlOxlRPni6uRbOHo\r\nfvZcNGKQluBUTFl0DtuPeEDDt7XG1QPmeGAmFaO5BJkUy3yoHi0MM9aO0opY\r\ny9irLYzIUYRFiwwD1lvvsK1isKKxkMXeugwkUWwW3Yto/V8HQLo6TLKU0UlW\r\nyR2SnLRnDAdlPlTSBXhJQ9bpcmFOPRphKzfXvtEP5LCrD6m/l7kC6+kk/Nnu\r\ns20wQASpqeqcr/Vh1Q2vxG9Zm7ObYKgVHqCMvfDgMvltTT2p0bdPEqvlDECc\r\nqcu8p6zHc+8j+vBiObFD1zJGzN9g2JfXfkLDp82tZU+mnvzHyBG2PaJ0T/t8\r\nqIYtNlzwSB4l3uqo8K7pRfjcJJyEB5KEXi6cC6k3P++nH2xbbua+RDq1DqJt\r\nOLzcunAmSEZhd7BfjsoPjgVO8gs+i+ulQgjCn2aV4MnrWLd/1hZxaVmnvKRb\r\n0eVyLDvNHHrpC+pzFF/bs90vZPihwJJXn/OGs6G/YmpYuoQjM9ML+jeVTxIH\r\nd2iAvkKXiZq1LivGnv5oDOoI9mZO0sJbwTk=\r\n=c49Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/tokens":"15.0.0-canary.ed7e82ded.0","@material/density":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/focus-ring":"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/switch_15.0.0-canary.ed7e82ded.0_1680035737747_0.2985786176485197","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/switch","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f02548eff50df6be7bea7b52613acd97641839e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.55093ee1e.0.tgz","fileCount":58,"integrity":"sha512-h9Ri2jQD2WH2UvNEwRNRKhE/tbWbRzV1tGXqB9bY24r/5iUzePN6qT/92XZH5NaHNiqJkxo0MLaxlVBf7maTAw==","signatures":[{"sig":"MEQCIHBXGCmezz+GJSyid6TIHpOtfhswT7UxifYtkgS+5np0AiBeYAyaeGT+JPzJlT+yHIzV0QTBPj+Y46XT1L7zq8396A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIhPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo15A/+M6f5krONcqNeqDY+siBNfsgf5kYPCtqYy200ibUL+t65V+to\r\nm8Nzpk5w4PN4rIskXSYw22F2ZbFdTfwAMAyVjhNg8eCpa1bU/09aneT7hGJT\r\nVRMaq0uXjjgYAXSlD6RucGaFhhcMDB4LK4QYAb8vnklkWfc+jNHwc23nLKY8\r\nYMprRDlQ3BGm58CQcdSY0pwVb+9Uei1W50/cNNn77S41aKmqq5u5rjT2gDl6\r\n615C1wdWm6nUlkTINkDeEP/EvoTeOWfmhMw2r+xnu0Qg12rK/gtvU3pIw/Wc\r\nfypS64dpIDTB7KZpB8fyhG8FX3EYzGPNWitt2m/YGgqoJBeme1iwdphRaQlv\r\nmHZbClpfFDQyGDdanqRntnol3cSOolszXwNQjySBKw/wkszsdKkGZyJWs3Z/\r\nI77MbxYM+5G0o3eo/kUtx68Ap9MHMngDKwjK0TTwuXD0TziBFG6M4zOchDbl\r\nR0kwkr3XAIifk2cFTJCOdeaAXoqaBXu7GXYa2mvfPm3SonRJhmbqg8Lm9xXJ\r\nvh1W/ZuS07k+dh8tUA2vh1QWJq5/rPV3mSgdl6d072XjPykyLsh3fFeO+pcf\r\nSnhT8NFW/F5p3SuXS5RT6UHvEV8L5XNO1iZwSiTcVhXLcjD39dAXIbZEAvW6\r\nzKkqcr5J7BYtyJyJJmWDAkIxT2CrWaDYjAg=\r\n=65SZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/tokens":"15.0.0-canary.55093ee1e.0","@material/density":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/focus-ring":"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/switch_15.0.0-canary.55093ee1e.0_1680115790890_0.5738369597277306","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/switch","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0758ea5e94461ba3573eeb5f2c0094cb76ce38e1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0c53abc81.0.tgz","fileCount":58,"integrity":"sha512-q+YNuc2mFuhHxuz8nPbPiO+KqI7tXVyuyLESNVdihwiuwjhQl8RIF60rE5N1HQo1DrD2NU9agOEB6crIUemV2w==","signatures":[{"sig":"MEYCIQCk0kSo6ZKXqi6NNxxd3pgYAymC4/WtqUfVSCdVoYo71AIhAMYgHvuVKcHzk8QtVC5XMvKcIGWnU7VY+4qATHhToPE4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3TlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrElg//UYvrvdDcFhLtZPPEZOEKp004a2zY56MFHQ/kBZSnK92CUMBe\r\npF1Hby1RBsWdGwLBgWN+ICl0JWrgFe2H2bR2Oe8Dn5YxSXLXSAL9GsvUNjBN\r\nisJR5ygFfWhR/K5LOWSQ361MGG7yZCMGiZVrWZXUkvFNEQ4lhRzb5l3G/n1O\r\nBjK0x5owX1RHIGv3fe37qILSBGeh989910M9PnHAErPTQOwdtMcyH9g9YdQE\r\nN4vxjjfnKwanMFAghN9619Ru7vh/sE6px9ywsrzsooH+KJirYpaVuN2lepXf\r\nM4zk82jemW7HUHYkg6ylWCLL6qu7eBtS8kupyX5EbilU93KsESwgcUFCso7p\r\nD18PqzqdkefTWXQL7IoBBv7Pj0TzyXBpsKPgtBHZ78epOwe0uQA+Yd0SEglF\r\npN9QBiEq3xum+/FSXu7Ut3DBoFqgpW7gz8DP3zO8RCTUST3uDnf+CktwZVqN\r\nS8itg/dEytnorNr+nKhw4r//Nw44Uqt2GmLU/maBzDJzrWY74P8XDUAL8Yef\r\nfjZZQq26brv/8/GPfPtUu+jVCX7vHon055UbQEb+J4uZjFYstDPvi6ARxZTo\r\ng/0U55/CiX5QIv0OUbal9G4mIqagTmXllmKTTuR2GKwIjLOTrzp2NfNXOE+k\r\nxSLXuVAby5HpSApwj+pO5izzOHB4SNwnz9E=\r\n=pqfZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/tokens":"15.0.0-canary.0c53abc81.0","@material/density":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/focus-ring":"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/switch_15.0.0-canary.0c53abc81.0_1680831716895_0.3230440840781106","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/switch","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.51311e69e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66e9e6e3e86b41528ed9a958c98957c7ab18b458","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.51311e69e.0.tgz","fileCount":58,"integrity":"sha512-wU5ze2I/J3ThBwMxJ5R7aGZ4nyzFCVsUka59YcuWfYwypKt7N19uJdr+Ywek7l1zQS3ILbG3z1aWHKarHz9iUg==","signatures":[{"sig":"MEYCIQCrjr2hi3GoTzx7I+jkCKaQY6B37/wYuQOAoe8fNumoHAIhAL4aTvzSU/FSP7Di9on7AEs24h6xzhlhQQdTL9tQ+T3c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwkw/+MD6v0uB+3vb1SABaqQWVeXiuL7pS1kOKjO3zUMU3eGCoB5jS\r\nFLND6FCFq88TDAlr4DqID3r+ruL4Sr6TLq3tpBRv2RsqHSoqbnc2fzRXP17Q\r\nG58lmIesz9rWQmyTOn6fbIVTOwnrpgfVz3+UQhyplskFB01qsHknt4d5PlyC\r\nbXFOJsQvR3Z7WnvxH94QbdYba2wuYaLoreEolNoSiP7PHags46EfxLTyofpi\r\n9IWcYaaohb8yn+AzHiIA41autlwi2eE8VXjkz8M+ff/i52epTqDkLargm4uj\r\n+8jSuMkhbLnix32PwO3wtjXa8XBn0sxtYwXSmKuwTW3nQkxWiF5lfxbuRcwz\r\n8hK9zgnuib+q1aZtWEHgVcw4M3e0Vn52FPVnTgWmmjyyu9kGPt2QfPhqKjhA\r\n1V9IIs8PmncXRQkitnaJX9vw73ZAbTSvVKi9SF2JR51z38BRl6bSA6TPXbqJ\r\nAcI+6MLIGr5S4ZWEtCMfY9CDU0g1pCgd8TqeXClLvXK6F+AxaZxe4fcDRJw6\r\nZg61wAfsoa8OHm1xc9/a225hy0M7PHvXNh2HZC3KAg2DI+AlrmKOeCN+kSwZ\r\n5W8LUkAyXKlDx7M5kWPRYP/4fFA63GUbHq9EqWsgNhe1bnOtrx9yJmPCK33L\r\nJvUmWJVzfVQOtG/ON1ODf5B98QGkUY3a91s=\r\n=0rh+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/tokens":"15.0.0-canary.51311e69e.0","@material/density":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/focus-ring":"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/switch_15.0.0-canary.51311e69e.0_1680890924378_0.5878117422122426","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/switch","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d19f8c21f4ae9a9d209fc36adefb2b5ea34689c1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.113b1a38e.0.tgz","fileCount":58,"integrity":"sha512-QZdCh7iWYtETfUiltba/LJmZjwx2VLZrN4veuoO3sPswJFvcXcgb/X7NMcOO3npy/YQZoPJjvKvbSVnqdF6B8g==","signatures":[{"sig":"MEYCIQCGU7oEDwmVRNIQE4kIK0uCOxibdjrDB6WJ/ztgvKiR+gIhAJsqPtISyUfATWA//Yc77V01Nw3f1CrR6izOuY4upU2M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIWfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyVg//VdNz4jJKSuxlLh6ld3okGpQ+Ukjmx1uCGY3WBl/idJdGLxkJ\r\nxj3PDQvkDttaQPkpRGYnRS4Z5uTiAle3j9zLqnHne6el3ni3RyH29jPPUhQM\r\n5zdT3H1Z85OH2wCpwiTl8NaTTEQFa7LntNLaA+rcXrN65oLRRjGUftXazZcy\r\n6IORKVh+OjQO8FWA7MjXLwfOUnsD2Pi4nCoHNwkEaWrHcpitDwP9L9XDDkNR\r\n+UG01KmI3ubVduFPovYrGYK4LVhZ/mJRYX5oqE4x3U5ckoqPSRexOVfUHN5u\r\nsx8C6PKnSfky0bFrxvDSS39rtk4sVLXk+sTdwxd/zh2MWz5WNG85d4+SYul8\r\napIVfpI629WXNyrpUYflgqUE8D8FlLEvqq1HM4f9kArAB+uDZF43IlTpKI7k\r\n/YLpdEgnF8hVyrhUUNTpw9+yYJ6nCFcxYixF4f0oihpCp0ZWyxpybNz6pvLg\r\n+SsXgJaxTCx+S8/aUb3SVky5kCC6ScC8WSABrVkUqTd6BcIocjyZIZeQNnIM\r\nPAu2tfPwnq3+0ZeN4uoggWF8oKd28ZyLoPJtRqZndiVQnfxsSWbJVSowZBZz\r\nbRLpWQi/NezNtdwil9HtOap+0blFzxwoP9JaR69pURmNIPOg+PVmV6TGnq2M\r\nKe2p4kWHArIERcjdzY5S10sn3wXox4GxojI=\r\n=WHM5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/tokens":"15.0.0-canary.113b1a38e.0","@material/density":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/focus-ring":"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/switch_15.0.0-canary.113b1a38e.0_1681163679296_0.5458928297300452","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/switch","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ea2191426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb3d9bb57b59da31be9429d3c070c3c4a3cb2ef2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ea2191426.0.tgz","fileCount":58,"integrity":"sha512-WsGo7gTiLZT/l/WEiDghbgqbzKf3irhVrh+XIDhJMqoJ+Qekwc9Z2JycJfTZqRjIDIH7BpQXMj9g7SBlxsm6ag==","signatures":[{"sig":"MEUCIQDa9jO+EseRy09j1WFYo/HCjEjtNPdPFIhe9SWT5AOlmQIgVknfcK6dEZ03RGZbw+IjbUk0Ix+EzB48b7iNHu4guBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdebACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX+g/+O7Yq8gVmBq0oIDwZ2CBcq0M2tK/TbbTb3Zj6M8tgMqdm6REO\r\nxQ08Jf6YkBUbjPBPMVtSgiUjwaEaW7jv71Q5DaHJxg8+h5xydQinQr0AyEnP\r\n4vahfnyKAyQaYppaBNO830nCLYCEysNfWQfFnsNeZICxBRiL2cNZfwp2oImj\r\nEm+vJOtsEDqxvREdM5K7fvZlEuzRnm+newdRZz4aqvPNFxKo2W1ItgiqZNAF\r\nYmAU+aZ/FgAoGWosRfkxziKYnCNaANEfcWTSHF6BulbiT2plODVXm4trKQNr\r\nPrqp/Qv2zE3M1FOpfClFhe0ZUq2ppjwn5yvEHUW04pkP2WxtKoY/P34+/NzA\r\nZFonNMe5xzqpbglEU8jHFAO7PM1wFtVH6qZyGYmFO2WGxqX41KVpS3weEKpv\r\nz1YlOdnxCYdx9zCsN2Ry+QTB58ylPZYkz3qyUN0YMRZY2Gtsf66jP3ezakAv\r\ns7t8iotX+Xw5H7JsUqImPkPdscptMtrwm9eDhqK/Hz7c/eBZMlxQ349aU135\r\nmFIBU5+SK+S5/mlFo8kMdRV+2CBPsLZitnDFiTmB3iBTgpzmQEI7No7tPwPn\r\nn8Nz2EC6ri31Fd722yLpp8cyU5nLNDgQQqppH9RXOtx0sgk3yEdKP6TkWmGC\r\n7XNd4n8s+iLQeSnM5gdUtf9qcvGLQOLkVUY=\r\n=mfyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/tokens":"15.0.0-canary.ea2191426.0","@material/density":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/focus-ring":"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/switch_15.0.0-canary.ea2191426.0_1681250203261_0.5870527376019354","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/switch","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c692e9b00337e07b288fddb62d984a4994a3295b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.5a5c38538.0.tgz","fileCount":58,"integrity":"sha512-BokuNMF7tzUwz2sTwBaNjOUVZP0j33AxiOWWMUSKpX3ijM2LrKZsmGX6+uwTrvOV1amn/AB1kcq9E+AV3KVnrg==","signatures":[{"sig":"MEYCIQCusyx5VYiEyG4UexYwqR1TkChbfPk9TeaJ0sIc5H5BDQIhAJZRu5n9UCe1X3lQQ4/uuDw3F9+ka2o2w7n7MskfpfzZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmSg//RoaOv29M5Ftj+tykdwiMxwE2zTJRdkokiTpadVbd/qZd5lt0\r\n630st3ORUVxpaeVKVvcRfeDxa/SPAiNk6kofha4N9nTKJCOPXm1bVUZ/wZZ6\r\nCfHilNoWdgBuli+Ycv7+k+01tmT5sZVGKoDlSivuoUZ4sr3JHk+10LYCouj+\r\npXIJhcGuNWY1NFNXmX+pXar23GSxBSN9JfJ6HIkMo21OWIIDTzGK3icvNwn9\r\nwApR7GEdkhyT/0aI2n9wCqYpfw6640p3Hu2ZnewN/nNZ4phsMlJJAzfzxQ/I\r\nwPsYRbQ44jEF3RwVqqrJ6HdLZQOXnlgZGeEW1aDjfCeM7fKzbFi7sucZnef7\r\ncYgb/sVDdH3i07Ez7Lipk8WEBAHtokSH8TGY90fmvR08JHmMDKdsqgIX4aor\r\n7s+hhL8P9lsdZGHf+m3HuzNDHSsXjykMdPkqHNwy8IKcGuUqsHgM+m4J+7fw\r\nTJMsHtNusuwk0WVX6BPjy4hMXYNcjVY7R2tJ4ofXZ4CR0aoU5lvXYotY2cP1\r\n+0xyHYIvxJ7dWeQzdAWlJQnaMgnxKOe2zsIhPxqfiiHKbNm1H6LfQaGCPgHR\r\nuweheg9lKgScPV1WPglyS7TBkPx5Y52ciCYeMTesN7xWIlVdsN4Q4/pt6Y/+\r\ndgVSFroJUZanDMdedCsUIHIhhWNlvSjqFmw=\r\n=YHNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/tokens":"15.0.0-canary.5a5c38538.0","@material/density":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/focus-ring":"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/switch_15.0.0-canary.5a5c38538.0_1681252269984_0.28139622864661873","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/switch","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb615d67f2718376ab5232d317645ed0aa3e199d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":58,"integrity":"sha512-l11D0zJDM+M9dRII1aSVBlxaamaJFQEjvXeuYXwUTwYHorb5pps6BiVLyPYHFzKtIVPiNOxcYquEHTpBI3KxZg==","signatures":[{"sig":"MEUCIEib3sXBc/xF0sxDU6VJ4UCA51sUEbCPw9pf3Q12/9q+AiEA7udHRDq2Y6cT27NX+D7wIIQLPYdIaXNbT86TJZfwNr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeeqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpXQ//UNAS9kOiRAb7+gkcNe+LSmf4gAqy+rj5qLQEAR5dqsBc0PfG\r\nZdQcOFuE/8RpkaoUPhm5OsqeeND/nOpYednml9UNtQao2R4cSB3iFYIRrGdX\r\nSuAkNwclO9e7J9P7fdJam/Px3+Wl7OGda8lM4sUy31cW3khppVEGJtM2K9Bc\r\nI5utxoHy+zQ0fLePPEx5AzGDPRr9l34KfmGfq0AbXKYLSrn761nvO3WBNTvD\r\ntBazaZvlx95K28KGVDM/hJukERidfSHep1jhSvF5Hgj1eMHoXESulZEVTtnT\r\nxUwdPzSNrUhfDPo4CCmwj/Qb6yOPiL4I3u1h0quEvHfePSvYZqSOydk7c+MN\r\n3nU3o5W9IUJh89/Vwwl4MyJAnwXv7Qf+lj81xXS46HTn2MZ11wpWZtwqDYDw\r\nVTRK58HfgvaLjsFKZ7CzX9FCHaoXo63J9PK0/Hx3nJS6V3vZgOHNKd0k0oyA\r\n5qrq2GFuK9JTgzwd3hB3tgR3jajln4JK07SXmzVopS5k8cVs0+Q82DmNe95k\r\nCP2yH1b91M6/DGJNJiP9GlomDmz8k/fr1dTjC83UcJNKc+7uSEEocbkT42UL\r\nAYfIMBg56UMRPZmWx/7fZZlcMIypvrofZM3l0zS6zSb1Q5J70avnTSGEjD8m\r\nUxfIaazk9Ys8xhej8sRrlgS+Ddl/StXpnAw=\r\n=ZMto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/tokens":"15.0.0-canary.e4b5ea7eb.0","@material/density":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/focus-ring":"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/switch_15.0.0-canary.e4b5ea7eb.0_1681254314603_0.48033102385363224","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/switch","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4570cf7452917fbfb316abf833542601f0ce0a8","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a094dd9c1.0.tgz","fileCount":58,"integrity":"sha512-pMfhIjkpf/94fNiu4huCQ2jUuTZbfQCFH6ScigeOneIftyKp35iaR7p4N+slnbv7IDY2VPq/8MS49gb33i0fmg==","signatures":[{"sig":"MEYCIQD9IEZUixDpp/zjZp1wB45olvmzetpZSxTlCgkipHvPVQIhAI1yFxy60X/w0om/HSkyLhs83l+8PK8Yz6bnSYDMe+Nf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdcJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNiQ/8CRaotqSoL0i6heWtdLimIbxofOisgYYP09qnHrLmMfjVzQXY\r\nxe8shBiugtgCK3UtSnLSy5eF0+nTQIjKHby0+mvtU0LwRgsxsHmY3RlpxO2n\r\nYkBy9FFdJs+QD14uEIJMZ3A0y6GTbeR6fhHs33CxJPV9iDUeTghxxwanVuYt\r\n+529H+kK1ghZ2O89xHoVTBb48Ja+SEyAT7hc9AhIgTZBomtE69qXsGk+lhUZ\r\nZ5LkqgtWz4/ZLbpY7k35iXaTnMMuFyNoY8t3Jq1DxUdOfHgc1agYGpk15j2E\r\nMt116Qt7J5BawTbr1fyz48EW712evqLN9DD4pJ8QEWCrLyeayXH9R+vswkrh\r\nOwOQV9A8hPnO/dB2fFJt5Ow6dpD8y9PgrfhamVg4wGpunoTuT8gqbezjTYeM\r\nCl8Vfxuy214qpeY4UQeoqwh16eszB5a4x0DJDrSQ4Ez3y3etedDaTt9ChG6G\r\n3S4T7zhz8goEQrPoleUR9mN1oATNHXShyvD86XRttVDOIGfDrvLcAzqxaeig\r\npOuPna0FkWQhBPVLxXwnFHfW6k3L82oFfLby0MmEfUglWEJbNfcox3eYW92h\r\nL6nL2s8kSEIgEyburCQXSzEloIvheTqO3R0oBLkdnfX/BcbIrm7HAwq9kltE\r\n0RdVZxM4Yv/gw32gZmwB+W/QgtNJ4Kex4Dc=\r\n=68tR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/tokens":"15.0.0-canary.a094dd9c1.0","@material/density":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/focus-ring":"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/switch_15.0.0-canary.a094dd9c1.0_1681512201426_0.17423659968892813","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/switch","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f771b091c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edd81ddc966709f7851f52fab7609e7a8f0fc111","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f771b091c.0.tgz","fileCount":58,"integrity":"sha512-ZJqNlTvPxl7IiiX/uN/oDJQH50MOuNVezuqWOmpe9l4v+3XWTNOrZE2Evh2e9eMBQvUvm3Vu5YL3G8yKSWKA7A==","signatures":[{"sig":"MEQCID8VbG+VFoYRG7ON3LkpyWpxTdkbkA7D6pf47S/HYsIGAiBI9qZiZ3W8pm/sSnr8dV5Y0ihqLqKyEIwOnrLxjuTRnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWgeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW8w//UhmOoHyw/MPGSphLPl8PXLtuva6rbnG7bjH3U/jxD8KqpxCT\r\nbOYxUjfsYQRhAG/6uYrHfq7uOdvgzeSvvynQL0YWJbK4gxrXCRpuvbDGxC87\r\n/9PF1toDAHVT3XpOp9NjWlVvBsRe4O+0Jl5nNZx74HlkXnvynpQyTzZn8GhH\r\nfvuIx++/0P6NxS/lm+TECdamzniI14QTgD5juG7f3rDjBkcgSV+tbjNavAZ0\r\nPG4jzXYLtAv2MXGXmQIyikViCM185knC0nE5O9KGWSo9n0ggcubAlhhEDpKg\r\nTY4CBf1K7vp3eQWlS+eOrErXxv11xii8KoKk09poynAjrZu4KuNBE06aj//h\r\nFHl/O5TM4VOB0eBuTEHD7UtKfab769u+zl0bLXw9XLFiFCDoUviivrCdE5H4\r\nX1wORCQFvqlpja7CcfYJPKPuC4geJR93CvoP0UpQzk/bjnJyrdflGiyPzrjl\r\nZnr2AriMdMvKtVgTZMAXtj2oy6IiHqVN4yhLmPBW8C6KyZMwQL2d7gB6P9gZ\r\nZdOXYtmJEos0vmmhQsYEDdPrACZJ3irnfa5wEHfpyqGsZg2EfY4YpTtG7Y0L\r\niAEuSG6nooUeygxf6pZEBkKu11niycr74jUmVECFIH4B1RaEZE+NuvEsTfwS\r\n2N25sLdBcOMcwdeiMkDLz1uee9x3H3e6kIU=\r\n=a4li\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/tokens":"15.0.0-canary.f771b091c.0","@material/density":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/focus-ring":"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/switch_15.0.0-canary.f771b091c.0_1681745949979_0.4363983311995854","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/switch","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9c1ea5c2cbf044c92b21ff3bc02ea6e36da892f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.79b1b612b.0.tgz","fileCount":58,"integrity":"sha512-QKtBzOpWoi910C1ZlFb29ZYMfUp4bnpcoLbnUTCwVaPJ4IK6jRK5088mdqd/JYMqesa4MTxo9u+ZGH3F1NA//A==","signatures":[{"sig":"MEYCIQDkjyKQiiIFhr0hmbMNVdo6H/YhTgkzRpZmd46y51gU6gIhALpbZVWa/5u9ISyMEuA/1V1/MXeNLConbkb902SMJw2i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHwYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQvw//fDBSY1yQUkAOr6aX8GjQcVwGwEvmxbsQdgR3JjHYbTkFIIgS\r\nP96PQJc47iCIjtAe8gVsDEWkOGwurHs8iy29hCNOPP+w/DocsHldE9bWDlCv\r\nBzohDTGuIuorsd1M0tkW6o8Cpb0Xe103TV+r2ClWRRVQMzleJPzBMvySa7tN\r\ntx8NChl5GFmP4AwdJ6H8Wbv2iSSEgVKY4X/pRSG+BYLR8WWGWZr3VVrDe8Ec\r\njHeLHyssgkSh5Xp0RQauiWBFVwJcfcOULNV9Km2EqppS/NlJt/53KIyRwj2X\r\nJzy5lXYEwnm9BRPKfGws08EjlSCiZYZdAuYRPC3GZnEzdIhTp3pqKh0sqXL1\r\na/QM5e7EfcxcdoEmZEEq79j4znheMo1It1FpQac27AFNC6Tkv9+YpDLke/kR\r\nOBOkTubloNFHO7JMR+h8LsGbYBvwc9t2emJYU7SXFiTqfPOoIgqKZkZ58MCv\r\n5aRWQPigm/MaUOcp0zAqGgeU9/tMcZW/RSUJnAebZ+vVS2pavEZgJ62szsql\r\n5Bp/rzmMCpsV6LvYifOhXVcGCgtsVDYbP/xrmAw0UMp4M7sc7+ZxN0Lm5xYs\r\nYybLCU3rzfLS9tu/6HQjiz6A5y6geb51DRW7RcH1h+LCSGNEF1dhWq+rNmHi\r\nYYiLKmiiuU1DHbKypQJb2ipDEqe/gq9oNuI=\r\n=MtgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/tokens":"15.0.0-canary.79b1b612b.0","@material/density":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/focus-ring":"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/switch_15.0.0-canary.79b1b612b.0_1681947672194_0.8044758546674533","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/switch","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87342882bbb4000082b2eac58c69d115a606cea7","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6f50071e5.0.tgz","fileCount":58,"integrity":"sha512-k6rBL9eUc7ZjsE9omHPFO6VkYcbA5muBvb0RhYgNVc8S2ayyluDAHv2Mn9/EyOKKFBvK3IM4IZjNQcN/AXfy9g==","signatures":[{"sig":"MEUCICfU7WnujjCywBzEeQEZNgA3i4YQF+sRcsi81qR40EyFAiEAoPHxDLE7k7sa/ehieelt/oqZBxC/fcxXUrt4xxs9pRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX4bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo32g/+KGmQlXarTriJDqydbe/YbGMTGCGfd4CftzkQQEiCJax0TSFj\r\nbdulEdAVcVUd6U2g8H8NW/qr4SSlMZ5AX/6NP0xEQm2duDaiUp4lgMS5WWOT\r\nLY2CHqvmoiLNjiCK8Y9S3iEpX46sjaPAhW721JRbL7G5Vqcm1gstlA3WrjwZ\r\nD3tJtK+CBBv4Df+wu85uTEcGnQD+GN0WVYQxkvLt8C+jMm6PhjbSMoctv76I\r\nx+iCzEfRPhRAAHHvEAINugQUen9IWNmpWTDwSwLC5AUjSISI6MCIILM3WIaJ\r\nQhx1XyiFX6KcJXqh6vfHv5Z2HtFrqU6BVDgBC5Cx6lA6sEQQ0cfZXMR0myMA\r\nu7MfQ1K1f7VZwYM/84wciBuG+jyyRRNxZQyO+6SsUJhiQztJ+kZ9Crq4yVpE\r\nYCCk5vsWgtySLF9I+fvS4a3pImt/9XYCBx+2BqlOW9XogJjQF9VLMB1oAMtI\r\nXlnrWOKVUEuiU3A6QKnpx9GFHQMTfujZHZSFdWqFlAgM42CfzD/M+iK+2oGi\r\npSM01zXaDk9hdPOHFtW+PUCIMNFOtNDvaFJ4hg7dX3w6luoNTKVter1ZCRqo\r\nSZqlIzpVvw82Ubh+fp9ZLVW6Hr82IH1JzCj7WDXyah+GUAb8OXavnWPEzIBQ\r\ncrj84DnarLyhDd7xKZezExkCslQPgguA6kg=\r\n=iDyu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/tokens":"15.0.0-canary.6f50071e5.0","@material/density":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/focus-ring":"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/switch_15.0.0-canary.6f50071e5.0_1682013723393_0.9006269253010695","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/switch","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ef754381c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f393029c749fc84a4319794a15f5032bea14429f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ef754381c.0.tgz","fileCount":58,"integrity":"sha512-yJcivLuwHMrAf8VPnZ5BaohK6nnxk5Cd1pti0gvB0QlJQuQOdmHYOYdabAltIX/vgPBkvxiBYktfQ6vcDrdNdQ==","signatures":[{"sig":"MEYCIQC/teJQGvNzOSe1iR7HNekUbyQvIayjGrFsCi65bOic2QIhAKrSthBA/cL99hM/Z0qgYirys0MVCRkHnNYsgsQe85vG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuvjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmodpw/+JZf6J0u+qitUaNx5Ecj/FqBasadh0sykm/yprQHY0yqujdTe\r\nbNXmcl2Rx7jXj2xNlqAz4fck77Y7ECISIa5OB/c1QVsnYYMM7Aed0neky7L+\r\nOtrhQ94uXQQh/dxZ8e/qVDLcd4jXZBsz14sdGmrdqjT70IEZAgKTnBhVcs7h\r\nVjxKgiwtYKhIk0nCj6VMGmBDetL73WCpPCxeLX3hhB7i9fv3CY0YhslnNLaY\r\nYkcrnKpJV9TltG6msCwu2NYwLqYU0HImzFwhBha8WcmyF8KRaKxXFQn94Cqr\r\n1hPTe9nQ0TuTQ9f4baNhqh4IpC5zmG+NzMK5LaArA8wS1uVXblnUAmNafYkt\r\nVkO2pP1atzHP2ZJClFQfjVU6u58HooAShviNytVXP1h2jMsBHwBEQ9irCAQ4\r\nGhReqktxYttvjppzjzfh+Eyab3Iu6B2aUHdRoKMD4JWS2qzvLh9mIPqT8AyQ\r\nWRA28aHH8Non1sGff9dpQmpTlhk7B5HiDPzW+R5GrNY1Y/uElETa3NadIz/T\r\niktCqMEwJ7nHcOEONnfzzb//inWLvJaNUUexolmS+HLq4hAL624budGh+6Kg\r\nvzP6vaaTWY/mYq56AuWpb6yzFDRssAtU5ySK5CJmYwFPrApvf8VlNpcbMpbI\r\nzfd5IGdjx74tTqyJqXSIe48z5est0JHSskA=\r\n=ygTB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/tokens":"15.0.0-canary.ef754381c.0","@material/density":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/focus-ring":"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/switch_15.0.0-canary.ef754381c.0_1682369507216_0.3514363388904216","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/switch","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73a989be1b9d1537b84d45506ef998d3eed3aa75","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.69ebf61ea.0.tgz","fileCount":58,"integrity":"sha512-3HQ64Fi6lQ4ZC0Vw6XCrk9nIHqGQbhxeYn6o0jWcY0uotWpfpS8HyQQnefHocURyTHVzxTywrGWgBr/w0Q22kg==","signatures":[{"sig":"MEYCIQDNUYCWEIn1UeyZMo84odZJq6PD5f6RXVfnTRbfNmu0AAIhAJd4KfIzEV6uyeNVR9vdslojup3TlohQxGG56FAgBl8p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq9UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo8w//V61GGFIaau0Hiccyc3/NzYK/rt+3Rr9PPpBXKfeIm5Zb5rhX\r\n+BeMt1WdAIJiQKqmyE//OLvutxL5fOyeC5iU/jkKTECqwea6YuvF5QLdh7lv\r\n0iRB4eFNa2SmdeLctKhmHgJ59usoJ8imK7hX0/O4YdOIQ57MUbc7jEomyAb2\r\nx4e6a5NrCmEatSYCvaSCCvQ3WYSEZVwXB8LDst/36BGyYAi2o3OjM1no8Diy\r\n9XXLV9oOxJjHqPgzUORENaLIRfbnrasKomOKVMdOHL/1tn5iYPKP6+PCqWW0\r\n2Y+FXxgL78oLtHWIGGpFcxP1acrZhv6If3EDRnnLIyU8WsOKie3u/FmksKY3\r\nHLLNLeobjjwI7Sf83/XEuN6ymxLgnZa2SVhxmp+pNjMxyb/q35nS3BZNNKRD\r\nlC2X1XIaA24BmCcOIg7dC2BaCpM9w+UN0Nc8kJT2dL0zryzV585KjUtxTd/O\r\n7SnfhI/zZXs71WxxDJUQ8vOfHk84Mw5HAyUgV9d1JioG2CZdktt9+36lEQWd\r\nZhEVPaJ50i4qV9ZGOEBedhSm1GDhF5yQDHOwJs72aa3UoL0tSZmm61SQhiop\r\nfj97ws/YCVPRSd26tsMvEqsdDazjpyUWU1VL8YoJCMU5SWWtBFk31EjZ2OoT\r\nYOns0oczdyWTksSKMNihhdPfTbljpwhe9lo=\r\n=NbtF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/tokens":"15.0.0-canary.69ebf61ea.0","@material/density":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/focus-ring":"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/switch_15.0.0-canary.69ebf61ea.0_1682616148084_0.06346126329296187","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/switch","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b90be86de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b14f6fbbe09bd9ffc2dc04991af581852115d75","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b90be86de.0.tgz","fileCount":58,"integrity":"sha512-+rRcWm4U/Hq0VF80cks7hgfxsU4UEO+Nf2jeFKEL3a6VD5TTb1HfGcCqKjG0BlotWP7pXDyUoXiDd+93I1r69Q==","signatures":[{"sig":"MEYCIQDV93yh/TCWNX6W4c+mYPrMAMTd6g7nfP1mRkj5HTtx9gIhAIPp3BM2+VvafQm5GBV+FmdMCMgmOQ092/Z55szzPunL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGNFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnEQ/8DrTXknIO4B6GnBR1w1W1u7ZBtnnsHaMBLNvigrSpPeS8W467\r\nvv9IBd/DONYbn8D8Jv4U+DJ6RdPriNQY31KLk2wGqFMyy54VbL8lnpADDeam\r\nxGBrl4AmQFlhOqnsVUcZsgF/Cj/i3x0ekK6eJVWWQnD8V+uarT7M8RFo6M5i\r\nfyPzjVUHjS+Z6azb4K60gLLOazBsEqHw1+hxOPbi2wDYhkRfb6zYK01iC2vh\r\nCKfTenVeqGVKUG4mlsYIoAv8sc1xDmDBcqpBXFQ7W5qDau8tMkv5Z3I/LJPm\r\nidEAPsuRukt+K247gJn6Bu2EywSHuTRLOd26kzFM3KLhlx1xbXnVr7RVwHk3\r\nTK5vyJm7DvzTXDQdZpTivgXSgYH9ViOU1PMFHNDgdcGbJLSdheaSQWY9jHka\r\nEAjuJsDNTUhlQdSX9k7wiqhU57Ek1NY6L7SgMdm1diPlbekFoH/G6+pM4LM2\r\n1hV/arfhrhkdRE0rV6s8EunzqDtt4KVwYOdpjOMXJ1+Ko3/GLO4mGOKcLxcJ\r\n9IcHbwSpyHHupPxPfwUpwvTb+0sfRrlW14dBJW2lqbLuCk9LC97qfJAf9sfd\r\nZrvgApwtoeFfjopqZoLkdG02BQyfpmchhjSe+wzJaB9rx9yt7PKNcf730CEQ\r\nodUFbIV8pmMwB+Qw8CL24zn2sSa+fjk7UsY=\r\n=lVXZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/tokens":"15.0.0-canary.b90be86de.0","@material/density":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/focus-ring":"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/switch_15.0.0-canary.b90be86de.0_1682727749366_0.4139007819895879","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/switch","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adeb6200ddf16464097898de5ef892dbe0cc2b65","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.51f9c0c28.0.tgz","fileCount":58,"integrity":"sha512-kRTmekNkKkiHgKuLb/GcnPvZ2WVvoS5U66NxGsRhs2ixKbWwa6qsBtXc5V7kNEsUDVgetUG5xDLye+ofQoyxEg==","signatures":[{"sig":"MEUCIQCT+SVtdOjxNZ+bbqzmWOjPEHe0RY9FqKo5FB87DPyvYgIgNDkV9sK4P0j4K+3BKyLA3sAyqdLwIGnC+sE+Q3bO/xY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGWOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDvA/9EJAfEjvcQFoXIjolcm+QWO3ZHiNk4tk31VqLgfj5k8YZJeT6\r\nRrmH9qkq5Y9coL+HuRkA1cEkwqmSBFYNjZs8BunGZjotD94Wb1a1iAvnp3qW\r\nbwwPDn8XSdChhUX3rAnXwWeltkkM8u2wxmZqt3F+IoRxbtsTptWcveAv1UEe\r\n+0Opdxl9exk8+6+eRx/1lyhj1LlBV6yRLS/QYno7TVRGNBO4QhmQ3nfROd8T\r\nlvjTBs76xulnjVE58bXpIErZ84ToApesba+EZVHHrvmsLAfqc0nMFkGnjyFi\r\nZJdzr465FAGpyrBAv8BWEcxvw4tEzaKqE3ggIfLgJRgIir/czwlLAZSTiTc3\r\nxyhHhdDsurDeSQ1m/Rj11XUdxEYzMEKVDfnFM9fIr9oReJYaLya1MMgtd/k7\r\nrU87uGLV41ZvpxC66anLnMmzdBapjBf5TobXtlPT8cdEtFqRusi02JOQrOZN\r\ncOEA1kcECBOi4Lotom1Mt9Cvc5koXgdAk6Ro4FWYrg1/59yW2IpPTe2GDHcN\r\nmVSl7IMfeO97m3NiREcwz44UAEoc5rE69KTeJ+kGAjsjoGg15X/7pWXmW8V2\r\n0b5xGpsRd9TEnsTDYHqk6LYAaUvxFEerdJ1ug3wn4hU1SQZG+MjmmOdpNCIW\r\n7MCQerSfL83uO9FP0Hici9btcP8jA0oX+zU=\r\n=OMgX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/tokens":"15.0.0-canary.51f9c0c28.0","@material/density":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/focus-ring":"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/switch_15.0.0-canary.51f9c0c28.0_1682728333889_0.4995420680401481","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/switch","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4e840d685.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07e9471022a6869818bf3efe3062a5c78ecd6242","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4e840d685.0.tgz","fileCount":58,"integrity":"sha512-Vqpc0RCY0EJlHkGj3PBbStFUqnFCVxvJsqoWcd59+7WCvULNsnzqpZDHFXVMBqB7vIRAa2E50aRx8suUlvggSw==","signatures":[{"sig":"MEYCIQDtk++jEzEu2LW2momXW9mok9pwY7dRc1nmtxIm8vl8hgIhAN4r6h9HNPNsdhEPq/tp6yNgzAwmxmaOAIox9Wqvc2SF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/tokens":"15.0.0-canary.4e840d685.0","@material/density":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/focus-ring":"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/switch_15.0.0-canary.4e840d685.0_1683041672273_0.1412108132985157","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/switch","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25248291b3f40d7f8bf0bedb677dba581705c37e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.10b8563e4.0.tgz","fileCount":58,"integrity":"sha512-G81zbA1Demb79eVdWKJEHa/I1chYTs69pTb+b5hrg9E0vNMssO87zxbjS8JTWnuhIY57eKQkAIYphJ0zPh5Tbw==","signatures":[{"sig":"MEQCIBRb5mueIrVDnJw6wQAYec/dhtBFwqpV2I96b7nzzmmiAiBL30bLOXkxwuVMb1DCdvmIPRL38tLLJY5UIm6CE9tjRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5whAAlC4XA7eal8BFiLxF0JmodSiHzX+a4jOsiRoFMZIeLkJNLNK9\r\n36/ldJY+13KnXnJFqEQkR6WYnTy1PYHaL7EcXovFjRWB0F3hSiPV7FEt9shx\r\nvkYI61rTQqZt9xAJoxXFII/nCqmGfs9PbnyLlqRnvOZ9h6M0yehVTfIlpi2J\r\nGaF44Gx9OXPjCT8QIHf3ZF1xvNX6Fk+JBuiqbOfDdH4pWKJlqCvGUvHd4yLO\r\nNgnyJ3/i202uCh9yFsKY0WgqtWJ70YfyKjH1dqYpfiu12nOYFpOVyG9kTySd\r\nflr9GjToL0/TTM7lc7W/tSSfOBa6XDjyuq6yGGcH4GU+ZQ5JrOxaATN1FHLR\r\nPiYIWi/HjdwsaludbykozAtVZBkjCzlQOhO23qUG930APi6JvtDj9p+o5HVP\r\nYvJjw51Na7r6NhHcwKEpDK0EIlukhYaHQihumY/k/IsmcJeTlTA/HfUnCYAy\r\n2/MGRIsqtMr1HawgqID0m51JII2w6B181a3DDUjl0rB64fNxvQq0Npq0peFz\r\nDRBDFsMWejghtA94poIKEXUyqRc/6eD8Ep0g7aB5GoZbK16b/ibZBCp3mAG2\r\nuMwWpAMoUKFmVms5qfDvC2Q48u5/WOQwq5hO7uH8eZ/sar5aD10LM2uByvKf\r\nBHfZvsG2wgMypOCsc4d9qcUyKWlZUm2PZkc=\r\n=P7Bd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/tokens":"15.0.0-canary.10b8563e4.0","@material/density":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/focus-ring":"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/switch_15.0.0-canary.10b8563e4.0_1683070960389_0.7009230005730616","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/switch","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0812e3ecbba12572273347464e56664b3c76d6b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.736b7fda4.0.tgz","fileCount":58,"integrity":"sha512-sxMDJoetkqOo6+MP2cpQ4H9+Hlsec1rMUHidtVPl3CDFLeQlcLxiixoc8vYdeb9ussGHnYustO1DNdoMTJMVZw==","signatures":[{"sig":"MEUCIQDv3MSEdYBNkkLZrcFLYoYJKhS8uRWvhbk9G5ZbgF2nKQIgftGpQwaE72gAGmxFnYlxCGUNnzApiWWcPUcRE3daG+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnlbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoACA/+Kyf+LTY4obi/K2SuZ3bDCkzQD0EoOk9aAL1Yhqa2ewEH8iB0\r\n4LxYakrsdBxnIlIZLUoKYcs54gqNVoo3N0sBzGvKgJLUjKlAervqmf69ULB1\r\neA86ddlRQ6bBpi2rBo8OBEoGeCWlWPYRAIFhsBg1QAD222Nr+2j4wD8iwvhC\r\nZKKeetYN+CY68Lb5sAKsvVOjUrzgJxDwAWUiUuQxS+UbmFjL1LFHRJHAeNw8\r\nhwhG3a9OORfQPkaEv/ox+PkTFsSNi9oUWi13w+onDwZj7cEF0N8FSBItp8wI\r\nOPLOA0kK/asg9bG04lp7c227UNiISeyX03mm/tBFiHTCWK8nUHwWCAqu0glA\r\nKahjK2sY0+VUVKLfdUuOwMzvLRNrvLNhlx87xlPNQ6CIgPNjqa/aV/5ulric\r\nrJGYLCxch+ehow2CK71OQLxD4LSgHF0xOTxLLvVvX+Hu2T6enywz16ABgyVn\r\n55PVyd5kV1AyRWz69Ian3Am9Eq+sTyskcWq32cPln2Jbwr6Vh8xUClH9/z1Y\r\nFLjARtg0HGGMOSJ1qkGHbBsL0xkQmV8h9ziw3mJvDO/724fGlm9Lcs627Qkt\r\nYVHNh4sLG6aR2Mv+5hMSiuZnHaYloRQhQ/DoG9nSbLNEWzX3w2ld0pWf5mWT\r\nY0OVDoZ2zssYJ7CqwAhQC63mPf/KNaqHtk0=\r\n=c9fJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/tokens":"15.0.0-canary.736b7fda4.0","@material/density":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/focus-ring":"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/switch_15.0.0-canary.736b7fda4.0_1683126619596_0.0851593401709847","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/switch","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4bf471f31d34f39ff73023c60dd46e50786a974","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0e533c5a1.0.tgz","fileCount":58,"integrity":"sha512-9KaTJhnI1ekGTKufMYWMDxOPT1id/yMBVkGCdbmcrWSCSe5howNTtNHsT4li5UIszHbYVpzXM+FiJZIqKxRt9Q==","signatures":[{"sig":"MEQCIBsFge6Pl0yI/ajU8Hr3jrfflUNQj79X52e0/8+TLRibAiBTsdVz8quQFqq5kffyqPb6PbE+hi1Sd0fXg0yVlP1AAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/tokens":"15.0.0-canary.0e533c5a1.0","@material/density":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/focus-ring":"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/switch_15.0.0-canary.0e533c5a1.0_1683305839782_0.910302862986162","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/switch","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a15b26ccc41a31dd7f3f181882b421c267de6a57","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.5f01c15a2.0.tgz","fileCount":58,"integrity":"sha512-9PkAXffWVW+DgOGSPEV7PASoYgkwMFTFf6P1mWe8PPUUneWa42sEhIvmLkpPXrlybrEwu8FYI5WtAYQ8PWpiow==","signatures":[{"sig":"MEUCIFsEYmcAFc1k5RVNV7+b83vQo7lMo7SMH/zjGfLKDGDmAiEA+/4kKnmxL60s0iTYzvF4ABcpqCOy4I9f7+xubNtGeMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/tokens":"15.0.0-canary.5f01c15a2.0","@material/density":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/focus-ring":"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/switch_15.0.0-canary.5f01c15a2.0_1683307628644_0.3275128573751258","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/switch","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93849928ecc4cc037ae025e0c701b1be77963a89","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.3b5b55e31.0.tgz","fileCount":58,"integrity":"sha512-G83nixwYZQ0YuV4ejH2Ef097sjyHO7r5053lzTaUMJB7wpTz9eyRbtI5TIIpDl9vQ6UA55PeYMvGJWOsL/8yxw==","signatures":[{"sig":"MEUCIQCQDBLu6m0bAyrsgRsnrRqSX/NH3UD2h4oDAeB+NLMK0QIgejyaSe/+p7D3u7iM55wrleJ2dluGiV3AhIOMPmoLgpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/tokens":"15.0.0-canary.3b5b55e31.0","@material/density":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/focus-ring":"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/switch_15.0.0-canary.3b5b55e31.0_1683312006588_0.20866081910892276","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/switch","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d0788120f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3aa9cdd1fd19b02fe1dd73b828442cd05b5c6ff","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d0788120f.0.tgz","fileCount":58,"integrity":"sha512-l2nZhQSJuXEbZpLWXIVpJSF6gRuLBtH9sxvanfpfZiYrxEJYIv68QJbwI6viatGPhtKVC9oKYiCKKpteeiq4Vg==","signatures":[{"sig":"MEUCIHEoAzaLkYV2VoV/4mtI+FG1B9GNUNyOhxsolf9ymwEyAiEA4KmHA6d6Hb2+nZmv3YQHT0m4T/No1wolcG26c+15Da8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/tokens":"15.0.0-canary.d0788120f.0","@material/density":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/focus-ring":"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/switch_15.0.0-canary.d0788120f.0_1683620642914_0.2414551158067304","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/switch","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb53327e506e3b96cb4d45b9b35904cb0980dcda","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f52358dd0.0.tgz","fileCount":58,"integrity":"sha512-z5sa37OVycm+EZQU4eM5/tugyRk5aDt2d72sPdAk9HThvJMjhEZLeMyz4dYl2vR5l/TkOVW3Nd4cdGBBZLYm7g==","signatures":[{"sig":"MEUCIQC86i6Fe6OSnMmiE1S9FbNlWaj115B+RgdXB1x2lsNQEwIgfo3y2Mob5p5lq43q7oAGmKRcmydiR7SBoDf686wzNcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/tokens":"15.0.0-canary.f52358dd0.0","@material/density":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/focus-ring":"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/switch_15.0.0-canary.f52358dd0.0_1683901880386_0.9579676696149362","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/switch","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"302e6832117448eba21cbf966ee0bf1d0e0db602","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.576d3d2c8.0.tgz","fileCount":58,"integrity":"sha512-WSOdXZJotvxhAsWxhvaBHXC5sGRSWxkyAX1lCg39y5NisopiKSNlPWgZcl++yyFKVhpoYzYVV7yGynRWFj/VWQ==","signatures":[{"sig":"MEQCIFQgEraoBKfJ2S2nZ5HM2R5kzizj2tVckBdB1760tXGDAiAxzWw7Y+WZs+cqXYy7LOvVAjBCi98i52jtn/YTkYfOUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/tokens":"15.0.0-canary.576d3d2c8.0","@material/density":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/focus-ring":"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/switch_15.0.0-canary.576d3d2c8.0_1684202451976_0.46271500377944275","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/switch","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe47bba337bdf14cf7dcebede227fd892a5d9151","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.19bb36a46.0.tgz","fileCount":58,"integrity":"sha512-dt7p+q6X0wxKXCDGFibOQQRKVNvQtPY1C8A1/HMf9KP/dZiU+pz3GN1F2v1uWj9TxkUBTLyYSow8MTOyYJJZEA==","signatures":[{"sig":"MEQCH17uoVZQfreI+6/IiFQLBbd06SarjwNBp/jyWmSx8ngCIQC++HqDnZi0xKdKtLcAUx1O9+Y66LkqzCypgU00s6bOZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/tokens":"15.0.0-canary.19bb36a46.0","@material/density":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/focus-ring":"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/switch_15.0.0-canary.19bb36a46.0_1684266892665_0.9243714566218928","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/switch","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9458b514af5b90f5daeccd56e6d581b03246e85","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":58,"integrity":"sha512-nVeC3SPMUppg3wbbOV+RUFYFYH/L2osA4Q3yrUemOqpxcAUZiifs/efa4Ipi6uXOuCtNY++ZrDZLEKdfyeCABw==","signatures":[{"sig":"MEUCIClFLgGFv+5cG1wd9NXZm9Akgj4b4gJBXPFKVUDwAN1xAiEAwafAq1CA5TZMsjM0u03V/RITOOhHJpbyjlWVNnz3kj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/tokens":"15.0.0-canary.aa5ac7fe5.0","@material/density":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/focus-ring":"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/switch_15.0.0-canary.aa5ac7fe5.0_1684776401384_0.8137323433222585","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/switch","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d40de66a440a125426fdc6cd62d5639c33ab7685","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.90291f2e2.0.tgz","fileCount":58,"integrity":"sha512-94/+Zp2VjlLVJXY7u8VHPcJMHPRVNAwHydiGrKvnJ+6LfbLxAcILNBP9RVKqqqOWQeDxB4ApUl+0TV2Lj6mOzA==","signatures":[{"sig":"MEUCIFJX0qSaFhhvl53ERr61scTtdH4IPwk3tQLJIrsnBpzEAiEA+Yg2hEt3+ODgN7zVV/kygXU+CoWAI9HH9GQGqDPCq2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/tokens":"15.0.0-canary.90291f2e2.0","@material/density":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/focus-ring":"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/switch_15.0.0-canary.90291f2e2.0_1684863817384_0.22989569846177127","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/switch","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.446734f27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52424c94ffff48ea6f570d83d76b8837eb36552b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.446734f27.0.tgz","fileCount":58,"integrity":"sha512-xLQ+vneY0UxW4l6RNSHl+MdaeMzotKCEqhCUfxv9JTfMWBVPRdPOvyqwCS1+aPPfjJczBytHCph3oL9p2ZHuPw==","signatures":[{"sig":"MEUCIQCevgM3B6b2iLJXHVeDasyx5mV6Y5sBRDsNLtNQKhl0+AIgXXfkAStVWm9cVLmywEwjdM9264gmxXHR4tEY3/NZNd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/tokens":"15.0.0-canary.446734f27.0","@material/density":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/focus-ring":"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/switch_15.0.0-canary.446734f27.0_1685483344534_0.14894536093264832","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/switch","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.19de312d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"408573c0a47a3e7c0dcf162929c7dfd9d4ed4447","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.19de312d8.0.tgz","fileCount":58,"integrity":"sha512-jeNrGC7n2Ld6Llzu/+P6rhjz/IIXHNQRyAz1cOG6X5vzUS8/PBRcfzdm1R8QTcfnbKnK4N4yrtwAjycp/ncWuw==","signatures":[{"sig":"MEYCIQDNNiS8x7v6sHNXshuR7cD4+aEbSRG6cXkIASUxgZsVTQIhAIEhHpkL/cB6k6mV2O7tEYykjUoxRSYSt4Rb1N4qhA6p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/tokens":"15.0.0-canary.19de312d8.0","@material/density":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/focus-ring":"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/switch_15.0.0-canary.19de312d8.0_1686071958053_0.6518944594079175","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/switch","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6081d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63662a5fc9e1a3894a0645ff31fa72111962756f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6081d829b.0.tgz","fileCount":58,"integrity":"sha512-B3KiXFKmDPTAuNTUO2Ai8dBh1uUGom86LCBxQJC1Sdfty4TZdALgt7EDOv9xWo2Ffg3/xeqmLGmAyE2PcgufqQ==","signatures":[{"sig":"MEUCIGkcl+GgUXM2rHS4N8PMU0Cu8EeCT+1wQyKVhaEdzlTzAiEA/O8sjIMfd7DFORgQTc2iF6TsZ91gZhlEU2UlgAwP334=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/tokens":"15.0.0-canary.6081d829b.0","@material/density":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/focus-ring":"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/switch_15.0.0-canary.6081d829b.0_1686100493748_0.7057258116092029","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/switch","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89cbbf74028ca43f488c20a9e51a6318bf76bebd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b26c34a68.0.tgz","fileCount":58,"integrity":"sha512-S9bjzVKskorSFKfYOTqIeBMN/dy13B1LDW/BBjGfA0A9fv9k9qZYNZk2kEjUuZeQrslBdCtsbMs3dcvtBbBdFA==","signatures":[{"sig":"MEUCIQDYaYFFvVQgc6k50AaySGpog/9D8rfZdn8kDtpQA3/qagIga0pdoyksdxWPNrz3QMcurJcElixXMZgHopZkOttxHGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/tokens":"15.0.0-canary.b26c34a68.0","@material/density":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/focus-ring":"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/switch_15.0.0-canary.b26c34a68.0_1686169156317_0.05003624347224056","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/switch","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4fe911371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7f2e16711201aef587ba82b3c7d275541197b3c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4fe911371.0.tgz","fileCount":58,"integrity":"sha512-oerJvyoy5+M0y2dugiOY3ZeSlHjJNI2vcHnJFLnnRFa7qbzf4Uv7u4vZ2DDWRxHbhBCWbGcIoLp+CSESihJsjw==","signatures":[{"sig":"MEYCIQC+XONvTnYVWDzOZXGVIxamZbITicTkwqA6ORyraTKZPAIhAOxNi9iilmtKT/3cQ9FN/8V334QOTincIIhoZ5Baoq27","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/tokens":"15.0.0-canary.4fe911371.0","@material/density":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/focus-ring":"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/switch_15.0.0-canary.4fe911371.0_1686179214515_0.33640554770426045","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/switch","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f314dfb5a83755d32e292ca3d24d7451bbbeab9","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a9ff9866f.0.tgz","fileCount":58,"integrity":"sha512-u6u0DsTlLlL4eBp1wgYxbM619QHw0zNSLZF1IkUVe9sZbF0mnaZQyCSCMU7MpYBapIjADXHx9cm1ufX7rN/EKw==","signatures":[{"sig":"MEQCIHlQv/GQb44ju7/czKzdrs+aKDXj0ggWontU5nntJ2cHAiA9+KZK1c6/sg+yuGeiZjZcphthY629ZdeFEaDfdxRcVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/tokens":"15.0.0-canary.a9ff9866f.0","@material/density":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/focus-ring":"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/switch_15.0.0-canary.a9ff9866f.0_1686656345888_0.8050078070735514","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/switch","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b994146f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e373ff8523736c3c3f1cdd25cd3e8756e8c25b54","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b994146f6.0.tgz","fileCount":58,"integrity":"sha512-czCXTUa30ILIf1J3exiuSVIRcodGATHexd3eWDq4sfHo4iMh4rBMaIxcqkmnb2iwE/mMTNyVfoauijx2QiNKrA==","signatures":[{"sig":"MEQCIAwvEk5YHD8rOmzQkERmCuNtDF60cjg9+GCE45HpDIAzAiBfTz21sKD9ir9qAyKBieYggeHsYv0SwHAczMp0NpFEUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/tokens":"15.0.0-canary.b994146f6.0","@material/density":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/focus-ring":"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/switch_15.0.0-canary.b994146f6.0_1686776682496_0.4593242911063553","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/switch","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e378d9c203f5b8c03aa9c3fe80d420f67d25240","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":58,"integrity":"sha512-PhxqhOd/0xfOaFjSqXXyYcPVuNkUltvK+SHCa/koee1yxM4hzYFI9iL1BAyMDklFQubdVgQ+dEJG+nq1mrozdA==","signatures":[{"sig":"MEQCIGnumKIR0q2ASSL20krWC2Ru4Vp7jYQ1mgK1lBAHZ8OvAiB9VddduAmrxYf0b9MimqQqRyip5F4RTfAOG2YTVpAS0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/tokens":"15.0.0-canary.1fb4b1a06.0","@material/density":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/focus-ring":"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/switch_15.0.0-canary.1fb4b1a06.0_1687892289974_0.9965685052604074","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/switch","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd24ceef2f4e92efb1e3362ee498ceec501b1f5b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c64a2776e.0.tgz","fileCount":58,"integrity":"sha512-pPhOTICU8ea79C8OLeBhPeVMGNQMl2GCJ80AOMAYyWLVT+VMuwx3JzU2bVH1LQJk2/JxwMatJVzgAQT6HfVkNQ==","signatures":[{"sig":"MEUCIAoflDVt1E7HhggISAflvQkgAUW1J9823B1ZqxRXJRD/AiEA4N1l5uTLQQsJQd1xMJn1VC0tGuh1aQdULiQkFxztfA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/tokens":"15.0.0-canary.c64a2776e.0","@material/density":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/focus-ring":"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/switch_15.0.0-canary.c64a2776e.0_1687897058847_0.3830854755357149","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/switch","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc29e77348cb8dc63605cef7cb72d5efe8d2c31e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":58,"integrity":"sha512-hR8apxRnOf/iAdsPvaBBUzeEKNYpMDMasIb2892r1epf9kg/TSk4VkIbdi/zSMPVXg4J8dhX5mvVzQ0veDn3+g==","signatures":[{"sig":"MEUCIQC8Vpf2rokKo6RAiXWBBGAMzoOxp1UiX/fs/Qkdg7XYdQIgB64A7VpZxNFOVZjSruByyXG23cJhytWklAj6Ju98dlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/tokens":"15.0.0-canary.b05d9eb7c.0","@material/density":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/focus-ring":"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/switch_15.0.0-canary.b05d9eb7c.0_1688055878618_0.03192526565849296","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/switch","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82d4e610d357264f4186adddbedadf1602a01638","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2a9697dc5.0.tgz","fileCount":58,"integrity":"sha512-pujE4CoC0H/LKg0kRV9UrlJ5MNkCUJ4IRL9EkkKxhokeo3a2iL3TDc614iZAebeWICcm5M4mekAXrJ3tRV9V4Q==","signatures":[{"sig":"MEQCIEvbLqwNIxffbfxY21u2dVeQixz6uNXAedN/aWwXhpoDAiAYt8s3wEoXsIEjAUUL1ykE8TqzIQy2IMvCo08ScrhVJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/tokens":"15.0.0-canary.2a9697dc5.0","@material/density":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/focus-ring":"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/switch_15.0.0-canary.2a9697dc5.0_1688163284903_0.3868555604887509","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/switch","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8a0ed77896aacf568b17bf3226ab7cec5238d39","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0c52adeab.0.tgz","fileCount":58,"integrity":"sha512-Pmkq4b7G56mhKUJ1h5xHRxiMyQdGL0OUidhpGbHTk9H6O4PKERQCgEQCesJV8HCOpBWeMIvl/PsxDkN++QA7gA==","signatures":[{"sig":"MEQCIElZvPZIsZ6dlFDTvkue9x5G52qhk/RXYdKXCrHJkIY2AiAOGtebvS5Jvz81LSLuVbTLigqvcm6zzWYufVpMDUnTvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/tokens":"15.0.0-canary.0c52adeab.0","@material/density":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/focus-ring":"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/switch_15.0.0-canary.0c52adeab.0_1688574405548_0.05696167237279903","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/switch","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.83355c322.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"864865c880a334795872d4a50e0db3457c5d6459","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.83355c322.0.tgz","fileCount":58,"integrity":"sha512-KkqlIewnj0opneMjgcPBWi3BlqoudUaJ3u5m/RcmbrZNR5TP+FNMTsG//K+r/DlL6RAONBIkUSQ5ejgniNHgTg==","signatures":[{"sig":"MEUCIQCoTdg34000oQtou5v1o9mWXZDWhA1V7HTP/TTpazM+0QIgRgK2woPBraLqL4Bfdk1kNTHlsuiuCdVrHfHGaAVIcmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/tokens":"15.0.0-canary.83355c322.0","@material/density":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/focus-ring":"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/switch_15.0.0-canary.83355c322.0_1689001597443_0.36903239556182954","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/switch","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3de9394d2f23dc7bcc57bf633dde68498356f194","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":58,"integrity":"sha512-OjUjtT0kRz1ASAsOS+dNzwMwvsjmqy5edK57692qmrP6bL4GblFfBDoiNJ6t0AN4OaKcmL5Hy/xNrTdOZW7Qqw==","signatures":[{"sig":"MEQCIFErLTXd4eGvVA2zyACMLTkZh16IBjfW1GmRHOYOfR2SAiAKbpvj+48IFX+bBgWOpWPLgcVfes8I8sARRHgso3QC9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/tokens":"15.0.0-canary.bc9ae6c9c.0","@material/density":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/focus-ring":"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/switch_15.0.0-canary.bc9ae6c9c.0_1691097746846_0.3765070423861101","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/switch","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f8bb51eb67772218825106618bd22b5e9083ab5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.3c44cd956.0.tgz","fileCount":58,"integrity":"sha512-XnqAGJfpLcG9T17L6MzwVJzlZOQwHbLJhMzRpHnc5UA/4oDAuVsCrDKZ/zD8x602M2UuhJIEj5W2lFcyBsOoiQ==","signatures":[{"sig":"MEYCIQDjj7CWnCh45yYTyQbsfqb6nO4nTzZLKscqeVBqTsM1XQIhAIAJaYxuLLDm647XmqiPph3+1U5PGz4RWYBWkItvohqW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/tokens":"15.0.0-canary.3c44cd956.0","@material/density":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/focus-ring":"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/switch_15.0.0-canary.3c44cd956.0_1691430539096_0.2782922087763011","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/switch","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.02702296e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b5df502ec54359f249493ff67ef89b74522e9bd","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.02702296e.0.tgz","fileCount":58,"integrity":"sha512-xGIXmKk22MEAqp9H4XL/frHuX5FDemsIlHR0LbJrZx68jOQTGebtNnUSYIuz0EqvV3Q7BaV0BQp9w38+70Aicg==","signatures":[{"sig":"MEQCIGxur7wJ8MJ+xf+XrjwIkWMF+nF2vnFXIcKKnIN9+8XDAiAt1tpxm7jXOmqYNBOhdxD9rmXzZPSzQsGBhq4WSw/8Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/tokens":"15.0.0-canary.02702296e.0","@material/density":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/focus-ring":"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/switch_15.0.0-canary.02702296e.0_1692965154207_0.40661985999229344","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/switch","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.872b65832.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cf614a3c300e6ea51a6b515330d2a7d795c3996","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.872b65832.0.tgz","fileCount":58,"integrity":"sha512-bp2s+q6vOTQawMH/ZKJJ00GLehgZTLh7km3G0rb2gRuggkwD6jwl5zDQZ1PnO5vxXT2loh9KVKxMjyuyAdISHA==","signatures":[{"sig":"MEUCIQDaLLRRbpY9VLcLfQPLdOcsV37GGM0oEfrDgAvLpWd/TAIgfZ6LGKTEjOLHxZ5t3/E9whPIbxeVGFmFyzTEgDVWx7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/tokens":"15.0.0-canary.872b65832.0","@material/density":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/focus-ring":"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/switch_15.0.0-canary.872b65832.0_1693397666896_0.5628108646209673","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/switch","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"520b3746899d49dfb62bf669e2ac7629254009b3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.89b2e4122.0.tgz","fileCount":58,"integrity":"sha512-gKAA7Qw4tq5P0k55onjQTDiX2zsigj+UsVtoI0CzomcHiXIU+4Flzvv6aKYh5SItrwrR4lI1+iiohs7rSznBSw==","signatures":[{"sig":"MEYCIQDK1nR9lRHYAJiOHEGxTJCtaLiGEezv9MhSfUBKKYmpbAIhAK9lmHKN/6+inxHRlrpN052nyM3Bmz2EVz3Dbk9+du2H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072006},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/tokens":"15.0.0-canary.89b2e4122.0","@material/density":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/focus-ring":"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/switch_15.0.0-canary.89b2e4122.0_1693498068758_0.07402276460804957","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/switch","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"605592c77a031e8698f04d6debceb58123ed653d","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7a3942e7a.0.tgz","fileCount":58,"integrity":"sha512-QfUx4GEKE/tUYxsaVeNRdZMY9XpG2S/MrjMVUxU7aRgnUd/tp2J2G23kA/w0+BsK6ipbDiGqrPZOg1i7+xRSRA==","signatures":[{"sig":"MEQCIBTSjvmO8tLqbKT7/el6oanOG0Xt94gfS2F6wwJYbnNIAiBjit7ZaWHNRYmaEtTX/jb4C+0QNOHCvX/9wfop34EGNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072030},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/tokens":"15.0.0-canary.7a3942e7a.0","@material/density":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/focus-ring":"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/switch_15.0.0-canary.7a3942e7a.0_1693507241018_0.1644444724928973","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/switch","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.54feb3020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"130cf6fe8b326044d70f4332e5aafe77728cb89c","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.54feb3020.0.tgz","fileCount":58,"integrity":"sha512-BIF0ZNLlSzaqU0JMzGUxlmB/HeY0PU62o9snpABQuBRh4dofuFgQ4dVv3xNEZtnq/U59XMCRWkwxxcaBQixkiQ==","signatures":[{"sig":"MEYCIQCBZWJxUbqGSF4CQzVD4r2tNyFxRjSGBKbZfiVxzpqHjAIhAJVL7tQH+QCR3MOZiKJoFzABVumbixqlksLfnsd+LUdt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1077893},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/tokens":"15.0.0-canary.54feb3020.0","@material/density":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/focus-ring":"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/switch_15.0.0-canary.54feb3020.0_1694466361088_0.6961398744432221","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/switch","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efdfed47fdf363783fa27d8bc8d9d89887303c85","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":58,"integrity":"sha512-ZJsoGFN75grnCrTzZ8OplWOM7d2sAohyjbiPC7jigjumJXSxG7ty5Da19+yZBll8SNnhL+8CBl7HTcuWyCIeKw==","signatures":[{"sig":"MEQCIA6HPJPYpikDsGEqFeLugxeh+mbvVt7zvpXpN9TCzK3xAiBqZZWBYi0qVgkiYVRKTPwpMW9kkAx1ZbCqIdCuNoEvhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1072030},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/tokens":"15.0.0-canary.6cda3ce8d.0","@material/density":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/focus-ring":"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/switch_15.0.0-canary.6cda3ce8d.0_1694483172087_0.1563312399559893","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/switch","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.205b20b36.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b073a2f947d60e0d5b96a2387af613670269216","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.205b20b36.0.tgz","fileCount":58,"integrity":"sha512-Vudeww8Gh+Lcqan45EIh1FXmFQ93wjA0lo7HH5tkP2Xd4P8ctHr1RTJ0+ovVebLt5HixIc2FvoL/zOCx9XOG+Q==","signatures":[{"sig":"MEYCIQDDdzWCXnLM1Jxqx12WER7ZSKK7H0JASN2TvBNqLtWFsQIhAPsQ2I4tycMDultA8d4rbIjFz2ZkHqG7ZugjK2fT+jMj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1074728},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/tokens":"15.0.0-canary.205b20b36.0","@material/density":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/focus-ring":"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/switch_15.0.0-canary.205b20b36.0_1694625532660_0.3554797329896737","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/switch","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.22bf82024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89a0525911a5941514c29296d7e6e3ba0dd1be39","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.22bf82024.0.tgz","fileCount":58,"integrity":"sha512-ZmRcOK5mBCgUV/XUNkUr1uWBfzpZPkyegZdsaf2BCHaxnFB3GYL7NSo1FKA/ROvzJ7PhFKL9fE/FR8VyeFzwiA==","signatures":[{"sig":"MEQCIAk3yhow0vDkMkMO/M2ivgu7roZfznaQunYXtx4h38n8AiAv/Nd7XJk4kMtM3BAhGpzSklMnfhfWWf9OccUgCOMjKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1074728},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/tokens":"15.0.0-canary.22bf82024.0","@material/density":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/focus-ring":"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/switch_15.0.0-canary.22bf82024.0_1695028369491_0.033395531073834084","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/switch","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a246a4439.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f3c1a1b17a51f971cc6356b7120daac163654c1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a246a4439.0.tgz","fileCount":58,"integrity":"sha512-o0wcbYgm2yRs4een5uxT4RJnJ003DxXe33rk8vTBG2o7cdiSR3X7GJQxeIK3D9wPgWCAwBLhNYSzXrlTL5pkMw==","signatures":[{"sig":"MEUCIAqudPqBqFXhg37b1UxoQd1e0PzgJsG5kv6BEdFijXQYAiEAzJP0mkF2Krn7mrylXiqUZboT0hy+R1q5ndDEwnrEFPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1075021},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/tokens":"15.0.0-canary.a246a4439.0","@material/density":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/focus-ring":"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/switch_15.0.0-canary.a246a4439.0_1695059220054_0.6964279487703438","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/switch","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d153db62b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be724574cde968356001a20dd1a264357724fe8b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d153db62b.0.tgz","fileCount":58,"integrity":"sha512-Y7SedIZhaqFqvVisjhVWA52uCAzxIe23I3FiyATVPWqrM27JhLakH5GkTQ+sgaFANAPKwGAXUpfdrjrSY+lkJw==","signatures":[{"sig":"MEUCIQCRm/dItvDV03dFCX32FJZ6Ku4ZjyiBR6cfDXqomwjd0AIgcJKmGKXViy3yuwa62XonvgQS3I2Rjrcyk8YfcRQrYZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1075021},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/tokens":"15.0.0-canary.d153db62b.0","@material/density":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/focus-ring":"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/switch_15.0.0-canary.d153db62b.0_1695150959427_0.6819459086627622","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/switch","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f72e8a9244212f4b1ba0a224cface40d0bd25712","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2528c1c3b.0.tgz","fileCount":58,"integrity":"sha512-G24UeFfhfCrsIuoTfxMTo4f7jWCUHWPpJk31oO16SpsY3f+f6JVrI22wgFylYQmG4/RBG7f3rEZi7BpPj399Rg==","signatures":[{"sig":"MEQCIDSGXDC4y/rG+Ma/6DkZwZNhPysJz0KHwa0Rzb0fmPFGAiBHkVhCq4OF5QWdrrK+BW0act4bFqCYu2+RqPnkO5xZfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1075021},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/tokens":"15.0.0-canary.2528c1c3b.0","@material/density":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/focus-ring":"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/switch_15.0.0-canary.2528c1c3b.0_1695233249570_0.2807618587150922","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/switch","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"857123a1eb349256b2cbfafdcec4be2328010fb2","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.1728a6dcf.0.tgz","fileCount":58,"integrity":"sha512-uz6MR2dHAJBihsQLgSG/LMPMPDN0gCV4h+wsjvA7yv4KctJlae89ixyHSSfQP+L3aWXIgE3aG0qpYHidaEumCQ==","signatures":[{"sig":"MEUCIE+n9b+xtYphgPpILUkGUsrkUJPp4eI9CJ0rkneHWI27AiEApgNNpM/IWzJdIpj/Vc1u7954347cqQFkv0N/JCT1BVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1076422},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/tokens":"15.0.0-canary.1728a6dcf.0","@material/density":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/focus-ring":"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/switch_15.0.0-canary.1728a6dcf.0_1695691443998_0.4331509955834041","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/switch","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d05d963d0420a53178dc12bd1adf68d40e516fc3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.ebb636f3d.0.tgz","fileCount":58,"integrity":"sha512-FjdsxCpe3H5oTEaMxGtiXTSbNWoy3ed42OQfPSFTddqEhbgG6gKjSzLuYaTaaFK2se1E9BMSHD0vNXpGq4VARg==","signatures":[{"sig":"MEUCIQDCYh3HUeOKGVBKaAhtY1OxfyB0pCpMMp2JRpCCpuIeIgIgQN82hG86d4Xrdb9/Ba0dpIl/IlVSOFjLi2J6+dCKsTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1076422},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/tokens":"15.0.0-canary.ebb636f3d.0","@material/density":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/focus-ring":"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/switch_15.0.0-canary.ebb636f3d.0_1696016713816_0.6161442023153929","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/switch","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"655cfcab8d1195f5ba29d12c177960cb61099af1","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":58,"integrity":"sha512-F/aXQJ9BtmN5JwoRmrTFUDlvFtM0lCht9VTz0c3rr+PraF5l6LLgD4EEJ0GDi0vevs2KjtqhnNtAW9sewlFgEg==","signatures":[{"sig":"MEQCIDsx+9tbEYa900Sd8LhG3V4rdo+kbmhASNcrVFR2Jc5uAiBDNUk70HBsNqbzMP4+3567unYaQcfaawOB78zXYP5WLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1076422},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/tokens":"15.0.0-canary.c0d21ecc9.0","@material/density":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/focus-ring":"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/switch_15.0.0-canary.c0d21ecc9.0_1696880257209_0.035812961243103514","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/switch","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.127a44b28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cdfddcef7958fc02d06c40bd7c39f364691cf74","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.127a44b28.0.tgz","fileCount":58,"integrity":"sha512-YvyGEYU59T574ADJ+4i8ZGUcbrxbRRhev+uyVR6VZ7U+06cKXx8WGLj3uStpnSLFbfxB73E94HeA6KwaQb/Kyg==","signatures":[{"sig":"MEYCIQDEWGuZIAV9r/voj6z3MkqKTg+oRNCaUerInAQAGFLtQwIhAIJgD90Gho5Oso1ueIo5s/hT0aOhAkjBKvx8CVkQj0xH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/tokens":"15.0.0-canary.127a44b28.0","@material/density":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/focus-ring":"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/switch_15.0.0-canary.127a44b28.0_1697140888047_0.021308681504929705","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/switch","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.0ad128337.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2e4df0a0bed4416925082bb9ad79df59ce25c19","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.0ad128337.0.tgz","fileCount":58,"integrity":"sha512-G5D39m2HWfSzZQt8iN+PiH69U+NmFhH3zMGBcCeHHonHrLO2VReDLHSIRPjqDkAhIg4MPVU6sAPlUAVoulW5rQ==","signatures":[{"sig":"MEYCIQC4LIqyYSw0BHnuh3JwyEizum/TLyE5yQSA/kUrPjBtWQIhANoR4Lm2v1JDIyDxoHUB1gqVH988RwsqDzfkP0rnL6LM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/tokens":"15.0.0-canary.0ad128337.0","@material/density":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/focus-ring":"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/switch_15.0.0-canary.0ad128337.0_1697741579007_0.825117438484281","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/switch","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.9cec94097.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34eb4c47fc32d479a2b35dcb077d49bd5cbf83ed","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.9cec94097.0.tgz","fileCount":58,"integrity":"sha512-IJ8z7qC46VH1j5q2/8fPTzbjcbDLdngFEYEf/rZYAHK65pRZuRarSjO8nefm8XB9gwHuAp3hnd1lZpBREZ1cfQ==","signatures":[{"sig":"MEUCIQDypaeinCOeNStm4u9jHCmwmFSpDFuw17lP5ZioX9bcdwIgAqFrTVurIFO7752dsKIMTIP+V1Tw0D7ubcmNIWeGujo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/tokens":"15.0.0-canary.9cec94097.0","@material/density":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/focus-ring":"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/switch_15.0.0-canary.9cec94097.0_1697757013749_0.03322033994480189","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/switch","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"405bdd92022d4b99c7bac52c4443927757cd596e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":58,"integrity":"sha512-aeYWnddCwZtU9Ac2afdJHXPtOV5wF6HNPc8BAPJ2WbMOGszmF6W8jbVySb+4ZxtZ0WslAT93u6nGOeDX7Jib3Q==","signatures":[{"sig":"MEQCIBInRrIhuD4GWikaOB7JJH0prMlnJ4iHQztF6T27BlNyAiBSx8L/H8JiZ26RfFmtcyUzWdBX11AUV4TsnK30ZFj+ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/tokens":"15.0.0-canary.c51a0bbcc.0","@material/density":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/focus-ring":"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/switch_15.0.0-canary.c51a0bbcc.0_1700081938035_0.8634902526083363","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/switch","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e5380e1ada36a5552415e25fd46177b1963515","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.d76666ad4.0.tgz","fileCount":58,"integrity":"sha512-IpgGd9tk00wbf0x2gUoSZRiXeCs3mLC5/iH4TdQTIoEyeh3Ho/sPelC6pm1RA2kuiTzh3uHXyDhN9VzeZB32qQ==","signatures":[{"sig":"MEUCIQDLmSakjv9uOmgijxRvrXtk+ynrD9f7/IfhvtAG+sxY1wIgHbZIs/i3PvhVZdtfX74j/XL2x9tiPmrSbzYOcUQ3hio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/tokens":"15.0.0-canary.d76666ad4.0","@material/density":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/focus-ring":"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/switch_15.0.0-canary.d76666ad4.0_1701123202496_0.9528498150254476","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/switch","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c5b14c6bc1bfb1f703e1bcd0b520337f03da307","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.8656bf0e0.0.tgz","fileCount":58,"integrity":"sha512-KnBJZcBtlSvPs4nYN2x4M0A8t93xrKFVpaBFnrOhltCtYg43eSTZk6DTXZ1z3+1DXds80G/4tsDmvoW/ZjiSwQ==","signatures":[{"sig":"MEUCIQD4ggD3TROPNfl56KJXRfnlN+qSNMdvFcRm8b5haJBDXAIgYm+vSr0gd6OrUb0tGlb69sZCh/9vjsRCozQqBm1xFOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/tokens":"15.0.0-canary.8656bf0e0.0","@material/density":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/focus-ring":"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/switch_15.0.0-canary.8656bf0e0.0_1702415934320_0.7697601543840162","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/switch","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71fa2bd8819917dae6991e118aef819d780d690e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7f224ddd4.0.tgz","fileCount":58,"integrity":"sha512-lEDJfRvkVyyeHWIBfoxYjJVl+WlEAE2kZ/+6OqB1FW0OV8ftTODZGhHRSzjVBA1/p4FPuhAtKtoK9jTpa4AZjA==","signatures":[{"sig":"MEUCIFDmsG4peyG5TeGFk4veSALMY1lMLwgrgEYF1B4zqrrmAiEAyI7UQoZd9kSuHXdJ3mdzQnKo1mb2Ldi1C9j+KtH1SzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/tokens":"15.0.0-canary.7f224ddd4.0","@material/density":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/focus-ring":"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/switch_15.0.0-canary.7f224ddd4.0_1703743767011_0.9592318800423894","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/switch","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31704b8e1767f478646a0fb835f441d34071154b","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":58,"integrity":"sha512-L6NTQPVOsIEpMTwBI6XpJQCqDGIQGBmqyvIenj8FVByDD/EHMtfZC/zf5NGJVCMZ5pTC+U19VMcMHU35ISAE4w==","signatures":[{"sig":"MEUCIGkGdcOgzfus+8G0pU4+Rzzz0JeHFuvJpiXajdrhDoX1AiEA9ITj5UA5WvqdSHIbis8DPbNgNM/qznAjnxaXmSWsRkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/tokens":"15.0.0-canary.a0b8a90c0.0","@material/density":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/focus-ring":"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/switch_15.0.0-canary.a0b8a90c0.0_1707333586943_0.855495605649057","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/switch","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86b9ea597339fd8fb2f8f048c66c190afd3f5362","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.e50b478eb.0.tgz","fileCount":58,"integrity":"sha512-vWF9zYsMPyb+I1VJwAid2yKty+g+Cn5spNmnX56bIiqG2i0g6oDpljJggA1Utcm4cvfrOxcmOscIdocrgLaaHw==","signatures":[{"sig":"MEQCICGDD7z/ShFNhXbQkSTBA+DEJBmSCFBQsdPp7lFMijm4AiAaJIyCeDR/B4rrNzqNz3XYRGZQLRJMsfIvbKgZ6lO7Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/tokens":"15.0.0-canary.e50b478eb.0","@material/density":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/focus-ring":"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/switch_15.0.0-canary.e50b478eb.0_1707415699798_0.782356286715493","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/switch","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf08d5120f858aeed3090d5cdee8811293c3cb5","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.c43b3438b.0.tgz","fileCount":58,"integrity":"sha512-CigTXdUV7XQI9QpQvkDW5e/IY4ybzJSfZ+kMG1qX1CUiuZP9Q3i+fceEuO4C5oELMs8YJuoDyqF7LrxluUaxBg==","signatures":[{"sig":"MEQCIAGOmmuzuPuar5GW/VAuLk1gR1n5ewchnkliyxpDdC02AiBq9f9ko/addYKTDtqCaNz+NrHsv7dtofbL1yg4+qcxyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/tokens":"15.0.0-canary.c43b3438b.0","@material/density":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/focus-ring":"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/switch_15.0.0-canary.c43b3438b.0_1708719472176_0.7884017633275688","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/switch","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.819498d8c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470d5beb1a0c3e3e9d465c3c119d0f6820c497c4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.819498d8c.0.tgz","fileCount":58,"integrity":"sha512-9POOrUqEOcpfxqRdfV+rq9FKp13RZQydbnrIhcNpN2NrarBJn9U3+FaJ3mFU1QtOItzBFVSdV+Yn0UYInTGSaw==","signatures":[{"sig":"MEUCIFY0EJhIldGlvbgOm7u6hnVFYrDtPCAuBiBoMO/RosFtAiEAwQ1BG7APLLIzqRqZweFlQK0PPh3HEZ82QD2oWp9svjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/tokens":"15.0.0-canary.819498d8c.0","@material/density":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/focus-ring":"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/switch_15.0.0-canary.819498d8c.0_1710515719567_0.14956077072490004","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/switch","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.453a6248a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b5e6c6c067d0d4582e46b8e91aca7b203696d58","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.453a6248a.0.tgz","fileCount":58,"integrity":"sha512-0P8zlhSAOGSSJWhXwn/MpPWODO4we4Ztx1I5rz2xJao4SaLZsGPM+RPu+29yu4fnwDxejnWHDuMlpTXOAJUDGQ==","signatures":[{"sig":"MEUCIGlQYesYTUOIq8U4ygEyGSFNh46dBsPFqBLYZcoDxXfBAiEAtjuxq9nd3eyhSiO1TeT6ttZ1qiIEW8mQkH0ptUHZcuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/tokens":"15.0.0-canary.453a6248a.0","@material/density":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/focus-ring":"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/switch_15.0.0-canary.453a6248a.0_1711386832322_0.4675794848139174","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/switch","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"658b25bc4241c59fa4b24ebb1e91821220be76f3","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.68edc03c6.0.tgz","fileCount":58,"integrity":"sha512-AF5Tn2oWsuVe260FTLnxzTxe+sFkqwt+BBhfgJPHlmyFk65wM8NLxkAPcCkg/vDuos+9+23QikB1z70c2df9JQ==","signatures":[{"sig":"MEUCIQDtchDihsCbGHd2pgPfAX0iN44Mm9m2hri9tx5Us1A6PAIgM+rP8Pa033Mb8nxbeChf+FG4oMCCLd8kg/hR5yUl0HE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/tokens":"15.0.0-canary.68edc03c6.0","@material/density":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/focus-ring":"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/switch_15.0.0-canary.68edc03c6.0_1712603194388_0.40338001012014835","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/switch","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d4f48198873f2734d4a60a36e25ac948273ab8f","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.5bebc0064.0.tgz","fileCount":58,"integrity":"sha512-RdfpV+W0l1UQRtJumf08Vj5/EX9q92QHRrSdFxYWUJqT3iiY9GIj1LKpMRk1c3wK2HLGvmVQTi6HDiRLAK7Rvw==","signatures":[{"sig":"MEYCIQDbN/xJ8EQq5L5JDGlzZxn6ID8VaVjPblBefBZkL22UWwIhAJz7YIsc+h+D72r8Qe49h5YVSLQ7oSNk4RYFaL280Zt+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1079061},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/tokens":"15.0.0-canary.5bebc0064.0","@material/density":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/focus-ring":"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/switch_15.0.0-canary.5bebc0064.0_1712871684397_0.01915484564735137","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/switch","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.311f29a60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00a2ef4d613d722fb6c7f034cd882ada426812db","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.311f29a60.0.tgz","fileCount":58,"integrity":"sha512-GQQJNGX8zAs2xu1JfPyt+vbpKMNkvC4twLZGgANAMxwYG7hWxNwzMHiASeYf7zLhLrJ2jT0k/bCWXXhoYqhYgg==","signatures":[{"sig":"MEUCIQD3u1MUUqEa/YlmCAyMVb7c1x/B+khAaV2U0aRqAmZiigIgJlFP6x/XHDaovqqQCgijP/vAqbj3PfOE7BW0vHNgWCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1081445},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/tokens":"15.0.0-canary.311f29a60.0","@material/density":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/focus-ring":"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/switch_15.0.0-canary.311f29a60.0_1713895233313_0.5757028233005019","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/switch","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.65c10a622.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f352a2667545f9cd9b59b344d965555a49d6a61e","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.65c10a622.0.tgz","fileCount":58,"integrity":"sha512-+VpLiNgwDCod4FxvaIL9eikFlbNYqjaXuUyvE5hgPyAYKY655Sgd5B3tfq4nxGqe9jhR+jVffiCGgu/6yht7TA==","signatures":[{"sig":"MEYCIQCClQszkTpeZjV4EGgWFiVr3oCsvW52B5ujRoytlc3hqwIhAKZxjKonaPMLspmQB1VQKmT3i4RLORbU7QbJNzmhAvzG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1084008},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/tokens":"15.0.0-canary.65c10a622.0","@material/density":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/focus-ring":"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/switch_15.0.0-canary.65c10a622.0_1714070953137_0.08245699044264909","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/switch","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0666c5e1ce985b4e7a6eb1bc0071abafec9ee5dc","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":58,"integrity":"sha512-FahdFA+kXcOB47wYj40EgdqgYdeyXCEJh50HUXalaxvSEljVEQcpj3zbQLvUAId9uaWpplihuORxsiof3CsTsA==","signatures":[{"sig":"MEYCIQD8WYZ4f9cdi71Jrps3aWR9wNZiVtRkuA8NFvYviERO/QIhAKqFSpBjDjC61IbnhdBSr1mdvbjEPc51ZeOT9BGJV2sw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1084008},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/tokens":"15.0.0-canary.4b35cb7d0.0","@material/density":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/focus-ring":"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/switch_15.0.0-canary.4b35cb7d0.0_1714651398096_0.34659306087368535","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/switch","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8453681e9e0e88cfd87d8be5bf3eb236e9bd1612","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.f80ac92b0.0.tgz","fileCount":58,"integrity":"sha512-kw3sAlOQJGoI2JIn3LrALF6RQYKRWBTwsT/qB770cXrSl5FLxANk1dchua1pPpaE4/2m18N0Tk4Yfa100/EoEg==","signatures":[{"sig":"MEUCICcaJ4895wFUW/oHbxACl85LWFaQkWibjBICQjKZTMIYAiEAxxMRiuBOcgSbozs1cod2mYGo/FeQg4b1LwpBR9t2pmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1084008},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/tokens":"15.0.0-canary.f80ac92b0.0","@material/density":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/focus-ring":"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/switch_15.0.0-canary.f80ac92b0.0_1714652008048_0.7287079796000946","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/switch","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"377f085ec7ea875c0e93b554f22a53b993da3706","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.2f5b899bc.0.tgz","fileCount":58,"integrity":"sha512-0ydwmozKjjqiWerSwUqSmFgpm4s5BRh/sXRocPgnUFe0VHpNANokTXU7rCwHY05cytSoNmQMK3Nnyu+ksO4wlA==","signatures":[{"sig":"MEUCIQDH56Drv3KoZ8A50XWrzFsrcxS8W2QueNPc19e/8tWBLwIgSfK1tWltyOQvU8JpACgEpEgpx/VF+0fBi4IYyGjIDLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1084008},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/tokens":"15.0.0-canary.2f5b899bc.0","@material/density":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/focus-ring":"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/switch_15.0.0-canary.2f5b899bc.0_1716213396405_0.548316786536631","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/switch","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","switch"],"license":"MIT","_id":"@material/switch@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b66e15153b6f5f627982e51a872c2ef193381e65","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.cfec83c74.0.tgz","fileCount":58,"integrity":"sha512-/YC08BoA6D/x877B+4HA7TIoubedYFnUN3Xdx9VSmSFQc/49tGXI9coQ+WwyFMbrSk5DapPYOMiGVTAYRwJbQg==","signatures":[{"sig":"MEQCIGeoN6QA9o87xDV2ZuSouMpAW4hdndbq/yDCaytuHc58AiAbsr9OZt/bhumy4fWlcCzWh27aEdq3c7zKLGMN8RTFnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1084008},"main":"dist/mdc.switch.js","module":"index.js","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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-switch"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web switch component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","safevalues":"^0.3.4","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/tokens":"15.0.0-canary.cfec83c74.0","@material/density":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/focus-ring":"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/switch_15.0.0-canary.cfec83c74.0_1716231421584_0.19395904569333888","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/switch","description":"The Material Components for the web switch component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","switch"],"main":"dist/mdc.switch.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-switch"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/density":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/focus-ring":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/tokens":"15.0.0-canary.423edc3dc.0","safevalues":"^0.3.4","tslib":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Selection controls: switches\n\n[Selection controls](https://material.io/components/selection-controls#usage)\nallow the user to select options.\n\nSwitches toggle the state of a single setting on or off. They are the preferred\nway to adjust settings on mobile.\n\n![Switch hero example for menu options](images/switch-hero.png)\n\n**Contents**\n\n* [Using switches](#using-switches)\n* [Switches](#switches)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using switches\n\nUse switches to:\n\n* Toggle a single item on or off, on mobile and tablet\n* Immediately activate or deactivate something\n\n### Installing switches\n\n```\nnpm install @material/switch\n```\n\n### Styles\n\n```scss\n@use '@material/switch/styles';\n```\n\n### JavaScript instantiation\n\nThe switch requires JavaScript to function, so it is necessary to instantiate\n`MDCSwitch` on the `mdc-switch` element.\n\n```js\nimport {MDCSwitch} from '@material/switch';\n\nfor (const el of document.querySelectorAll('.mdc-switch')) {\n const switchControl = new MDCSwitch(el);\n}\n```\n\n**Note: See [Importing the JS component](../../docs/importing-js.md) for more\ninformation on how to import JavaScript.**\n\n## Switches\n\n### Switch example\n\n```html\n\n\n```\n\nThe `mdc-switch__focus-ring` element ensures that a focus indicator is displayed\nin high contrast mode around the active/focused switch.\n\n### Switch states\n\nSwitches can be on or off. Switches have enabled, hover, focused, and pressed\nstates.\n\n![Switch states in a table. Columns are enabled, disabled, hover, focused,\npressed. Rows are on or off.](images/switch-states.png)\n\n## Other variants\n\n### Initially disabled switch\n\nAdd the `disabled` attribute to the `mdc-switch` element to disable the switch.\nThis logic is handled by the `MDCSwitch.disabled` property, but you'll want to\navoid a FOUC by initially adding this attribute.\n\n```html\n\n\n```\n\n### Initially \"on\" switch\n\nAdd the `mdc-switch--selected` class and `aria-checked=\"true\"` attribute to the\n`mdc-switch` element to toggle the switch to \"on\". This logic is handled by the\n`MDCSwitch.selected` method, but you'll want to avoid a FOUC by initially adding\nthis class and attribute.\n\n```html\n\n\n```\n\n## API\n\n### CSS classes\n\n| CSS Class | Description |\n| -------------------------- | ---------------------------------------------- |\n| `mdc-switch` | Mandatory, for the parent element. |\n| `mdc-switch--unselected` | Optional, styles the switch as unselected (\"off\") |\n| `mdc-switch--selected` | Optional, styles the switch as selected (\"on\") |\n| `mdc-switch__track` | Mandatory, for the track element. |\n| `mdc-switch__handle-track` | Mandatory, for the handle's track element. |\n| `mdc-switch__handle` | Mandatory, for the handle element. |\n| `mdc-switch__shadow` | Mandatory, for the shadow effect. |\n| `mdc-elevation-overlay` | Mandatory, for the shadow effect's overlay in dark mode. |\n| `mdc-switch__ripple` | Mandatory, for the ripple effect. |\n| `mdc-switch__icons` | Mandatory, for the icons. |\n| `mdc-switch__icon` | Mandatory, for the icon elements. |\n| `mdc-switch__icon--on` | Mandatory, for the on icon. |\n| `mdc-switch__icon--off` | Mandatory, for the off icon. |\n\n### Theme mixin\n\nThe switch may be customized using the `theme()` mixin and providing an\n[MDC Theme](../mdc-theme) string (such as `primary`) or other values to the\ntheme keys.\n\n```scss\n@use '@material/switch';\n@use '@material/theme/color-palette';\n@use '@material/theme/shadow-dom';\n\n// Include for IE11 support\n// @include shadow-dom.enable-css-selector-fallback-declarations(true);\n\n.my-switch {\n @include switch.theme((\n selected-handle-color: color-palette.$teal-600,\n selected-track-color: color-palette.$teal-300,\n ));\n}\n```\n\nView the [theme file](_switch-theme.scss) for available keys and built-in\nthemes.\n\n### `MDCSwitch` properties\n\n| Property | Value Type | Description |\n| ---------- | ---------- | -------------------------------------------------- |\n| `disabled` | Boolean | Indicates whether or not the switch is disabled. |\n| `selected` | Boolean | If true, the switch is on. If false, the switch is off. |\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can\ncreate a switch for your framework. Depending on your needs, you can use the\n_Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced\nApproach: Using Foundations and Adapters_. Please follow the instructions\n[here](../../docs/integrating-into-frameworks.md).\n\nSee [MDCSwitchAdapter](./adapter.ts) and [MDCSwitchFoundation](./foundation.ts)\nfor up-to-date code documentation of switch's foundation API.\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/switch@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-hPhke3ssUPXCLW+zXEcRpG0pVixk9Ngx9ai3EmoKuExSPhhgQWSl6mq/dsZKJe+RDogOKC52etb8BmRy9J6M5w==","shasum":"dedd4b84bb69ad94d3f016ff67f1e2970e1e87d4","tarball":"https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.423edc3dc.0.tgz","fileCount":58,"unpackedSize":1084008,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCxp4u30M3Be8XDeoIpnVIzL7nwlI/KxmAP9aPx4muQAiEAp6cuDzSK1+5QmbZ1fx2cAmHZSCtoIDkBFIwydgOvoio="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/switch_15.0.0-canary.423edc3dc.0_1719425533343_0.3683579109762265"},"_hasShrinkwrap":false}},"time":{"created":"2017-02-06T19:04:52.081Z","modified":"2024-06-26T18:12:14.126Z","0.1.0":"2017-02-06T19:04:52.081Z","0.1.1":"2017-02-21T17:27:43.049Z","0.1.2":"2017-03-06T17:02:21.024Z","0.1.3":"2017-04-03T15:28:11.006Z","0.1.4":"2017-04-18T14:51:30.343Z","0.1.5":"2017-05-01T15:43:17.816Z","0.1.6":"2017-05-15T16:26:13.582Z","0.1.7":"2017-05-17T14:28:31.113Z","0.1.8":"2017-05-30T19:04:48.974Z","0.1.9":"2017-06-26T16:11:06.029Z","0.1.10":"2017-07-24T15:49:31.828Z","0.1.11":"2017-08-07T20:48:34.524Z","0.1.12":"2017-08-21T17:28:05.575Z","0.1.13":"2017-09-05T20:16:20.682Z","0.1.14":"2017-09-18T18:35:57.597Z","0.1.15":"2017-10-02T21:11:56.466Z","0.24.0":"2017-10-30T19:11:35.283Z","0.25.0":"2017-11-13T20:02:38.527Z","0.27.0":"2017-12-11T19:35:41.142Z","0.28.0":"2018-01-08T18:55:18.290Z","0.29.0":"2018-01-22T18:31:03.138Z","0.30.0":"2018-02-05T22:03:05.836Z","0.31.0":"2018-02-20T18:23:05.171Z","0.32.0":"2018-03-05T22:08:50.409Z","0.33.0":"2018-03-19T16:40:11.219Z","0.34.0":"2018-04-02T21:52:08.522Z","0.35.0":"2018-04-23T22:40:50.191Z","0.35.2":"2018-05-21T21:54:24.462Z","0.36.0":"2018-06-04T15:38:16.880Z","0.36.1":"2018-06-18T15:40:36.787Z","0.38.0":"2018-07-30T17:07:45.686Z","0.38.1":"2018-08-13T20:39:30.946Z","0.39.0-0":"2018-08-16T15:15:43.169Z","0.39.0":"2018-08-27T17:41:13.090Z","0.39.1":"2018-08-31T21:37:03.798Z","0.39.2":"2018-09-11T16:55:38.434Z","0.39.3":"2018-09-11T17:19:33.044Z","0.40.0":"2018-09-24T20:02:25.043Z","0.40.1":"2018-10-08T21:14:48.133Z","0.41.0":"2018-10-29T20:22:34.629Z","0.42.0":"2018-12-04T22:55:16.361Z","0.43.0":"2019-01-07T19:49:41.291Z","0.44.0":"2019-02-04T18:24:40.346Z","0.44.1":"2019-02-19T23:03:20.414Z","1.0.0-0":"2019-02-27T23:59:45.033Z","1.0.0-1":"2019-03-04T23:33:38.600Z","1.0.0":"2019-03-06T21:08:28.952Z","1.0.1":"2019-03-11T22:07:39.369Z","1.1.0":"2019-03-26T19:26:14.207Z","2.0.0":"2019-04-29T17:40:17.288Z","2.1.1":"2019-05-10T17:25:25.107Z","2.3.0":"2019-05-28T21:24:05.325Z","3.0.0-alpha.0":"2019-06-12T04:07:04.922Z","3.0.0-alpha.1":"2019-06-12T19:02:23.852Z","3.0.0":"2019-06-25T22:28:01.124Z","3.1.0-alpha.0":"2019-07-16T13:29:23.060Z","3.1.0":"2019-07-22T22:02:48.959Z","4.0.0-alpha.0":"2019-08-07T21:09:44.072Z","4.0.0-canary.0":"2019-09-05T04:38:04.643Z","4.0.0-canary.1":"2019-09-09T20:21:00.529Z","3.2.0":"2019-09-12T21:53:47.024Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:48.187Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:35.024Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:22.070Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:06.772Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:27.865Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:55.027Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:50.600Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:05:01.546Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:08.627Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:42.743Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:13.273Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:34.083Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:30.532Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:21.286Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:19.368Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:01.643Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:38.557Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:58.264Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:15.311Z","4.0.0":"2019-11-02T18:11:58.864Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:09.092Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:12.277Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:08.597Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:41.155Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:40.595Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:48.358Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:11.262Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:13.001Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:18.921Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:39.801Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:17.473Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:02.253Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:52.969Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:17.568Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:04.454Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:30.590Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:37.688Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:13.947Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:59.156Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:36.062Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:27.716Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:54.723Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:33.317Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:12.720Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:35.811Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:24.512Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:18.278Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:50.745Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:46.859Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:46.710Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:32.064Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:33.591Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:39.251Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:49.688Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:06.477Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:27.698Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:50.806Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:40.088Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:53.202Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:42.787Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:31.245Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:33.282Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:59.794Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:39.376Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:41.103Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:19.969Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:17.841Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:18.139Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:37.321Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:08.213Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:09.385Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:44.955Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:34.813Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:49.899Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:10:03.027Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:57.504Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:30.614Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:49.401Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:03.379Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:21.469Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:11.410Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:58.275Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:40:01.554Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:45.069Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:34.477Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:07.727Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:37.652Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:47.908Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:22.976Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:40.791Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:27.439Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:24.547Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:42:03.907Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:50.503Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:23.657Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:51.928Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:09.497Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:49.379Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:17:02.786Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:38.067Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:50.509Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:30.701Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:21.713Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:46.646Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:49.860Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:46.967Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:53.746Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:24.439Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:39.581Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:20.235Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:59.821Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:13.847Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:51.919Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:49.875Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:38.320Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:21.936Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:30.347Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:53.025Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:35.245Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:54.189Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:55.572Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:30.910Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:29.865Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:48.565Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:13.124Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:47.802Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:48.919Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:14.951Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:30.076Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:19.353Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:22.137Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:07.307Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:27.016Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:47.988Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:51.378Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:26.921Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:06.285Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:07.398Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:12.169Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:44.932Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:54.763Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:06.730Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:46.469Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:37.609Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:05.532Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:37.242Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:21.474Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:53.814Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:31.429Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:40.776Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:50.639Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:49.330Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:24.623Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:07.284Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:13.121Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:17:00.255Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:33.431Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:47.930Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:39.629Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:39.486Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:27.866Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:47.560Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:05.282Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:20.164Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:17.517Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:09.486Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:04:19.064Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:45.455Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:17.403Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:39.295Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:51.870Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:52.801Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:11.553Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:41.521Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:12:02.772Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:51.872Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:36.354Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:49:38.178Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:52:01.039Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:21.818Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:40.467Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:05.564Z","5.0.0":"2020-02-14T00:09:19.123Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:37.041Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:48.761Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:41.273Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:12.669Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:03.605Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:49.564Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:09.942Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:48.950Z","5.1.0":"2020-02-25T21:38:13.589Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:44.675Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:03.935Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:36.345Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:12.743Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:10:27.590Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:50.443Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:14.603Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:08.018Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:23.306Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:48.411Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:22:06.442Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:27.122Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:13.430Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:27.016Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:33.728Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:24.617Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:35.471Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:09.089Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:18.788Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:18.644Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:19.336Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:03.154Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:50.153Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:00.915Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:35.605Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:17.450Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:21.642Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:36.604Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:10.809Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:30.134Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:04.738Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:35.938Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:41.425Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:28.058Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:03.380Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:42.034Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:00.162Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:10.504Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:48.629Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:38.790Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:52.309Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:39.175Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:02.462Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:27.290Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:59.625Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:36.755Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:09.633Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:51.916Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:06.535Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:10.577Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:33.150Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:37.611Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:29.803Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:56.120Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:53.349Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:23.036Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:36.949Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:10.792Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:07.280Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:18.146Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:08.200Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:41.886Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:10.162Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:33.321Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:16.212Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:26.704Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:04.851Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:39.876Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:10.419Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:26.614Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:14.185Z","6.0.0":"2020-04-23T17:26:47.439Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:56.730Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:22.767Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:15.190Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:02.561Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:06.956Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:29.310Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:07:20.904Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:39.493Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:12.831Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:50.993Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:04.521Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:58.520Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:53.950Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:01.807Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:50.514Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:01.376Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:45.465Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:16.973Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:45.980Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:12.116Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:17.237Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:36.742Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:40.243Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:02.608Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:18.671Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:53.525Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:40.349Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:39.175Z","7.0.0-canary.119e21426.0":"2020-05-08T20:23:04.187Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:36.746Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:44.311Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:18.453Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:29:15.633Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:44.041Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:30.502Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:15.020Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:20.843Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:30.948Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:56.668Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:39.272Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:49.187Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:15.425Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:11.523Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:56.313Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:30.167Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:21.208Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:50.032Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:41.870Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:59.201Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:59.097Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:21.073Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:16.257Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:15:10.468Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:21.119Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:36.009Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:51.051Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:52.011Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:15.693Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:56.980Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:15.595Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:13.399Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:14.088Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:23.429Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:08.206Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:45.953Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:12.209Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:07.769Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:32.075Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:32.170Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:46.387Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:45.268Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:15.478Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:51.596Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:03.511Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:28.953Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:09.191Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:59.569Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:07.733Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:23.720Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:37:02.173Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:27.070Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:33.145Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:28.893Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:20.047Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:07.290Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:44.438Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:36.066Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:20.751Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:05.798Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:53.370Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:15.931Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:46.155Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:40.025Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:26.179Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:48.360Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:16.188Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:48.767Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:11.133Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:27.553Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:12.875Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:42.295Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:39.816Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:29.396Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:42:09.164Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:57:00.486Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:13.074Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:19.821Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:35.976Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:46.215Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:46:38.706Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:32.063Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:49.517Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:31.130Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:20.187Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:51.393Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:26.826Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:32.634Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:30.820Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:56.162Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:20.169Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:41.847Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:03.009Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:31.768Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:45.676Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:01.161Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:51.092Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:36.058Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:53.069Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:02.560Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:10.876Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:35.869Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:28.253Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:11.278Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:49.730Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:37.214Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:17:01.090Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:19.837Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:30.255Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:30.121Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:27.327Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:15.549Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:45.065Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:40:11.653Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:19.615Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:42.513Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:06.774Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:07.397Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:04.582Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:31.534Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:06.900Z","7.0.0":"2020-06-23T19:10:47.811Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:47.156Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:13.684Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:04.723Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:43.425Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:42.108Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:21.797Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:43.411Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:53.633Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:37.402Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:52.013Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:53.315Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:22.233Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:41.693Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:24.222Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:44.339Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:48.190Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:40.496Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:27.998Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:47:05.947Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:13.996Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:19.483Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:04.208Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:33.515Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:15.716Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:54.468Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:14.427Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:34.030Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:21.008Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:17.172Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:51.611Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:44.379Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:35.535Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:56.857Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:22.172Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:25.046Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:12.742Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:36.207Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:08.708Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:11.111Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:28.314Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:36.742Z","8.0.0-canary.01db89053.0":"2020-07-16T16:39:33.071Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:06.414Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:44.137Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:19.136Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:16.836Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:18.847Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:54.014Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:37.362Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:59.952Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:45.017Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:46:16.846Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:31.390Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:54.466Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:41.330Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:46.663Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:06.169Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:44.605Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:54.069Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:57.791Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:24.794Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:45.560Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:36.837Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:12.694Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:14.078Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:23.222Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:42.063Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:39.172Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:51:49.714Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:11.118Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:29.713Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:12.040Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:29.921Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:21.162Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:35.035Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:08.037Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:29.390Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:19.830Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:49.905Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:05.326Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:54.794Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:56.506Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:35.847Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:30.088Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:32.997Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:26.127Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:44.829Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:21.749Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:37.885Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:16.071Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:00:05.135Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:53.486Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:30.288Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:29.302Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:41.862Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:34.137Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:08.842Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:59.997Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:49.093Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:54:17.835Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:38.366Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:28.677Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:21.799Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:19.478Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:55.904Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:54:06.637Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:51.908Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:31.597Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:45.266Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:05.553Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:50.538Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:36.014Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:28.731Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:29.241Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:43.237Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:41.220Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:59.797Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:58.341Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:19.345Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:16.266Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:23.606Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:19.992Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:47.769Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:49.159Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:31.678Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:07.311Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:59.097Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:30.537Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:05.525Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:18.589Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:58.484Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:36.663Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:33.352Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:24.512Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:55.982Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:54.877Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:04.421Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:02.751Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:03.537Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:33:03.512Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:40.782Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:15.520Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:00:01.922Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:32.689Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:15.127Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:50.821Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:29.169Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:42.676Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:58.345Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:50.890Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:27.268Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:57.596Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:56.573Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:30.623Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:26.293Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:10.929Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:55:16.388Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:55:46.652Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:31.457Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:55.855Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:08.540Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:39.389Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:51.427Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:43.700Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:19.210Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:20.735Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:51.563Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:30:03.521Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:29:04.650Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:30.081Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:02.140Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:52.422Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:52.403Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:08.608Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:40.756Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:02.936Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:18.329Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:18.099Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:27.037Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:26.204Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:44.448Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:30.561Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:39.628Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:19.900Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:13.131Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:01.314Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:10.656Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:33.914Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:58.974Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:55.650Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:46.762Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:31.961Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:14.714Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:46.223Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:25.048Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:46.584Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:18.445Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:12.998Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:56.150Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:26.297Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:59:56.941Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:39.329Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:26.695Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:05:04.352Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:59:17.403Z","8.0.0":"2020-11-02T22:59:44.908Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:43.174Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:07.727Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:21.688Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:19.019Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:13.520Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:04.208Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:32.190Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:46.588Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:12.900Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:48.177Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:20:52.754Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:10.260Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:58.093Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:26.190Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:20.341Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:45.490Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:16.588Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:44:06.053Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:01.412Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:10.615Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:36.734Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:26.628Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:35.113Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:22.312Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:55:54.743Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:38.119Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:59.908Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:45.405Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:11.387Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:33:05.519Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:29.513Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:30.980Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:41.529Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:46.010Z","9.0.0-canary.977585650.0":"2020-12-02T14:42:10.758Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:48.450Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:41.471Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:34.017Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:36.077Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:47.338Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:38.245Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:21.702Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:36.645Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:45:04.497Z","9.0.0-canary.832668d33.0":"2020-12-04T18:06:03.759Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:08.356Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:42:05.623Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:39.633Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:37.043Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:23.700Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:27.178Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:26.540Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:46.025Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:26.695Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:10.276Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:49:59.211Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:41.079Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:45:07.878Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:16.693Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:37.364Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:30.029Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:56.571Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:44.575Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:35.539Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:04.727Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:10.734Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:44.931Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:38.050Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:07.291Z","9.0.0":"2020-12-29T19:46:12.762Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:15.391Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:58.821Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:33.970Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:22.359Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:49.654Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:20.581Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:37.589Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:24.882Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:05.800Z","10.0.0-canary.968735356.0":"2021-01-06T15:50:55.722Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:22.774Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:38.784Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:18.786Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:55.991Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:33.324Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:44.767Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:24.725Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:33.295Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:23.740Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:14.559Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:07:03.711Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:24.658Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:10.113Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:43.390Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:56.499Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:19:10.541Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:08.267Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:05.345Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:42.301Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:04:54.369Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:29.541Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:16.888Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:36.749Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:35:45.927Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:23:57.232Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:12.110Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:04.647Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:20.642Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:33:06.412Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:46:00.226Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:04:09.780Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:17.536Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:20:13.178Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:10.578Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:02:20.329Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:32:26.026Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:45.599Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:39.546Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:45.015Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:33.569Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:21.537Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:43:06.473Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:38.181Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:34:05.742Z","10.0.0-canary.05f249666.0":"2021-02-04T17:50:16.688Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:15.959Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:35:01.081Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:44.224Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:50.781Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:17:24.490Z","10.0.0":"2021-02-05T16:18:59.204Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:42:07.646Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:42.739Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:55.290Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:33.277Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:34:16.316Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:17:23.131Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:00:51.652Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:23.481Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:47.016Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:17:17.432Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:06:55.189Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:42:00.342Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:30:58.533Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:27.574Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:30:56.642Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:46.589Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:16:15.004Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:09:57.907Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:13.766Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:12.011Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:51.329Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:10.474Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:05:29.180Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:46.916Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:23:32.593Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:32.801Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:38.306Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:57.947Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:14.263Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:37.026Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:43.947Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:45.399Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:30.723Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:45:58.353Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:42.621Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:13:57.654Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:32:54.566Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:34:19.619Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:35:07.701Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:41.494Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:37.344Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:47:56.595Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:22:22.978Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:37:13.929Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:25.378Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:50.202Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:12.235Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:20:59.210Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:50.940Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:15.867Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:16.495Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:00:58.185Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:40:01.361Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:49:24.865Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:45:41.316Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:39:53.043Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:44:11.294Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:33.648Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:19.693Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:18.603Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:57.375Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:50.532Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:43.901Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:16.828Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:48.437Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:22.459Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:44.520Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:33:06.291Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:27.521Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:11.631Z","11.0.0-canary.73a227194.0":"2021-03-12T00:23:56.489Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:02:54.584Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:34:52.438Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:20:00.321Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:46.545Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:15.213Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:28.581Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:19.718Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:37.857Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:21.007Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:19:53.265Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:17:06.599Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:44:04.262Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:46.268Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:51.581Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:51:05.846Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:37.805Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:12:10.057Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:42.933Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:43:56.671Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:05:01.032Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:35.775Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:41.795Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:47.283Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:53:55.576Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:30.366Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:28.985Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:16.217Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:32:33.573Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:56:21.423Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:17.758Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:34.344Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:43.595Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:37.112Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:35.296Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:02.008Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:05:08.225Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:46.402Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:16.801Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:54.874Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:05:00.132Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:27.334Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:12.798Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:37.279Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:48.421Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:44.913Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:36:05.299Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:33.040Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:21.034Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:11:05.798Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:23.292Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:33.871Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:31.542Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:28.350Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:01.227Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:06.694Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:21.707Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:05.758Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:13.387Z","11.0.0":"2021-04-15T22:58:21.462Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:45:01.276Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:48.391Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:19.475Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:49.806Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:31.561Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:11.299Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:51.514Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:25.905Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:28.774Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:28.152Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:13.783Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:08.286Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:28.070Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:09:54.200Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:51.725Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:38.140Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:26.459Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:45.053Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:08.472Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:32.692Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:12:59.223Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:57.469Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:36.242Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:47.368Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:17.246Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:03.708Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:18:00.492Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:47.756Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:02:01.892Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:46.726Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:20.948Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:31.731Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:36.134Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:50.933Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:14.526Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:45.112Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:16.665Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:55:05.370Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:40.132Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:29.595Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:52.621Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:29.974Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:56.361Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:39.166Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:07.913Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:11.938Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:34.207Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:40.653Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:23.826Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:16.668Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:00:06.736Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:58.258Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:21.697Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:04.848Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:25.935Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:27.673Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:32.438Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:43:11.606Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:18:56.329Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:35.573Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:06.006Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:50.612Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:09:00.683Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:52.269Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:38.139Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:59:36.970Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:18:23.782Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:30.335Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:20:50.748Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:12.943Z","12.0.0-canary.33a954852.0":"2021-05-13T15:08:41.354Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:32:01.767Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:08:57.565Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:14:43.461Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:37.636Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:52.409Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:14:07.116Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:29:21.625Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:47.233Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:51:57.748Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:38.372Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:06:50.299Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:23.777Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:36:25.800Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:05:50.160Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:33.320Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:24.542Z","12.0.0-canary.464a00286.0":"2021-06-03T14:47:13.359Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:12.695Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:47:15.615Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:09.648Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:33.559Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:49:23.289Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:11.828Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:49.035Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:07:18.908Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:08:16.291Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:36:45.097Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:42.784Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:47.314Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:13.442Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:40:10.389Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:19:05.104Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:58.495Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:57.615Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:32.060Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:51:22.095Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:59.877Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:07:20.281Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:25.170Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:12.515Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:25:28.907Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:40.963Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:41:31.436Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:38:03.753Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:13:01.470Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:32.382Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:23.740Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:15:54.882Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:30.575Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:51.121Z","12.0.0-canary.796811db7.0":"2021-07-01T00:04:16.514Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:32.981Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:09.967Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:01:02.561Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:10:31.711Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:04:45.472Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:04.132Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:28.219Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:52:25.286Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:50:24.766Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:10:29.424Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:45:18.667Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:54.305Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:43.353Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:23:30.371Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:49:07.314Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:08.729Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:56.442Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:43:18.677Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:03.695Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:59:01.905Z","12.0.0-canary.7239684d4.0":"2021-07-16T16:00:06.336Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:14:55.790Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:04.587Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:43:00.632Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:10:03.622Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:51.272Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:30.067Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:32.888Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:37:00.768Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:50:53.614Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:23.164Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:12.938Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:09.393Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:10.762Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:56:46.234Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:53.286Z","12.0.0":"2021-07-27T19:51:00.571Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:52:34.164Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:13.416Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:26:55.949Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:58.866Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:16.939Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:01.012Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:21.946Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:24:22.703Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:14:51.353Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:00:47.547Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:32.598Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:43:20.895Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:19:08.779Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:56.558Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:53.612Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:08:21.776Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:18:23.085Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:39.769Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:31.435Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:41:54.437Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:32.702Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:49.047Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:56:16.608Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:46:17.808Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:49:33.097Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:09.686Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:22:54.510Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:09.800Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:12.030Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:25:02.861Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:03:17.214Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:43.323Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:49:53.763Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:17.851Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:36.712Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:16.035Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:45:18.548Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:27:38.426Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:29:46.905Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:07.107Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:54.742Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:29.232Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:19:13.026Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:13.665Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:50.326Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:23.615Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:39:19.347Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:06:55.408Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:10:18.902Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:22.962Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:19.011Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:24.448Z","13.0.0-canary.611db508e.0":"2021-09-02T03:16:18.397Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:38:48.034Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:45:45.315Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:35.674Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:17.842Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:53.236Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:14.864Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:03.736Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:21.293Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:39.127Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:22.384Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:42.360Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:27.696Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:31.128Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:33.220Z","13.0.0-canary.864798678.0":"2021-09-09T18:38:03.291Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:22:56.008Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:51.754Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:26.345Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:27.922Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:26.465Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:12.744Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:32.179Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:35.110Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:03.959Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:41.940Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:17.488Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:23.568Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:45.018Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:39.226Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:11.763Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:42.437Z","13.0.0":"2021-09-24T19:46:36.631Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:20.187Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:45.448Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:00.758Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:49.265Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:37.635Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:01.870Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:15.844Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:39.353Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:53.992Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:23.576Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:36.397Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:31.723Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:05.252Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:34.826Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:19.330Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:45.016Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:41.335Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:54.393Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:32.226Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:30.356Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:14.302Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:17.422Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:11.143Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:33.408Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:34.426Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:03.181Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:59.594Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:17:44.165Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:30.333Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:20.020Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:28.724Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:59.599Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:28.607Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:14.531Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:41.486Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:24.951Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:21.161Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:26.390Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:44.213Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:08.853Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:26.451Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:35.725Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:40.875Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:32.479Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:21.463Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:20.467Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:41:03.799Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:04.455Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:52.117Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:32.894Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:01.034Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:18.003Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:28.102Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:30.568Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:05.947Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:50.610Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:35.256Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:21.694Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:49.877Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:40.478Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:33.274Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:30.287Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:33:08.311Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:15.911Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:18.778Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:29.822Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:59.147Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:58.492Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:17.882Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:56.210Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:52.911Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:28.336Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:45.201Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:36.407Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:05.894Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:14.199Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:59.984Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:51.473Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:00.360Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:02.330Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:15.294Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:37.221Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:11.392Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:29.626Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:27.131Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:53.077Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:25.485Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:41.401Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:09.736Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:05.348Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:53.812Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:56.692Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:36.406Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:23.000Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:47.213Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:25.814Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:47.359Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:08.047Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:47.951Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:05.888Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:03.941Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:17.219Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:35.831Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:36.536Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:10.716Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:45.384Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:17.535Z","14.0.0":"2022-04-28T16:56:50.722Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:54.630Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:32.527Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:23.334Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:54.003Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:12.629Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:46.385Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:13.244Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:25.143Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:08.049Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:47.196Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:23.563Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:53.379Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:34.733Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:39.755Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:42.387Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:42.247Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:04.078Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:08.403Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:35.076Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:42.040Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:17.580Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:25.868Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:57.590Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:18.032Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:53.452Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:25.700Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:59.420Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:55.539Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:36.442Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:22.090Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:33.963Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:12.122Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:38:01.421Z","15.0.0-canary.88db01990.0":"2022-07-12T11:41:03.835Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:50.935Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:52.965Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:10.327Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:05.847Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:19.077Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:09.165Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:06.524Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:06:05.839Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:25:10.863Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:44.693Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:01.602Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:42.869Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:47.414Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:09.092Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:03.806Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:13.417Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:36.102Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:40.161Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:30.618Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:45.453Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:51.136Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:43.314Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:52.754Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:44.099Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:51.699Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:14.624Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:48.718Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:46:15.280Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:57.344Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:13.768Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:46.012Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:42.284Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:53.688Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:50.435Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:56.792Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:08.430Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:46.607Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:38.822Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:25.302Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:37:00.047Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:24.858Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:44.796Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:09:13.502Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:57:27.893Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:39.372Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:51.851Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:13.025Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:58:21.758Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:03.843Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:43.861Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:08:07.366Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:47.861Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:32:13.686Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:47.054Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:03.702Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:19:13.984Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:20:31.515Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:44.310Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:51.270Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:53.124Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:38:24.883Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:56:25.802Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:37.340Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:38.055Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:39:01.346Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:56.468Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:03:11.691Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:59:23.442Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:22:05.604Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:42:24.880Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:52:02.114Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:42.342Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:52:21.590Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:49.748Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:57:07.266Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:23:23.867Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:52.898Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:41:14.510Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:43:08.900Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:24:13.001Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:43:34.437Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:14:11.341Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:56.898Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:58.519Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:42.152Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:30.684Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:06:35.548Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:57.256Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:55.955Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:49.740Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:31:26.053Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:16:11.213Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:33:15.110Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:50:19.784Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:57:13.896Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:40.247Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:11:32.647Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:44.247Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:58.949Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:52.600Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:49.560Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:47.296Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:52.593Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:25:21.569Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:14:12.045Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:28:41.216Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:57:20.388Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:48.381Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:36:21.230Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:54:03.935Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:41.077Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:55.215Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:39.929Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:37:18.627Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:37.989Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:46:03.354Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:59:24.016Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:51.396Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:29:16.555Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:03:02.010Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:31:02.723Z","15.0.0-canary.b01136063.0":"2022-11-16T00:16:43.512Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:14:07.997Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:16:24.698Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:18:23.294Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:49.012Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:01:13.628Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:06:08.858Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:59:42.540Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:44.518Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:01:02.597Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:02:28.873Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:56:12.263Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:05:33.119Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:58.585Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:17:11.435Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:01:43.711Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:56.941Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:46:03.140Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:54:45.636Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:37.992Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:03:19.962Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:54.414Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:01:39.856Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:50.679Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:17:22.062Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:40:19.608Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:57:40.755Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:16:48.656Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:14:38.353Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:48:15.075Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:12:37.563Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:35:11.588Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:50:09.440Z","15.0.0-canary.65c411674.0":"2022-11-29T17:39:34.988Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:15:07.987Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:08:35.802Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:30:09.623Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:55:20.434Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:25:10.345Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:52.460Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:59.201Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:52.261Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:27:32.184Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:43:39.066Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:26:48.678Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:50.078Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:04:03.988Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:42:16.614Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:45:24.290Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:46.796Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:47:38.938Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:03:14.625Z","15.0.0-canary.817002c29.0":"2022-12-13T21:55:05.598Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:49.675Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:20:12.770Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:51.223Z","15.0.0-canary.34767110.0":"2022-12-14T17:22:22.668Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:26:33.608Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:09:32.520Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:28:05.684Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:45.661Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:26:35.959Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:13:15.150Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:06:07.982Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:56.649Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:39.577Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:03:11.690Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:56.789Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:07:00.355Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:40.330Z","15.0.0-canary.af490a848.0":"2023-01-03T15:58:38.116Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:46.716Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:14:07.607Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:33:35.086Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:50.606Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:38:35.784Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:36:42.586Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:50.485Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:10:21.182Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:23:02.957Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:17:03.021Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:44:28.765Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:56.556Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:29:09.647Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:12:34.903Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:19:34.792Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:19:09.458Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:13:40.258Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:55:14.857Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:45.082Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:56:43.165Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:37:20.493Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:25:35.252Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:50:34.227Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:40:11.746Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:46.412Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:36:00.915Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:57.406Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:44:30.378Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:31:07.630Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:45:10.435Z","15.0.0-canary.15b221540.0":"2023-02-01T17:53:34.693Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:59:26.770Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:35:12.070Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:39:24.274Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:53.701Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:15:28.377Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:25:19.004Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:10:32.300Z","15.0.0-canary.de38de758.0":"2023-02-09T15:43:23.982Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:04:05.072Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:46.387Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:58:45.397Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:35:05.664Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:21:00.613Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:42:28.583Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:45.250Z","15.0.0-canary.f32339937.0":"2023-03-06T15:16:33.997Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:28:22.637Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:45.204Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:50.558Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:27:17.790Z","15.0.0-canary.274610c77.0":"2023-03-09T14:59:43.170Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:53:34.454Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:19:10.562Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:54.551Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:48:11.490Z","15.0.0-canary.de5224633.0":"2023-03-09T23:56:38.264Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:47.868Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:56.320Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:48:21.574Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:53.815Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:52.191Z","15.0.0-canary.82554d770.0":"2023-03-11T01:38:06.692Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:39:51.568Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:45:06.826Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:48:28.636Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:03:51.951Z","15.0.0-canary.112715df5.0":"2023-03-13T18:40:08.972Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:32:23.176Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:40:00.848Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:44:19.033Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:53:34.875Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:17:19.140Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:48:15.141Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:17:46.620Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:21:03.998Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:54.538Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:27:41.587Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:28:19.340Z","15.0.0-canary.87809c710.0":"2023-03-14T18:44:20.965Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:48:39.502Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:59:40.545Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:14:20.479Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:12:09.072Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:42:17.788Z","15.0.0-canary.39e473690.0":"2023-03-21T17:52:24.668Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:59:25.148Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:59.278Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:35:37.971Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:49:51.137Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:57.258Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:44.646Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:54:39.526Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:56:43.504Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:31:10.226Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:05:14.849Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:43:21.634Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:39:10.205Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:41:12.499Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:02:03.680Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:47.480Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:22:28.279Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:22:29.712Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:32:14.177Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:34:32.436Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:42:40.603Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:10:19.810Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:57:20.078Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:27:08.978Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:40:06.817Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:24:03.223Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:31:20.700Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:52.256Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:52.880Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:26:41.598Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:43:37.671Z","15.0.0-canary.446734f27.0":"2023-05-30T21:49:04.833Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:19:18.302Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:54.016Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:19:16.593Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:54.740Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:39:06.109Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:04:42.815Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:58:10.183Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:17:39.197Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:24:38.830Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:45.098Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:26:45.777Z","15.0.0-canary.83355c322.0":"2023-07-10T15:06:37.786Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:22:27.086Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:48:59.463Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:54.448Z","15.0.0-canary.872b65832.0":"2023-08-30T12:14:27.245Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:07:49.235Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:40:41.235Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:06:01.519Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:46:12.414Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:18:52.936Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:49.779Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:47:00.239Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:59.692Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:07:29.917Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:24:04.256Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:45:13.996Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:37:37.444Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:01:28.341Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:52:59.320Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:10:14.250Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:58.327Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:22.865Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:54.539Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:27.237Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:47.144Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:20.028Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:52.422Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:20.007Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:52.635Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:06:34.608Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:41:24.658Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:00:33.523Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:13.308Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:18.365Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:28.313Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:56:36.529Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:57:01.844Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:13.628Z"},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","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-switch"},"keywords":["material components","material design","switch"],"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":""}